綺麗なエフェクトの作り方

[スー]

今シューティングゲームを作っているのですが、見た目が綺麗なボムの作り方がわかりません。
皆さんがどのようにボムなどのエフェクトを作っているのか教えて頂けたらありがたいです。

[Dixq (管理人)]

キレイではないかもしれませんが、
龍神録プログラミングの館のボムの作り方とか参考にならないでしょうか？

[スー]

＞キレイではないかもしれませんが、
＞龍神録プログラミングの館のボムの作り方とか参考にならないでしょうか？

龍神録のボムはとても綺麗だと思います。
画面の暗さの調整、αブレンドなどは参考にさせてもらっています。
ですが、ボムの元の画像を作ることができません。

一応フォトショップを持っていますが、宝の持ち腐れ状態です＞＜；
ここのサイト見ろ！などがありましたら是非教えてください。

[Dixq (管理人)]

う～ん、私も絵を描くのは人一倍ヘタクソですが、ボカシでテキトーに書いたらあんなボムの画像くらいなら作れますよｗ
素材の画像みてもらったら解ると思いますが、めっちゃブラシで適当に書いただけです。

もしイラストやエフェクトの絵を勉強したいなら書店に行ってそういう本を買って練習してみてはどうでしょう。絵の事はよくわかりませんが・・。
イラスト書くのが好きな人は沢山いるのでそういうコミュとか掲示板でアドバイス受けるのもありかもしれません。

ここの常連さんならBIMANIさんとかすごくイラストうまいですよ。BIMANIさん見てますかね～？

[BEMANI]

>>スーさん
PhotoShopのバージョンは何でしょう～。
(自分と同じ7.0だと少しくらいは解るかもしれません)
あと、どんな画像が作りたいのでしょうか？


>>管理人さん
見てますよ～。
ちなみに、PhotoShopの使い方自体は本を読んで勉強した訳ではないので
書籍に関しては何もアドバイス出来ないです、ごめんなさい；


弾の画像を作るだけでしたら画力とかは一切いらないですよ～

[スー]

＞素材の画像みてもらったら解ると思いますが、めっちゃブラシで適当に書いただけです。
適当にやってあのような画像を作れるのは羨ましいです。
書籍も探してみましたが写真の加工方法が大半で、ゲームにつかえそうなエフェクトが載っている本は少なく
買うことは断念しました。

＞PhotoShopのバージョンは何でしょう～。
PhotoShopのバージョン7.0です。
目標は式神の城の結城　小夜の光鴉陣です。光の帯の表現とかがよくわからないです。

弾の画像はドット絵ソフトでなんとか作ることができました。

[Dixq (管理人)]

私もフォトショは使いながら覚えま・・いや、覚えたとはいえないか＾＾；
そのせいで大半の機能は使ってないはずです；

私も7.0使ってます。BEMANIさんも7.0らしいです。
まず、あれこれ自分で書いてみたらいいんじゃないでしょうか？
インターフェイスわかりやすいですし、アイコンみたら何するものかわかると思いますし。
レイヤーとかの機能の意味がわかっていれば充分だと思います。

鉛筆で書いてみたり、ブラシで書いてみたりぼかして見たり
レイヤーの効果で薄くしてみたり。
あとフィルタ関連は一通り全部試してみて覚えるのが一番かと。

以前レーザーの作り方を動画で紹介したことあります。
[nico]http://www.nicovideo.jp/watch/sm6055308[/nico]
何かの参考になればどうぞ

小夜の光鴉陣が何かよくわからないですが、
光系ってただ白を加算ブレンドすればいいので結構楽な部類だと思います。
ブラシで適当にモワモワしたものを書いて、プログラムで加算ブレンドすると光っぽくみえますよ。
加算ブレンドで光を表現するサンプルはサンプルプログラミングの館の川のサンプルで使っています。

[BEMANI]

>>スーさん
PhotoShop7.0ですか～。
そしたら、新規作成をすると画面右に「背景」というレイヤーが一枚あると思います。
(デフォルトですと、真っ白のキャンバス(背景)が出来あがると思います)
もし、これからPhotoShopを使って画像作る！　という場合
この「背景」レイヤーには何も描かないようにした方がいいです。
(例として一つ理由を挙げると、後で透過処理がやりやすいなど)


