ゲーム制作記とゲーム制作に役立つ画像素材や情報記事を公開しています

戦闘画面などで使用するエフェクトアニメになります。

この前Flashでちょっと作っていたものを、AfterEffectsでパーティクルを足して仕上げました。
FlashとAfterEffectsでのエフェクト作りのリハビリ的なものです。
Flashで思い通りにできなくてイライラしつつ、色々甘いところがあったりで、最初からAfterEffectsでやればよかったと後悔してたり。
ツールの使い分けをちゃんと考えてやらないとなぁ。と改めて学習するのでした。

で、なんか魔法で呼び出された複数の光の剣が突き刺さってドワーってなるエフェクトです！
呪文名は「マホケンササール」と名付けます。

こういう特殊な特技・魔法なエフェクトアニメ作りもやって行きたいところですねぇ。
ラブリー魔法シリーズとか、カキ文字シリーズとかも作ってみたいです。


サイズは、１コマ240×240のもののみです。
画像形式はpngです。
１コマごとのバラ画像と連結画像(分割数 横5縦4)と連結画像のファイルサイズ縮小版(普通のグラフィックソフトで正常に読み込めません)になります。





▼ダウンロードはこちらから
　マジックソード.zip
※ファイルサイズが1.3MBとなっています。


●利用条件　「ぴぽや 素材 利用規約」

関連記事

• 戦闘エフェクトアニメ48点　シンプル斬撃８方向×６色 2012/11/11
• 戦闘エフェクトアニメ６点　シンプル斬撃６色 2012/11/04
• 習作・戦闘エフェクトアニメ１点　魔法の剣 2012/10/30
• NAnimEditor製アニメ１点　チェーン（差替画像２点追加） 2012/10/07
• 戦闘エフェクトアニメ６点　花火６色 2012/08/26

カテゴリ ： エフェクト・アニメ ｜ Comments (0) ｜ Trackbacks (0) ｜ 【記事編集】

アドビのグラフィックソフトでドット絵描くなら、Photoshop7付属のWEB用画像作成ソフトImageready7に限るなぁ。と未だに思っているのですが、ImagereadyはCS3でなくなっています。

最新のテクノロジやフィルタ効果なども使って行きたいので、CSの最新版が出るたびにPhotoshopへの移行の可能性を探ってきました。
PhotoShopCS5をドット絵ツール化
PhotoShopCS5をドット絵ツール化　その２

CS3以降はFireworks(Flashなどとともに旧マクロメディアから受け継がれたもの)がImagereadyの代わりという位置づけになったんだけど、Fireworksはファイル拡張子がPNGなので、PNG画像をよく使う立場からすると混乱してしまうから使いたくなかった。
PhotoshopならPSDをワークファイルとして残して、出力ファイルをPNGでってできるところを、FireworksはPNGもワークファイルで出力ファイルもPNGになると、管理がめんどくなってくる・・・

と、FireworksCS6ってどんなかんじだろ？って検索してみたら、「新しいファイル名拡張子 fw.png を追加」という記述が！？
Fireworks ヘルプ | CS6 の新機能

おっと、これはインストールしてみたくなってきた！　64bitネイティブ対応だし！


うまく移行対象になりそうなら、「FireworksCS6ドット絵ツール化計画64bit」って記事でも書いてみたいところですw

Adobe Fireworks CS6



余談。

以前はそれほどPNG画像の需要が高くありませんでしたが、αチャンネル(透明度)が使えるPNG画像はエフェクトアニメーションなどのリッチな表現には欠かせないものになってますし、GIF画像との立場はだいぶ逆転してきた印象ですねぇ。GIFはアニメーションができるってのが大きいところですけど。

Photoshop7はネットオークションなどでライセンス譲渡で購入するか、アドビのライセンス契約でたしかダウングレードとかできたと思うので、そういった手段で入手できます。
Windows7 32bit/64bit環境で、大きな問題なく動作します。PC環境に寄るかもですが、小さな問題はあります。
自分の環境だと、各種操作パネルを移動する時に描画がちらついて、落ちるんじゃないかとちょっと怖くなる；

関連記事

• 最近気になるソフトメモ。 2013/01/22
• フリーソフト「GIMP」でカラーバリエーションを作成しよう 2012/11/09
• Adobe Fireworks CS6を使ってみたくなった 2012/10/21
• ドット絵をIllustratorでベクター画像にしてみよう 2012/10/12
• ドット絵をそれっぽく拡大するツールを使ってみた 2012/10/11

