ウディタで視界を制限して暗闇を表現するコモンを作るには? 画像を重ねて表示する

©Turui Kinka

ゲームを作っていて、洞窟などで視界を制限したいと思ったこと、ありませんか?

主人公の周りだけが明るくて、その周りは暗闇という演出です。

今回、そのコモンの作り方をご紹介していきます。

視界制限のコモンづくり

まずは画像を用意する

まずは、主人公の周りに表示する画像を用意しましょう。周りは黒く、真ん中が透けている画像です。

AzPainter2』というフリーソフトを使いました。こちらの画像は、もし必要でしたら自由に使ってもらって構いません。

ちなみに作り方としては、黒く四角い画像の真ん中に灰色の円を描きます。その中に、最初よりも薄い灰色の円を、さらにその中にもっと薄くした円を書きます。そして、一番内側を丸く消します。その上で、『ぼかし』をかけると、できあがりです。

この画像を主人公の周りに表示します。そして、その画像の周りを黒くすれば、できあがりです。

主人公を中心に、この黒い画像を表示する

【演出】視界制限表示という呼び出し用のコモンイベントを作成しました。

呼び出すときに、コモンセルフ0を設定できるようにします。「コモンセルフ0:モード」が‐1なら消去。0なら表示。1なら更新としておきます。

モードが‐1なら、開始ピクチャ番号から終了ピクチャ番号までを消去して、すぐに終わります。

お次はモードが0の場合。表示していきます。

ここでは、『視界制限』という項目をユーザーDBに作っています。そこに視界の大きさや中心(主人公に合わせて明るい部分が動くのか、それとも動かずに真ん中固定なのか)を設定しておきます。

こうすることで同じコモンでも何パターンも表現を手軽に作れます。

中心が0(主人公に明るい場所を合わせる)場合。主人公のX座標とY座標を取得して、明るい場所を示す画像を表示する座標を設定しておきます。

中心が1(画面の中心に表示)の場合。明るい場所を示す画像を、ど真ん中に表示します。ここでは、画面サイズが800×600なので、中心はその半分の(400,300)となります。

開始するピクチャ番号を入力しておきます。ここではユーザーDBで開始ピクチャ番号を一括管理しているので、このようなコードになっています。開始するピクチャ番号は、同じタイミングで使う可能性のあるピクチャ番号とかぶっていなければ、なんでも構いません。

開始ピクチャ番号を求めたら、現在のピクチャ番号に、開始ピクチャ番号を入れておきます。

ユーザーDBから、画像のアドレスや拡大率、不透明度、RGBの色味を取得します。もちろん、逐一、入力しても構いません。

設定したとおりに画像を表示します。この時点でテストしてみると、こんな感じになります。

主人公の位置に、画像がちゃんと表示されました!

しかし、このままだと主人公が移動しても、この画像はその場に残ります。また、この画像の周り全体を暗くしなくちゃなりませんね。

画像のデータを取得する

ここで、表示した画像のデータを取得しておきましょう。画像のサイズを取得して、拡大率をかけ、100で割ります。これにより、実際に現在表示しているサイズを求めることができます。ついでに、画像のサイズの二分の一も求めておきましょう。

周りを黒くしていく

ここで、周りを黒くする方法を考えました。

まずは上に、黒い四角を表示してみることにします。左上を(0,0)に合わせます。縦幅としては、画面の一番上の端っこから、明るいところを示す画像の一番上まで。横幅は画面の幅と合わせておきます。

このとき、黒い画像の横幅、縦幅をすべて変数で表すことにしておきます。そうすれば、変数の値が変われば、変数に合わせてふさわしい表示をしてくれるようになります。

このような黒い画像を、上下左右に表示すれば、周りすべてが黒くなります。

明るいところを示す画像の端っこと、画面の端っこ。その間の距離を、計算していきましょう。

こつこつ計算します。ここで、画像のサイズの二分の一を事前に計算しておいた成果がでます。もちろん、ここで二分の一を出しても問題ありません。

ここまでできたら、黒い画像を上下左右に表示していきましょう。

左の画像を表示します。

そして、右の画像を表示します。画像の位置は、右上(800,0)か右下(800,600)に固定しておきます。

続いては、上です。画像をひとつ表示するごとに、現在のピクチャ番号に1を足していきましょう。これを忘れたら、うまく表示されません。

最後に、下を表示します。そして、すべての画像を表示し終えたので、終了ピクチャ番号に現在のピクチャ番号を入れておきます。画像を消すときには、開始ピクチャ番号から終了ピクチャ番号までを消せばよくなります。

 

こんな感じで、黒い画像を4つ重ねています。

設定部分を端折った、更新モードを作る

表示ができましたので、次は動かす部分を作りましょう。

動かすといっても、基本は表示するのと同じです。ただ、すでに表示されているため、数値を取得する部分を端折っています。

ここまでは、表示したときと全く同じです。中心の座標を求めています。

ここも同じですね。表示した画像の不透明度やRGB、サイズを求める部分を端折っただけです。

最後に、終わるというラベルを設置しておきます。

まとめ

呼び出すと主人公(もしくは画面の中心)だけが明るく、その周りを黒い画像で覆い隠すというコモンができあがりました!

あとは、適宜呼び出すようにすれば、洞窟などの暗闇の演出が完成します。

呼び出し方についても解説してみましたので参考にどうぞ。

ウディタで視界を制限して暗闇を表現するコモンを作るには? 並列実行で呼び出そう

2016.12.18

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です