忍者ブログ
まったくのプログラミング素人の筆者がC++/HSPを使用してSTG(シューティングゲーム)を作っていく過程を書くブログでしたが最近は脱線気味。プログラミング以外にも、ゲーム関連の記事、日々の戯言など。
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

GIMP2を使って溶岩というか炎っぽい?背景を作ってみたので
忘れないように方法を書き留めておきます。

まずはグラデーションパネルの下側の新規作成でグラデーションエディタを開きます。
5badba38.jpeg
炎っぽい感じのグラデーションを製作。
グラデーションの製作方法はコチラに書いています。

次にツールボックスのブレンドを選択して、先程製作したグラデーションを選択。
形状を螺旋にします。パラメータは適当に選んで下さい。
0d0e56dc.jpeg
画面中央くらいで描画するとこんな感じの画像が出来ます。
クリックする場所や長さを変えれば中心の位置や螺旋の数が変更出来ます。

次にメニューのフィルタ→変形→対話的歪めを選択。
f09a734c.jpeg
ここでマウスで超適当にグチャグチャと画像を弄り回します。

するとこんな感じの画像が出来ます。
5ae73c80.jpeg
s-honoo00.jpg
溶岩っぽいか?と言われると違うような気もしますが、自分が作りたかった画像の感じには
近いので良いかなーと。

とりあえず、この画像を使ってラスタースクロールするプログラムを作って見ようかと思ってます。
縦方向にラスターさせれば良い感じになるのではないかと思ってるのですが^^;
PR
曲を作ろうとしていたのですが、なかなか良い感じのが出来ないので曲制作は置いといて
先に中ボス以降を作って行こうと思いまして、とりあえず溶岩っぽい背景が欲しいと思い
作ってみました。

と言っても自分が作りたかった物が出来た訳ではないのですが、こんな感じのも良いかな?
ってのが偶然出来たので忘れないように製作方法を書いておこうかと。
尚、製作にあたってコチラのレンガ風テクスチャの作り方を参考にさせて頂きました。

まずはGIMP2で製作したい大きさの画像を新規作成します。

次にフィルタ→下塗り→雲→ソリッドノイズを選択
7f901159.jpeg
パラメータは適当で良いと思います。

次にフィルタ→芸術的効果→覆布化を選択
494caad0.jpeg
パラメータは細かくした方が良い感じになる気がします。

次にフィルタ→芸術的効果→油絵化を選択
a8bb475a.jpeg
これもパラメータは適当で良いです。

次にフィルタ→変形→エンボスを選択
7d1e91e2.jpeg
深度は低い方が良いかな?

すると岩肌っぽい画像が出来ます。
とりあえず、コレは置いておいてフィルタ→下塗り→溶岩を選択
s-WS000010.jpg
パラメータは低めが良さげです。
すると溶岩っぽい画像が出来るのですが、このままだとイマイチ溶岩っぽくないです。

レイヤーパネルで今作った溶岩のレイヤーを選択し、モードをハードライトにします。
1c932b11.jpeg
すると2つの画像が上手く混ざって溶岩が流れているような感じの背景に^^
後はマップ→シームレス化しておけばスクロールする背景にも使えて便利です。

でも実際に作りたかったのはこんな背景なんですけどね↓
last.gif
どうやったら、こんな感じになるのかが全然わからないので、片っ端からフィルタを使いまくってる
んですが、全然良い感じにならないんですよねぇ・・・
最終的にはラスタースクロールさせようと思っているので、それほど神経質になる必要はないの
ですが、何か上手い方法はないものかと模索中です^^;

GIMP2で溶岩っぽい背景を作ってみた その2へ
先日gebsiteさんで公開されたダライアスバースト風なフォントBURSTEXを使って
ダライアスバースト風に加工する方法をご自身のブログで紹介されていたのですが
ダラバー的フォントでダライアスバースト風のロゴを作る(Illustrator編)
私はIllustratorを持っていませんので、紹介されていた方法を参考にGIMP2で加工してみました。

まずは適当な大きさの画像を新規作成してツールボックスのテキストを選択します。
2ae0ef02.jpeg
フォントをBURSTEXにしてテキストボックスに書きたいテキストを入力したら、ツールボックスの
下側のテキストからパスを生成を押します。

次にメニューの編集→パスの境界線を描画を選択
WS000017.JPG

するとダイアログが開きますので好きな線の幅を指定してストロークを押します。
20ae1c3c.jpeg
今回は2.0を選択

するとフォントの周りが縁取られます。
WS000019.JPG
縁取る時の色は最終的に使う色と被らないような色にしておきましょう。

次にグラデーションパネルの一番下にあるアイコンの右から二番目の新しいグラデーションの作成
を選択。
WS000020.JPG
するとグラデーションエディタが開きます。

エディタが開いたら白い三角形のあたりにマウスを持って行って右クリックするとメニューが
開きますのでセグメントを均等に分割を選択。
bd2d298a.jpeg

今回は3分割にしますので3を選択
WS000026.JPG

分割されたらグラデーションさせる色を選択していきます。
ちなみに黒い三角がセグメントの幅で白い三角がセグメントの中心となります。
4f08992d.jpeg

まずは左端の色を選択。今回は赤で
862aa27e.jpeg

次に右端の色を選択します。
79cba16a.jpeg
今回は赤→黄色→白とグラデーションさせたいので、ちょっと黄色よりの色を選択

するとこんな感じで選択したセグメントの部分をグラデーションさせることが出来ます。
WS000031.JPG