新規作成の後には必ず、「背景」レイヤーの上に「新規レイヤー」を作ってください。
(上のメニューから「レイヤー→　新規→　レイヤー→　OK」)
そうすると、「背景」の上に「新規レイヤー」が出来あがると思いますので、
こちらに絵を描くようにしてください。


この「新規レイヤー」に絵を描いたあと
「消しゴムツールのアイコン長押し→　マジック消しゴムツール」と選び、
背景レイヤーを選択してクリックすると、透過処理されます。
後は「～.png」等で保存すればOKです。


弾をぼかすのであれば、上のメニュー「フィルタ→　ぼかし→　ぼかし(ガウス)」を選択すれば
ぼかすことが可能です。



>目標は式神の城の結城　小夜の光鴉陣です。光の帯の表現とかがよくわからないです。
同じく光鴉陣というものが解らないです。
これだ～という画像があれば何かアドバイス出来るかもしれませんね～。

[桃印]

　はじめまして、スーさん。
　ちょっと気になったのでレスさせていただきます。

　もしかして、小夜の光鴉陣ってこんな感じで良いですか？（添付ファイル参照）
　こんなので良ければ作り方お教えしますが……というか、解説書いてたんですが間違えてブラウザ閉じちゃいました。なのでスーさんの返答次第ということにさせていただきます。

　この画像を加算描画で自機から四方にずばばーっと伸ばしてやれば、それっぽくなるんじゃないかな？
　ちなみにこれ、３分ぐらいでできます（笑

[スー]

↑光鴉陣です。これが中央に集まってきます。

＞管理人さん
レーザーの作り方とても参考になりました。
しかし、ぼかしってすごいですね。ぼかしの使い方がわかった気がします。
加算ブレンドなどはいろいろ試して覚えたいと思います。

＞BEMANIさん
φ(.. )　メモメモ
参考になります。

＞桃印さん
すごく光鴉陣に見えます。
是非作り方を教えてください。

[桃印]

　式神の城は前に一度ちょろっとやっただけだったのであいまいな記憶便りだったんですが、スーさんが求めているものと一致していたようでなによりです。
　それでは解説を始めますが、まず私が使用しているのはPhotoshopCS3です。しかし使用するのは7.0にもある（と思う）機能ばかりなのでご安心ください。またphotohopの基本的な操作については省略します。レイヤーの概念や基本ツールの使い方が分かるものとして解説いたします。分からない動作がありましたらヘルプか講座サイトなどを参考にしてみてください（すいません投げっぱなしで；

　では、以下長いですが解説です。急ぎ書いたので誤字脱字はご勘弁を。


　さて、それでは「ゆらめく炎のような光の帯」のエフェクトを作りたいと思います。
　まず200px×50pxぐらいの大きさで新規ファイルを作成します。すると「背景」レイヤーが一つある名前未設定のファイルが作成されます（背景でない場合でもとりあえずレイヤーが一枚あるはず）。たぶんレイヤーは白色か透明に初期設定されてると思うので、色を選んで黒で塗りつぶしてください。選択範囲->全てを選択で塗りつぶしツールを使えばできます。

　次に、ベースとなる光の部分を作りましょう。画像ではシアンカラー（水色）の部分がそうです。
　まず「描画色から透明色へ」という設定のグラデーションツールを選択し、自分のつけたい色を適当に選びます。グラデーションツールは、クリックした場所からドラッグした場所までグラデーションを引いてくれます。クリックの根元から後ろは塗りつぶし、ドラッグ先端は透明のまま、という感じです。
　先ほど黒に塗りつぶした「背景」レイヤーの最下段から、画像中ごろからちょっと上ぐらいまでクリックドラッグでグラデーションを引きます。すると任意の色から黒い色にグラデーションする画像が出来たと思います。これでベースの光の部分は完成です。