カテゴリ ： ソフト紹介 ｜ Comments (0) ｜ Trackbacks (0) ｜ 【記事編集】

以前に作った↓をアイコン風に加工したものになります。
フィールドマップチップセット(800×600用,640×480用)

１マス　80×80pixelで制作してあります。
同じサイズのアイコン画像をまとめたものと、すべてバラバラにした画像を用意してあります。

マップチップ用途でも使えないことはないですが、地図画像中にポコポコ拠点？的なイメージで使用したり、様々なシミュレーションゲームでの使用を想定しています。
iPhoneやAndroid用のミニゲーム的なアプリなんかにRPG的な要素を追加してみたりなども。






▼ダウンロードはこちらから
　filedmapicon001.zip
※ファイルサイズが2.9MBとなっています。


元データのPSDファイルもアップしておきます。色調の調整などレイヤーで行なっていますので、変更したい場合や元々の色合いで利用したい場合などにご活用ください。
ただし、Photoshop以外でのファイル読込に関しては保障しませんので、悪しからず。
▼ダウンロードはこちらから
　filedmapicon001PSD.zip
※ファイルサイズが3.8MBとなっています。


●利用条件　「ぴぽや 素材 利用規約」

関連記事

• 24×24水着アイコン15セット 2013/08/05
• 感情・状態アイコン　追加セット 2013/04/06
• フィールドマップなアイコン画像セット 2012/10/20
• マウス操作アイコン 2012/10/09
• 汎用アイテムアイコン画像素材５セット 2012/09/09

カテゴリ ： アイコン ｜ Comments (0) ｜ Trackbacks (0) ｜ 【記事編集】

先日公開した「フィールドマップチップセット追加パーツ(800×600用,640×480用)」のマップチップ１マス80×80で制作した元データとなるPhotoshopファイルになります。

以前に公開したPSDファイルから、追加パーツ分が増えた以外にもゴミとりをしたり、洞窟・鉱山の山のチップと影が同じレイヤー上に描かれていたのを分離したりなどしています。

Photoshop以外でのファイル読込に関しては保障しませんので、悪しからず。

▼ダウンロードはこちらから
　pipo-map001plusPSD.zip
※ファイルサイズが2.0MBとなっています。

関連記事

• 続・フィールドマップチップセット(800×600用) 2013/01/31
• ウディタ系マップチップ画像プチまとめ 2013/01/10
• フィールドマップチップセット追加パーツのPSDファイル 2012/10/19
• フィールドマップチップセット追加パーツ(800×600用,640×480用) 2012/10/16
• フィールドマップチップセット(800×600用,640×480用) 2012/09/29

カテゴリ ： マップチップ ｜ Comments (0) ｜ Trackbacks (0) ｜ 【記事編集】

以前公開したウディタの画面サイズ800×600用と640×480用のフィールドマップチップセットの追加パーツになります。

少しだけですが、３×３マスの城パターン３種と濃い草地のオートタイルになります。

サイズは、800×600画面用、640×480画面用の２サイズ分あります。


▼640×480サイズ


▼800×600サイズ



▼ダウンロードはこちらから
　pipo-map001plus.zip
※ファイルサイズが553.7KBとなっています。



●利用条件　「ぴぽや 素材 利用規約」

関連記事

• ウディタ系マップチップ画像プチまとめ 2013/01/10
• フィールドマップチップセット追加パーツのPSDファイル 2012/10/19
• フィールドマップチップセット追加パーツ(800×600用,640×480用) 2012/10/16
• フィールドマップチップセット(800×600用,640×480用) 2012/09/29
• ウディタ用800×600・640×480　フィールドマップチップセット(未完成品) 2012/02/09

カテゴリ ： マップチップ ｜ Comments (2) ｜ Trackbacks (0) ｜ 【記事編集】

前に収支報告記事を一度書いてから、細かい金額なので都度都度のご報告ができずにおりました。
すいません。。。

利用していたカンパサービスである。
Grow!やぷちカンパがサービス終了となってしまったこともあり、まとめて報告させて頂きます。

設置からのトータルの金額になります。
　Grow! ￥720
　ぷちカンパ ￥2,389

あと、amazonのバナー広告やインスタントストア、商品画像経由での商品購入による紹介料が設置から１年ちょっとではじめて振込額￥5,000に達しようとしてます！
　
　現在 ￥4,939

blog上で素材配布しだしてから２年半で合計 ￥8,048 のご支援をいただきました！
ご支援いただいた皆様、本当にありがとうございます！