それを繰り返して、自分の好きなようなグラデーションを作って行きます。
WS000036.JPG
白い三角と黒い三角をドラッグしてグラデーション具合を調整

グラデーションが出来たら、ツールボックス右上の色域の選択を押してフォントの黒の部分を
クリックすると、フォントの黒い部分だけが選択されます。
WS000038.JPG

ツールボックスのブレンドを押して、上から下に向かってドラッグすると選択したグラデーションで
選択した部分を塗ってくれます。
WS000039.JPG

同じように青色で塗ってある縁の部分を色域を選択で選択して、グラデーションウインドで
グラデーションを選択して、ブレンドで青い縁の部分をグラデーションで塗ります。
WS000040.JPG
こちらは赤から白へのグラデーション。ちなみにブレンドは上から下にドラッグする場合と
下から上へドラッグする場合で逆の色になります。

って事で文字部分は完成。
WS000042.JPG

次に文字の周りの黒縁部分を作ります。
WS000055.JPG
まずはメニューのレイヤー→レイヤーをキャンバスに合わせるを選択。

次にレイヤー→レイヤーの複製を選択します。
WS000056.JPG

レイヤーウィンドウの上から二番目のレイヤーを選択しておいて、メニューの選択→
パスを選択範囲にを選びます。
WS000057.JPG

すると文字の縁が選択されますので、メニューの選択→選択範囲の拡大を選びます。
WS000058.JPG

ダイアログが開きますので任意の数字を入力。今回は5にしています。
WS000059.JPG

すると選択範囲が拡大されますので・・・
WS000060.JPG

メニューの編集→選択色で塗りつぶしで黒く塗ります。
WS000061.JPG

すると黒縁と文字が重なって表示されます。
WS000062.JPG
ここまで出来たら、後はレイヤーを統合したりして自分の好きな保存方法で保存すればOK。

って事で完成です^^
a3c8a9dd.jpeg
ただ、この方法だと黒縁部分の角が丸まってしまうんですよね・・・範囲選択の拡大を使う場合は
必ず角が丸まってしまうみたいなので、気になる場合は個別に手修正するしかないっぽいです。
他に良い方法があったら教えて下さい(笑)
先日制作した敵のヒットエフェクトは加算合成で重ねて表示させるって方法でした。
この方法でも光った感じは出せるのですが、何枚も画像を重ねないと駄目なので
処理が重くなるのと白色しか出せないって欠点があったんですよね。

で、そのエントリのコメント欄にて「SetDrawBrightにSetDrawBlendModeで反転なんてどうでしょう」
と助言頂き、早速試してみました。
こんな感じ↓
s-WS000092.jpg
SetDrawBright( 255 , 255 , 255 ) ;
SetDrawBlendMode( DX_BLENDMODE_INVSRC , 255 );
と記述して表示させていますが、ちゃんと白く光ってる感じになってます。
しかも、この方法だと背景が透けないので画像を重ねる必要もないのが良いですね^^
そして、SetDrawBright( 255 , 0 , 0 ) ;とかにすれば・・・
s-WS000091.jpg
赤色で表示させる事も可能です^^
SetDrawBright関数の引数は、それぞれRGB(赤、緑、青)に対応しているので
数値を変更すれば任意の色で表示させる事が出来て良い感じ。

ただ、この方法で表示させるよりも加算合成を使って表示させた方法の方が光ってる感は強いので
場面場面で使い分けるのが良さそうですね^^
加算合成を使って表示させた場合はこんな感じ↓
s-WS000089.jpg
自機弾が敵に当たった時の敵本体のヒットエフェクトを実装しました。
s-WS000089.jpg
私は今まで当たった時用の画像を用意して、当たった時に画像を切り替えるようにしていたのですが
正直、画像用意するの面倒だな~と思って、何か良い方法はないものかと思っていたのですが
画像を加算合成で表示させれば良い感じで表示出来ました^^
(DXライブラリならSetDrawBlendMode( DX_BLENDMODE_ADD , 255)とかにする)

この方法なら別に画像を用意する必要がないですし、光った感じも演出出来るので良いなーと。
ただ、光った感じにするには何枚も同じ画像を重ねて表示させなくてはならず、処理としては
重くなるので、使う場面にもよるとは思います。
あと、白いエフェクトしか出来ないのも弱点かな?(何か良い方法があるのかもしれませんが)

上記画像で3枚重ねて表示させています。ただ、加算合成だけで表示させると背景が透けて
しまうので、加算合成の奥に普通に敵画像を表示させているので、実質4枚重ねての表示。
まぁ、このゲームの場合は全然処理落ちもしそうにないので、この方法で良いかと思いってます^^

敵のヒットエフェクト実装 その2へ
カウンター
ゲーマータグ
Twitter
携帯百景
カレンダー
11 2017/12 01
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
最新コメント
[11/24 kt.]
[11/24 kt.]
[11/24 NONAME]
[11/23 NONAME]
[10/05 tejas]
プロフィール
HN:
kt.
HP:
性別:
男性
自己紹介:
STG大好きな40歳。
プログラミング経験は昔ファミリーベーシックでちょっとさわったくらい。
好きなSTGは、怒首領蜂大往生、エスプガルーダ(2)等の弾幕STGやら雷電シリーズなんかの非弾幕、バトルガレッガ、グラディウスシリーズ、R-TYPE等、STGなら何でも好きです。
音楽がカッコイイSTGが特に好きで、並木学氏は最高!
ブログ内検索
アクセス解析
忍者ブログ [PR]