2D Game Kit( https://unity3d.com/jp/learn/tutorials/s/2d-game-kit )は、Unity Technologiesが配布しているアセットです。一切、プログラムコードを書かずに、エディターでパラメーターを設定するだけで、2D横スクロールゲームが開発できます。アーティストやデザイナーが使うことを想定したプロジェクトですが、プログラマーにとってもスクリプトや設定方法を見ると参考になります。
この記事では、公式のGetting Startedのドキュメントを元に、セットアップから基本機能の組み込みを行ってみます。
(講義時間の目安:3時間)
目次
前提
- Unity2017.3以降がインストールされていること
- ない場合はこちらから、Personalをダウンロードしてインストールしてください
- Unityの基本操作を理解していること
2D Game Kit を読み込む
Unityで新しいプロジェクトを作成して、そこに2D Game Kitを読み込みましょう。
プロジェクトの作成
Unityを起動して、以下の設定で新しいプロジェクトを作成します。
- Unityを起動して、 をクリックします
- 以下の要領でプロジェクトを設定して作成します
- Project nameを
2DGKRensyu
など - 設定は
- Locationは、日本語や全角文字が含まれていなければそのままで構いません
- Project nameを
- をクリックすると、新しいプロジェクトが作成されます
このチュートリアルでは、
を 、ビューを にしています。
アセットを読み込む
Unityが起動したら、Asset Storeから2D Game Kitをダウンロードして、インポートします。
- メニューから を選択します
- 検索欄に
2D␣Game␣Kit
と入力してEnterキーを押します - を見つけて、名前の部分をクリックします
- アセットのページが表示されたら、
- Unityにログインしていないと、アセットはダウンロードできません。ログインを要求されたら、Unityアカウントを作成してログインしてください
をクリックしてダウンロードします
- ダウンロードが完了したら、ボタンが に変わりますので、クリックします
- 以下のような警告が表示されますが、構わないので をクリックします
- データが展開されるまでしばらく待ちます
- 展開が完了するとインポートダイアログが開きます。右下の ボタンをクリックして読み込みます
- プロジェクトへのインポートが完了するのを待ちます。数分かかりますので、のんびり待っていてください
- 読み込みが完了すると、 ビューに フォルダーが表示されます
以上で2D Game Kitが使えるようになりました。
サンプルで遊ぶ
サンプルとして作成されたゲームを遊んでみましょう。ゲームのタイトル画面である
シーンを以下の手順で開きます。- ビューで、 フォルダーの左の三角アイコンをクリックして開きます。続けて、 フォルダーを開いたら、 シーンをダブルクリックします
- Unityの画面上部にある三角形の実行ボタン(
)をクリックしてゲームを開始します
- ビューにタイトル画面が表示されます。 をクリックするとゲームが始まります
操作方法
デフォルトでは、以下のキーで操作します。
- Aキー:左に移動
- Dキー:右に移動
- Sキー:しゃがむ
- スペースキー:ジャンプ
少し進むとメッセージが表示されます。
ちょっとした導入と操作説明です。先に進むと今度は以下のようなメッセージが表示されます。
「足元がスポンジのような奇妙な感じ。Sキーを押しながらSPACEキーを押すとどうなるかな?」
このままゲームを進めることができます。クリアするには少し時間がかかります。時間があれば、迷路の謎を解いて、最後のボスを倒してみてください。
操作方法を変える
Game Kitをいじってみます。まずはキーの割り当てを変更する方法を試してみましょう。PCゲームに慣れていれば、デフォルトのままでも操作できるかも知れませんが、慣れていないと難しく感じます。そこで、以下のように操作を変更します。
- ←キー:左移動
- →キー:右移動
- ↓キー:しゃがむ
- スペースキー:ジャンプ
実行ボタン()を押してゲームを停止します。Unityでは、ゲームを動かしながら行った変更は、すべて無効になってしまいます。変更したい時には、必ずゲームを停止させましょう。
- ビューから フォルダーを開いて、 プレハブをクリックして選びます
- ビューで、 より上のコンポーネントが開いていると邪魔なので、左の三角アイコンをクリックして閉じます
- 欄でキーの割り当てを変更します
- の左の三角をクリックして設定を開きます
- Rキーを数回押して、 が出てきたら選びます 欄には、右移動で使いたいキーを設定します。クリックするとキーの一覧が表示されますので、
- Lキーを押して、 を選択します 欄には、左移動で使いたいキーを設定します。Right Arrowを設定したのと同じ方法で、今度は
- しゃがみは、 欄の 欄です。同様に操作をして、 を設定してください(このゲームでは上操作はないので 欄の設定は不要です。以下では統一感を出すために を設定します)
以上で設定完了です。実行して、操作をしてみてください。矢印キーで移動操作ができるようになります。ジャンプは先ほどと変わらずSPACEキーです。変更したい場合は、 欄の に使いたいキーを設定してください。
次は、公式ドキュメントのGetting Startedをもとに空白のゾーンから仕掛けを作っていきましょう。
練習
ジャンプや斬撃(
)、ショット( )のキーを好きなキーに割り当ててみましょう。表示がおかしいとき
左向きのショットが表示されなかったり、斬撃が以下のように白くなっている場合、グラフィックの設定が必要です。
- メニューから -> を選択してください
WebGLなどにしていた場合、これで直ります。
新しいゾーンを作成する
Creating a New Sceneを元に、新しいゾーンを作成していきます。 2D Game Kit をインポートすると、開発のための メニューなどが追加されます。これらを使って、主人公Ellenと小さな足場、HP表示、操作に必要な設定が済まされた最小限のゾーンを新規作成できます。
それでは、新しいゾーンを作成してみましょう。
- メニューから を選びます
MyZone1
)を入力して、 ボタンをクリックします
欄に面の名前(例えば
設定した名前のシーンが
ビューに作成されます。これをビルド設定に加えます。
- メニューから を選択します
- ビューの をドラッグして、 欄にドロップして加えます
- 以上できたら、 ビューの シーンをダブルクリックして開きます
以上で、Ellenと足場だけのシンプルなシーンが読み込まれます。
実行して、Ellenを操作してみてください。一通り操作することができます。足場から転落すると、ずっと落ち続けていきます。まだ何の仕掛けもしていないからです。
ステージを作ってみましょう。
ステージを作成する
公式ドキュメントの Painting a Level を参考に作業を進めます。
2D Game Kitは、Unity2017.2から導入されたタイルマップ(Tilemap)機能を利用して、足場の作成ができます。
- メニューから を選択します
- 最初に表示されるのは、自分でパターンを選んで置くモードです。これでもレベルデザインはできますが、Tilemap paletteの真価を発揮するためにモードを切り替えます
- 左上のコンボボックスをクリックして、 に切り替えます
- タイルが以下のように2種類だけのものに変わります
これがScriptable Tileシステムという凄いモードで、予め仕込んである地形の形状に応じて、自動的に足場のチップを組み替えてくれます。それでは地形を作成してみましょう。
地形を作成する
- で、どちらか一方のタイルをクリックして選びます
- Tile Palette上部のツールが筆アイコンに切り替わりました
- ビュー上で操作することで、足場を設定できます
パターンを一切切り替えていないのに、上面や下の面が塗り分けられ、同じパターンが続かないように自動的にランダムなパターンを選んでくれています!
2つしかパレットはありませんが、これだけで自然な足場を簡単に作ることができるのです。
地形を消す
地形を消したい場合は、消しゴムアイコン()を選択して、消したい場所をクリックやドラッグするか、あるいはShiftキーを押しながらクリックやドラッグで消すことができます。
矩形塗りや塗りつぶし(あまりオススメしない)
以下のツールを選ぶとドラッグで選択した矩形範囲を塗りつぶします。ただ、現時点では処理速度が遅くて動きが不安定なので必要がなければ使わない方がよいです。使う場合は、範囲を選択したらその状態でしばらくマウスを止めて、塗りが確定するのを待ってから次の操作をするという感じです。
以下の塗りつぶしツールは、何もないところを選ぶとUnityがフリーズしてしまうので、現時点では使わない方がよいです!
これだけ知っていれば、自由に足場を作ることができます。ジャンプ移動が楽しそうなステージを作って、遊んでみてください。
補足
ゲーム中にF12キーを押すと、攻撃機能の有効・無効を切り替えるスイッチを表示できます。
最初は、
(斬撃)と (ショット)の両方ともチェックが入っていて使えます。不要な場合は、チェックを外すことでキーを押しても反応しなくなります。ジャンプゲームを作ってみよう
ここから公式ドキュメントから離れます。公式ドキュメント通りに進めたい場合は、 Adding a Moving Platform から進めてください。
足場が作れるようになったので、落ちたらダメージを受けるようにしましょう。ゲームキットには、落ちるとダメージを受ける酸の水溜まりがあります。これをステージの下に設置しましょう。
- は閉じて構いません
- ビューから、 -> -> のフォルダー左の三角アイコンをクリックして開きます
が酸、 がトゲです。まずはAcidを選択して、ゲームの地面に敷き詰めましょう。
- ビューの をドラッグして、 ビューの最下段にしたい辺りでドロップして配置します
- はステージ( )のオブジェクトなので、 の下にドラッグ&ドロップで移動させて、プロジェクトを奇麗に保ちましょう
酸の範囲は、
コンポーネントで調整することができます。ステージの下全体を酸が覆うように調整しましょう。- ビューでステージ全体が表示されるように引き絵にします
- をステージの中央ぐらいになるように移動させます
- ビューから コンポーネントを探して、 欄の と の値を大きくして、どこから落ちても大丈夫なサイズと位置に調整します
調整できたら、実行して遊んでみてください。酸に転落するとライフが減って、スタート位置に戻るようになります。また5回ミスするとゲームオーバーになります。
酸に落ちた時に地面の下が見えないように、画面外を足場で囲むなどするとよいでしょう。以下のようなステージにしてみました。
ステージクリアを作ってみよう
次のようなことを作ってみます。
- ステージの右端にスイッチを仕込んで、それを踏んだらクリアします
- クリアしたら以下を実行します
- CLEAR!!という文字を表示
- プレイヤーの操作を停止
- CLEAR!!を一定時間表示したら消す
- Ellenのライフを回復させて、スタート地点に戻す
実現方法を調べる
まずは同じようなことをしている場面をサンプルゲームで探します。
の鍵を取ったところが参考になりそうです。この場面を調べてみます。
- ビューから -> フォルダー内にある シーンを開きます
- 発動するのは鍵なので、 から オブジェクトを選択します
- ビューの重要部分を以下に示します
と がこの演出のために使われているコンポーネントです。
Director Triggerは、対象となるオブジェクトが触れた時に、タイムラインの再生の開始とそれに伴う処理を呼び出して、タイムラインの再生が終わった時に実行したい処理を設定することができるコンポーネントです。
Interact On Trigger 2Dも同様に、対象となるオブジェクトが触れた時の処理を設定しますが、こちらは
と に実行したいイベントを設定できます。サンプルでは以下のような処理をしています。
- Director Trigger
- EllenがKeyに触れた時
- カメラの演出の再生を開始
- Ellenの操作を無効にする
- カメラの演出が終わった時
- Ellenの操作を復帰
- EllenがKeyに触れた時
- Interact On Trigger 2D
- EllenがKeyに触れた時
- Keyを拾ったのを表すオブジェクトを有効化
- Keyの表示を消す
- EllenがKeyから離れた時
- Keyのオブジェクトを無効化
- Keyを拾った情報を保存
- EllenがKeyに触れた時
以上からやりたいことを整理すると以下のようになります。
- CLEAR!!という文字が表示されて、しばらくしたら消えるアニメーションをTimelineで作成
- CLEAR!!を表示して消すTimelineを再生 -> の
- Ellenの操作の無効化 -> の
- シーンの切り替え -> の
ということで
コンポーネントのみで実現できそうです。それでは作成していきます。CLEAR!!の作成
まずはCLEAR!!という文字を作成して、それをTimelineでアニメーションさせる部分を作りましょう。
CLEAR!!の文字を作る
の文字をTextMesh Proで作ります。TextMesh Proとは、Unityで奇麗な文字を描画してくれる定番アセットで、2D Game Kitには最初から組み込まれています(Unity自体に最初から組み込まれていいレベルのアセットです)。
- ビューの から -> を選択します
- 作成した を の下に移動させて、 を整理しておきます(やらなくても動作に影響はありませんが、マナー的な感じで)
- ビューから をクリックして選択しておきます
- を にして、画面サイズに応じてスケールを調整するようにします
- に基準としたいデバイスの解像度を設定します。ここではiPhoneSEを基準にして、その解像度を設定しました
- を にします。縦横比が異なった場合の調整方法で、Expandにすると画面から出ないように調整してくれます
ビューの コンポーネントで以下を設定します
- 右クリックして、 -> を選択します ビューの を
CLEAR!!
に書き換えます
ビューの を
これで画面の中央付近にCLEAR!!
と表示されます。
これだと寂しいので調整を加えます。
- InspectorビューからFONT SETTINGS欄を以下のように修正します
- Font AssetをRajdhani-Bold SDF(他のでも構いません)
- Alignmentを中央揃えに設定
- Wrapping & Overflow欄をDisabledとOverflowに設定(折り返しが不要な場合、この設定をしておくと便利)
これで基本設定ができたので、あとはフォントの大きさや色を自由に調整してください。Color Gradientにチェックを入れると、文字にグラデーションも設定できます。
とりあえずこんな感じにしてみました。
Timelineで演出を作成する
表示したい文字ができたので、表示して、しばらく待ってから、消える、という演出を作ります。このような演出にはTimelineが便利です。
- 右クリックして、 -> を選んで新しいフォルダーを作ります ビューの何もない場所を
- フォルダー名を
Timelines
にします
- 作成した右クリックして、 -> を選択します フォルダーを
- 名前を
Clear Timeline
にしておきます
タイムラインは、演出方法を定義するアセットと、それらのアセットをHierarchyのオブジェクトに結びつけるインスタンスの2つをセットにして運用します。アセットの方は、今作成した
です。インスタンスは、Clear TimelineをHierarchyに配置すれば自動的に作成されます。- ProjectビューからClear Timelineをドラッグして、Hierarchyビューの何もないところにドロップします
- ビューに が生成されるので、 の下にドラッグ&ドロップで移動しておきます
- ビューから、 のチェックを外して、シーン開始と同時にアニメーションしないようにします
演出を作成するために、タイムラインのデータを作成します。
- ビューから を選択しておきます
- メニューから を選択します
- ウィンドウが表示されたら、右上の をクリックしてロックをしておきます。こうしておくことで、 以外を選択した時でも、Clear Timelineについて編集し続けることができます
- CLEAR!!の文字の表示と非表示を演出したいので、 ボタンから を追加します
- オブジェクトの有効・無効を切り替えてくれるActivation Trackが追加されました。ここに を割り当てます
- ビューから の子供の をドラッグして、 エディターの の部分にドロップします
これで、このタイムラインを実行開始すると、CLEAR!!が表示されるようになりました。以下で動作を確認してみてください。
- Unityを実行します
- CLEAR!!の文字は消えているはずです
- Timelineエディターで再生ボタンを押します
ボタンを押すとタイムラインの再生が始まって、CLEAR!!が画面に表示されます。Activationの無効化をしていないので、タイムラインが終わっても表示されっぱなしですが、これは後で調整します。
文字を簡単にアニメーションさせてみましょう。
- エディターの をクリックして、今度は を追加します
Animation Trackは、指定のオブジェクトのパラメーターを時間経過に沿って変化させることができるトラックです。Animationという名前ですが、あらゆる公開パラメーターを変化させることができるので応用範囲が広いトラックです。
- ビューから の子供の をドラッグして、 の の部分にドロップします
- ポップアップが表示されるので、 を選択します
これでアニメーションを付けることができます。
を選択したので、アニメーションはタイムラインアセットに保存されます。アニメーション付けをする時は、以下のようにTimelineエディターとGameビューが同時に見れるようにしておくと便利です。
- の をクリックして、アニメーションを記録する状態にします
- ビューから の子供の を選択します
0
にしてEnterキーを押します
ビューで を
これで、最初のフレームにキーフレームが打たれて、文字サイズが0からアニメーションが開始するようになりました。
0.5秒で文字が大きくなるようにしてみましょう。デフォルトでは60フレームで1秒間が経過する設定になっているので(
アセットの設定)、30フレームに移動します。30
に書き換えてEnterキーを押します。再生位置が30フレーム目に移動します
エディターの上部にある数値のボックスを
200
)
ビューから を表示したいサイズにします(例では
これで文字が拡大して表示される演出ができました。フレームを戻して、再生ボタンを押して動きを確認してみてください。
注意!
TextMesh Proは時々、文字が表示されなくなるバグが発生します。文字が見えなくなった場合は、一度Unityを再生したり、文字を書き換えたりして、変化させるなどして、文字が表示されるようにしてください。
3秒経ったら消すようにします。150フレームで縮小開始、180フレームでFont Sizeを0にしましょう。
- フレームを
150
に変更して、Enterキーを押します
- ビューで の子供の を選択します
200
なのですが、同じ値ではアニメーションが設定されません。そこで、一度別の値、例えば0
にしてEnterキーを押してアニメーションを設定してから、改めて200
に戻してEnterキーで設定します
ビューから を設定します。ここの は
- フレームを
180
にしてEnterキーを押します
0
に設定して、Enterキーを押します
ビューで を
これでアニメーションの作成完了です。録画ボタンをクリックして、アニメーションの設定を停止します。
フレームを戻して再生をすると、できあがったアニメーションを確認できます。
現在は300フレーム、つまり5秒間のアニメーションですが、3秒にしましょう。
- Activateの右端にマウスカーソルを合わせて、左右矢印アイコンになったらドラッグして、179フレームのところまで縮めます
以上で、文字のアニメーション完成です!文字のサイズや色、透明度などを調整して、好みの演出を加えてみてください。
このままだと、CLEAR!!が表示されっぱなしになりますので、0
にしておきます。
- ビューから の子供の を選択します
0
にします
を
注意!!
本当は、0
にしておくことで表示しないようにしました。この方法の場合、 は不要ですが、不具合が直った時に本来の手法に戻せるように手順を残しておきました。
ゴールの設置
材料ができたので、ゴールを設置します。ゴールはReusableBoxで判定します。
- ビューから -> -> の左の三角アイコンをクリックして開きます
- ビューから をドラッグして、 ビューのゴールの位置に配置します
- 上下逆なので、
0
にしてもとに戻します
ビューの の を
- ちょうどよさそうな位置に移動させます
仕掛けを設定する
に仕掛けを設定します。先に調べた通り、Director TriggerコンポーネントがTimelineを制御する機能を持っていますので、それを追加して、イベントを設定していきます。
- ビューから をクリックして選択します
- Inspectorビューの下の
dir
と入力すると、 が見つかるので、選択して追加します
をクリックして、検索欄に
- 対処となるオブジェクトと振る舞いを設定します
- ビューから をドラッグして、 ビューの 欄にドロップ
- ビューからClear Timelineをドラッグして、 ビューの 欄にドロップ
- ビューの を に変更して、毎回発生するようにする
これで、
が に触れると、 の再生が始まるようになります。一度動きを確認してみるとよいでしょう。Timelineを再生する時にEllenの操作を無効にしてみましょう。
- ビューで が選択されていることを確認します
- ビューの 欄の右下の をクリックします
- の操作を解除したいので、 ビューから をドラッグして、 欄に追加された場所の の欄にドロップします
- ビューの とある欄をクリックすると、メニューが表示されます
- -> を選択します
- チェック欄が追加されるので、チェックを入れます。これは、操作を無効にするのと同時に、キー入力の情報をクリアするという意味です。とりあえずチェックしておくとよいでしょう
これでクリアすると
が操作できなくなります。スイッチと連動した処理が実装できたことを試してみてください。最後に、スタート地点に戻す処理を加えます。シーンを移動させるには、
というスクリプトを配置しておく必要があります。 に持たせておきましょう。- HierarchyビューからEllenを選択します
- Inspectorビューの一番下にあるAdd Componentボタンをクリックしてメニューを出します
- 検索欄に
sc
と入力すると、 が見つかるので、選択して追加します
このスクリプトを
のイベントで呼び出すように設定します。- ビューから をクリックして選択します
- ビューの 欄の右下にある をクリックして、欄を追加します
- HierarchyビューからEllenをドラッグして、Inspectorビューに今追加した欄のNoneの箇所にドロップします
- ビューで設定した欄の右上の とある欄をクリックして一覧を表示します
- -> の順に選択します
- チェック欄が表示されるので を入れます。これにより、ゾーンをリスタートすると同時に、パラメーターを初期化してくれるようになるので、HPが回復します
以上で完成です。実行して遊んでみてください。クリアすると、Ellenの操作ができなくなり、CLEAR!!が表示されて、CLEAR!!の文字が消えると、スタート地点に戻ります。ミスをしている状態でクリアするとHPが回復します。
BGMを再生する
無音なのも寂しいので、BGMを鳴らしてみましょう。
プレハブが用意されていて、シーンに配置しておくと開始と同時にBGMを再生しつつ、環境音も流してくれます。- ビューから -> -> フォルダーを開きます
- BackgroundMusicPlayerをドラッグして、Hierarchyビューの—- GameUtilities —-の下にドロップします
以上できたら、BGMが再生されるようになります。
BGMを変更したい場合は、
ビューに配置した を選択して、 ビューを見てください。とある欄に音源データを すれば、その曲に変更することができます。
Unityでは、MP3やOGG、WAVファイルを鳴らすことができます。
まとめ
コードを一切書かずに、ゲームっぽいものが出来上がりました。これを土台にして、例えば背景を書き換えたり、主人公のキャラクターのグラフィックを差し替えたり、タイルマップのデータの作り方を調べるなど、ゲームで利用するグラフィックの勉強に使うことが考えられます。
プログラマーであればソースコードを開いてみてください。面白いテクニックがあちこちで使われています。
TilemapやTimelineなども簡単に触れてみました。それぞれ、有用な機能ですので気に入ったら調べてみてください。Tilemapのルールは、
ビューの -> -> -> フォルダー内の です。確認してみると面白いと思います。タイトル画面に戻せないの?
クリアしたり、ゲームオーバーになったらタイトル画面に戻ればいいのに、と思うのですが、現バージョンではその辺の処理は考えられていないようです。もしかしたらどこかにあるかも知れませんが、サンプルゲームでもできませんし、ざっとプロジェクト内を眺めた限りはそれらしい機能は見つけられませんでした。
スコアなどの実装も現状では自分でスクリプトを書かないと難しそうです。まだ新しいアセットのため、あれ?っということが出来なかったりします。とりあえず、サンプルゲームと同様の迷路を探索するタイプのゲームを作ってみることをおススメします。