本当は広告画像とかないほうがスッキリして好きなんですけど、少しでもチャリンとあるとblogを続ける励みにもなるのでｗ
本来飽きっぽいのに、こんなの続けていけるとは思わなかったです！
ゲーム作りはなかなか進まないですが・・・


ちなみに、出ているお金はデータ置き場にしているYahoo!box用にYahoo!プレミアムの月会費399円ぐらいですかねぇ。
ここ数年はヤフオクとかぜんぜんしてないんで、Yahoo!box使い出してからはこれのためだけになってます。


とりあえず、amazonの入金があったら、資料本か何かを買わせてもらいたいところです。
あ、3DCGのモデルデータ買おうかなぁ。最近は何か面白いグラフィックソフトとかプラグインとかないかなぁ？

ま、とにかく素材作りに役立つものを。


マイペースですが、これからも皆様のお役に立てるような素材やblog記事を作って行きたいと思いますので、今後ともどうぞよろしくお願いします！

関連記事

• メッセージ素材の文言募集中！ 2012/12/23
• 画像不具合修正のお知らせ 2012/12/23
• カンパ＆amazon紹介料収入の御礼 2012/10/12
• blogデザインをリニューアル 2012/10/08
• ウディタ向け素材リンク集 2012/09/15

カテゴリ ： お知らせ ｜ Comments (0) ｜ Trackbacks (0) ｜ 【記事編集】

どうも！　Illustrator大好きぴぽです！
IllustratorはPhotoshopで有名なアドビ社のイラストデザインソフトです。
Photoshopほどメジャーではないですけど、印刷物なんかを制作するお仕事には欠かせないソフトですねぇ。
最近はInDesignって同じアドビ社の別のソフトもありますけど。

そんなIllustratorで扱うグラフィックの形態をベクターグラフィックって言うんです。
画像を拡大縮小してもベクトルデータで構成されているため、画質の劣化がないんです。
逆に普通のグラフィック制作ソフトで扱うグラフィックの形態はラスターグラフィック・ビットマップグラフィックなんて言います。拡大縮小させちゃうと通常は画質が劣化してしまいますよね。
Photoshopなんかでもパスデータとか聞いたことあると思いますが、あんなかんじのものをIllustratorで扱うことができます。
他にはFlashもベクターグラフィックを扱うソフトウェアの一つですねぇ。


さて、そんなわけで、ラスターグラフィックなドット絵をIllustratorでベクターグラフィックに変換してしまおうという方法をご紹介です。まあ、メジャーなやり方なんでご存知な方多いでしょうけど、blogの記事ネタということでつらつら書いていきます。

まずは、なぜドット絵をベクターグラフィックにするか。ですが、ドット絵をデザイン素材としてIllustrator上のイラストに盛り込む時に便利、ベクターグラフィックでできる効果をドット絵に与えられるなど、ちょっとおもしろいからですｗ

使用しているIllustratorのバージョンはCS3ですが、9,10とかの古いバージョンでも同じようなことができたと思います。8はわからないです。


今回のサンプル素材はこちらの魔女キャラのドット絵を使います。


Illustratorを起動してアートボードに放り込みます。リンク状態です。


Illustratorで加工できるように、画像を選択したまま「埋め込み」ます。


画像を選択したまま「フィルタ＞クリエイト＞モザイク」を選択します。


「現在のサイズ」が画像の実寸法です。
これと同じ数値を「タイル数」に入力します。
そしてOKボタン！


このくらいのサイズだとPCの性能にもよりますが、けっこう時間かかります。
普通は32×32ぐらいのプチ素材にさくっとやるぐらいがおすすめです。


処理が終わると、ドット絵の1ピクセルごと正方形のベクターグラフィックに変換されたのが確認できます。


これからどう加工するかにもよりますが、隣接する同じ色同士は１つのベクターグラフィックとしてくっつけたほうが扱いが楽なのと見易いので、「パスファインダ＞合流」を実行します。


こんなかんじに。


あとは、３Ｄ効果つけてみたりと自由に加工していきます。


上の方のがワープ変形、真ん中のがパスファインダを掛けない状態でパスの変形などで加工したもの、下がブレンドツールで色を調整した右のキャラから左のキャラへの変化過程を出力したもの。



以上。お手軽ですねぇ！

関連記事

• フリーソフト「GIMP」でカラーバリエーションを作成しよう 2012/11/09
• Adobe Fireworks CS6を使ってみたくなった 2012/10/21
• ドット絵をIllustratorでベクター画像にしてみよう 2012/10/12
• ドット絵をそれっぽく拡大するツールを使ってみた 2012/10/11
• ウディタ用アニメーション制作ツール「NAnimEditor」導入編 2012/10/01

