はじめに
前回、Vol.1では操作可能なプレイヤーキャラクターと、足場となるプラットフォームを作成しました。
ステップ1: レイヤー
レイヤーとは層です。
層を重ねて奥や手前を表現できます。
今回はレイヤーを使って遠景を追加していきます。
まず、シーンエディタで新規スプライトを追加します。
遠景にパネルスプライトを使ってみましょう
Backgroundという名前のパネルスプライトが作成されました。
次はレイヤーを追加していきます。
右上のレイヤーアイコンをクリックしてレイヤーパネルを開きます。
「レイヤーを追加」すると「Layer」という名前のレイヤーが追加されます。
このレイヤーの名前を「Background」に変更します。
レイヤーは上から順に手前に表示されるので、「〓」をドラッグしてBackgroundをベースレイヤーの下に移動させます。
これでベースレイヤーが手前、Backgroundが奥になりました。
レイヤーパネルを閉じて、Backgroundをシーンにドラッグしましょう。
レイヤーを「ベースレイヤー」から「Background」に変更します。
レイヤーを変更したらBackgroundのハンドルを掴んで引き伸ばします。
サイズを表示領域と一致するようにカスタムサイズを微調整しましょう
プロパティを変更したらプレビューで確認してみましょう。
Backgroundはプレイヤーのいるベースレイヤーとは別のレイヤーなのでプレイヤー（を追うカメラ）が動いても流れずに表示領域に固定されます。
BackgroundもプレイヤーのX座標（カメラのX座標）に合わせて動かしたい場合は
「カメラのX座標にBackgroundのレイヤーでPlayerのX座標を代入する」というアクションを無条件で追加します。
先程下記のようなアクションを追加しました
カメラのX座標(レイヤー："Background")を変更する：Player.X() を代入
つぎに、上記のアクションを下記のアクションに変更してみましょう
カメラのX座標(レイヤー："Background")を変更する：Player.X()/2 を代入
Player.X() をPlayer.X()/2 に書き換えます。
変更したらプレビューで確認してみてください。
スクロールが先程よりずれていますね。
前者はカメラのX座標にPlayerのX座標を代入していますが、後者は「PlayerのX座標の2分の1(半分)」を代入しています。
「/2」は「÷２」を意味します。
これは仮に、Playerが右方向に移動してX座標が100増えたとき、Backgroundのレイヤーを映すカメラのX座標は半分の50が増えるというわけです。
つまり、PlayerのX座標から常に半分ズレることになります。
手前の風景より奥の風景の動きが少ないほうがより遠景らしさを演出できますね。
ステップ2: Zオーダー
見栄えの部分がそれなりに出来上がったので、いよいよゲーム性の部分にとりかかります。
このゲームに「スタート地点からゴール地点へPlayerを導く」という主目的を設けます。
そのためにまず、視覚的にわかりやすいスタート地点とゴール地点となるオブジェクトを作成します。
これまでと同じ手順でスプライトオブジェクトを追加します。
スタート地点のオブジェクト名は「StartPoint」
ゴール地点のオブジェクト名は「GoalPoint」とします。
オブジェクトを作成したらシーンに設置します。
PlayerがGoalPointと重なったとき、Playerが後ろに隠れてしまいますね。
GoalPointのZオーダーがPlayerのZオーダーより大きいからです。
GoalPointのZオーダーをPlayerのZオーダーより小さい値に変更します。
ステップ3: オブジェクトの衝突
スタート地点からゴール地点まで平坦な道のりでは物足りませんね。
道中に障害物を設置してプレイに緊張感を与えましょう。
Playerが触れるとスタート地点に強制的に戻す（リスポーンする）針の床をタイルスプライトで作成してシーンに設置します。
今のところ、GoalPointもSpikeFloorもシーンに配置しただけで触れてもなにも起きません。
次はイベントエディタで各インスタンスに触れたときのイベントを追加します。
①新しいイベントを追加
②条件を追加
③オブジェクトタブ
④Playerを選択
⑤衝突を選択
⑥SpikeFloorを選択
⑦OK
この条件は「PlayerがSpikeFloorと触れているとき」に真となります。
真(True)と偽(false)
「真」とはその条件を満たしているときに「スイッチオン」になったような状態です。
「偽」とはその条件を満たしているときに「スイッチオフ」になったような状態です。
例えるなら
押せば照明が点灯するスイッチを押している時、真となり照明が灯ります。
押せば照明が点灯するスイッチを押していない時、偽となり照明が消灯します。
前者は「押している」という条件を満たしていますので、照明が点灯するアクションが起こります
後者は「押していない」という条件を満たしていますので、照明が消灯するアクションが起こります
それでは「PlayerがSpikeFloorと触れているとき」のアクションを追加します。
①アクションを追加
②Playerを選択
③位置を選択
④PlayerのX座標に「StartPoint.X()」を代入
⑤PlayerのY座標に「StartPoint.Y()」を代入
⑥OK
Player の座標を変更する：X座標に StartPoint.X() を代入、Y座標に StartPoint.Y() を代入
このアクションは、PlayerのX座標にスタート地点のX座標を代入、PlayerのY座標にスタート地点のY座標を代入しています。
これを先程の条件と繋げると
「PlayerがSpikeFloorと触れているとき」に「Playerをスタート地点の位置に移動させる」といったイベントになるわけです。
それではプレビューでPlayerをSpikeFloorに触れさせてみましょう。
PlayerはStartPointに移動しましたか？
次のステップで、Playerがゴール地点に接触したときのイベントも追加していきましょう。
ステップ4: Tween
Playerがゴールしたときに、テキストオブジェクトとTweenビヘイビアを使ってゲームクリアを演出します。
シーンエディタでテキストオブジェクトを作成します。
オブジェクト名を「ClearMessage」と変更し、表示するテキストを「GAME CLEAR
!!」に編集しました。
ClearMessageに「Tween」のビヘイビアを追加しましょう。
Tweenとは
オブジェクトのサイズ、角度、透明度など、任意の時間をかけてアニメーションさせます。
Tweenには「イージング」という緩急のパターンが豊富に用意されていますので、演出したい雰囲気に合わせて設定しましょう。
DOTweenのイージング一覧を世界一詳しく&分かりやすく説明する
世界一詳しく&分かりやすくDOTweenにはたくさんのイージングが用意されています。その数なんと、35種類。（ + デフォルト値 + 瞬時 + カスタムイージング） 「DOTween イージング 一覧」とかで検索してみると、DOTw
それでは新規イベントを追加して、そこに「PlayerはGoalPointと衝突している」という条件を追加してください。
（「PlayerはSpikeFloorと衝突している」をコピペしてSpikeFloorの部分をGoalPointに書き換える方法でも構いません。）
次にアクションですが、ClearMessageを画面中央に作成してTweenでアニメーションさせます。
レイヤーエディターを開き、テキストを表示させるレイヤーを追加して「UI」という名前に変更したら一番上にドラッグします。
次にテキストオブジェクトを生成します。
②オブジェクトを生成する
③ClearMessageを選択
続いて、オブジェクトを生成する位置を指定します。
①X座標
②数式エディター
③ゲームのウィンドウと解像度
④シーンウィンドウの幅
⑤Y座標
⑥数式エディター
⑦ゲームのウィンドウと解像度
⑧シーンウィンドウの高さ
⑨レイヤーをベースレイヤーからUIに変更
シーンウィンドウの幅は1280で、シーンウィンドウの高さは720です。
それを2で割るとちょうど中心になります。
PlayerがGoalPointに衝突している間は、毎フレームClearMessageが生成され続けますので「真の間一度だけ実行」という条件も加えます。
これで条件が真になっても再度真になるまで一度しか実行されません。
①その他条件
②イベントと制御フロー
③真のあいだ一度だけ実行
プレビューを確認してみましょう。
テキストは画面中央からすこしズレていますね。
テキストオブジェクトはスプライトオブジェクトと違ってポイントの編集ができません。
したがって、オブジェクトの左上端に固定されています。
そこが起点になるので、ウィンドウの中央に生成した場合はすこし右下にズレます。
このズレを修正するには以下の数式を用います。
(ウィンドウの幅÷2)-(テキストオブジェクトの幅÷2)
(ウィンドウの高さ÷2)-(テキストオブジェクトの高さ÷2)
「テキストオブジェクトの幅÷2」はテキストオブジェクトの半分の幅、すなわちセンターです。
「テキストオブジェクトの高さ÷2」も同様でテキストオブジェクトの半分の高さです。
アクションを追加でClearMessageの位置を変更しましょう。
Y座標も同様に値を代入します。
プレビューを確認してみましょう。
①ClearMessageを選択
テキストのサイズが控えめですね。
ですので、Tweenを使って派手に拡大しましょう。
さきほどのイベントにさらにアクションを追加します。
②オブジェクトのスケールをTween
③下記にあるパラメーターをそれぞれ入力
・Tween識別子：再生しているTweenを識別するためのIDです。
「Magnification」は直訳すると「拡大」です。
・目標Xスケール：最終的な幅のスケールです。
・目標Yスケール：最終的な高さのスケールです。
・イージング：アニメーションの緩急の種類です。
・継続時間(ミリ秒)：このTweenをどれくらいの時間をかけて再生完了するか
1000で1秒ですので、この場合は2秒かけて拡大します。
①ClearMessageを選択
・Tween終了時にこのオブジェクトを破棄する：「はい」にするとTween再生終了後に該当オブジェクトを削除します。
・オブジェクトの中心を基準にスケールする：「はい」にするとポイントではなくオブジェクトの中心を起点として拡大されます。
それではプレビューで確認してみましょう。
「GAME CLEAR
!!」の文字がでかでかと拡大されましたが、ゲームをクリアした感がまだ薄いですね。
次のステップで暗転とリスタートを追加しましょう。
ステップ5: 拡張機能
GDにはよく使う機能として標準機能が用意されています。
でも、それはGDの全機能のほんの一部にすぎません。
GDには標準機能一覧の中に含まれていない「拡張機能」がふんだんに用意されており、しかもかなりハイペースで随時新しい機能が追加されています。
今回は画面を暗転や明転させて場面切り替えを演出する視覚効果の「トランジション」を拡張機能で追加します。
トランジションはTikTokの動画編集をしている方にはおなじみの機能ですよね。
GDでも場面転換で簡単にトランジションを挿入できます。
では実際に追加していきましょう。
これまでと同様にアクションを追加を押してアクションウィンドウの「その他のアクション」タブを開きます。
そしてウィンドウを一番下までスクロールしてください。
「＋拡張機能の新しいアクションを検索」をクリックします。
拡張機能は標準機能の何倍もの種類があるので、検索窓から検索して絞り込みます。
今回は「transition」と検索してみましょう。
「Flash and transition
painter」という拡張機能が出てきますので、それを選択します。
「プロジェクトにインストール」をクリックしてこの拡張機能を追加します。
これでFlash and transition
Painterのビヘイビアがプロジェクトに追加されました。
Flash and transition
Painterのビヘイビアは「シェイプペインター」のオブジェクトで使用しますので、シェイプペイターのオブジェクトを新規追加します。
オブジェクト名を「Transition」に変更し、塗りつぶし色を黒にします
シェイプペインターのビヘイビアにFlash and transition Painterを追加します。
Transitionをシーンの表示領域外などに配置します。
このオブジェクトはそのままだと表示されませんので、どこに置いても問題ありません。
次に「PlayerがGoalPointに衝突している」の条件にトランジションを表示するアクションを追加します。
Color（色）： "0;0;0"を入力
Duration（間隔）： 3秒かけて暗転させます。
Type of effect（エフェクトの種類）： 円形に広がるタイプを選択します。
Direction transition（トランジションの方向）： 「Forward（前方）」を選択します。
「Forward」はトランジションの入りに使うと効果的です。
逆にトランジション明けには「Backward」を使うと効果的です。
「Both」はForwardとBackwardが連続して再生されます。
End opacity（最終的な透明度）：
今回は特に設定の必要はありません。
それでは、プレビューで確認してみましょう。
ステップ6: シーンの切り替え
ClearMessageのTweenが再生終了したらClearMessageを破棄する設定にしましたが、破棄せず残すようにしましょう。
TweenでClearMessageのスケールをアニメーションさせるアクションを編集した際にTween識別子を「MessageEnlargement」に設定しましたね。
つぎにシーンを切り替えるイベントを追加するのですが「Tweenは再生を終了した」という条件でアクションを実行します。
Tweenが複数同時に再生中の場合に「どのTweenが再生終了したらなのか」を識別するためのIDがTween識別子です。
シーン変更イベントを追加する前に、シーン名を変更しておきましょう。
シーン名はプロダクトマネージャーから変更します。
無名のシーンを「アクションパート」に変更します。
ではイベントを追加していきましょう。
②「Tweenは再生を終了した」を選択
③Tween識別子に「"MessageEnlargement"」を入力
続いてアクションを追加します。
①その他アクション
②シーン
③一時停止させ、新たなシーンを始める
"文字列"+数値(シーン変数(変数名))という意味です。
④新しいシーンの名前を「アクションパート」に変更
それでは、プレビューで確認してみましょう。
Tweenの再生が終了すると、シーンがリセットされて再スタートします。
ただ、Tween再生中はまだ動けるので、PlayerがGoalPointと衝突した時点で操作できないようにしましょう。
「PlayerはGoalPointと衝突している」のイベントに「Playerのデフォルトコントロールを無視する」というアクションを追加します。
ステップ7: 変数
今のところ、針の床を避けながらPlayerをスタートからゴールへ導くだけのゲームです。
ここに獲得可能なアイテムと、獲得数によって増加するスコアを追加します。
①その他アクション
アイテムはスプライトオブジェクトとアセットストアのコインを使用します。
Coinをひとつだけシーンに配置したら、あとはコピー&ペーストで配置しても大丈夫です。
つぎに獲得したCoinをカウントする変数と、リアルタイムで獲得数を視覚化するためのテキストオブジェクトを追加します。
まずは「CoinCount」という名のテキストオブジェクトを作成して画面の上部に配置し、レイヤーを「UI」に変更しましょう。
テキストオブジェクトを配置したらイベントエディタに移ります。
新規イベントに「PlayerとCoinが衝突している」という条件を追加します。
つづいて「シーン変数（Coin）の数値を1加算する」というアクションを追加します。
②変数
③シーン変数
④変数の数値を変更
⑤変数(名)に「Coin」を入力
⑥変更記号を「＋(足す)」に変更
⑦値を「1」に変更
①CoinCountを選択
変数を加算したらCoinを消すためのアクションも追加します
テキストオブジェクト「CoinCount」を書き換えるイベントも追加します。
②テキストを修正する
③テキスト欄に「"コイン："+」 と入力
③数式エディタを開く
①数式エディタの変数を開く
②シーン変数
③数値の変数
④変数「Coin」を入力
文字列を入力する際はダブルクオーテーション（"）で囲います。
文字列を求められている場所に数値を表示する場合は「ToString(数値)」と入力します。
"コイン："+ToString(Variable(Coin))
イベントは上から順にチェックされますので、順序はかなり重要です。
イベントやアクションの順序が上下するだけで動作していたイベントが動作しなくなる場合もあります。
また、後々「イベントグループ」でまとめる時に関連するイベントで固めておくと作業効率が上がります。
それでは、プレビューをチェックしましょう。
ステップ8: 経路探索（パスファインディング）
ここまで、ゴール、障害物、アイテムを作成しました。
つぎはさらにゲーム性を高める要素として敵キャラクターを作成します。
スプライトオブジェクトを追加します。
アセットストアで「Walking
Enemy」と検索すると出てくる候補から、赤い敵キャラクターのアニメーションパターンを1から3まで読み込みます。
再生速度、ポイント、衝突判定も調整します。
次にビヘイビアを追加します。
Playerと同じくプラットフォームキャラクターのビヘイビアを追加します。
続いて、ビヘイビアをもうひとつ追加します。
一覧から経路探索を選びます。
経路探索
このビヘイビアは、「経路探索の障害物」のビヘイビアが設定されたオブジェクトを避けながら指定した座標に移動します。
例えば、Platformに「経路探索の障害物」のビヘイビアを追加し、Enemyの目標座標をPlayerに設定すれば、障害物を避けながらPlayerを追う動作を加えられます。
なお、避けきれない障害物がある場合は停止します。
経路探索の設定を変更します。
最高速度を100にして「回転する」のチェックを外しましょう。
続いて、PlatformとSpikeFloorに「経路探索の障害物」のビヘイビアを追加します。
これで、Enemyが避ける障害物として認識されます。
条件は「無条件」ですが、後ほど変更します。
シーンに配置してプレビューしてみましょう。
かわいらしいのがちょこちょこと追いかけてきますね。
現段階ではPlayerとEnemyが衝突してもなにも起こらないので
「PlayerとSpikeFloorが衝突したら、Playerの座標にStartPointを代入」のイベントを少し変更します。
「PlayerはSpikeFloorと衝突している」の条件の下に、条件を追加します。
②イベントと制御フロー
③「または」を選択
「以下の条件が一つでも真の場合：」の下にある「副条件を追加」の位置にドラッグします。
ドラッグしたら「PlayerはSpikeFloorと衝突している」をコピーして真下にペーストし
「PlayerはEnemyと衝突している」に書き換えます。
これはどういった条件になるかというと
「PlayerはSpikeFloorと衝突している」または「PlayerはEnemyと衝突している」
この２つのいずれかの条件が真になった時
となります。
つまりPlayerはSpikeFloorと衝突しても、Enemyと衝突しても座標をStartPointに変更するアクションが実行されます。
それではプレビューを確認してみましょう。
さっきまでちょこちょこ追いかけてきてかわいらしかったEnemyが厄介な存在になりましたね。
次のステップではPlayerに攻撃手段を持たせてEnemyを排除できるようにします。
ステップ9: FireBulletsとサブイベント
本ステップでは、Playerが敵を攻撃するための攻撃手段を作成します。
オブジェクトの種類はスプライトを使います。
オブジェクト名は「Bullet」に変更します。
続いて、Playerのプロパティを開き、新しいビヘイビアを追加します。
「Fire Bullets」は直訳すると「弾丸の発射」です。
このビヘイビアを設定しているオブジェクトは発射物を発射できるようになります。
「Zキーを押している」のイベントの下に右クリックメニューでサブイベントを追加します。
※弾丸側ではなく、発射する側にこのビヘイビアを追加します。
Fire Bullets設定の各項目についてはこちらの画像をご参考にどうぞ
PlayerにFire
Bulletsのビヘイビアを追加して設定を完了したら、イベントエディタで弾丸を発射できるようなイベントと、弾丸が命中したEnemyを消すイベントを追加します。
今回、キーボードのZを押すと弾丸を発射するイベントを作成します。
この状態だと「角度0（右方向）」にしか弾丸を発射しないので、サブイベントを使用して左を向いているときには左方向へ弾丸を発射するアクションも追加します。
サブイベントとは
親イベントが真の間、その下にあるサブイベントは条件を満たすと真になります。
親イベントが偽になると、その下にあるサブイベントの条件が真であってもアクションは実行されません。
サブイベントの条件は「Playerが水平方向に反転しているか否か」にします。
（つまりPlayerは水平方向に反転して"いる"という条件にします）
アクションも「発射角度0度」を「発射角度180度」に書き換えます。
次に「BulletとEnemyは衝突している」という条件で「Enemyを削除する」続いて「Bulletを削除する」というアクションが実行されるイベントを追加します。
BulletがPlatformを貫通しないように「BulletとPlatformは衝突している」という条件で「Bulletを削除する」というアクションが実行されるイベントも追加します。
それではプレビューで確認してみましょう
ステップ10: パーティクルエミッターとサウンド
弾が当たったとき、ただ弾が消えるだけでそっけないですね。
攻撃がヒットした爽快感を演出するための効果を、パーティクルエミッターとサウンドを使って加えます。
BulletがEnemyと衝突したとき、BulletがPlatformに衝突したとき。
それぞれの条件にHitParticlesを生成するイベントを追加します。
HitParticlesをBulletの座標に生成するアクションは、Bulletを削除するアクションより上にします。
Bulletのインスタンスがシーンから消えてしまったあとにBulletの座標を参照しても見つからないので、X座標、Y座標ともに「0」に置き換わってしまいます。
それではプレビューで確認してみましょう。
おわりに
知識ゼロからの超チュートリアル Vol.2はここまでとなります。
おつかれさまです。
知識ゼロからの超チュートリアルは今回でひとまず終了となります。
Vol.3を書くかは未定ですが、記事下の5段階評価で高評価をいただけましたら今後も続けたいとおもいます。
（Vol.3も書きましたので、ぜひ御覧ください🙇）
（Vol.3も書きましたので、ぜひ御覧ください🙇）
その際、引き続きこのプラットフォームアクションゲームを更に作り込むためのチュートリアルなのか、まったく別のゲームジャンルのチュートリアルなのか、ご要望がございましたらコメント欄や右メニューのアンケートからお声をお寄せくださいませ。
（プラットフォームアクションゲームの場合は、敵キャラの定期的なスポーン（発生）、別のシーンへの切り替え、キーボードではなくスマホやゲームパッドでの操作などを扱う予定です。）
最後までお読みいただきありがとうございました。
cratier-gd.blogspot.com
cratier-gd.blogspot.com
投稿
GD始めたての人にここまで手取り足取り説明するページは類を見ないので非常に有用だと思います！ 記事作成大変だと思いますが頑張って欲しいです。
返信削除わー！非常にありがたいお言葉を頂き、とても励みになります！
削除お知りになりたいことがございましたら、ご遠慮なくなんなりとお申し付けくださいませ。
ぜひともブログのネタにさせていただきます！
応援ありがとうございます😂