チュートリアル: 表現強化コース #2 光と影を使おう。

[GGG-Administrator]

このコースでは、ACTION GAME MAKERでの様々な表現方法を学んでいきます。
第二回では、光と影を作っていきます。

コース開始の事前準備

第一回で使用したプロジェクトを引き続き利用します。
それではプロジェクトを開いて準備してください。

[GGG-Administrator]

STEP1 PointLight2Dを設定してみよう。

1. game_sceneタブを開き、ObjectRootを選択してください。
2. 新しいノードPointLight2Dを追加します。何も起きませんがこれはテクスチャがないからです。
   
   
3. ファイルシステムのtemplates>otherフォルダにある2d_lights_and_shadows_neutral_point_light.webpを、インスペクターウィンドウにあるPointLight2DのTextureにドラッグ＆ドロップしてください。
   
   
4. 白いライトが表示されるはずです。基本的にはこれだけですが、よく使うプロパティを説明させていただきますので自由にいじってみてください。
   Texture Scale: テクスチャーの倍率を変更することができます。
   Color: ライトの色を変更することができます。
   Energy: ライトの明るさを変更することができます。大きければ大きいほど強い光になります。
   
   
5. 次は影を設定してみましょう。ShadowにあるEnabledプロパティをオンにしてください。これだけで影の処理が有効になります。サンプルで設定済みのタイルやキャラクターにはデフォルトで影ができるように設定しているので、PointLight2Dを動かして近づければ影ができるはずです。
   
   
6. 次のSTEPでは影の作り方について説明します。

解説

Textureについて
このチュートリアルでは、普通の円形の光を作りましたが、形状は自由に作成できます。扇形にすれば懐中電灯のような光になるというわけです。
テクスチャーは白黒のみで、黒い部分が透過されることになりますので自作してみるのもよいでしょう。

AnimationPlayerの活用
今回紹介した、カラー、スケール、エナジー等のプロパティはアニメーションプレイヤーでキーフレームとして使うことができるので、揺らぐ光などをアニメーションで作ることができます。アニメーションプレイヤーについてはグラフィックコースで紹介しています。

[GGG-Administrator]

STEP2: 影用のコリジョン(LightOccluder2D)を作ろう。

1. 影を生成するには、影用のコリジョン(LightOccluder2D)を別途設定する必要があります。サンプルオブジェクトにLightOcculuder2Dを追加してみましょう。
2. sampleobjectのDecoration_Statue.tscnを開いてください。
   
   
3. LightOccluder2Dノードを追加してください。
   
   
4. インスペクターで新しいOccluderPolygon2Dを作成します。
   
   
5. エディターウィンドウ上部のツールバーでポイント作成ツールを選択し、像の中にポリゴンを作ります。複雑な形状を作ることもできますが、その分処理が重くなるのでまずはシンプルな形状をおすすめします。
   
   
6. 試しにDecoration_Statue.tscnをSTEP1で作成した光の範囲内に配置してください。ポリゴンの形状に沿って影が作成されるはずです。
   
   

解説

影の出方が不自然
OccluderPolygon2DのCullModeをClockwiseかCouter-Clockwiseに変更すると改善するかもしれません。ポイントを時計回りに打った場合はClockwise、反時計回りに打った場合はCouter-Clockwiseにしてみましょう。

影をもっと精細にしたい
PointLight2D側の設定で影を細かくできます。ShadowプロパティのFilterをNone(Fast)からPCF5かPCF13にしてみましょう。影が滲んで精細になります・・・が、その分処理が重くなるのでご注意ください。

タイルに影をつけたい
タイルに影をつけたい場合はタイル設定(TileSet)で選択し、Rendering>Occlusion Layerでタイルのポリゴンを設定することができます。
なお、ACTION GAME MAKERではオートタイル形式でよみこむことで自動でOcclusion Layerが設定されるようになっていますので、オートタイルでは特に設定不要です。

[GGG-Administrator]

STEP3: DirectionalLight2Dを使ってみよう

1. game_sceneタブを開き、BaseLayerの子としてDirectionalLight2Dを設定してみましょう。
   
   
2. 画面が非常に眩しくなりますので、Energyを0.4くらいに下げておきましょう。
3. DirectionalLight2Dは太陽光のような表現をするノードです。カラーを青っぽくすれば夜や朝焼けのようになりますし、赤っぽくすれば夕焼けのような見た目になります。
   
   
4. ここでもShadowを有効にすることで影を生成できますが、デフォルトでは真上からの光になっています。TransformでRotationすることで角度をつけれますので角度をつけておくと良いでしょう。
   
   
5. チュートリアル: 表現強化コース #2 光と影を使おう。については以上です。
   次はこちら
   チュートリアル: 表現強化コース #3 シェーダーを使ってみよう。