カテゴリ ： ソフト紹介 ｜ Comments (0) ｜ Trackbacks (0) ｜ 【記事編集】

データの整理をしていたら発掘されたものです。
たぶん、公開済みの戦闘背景画像を制作する前の段階での試験画像だと思います。
3DCGでレンダリングした画像を加工してってヤツ。

公開済みの戦闘背景画像はサイドビュー戦闘を考慮しているため、地平線をずっと奥にしてあるんですが、こちらは真ん中ぐらいですねぇ。
なんかテスト用にでも使ってもらえればいいかなぁ。

画像のサイズは683×512と中途半端なサイズなのですが、ご自分で使用サイズに加工してください。あとPNGです。

↓の画像をクリックして、画像だけが表示されたらブラウザの機能(右クリックメニューとか)で画像保存してください。





●利用条件　「ぴぽや 素材 利用規約」

関連記事

• マップチップ背景画像24種 2013/02/24
• キラキラシール風背景画像42種 2013/02/23
• ジャンク背景画像２枚 2012/10/12
• フォグ画像１０種 2012/08/10
• 虹画像 2012/05/28

カテゴリ ： 背景 ｜ Comments (0) ｜ Trackbacks (0) ｜ 【記事編集】

↓で紹介・公開されているツールを使ってみました。

ドット絵をそれっぽく拡大するツールを作ってみた ‐ ニコニコ動画(原宿)



どういうものかというと、ドット絵の画像を拡大する場合にドット絵のテイストを壊さないように補間して拡大してくれるというものです。

例えば、こんなドット絵があったとします。
これをドット絵のテイストのまま200％拡大したい場合には・・・


下の画像のように、Photoshopなんかでいうニアレストネイバー法(ぼやけないでドットが残る)で拡大して、倍になったドットを手作業でならしていく作業が必要になります。こだわらなければ、そのまま使ってもいいんでしょうけど・・・


で、上のツールを使って拡大したのがこちら。
ちょっと崩れているところもあるけど、ぜんぜんキレイ！


他にもためしてみましょう。

ウディタ２同梱のワールドマップチップ
直線が歪むねぇ。味があっていいかんじではあるけど。
　

キャラチップ
細かいグラデーションがあるのはちょっとむずかしいかなぁ。
　

感情アイコン画像
ちょっとがたついているけど、輪郭の線はきっちり残っていてキレイですねぇ。
　


最初に試したような色数の少ないペタっとした塗りのものには威力が大きいですねぇ。
細かいグラデーションのものはちょっと辛い(それでも作業時間の短縮には有効そう)。
紹介動画にあるような格闘アクションゲーム用みたいな大きめのドット絵の加工の場合にはかなり重宝しそうです。
まあ、基本的に小さいドット絵をこういうふうに拡大するというのは限界がありますからねぇ。


今後の精度アップなど進化が楽しみなツールです。
あと、JAVAのインストールが必要なので、単独の実行ファイル形式のものになるといいですねぇ。


作者さんのサイトでの関連記事。
楓 software: ドット絵の拡大

関連記事

• Adobe Fireworks CS6を使ってみたくなった 2012/10/21
• ドット絵をIllustratorでベクター画像にしてみよう 2012/10/12
• ドット絵をそれっぽく拡大するツールを使ってみた 2012/10/11
• ウディタ用アニメーション制作ツール「NAnimEditor」導入編 2012/10/01
• FlashCS6のスプライトシート出力 2012/09/03

カテゴリ ： ソフト紹介 ｜ Comments (0) ｜ Trackbacks (0) ｜ 【記事編集】

○マウスアイコン画像４セット

文章表示での使用を想定したマウス操作アイコン画像になります。
白と黒の２色あります。
サイズは、12×12と24×24です。

ウディタで使用する場合はファイル名を「icon(任意の番号).png」と変更し、「Data」フォルダ内の「BasicData」フォルダに格納してご使用ください。






▼ダウンロードはこちらから
　マウスアイコン.zip


●利用条件　「ぴぽや 素材 利用規約」

関連記事

• 感情・状態アイコン　追加セット 2013/04/06
• フィールドマップなアイコン画像セット 2012/10/20
• マウス操作アイコン 2012/10/09
• 汎用アイテムアイコン画像素材５セット 2012/09/09
• 宝石アイコン画像素材２セット 2012/09/02

カテゴリ ： アイコン ｜ Comments (0) ｜ Trackbacks (0) ｜ 【記事編集】