　ベースを作り終えたら、根元の強い光の部分を作ります。画像では白色になってる部分がそうです。
　まず新しいレイヤーを作ります。レイヤーを新規作成すると、レイヤーパレットが上から「新規レイヤー」「背景」となってると思います。今から新規レイヤーを描画するので、新規レイヤーを選択してください。
　先ほどと同じように「描画色から透明色へ」のグラデーションツールで、色は白色を選択してください。真っ白です。それで同じく最下段からほんの少し上までドラッグします。先ほどの時もそうですが、ドラッグの最中に傾いたまま話すとグラデーションが斜めにつくので、ちゃんとずれてないか見ながらグラデーションかけてください。
　さて、グラデーションをかけると画像が「白」→（最下段ちょっと上から）「任意色」→（画像中ごろから）「黒」というようなレーザーっぽい画像になったと思います。これだけでもうそれっぽいですね。

　さて、最後に作るのは「青白い部分のもやもやです」。
　たぶんスーさんはここの作り方が分からなくて困っていたんじゃないでしょうか。
　このもやもやを作るにはphotoshopの「フィルタ」を使います。このフィルタは画像加工や作成にあたって凄く凄く多様する機能なので、コレを機に覚えてみてください。
　それでは、また新しくレイヤを作ります。同じくレイヤーの新規作成で良いですが、このレイヤは「背景」と「白グラデ」の二つのレイヤーの間に持ってきてください。背景レイヤーを選択しつつ新規作成か、新規作成をした後にレイヤーウィンドウ操作で真ん中に持ってくるのどちらでも構いません。
　新規にレイヤを作成したら、レイヤーの設定を「通常」から「オーバーレイ」に変えます。これはレイヤーの描画情報を変更するもので、ＤＸライブラリにもある加算乗算アルファ描画みたいなもんだと思ってください。

　最後に、このオーバーレイレイヤーにもやもやを書きます。色の「描画色」を黒、「背景色」を白してください。
　色を選択したら、ツールバーの「フィルタ」を選択し、ダウンして現れた項目の「描画->雲模様1」を選びます。すると画面一面に何か灰色っぽいもやもやが出来たと思います。そう、これは文字通り描画色と背景色の二色で雲っぽいもやもやを作成する機能なのです。
　しかしこれではもやもやが大雑把すぎるので、このもやもやの目を細かくしていきたいと思います。同じくツールバーの「フィルタ」から「描画->雲模様2」を選択して実行します。すると黒と白の色合いが変わると思います。この雲模様2は、描画色と背景色の二色で指定の画像に雲模様の変化をつけていく（分かりにくいですが；）みたいな機能です。これを連打すると段々目が細かくなっていきますので、お好みのもやもやになるまで連打していきましょう。たぶんctrl+Fで繰り返しができるはずです。
　お好みのもやもやが描けたらそこで雲模様2を終了、あとはレイヤーを結合するなりそのまま保存するなりして、pngで書き出してやれば先ほど私が作った画像と同じものができると思います。これで解説を終了します。


　今回は「フィルタ」の雲模様だけを使いましたが、他にも「ぼかし->ガウスぼかし」や「移動ぼかし」や「放射状ぼかし」、極座標やピクセレートなども製作に使えると思いますので、別個に勉強してみてください。使いながら覚えるのが一番だとは思いますがｗ
　それでは長くなりましたが、これにて。
　分からない部分が何かあればお申し付けくださいなー。

[Dixq (管理人)]

スーさん、そのボムがどんなものかがわかる動画ありませんか？

[BEMANI]

桃印さんが仰った機能は7.0にもあるので全く問題なく作成できるかと思います。

余談になりますが、その絵を一枚だけ使うのならいいですが、
もし画像を横にずらーっと並べる時を考慮したとすると
恐らく画像の繋ぎ目があるのではないかな～と感じました。
ですので、画像のループ処理も合わせてやるといいと思います。
ただ、繋ぎ目が目立たない可能性もありますので実際作って描画して調整するといいでしょう。

[スー]

＞桃印さん
丁寧な説明ありがとうございます。無事に作ることができました。
これを機にフォトショップのいろいろな機能を勉強してみようと思います。

＞Dixqさん
YouTubeとかニコニコを探してみたのですが見つからなかったです。
自分が持っているゲームもＰＳ2なので動画を撮ることもできません。
すみません。

＞BEMANIさん
アドバイスありがとうございます。
ぼかしをうまく使ってループっぽいのができました。

Dixqさん、BEMANIさん、桃印さん
無事に光鴉陣っぽいのが作ることができました。
どうもありがとうございました。