「Defold」でゲーム画面を作る方法
「Defold」とは、「キャンディークラッシュ」の制作会社「King」が独自に開発したゲームエンジンです。今回は、Defoldを使ってゲーム画面をどのように作成していくのか説明していきます。
１．ゲーム画面とは
本記事のタイトルにある「ゲーム画面」とは、あるゲームシーン上に配置されたアイコンやボタンなどの装飾を足していくことで作られる画面を指しています。画面上に存在するアイコンやボタンの座標をスクリプトから制御して確認する作業は非常に時間が掛かってしまう作業ですので、なるべくスクリプトを利用せずに調整していきたいと思うはずです。
２．GUIを使う
Defoldにはアイコンやボタンを非プログラマーが簡単に配置できる「GUIエディタ」が備わっています。下図は、「GUIエディタ」を利用してアイコンとテキストパーツを使ってアニメーションさせている例です。但し、現在のGUIエディタではオブジェクトにアニメーションを付ける機能が実装されていませんので、Spineを利用するかまたはスクリプトを利用するしかなさそうです。
また、GUIはカメラから独立したスクリーン空間座標系に対してレンダリングされているため、カメラが動く場合でもGUI要素は画面上に置かれたままになるとのこと。さらに、このGUI機能は強力なレイアウト機能を備えており、解像度とアスペクト比に依存しないユーザーインターフェイスのレンダリングが可能となっています。
２．１ GUIファイル作成
GUIファイルは「Assets」ウィンドウ上で右クリックメニューから「GUI」を選択することで作成できます。
下図が今回作成するGUIの完成図です。
２．２ ノード作成
GUIはノードの集まりから作成されており、このノードには「Boxノード」、「Textノード」、「Pieノード」、「Templateノード」、「Spineノード」があります。まず、「Boxノード」を「Nodes」フォルダ上で右クリックして作成してみましょう。
作成した「Boxノード」の位置は「Boxノード」を選択した状態で右下にある「プロパティウィンドウ」の「Position」から変更が可能です。
２．２．１ テクスチャ読み込み
作成した「Boxノード」にテクスチャを割り当てるためには、予めテクスチャアトラスかタイルソースを追加しておく必要があります。
ここでは「game」テクスチャアトラスを追加していますが、これにより「Boxノード」の「Texture」でテクスチャアトラスに追加されている画像を選択することができます。
２．３ テキスト表示
テキストを表示するためには「Textノード」を利用します。
追加した「Textノード」は「Boxノード」の配下にドラッグアンドドロップで移動させます。これにより、「Boxノード」をアニメーションさせるだけで「Textノード」もアニメーションしてくれるようになります（とはいえここは個人の好みでやり方は変わると思います）。
２．３．１ フォント読み込み
自分で作成したフォントを読み込むためには、「Fonts」フォルダ上で右クリックして読み込みたいフォントを選択します。
読み込んだフォントを利用するためには「Textノード」を選択して「Font」から割り当てます。
２．４ 便利なGUIライブラリ（紹介）
デフォルトではGUIエディタに用意されていませんが、「ボタン」「チェックボックス」「ラジオボタン」などのパーツを簡単に利用可能にするライブラリがDefoldチームによって用意されています（GitHub – DirtyLarry）。次章からは「Dirty Larry」を利用してボタンを作成する例について示します。
２．４．１ 依存関係の登録
「Dirty Larry」プロジェクトに依存関係があることを指定するために「Dependencies」に「https://github.com/andsve/dirtylarry/archive/master.zip」を登録します。
「Fetch Libraries」を実行します。
「dirtylarry」が追加されています。
２．４．２ ボタンGUI作成
ここでは「gui_test.gui」というGUIファイルを新しく作成し、「Nodes」配下に右クリックメニューから「template」を追加しました。「template」から追加したGUIファイルのURLを「dirtylarry.lua」が参照することになるので、必ず「template」を利用してGUIを追加してください。
GUIのノードをスクリプトから操作するためにはGUI専用のスクリプトを利用する必要があるので、「Assets」ウィンドウから作成したいフォルダ上で右クリックして「GUI Script」を選択します。「gui_test.gui」に割り当てるGUIスクリプトの内容を下記の様にしました。
下図のようにスクリプトを割り当てます。
２．４．３ 入力トリガーを追加
このままではボタンへの入力が取得できませんので、「game.input_binding」を編集して入力を認識できるようにします。下図のように「Mouse Triggers」のInputに「mouse-button-1」、Actionに「touch」を設定しました。ここでActionに「touch」を入力している理由としては、「dirtylarry/dirtylarry.lua」の「hit_test」関数内で「dirtylarry.action_id_touch（Default:touch）」と比較しているためです。
２．４．４ コレクション作成
ここでは「gui_test.collection」にゲームオブジェクトを作成し、その配下に「gui_test.gui」を「Add Component File」から追加しました。
※GUIファイルを先にコレクションファイルに配置してしまうと、GUIファイルの内容を更新しても反映されないという不具合が発生することがあるので気をつけて下さい。
２．４．５ 実行結果
ボタンをクリックするとログにも「DEBUG:SCRIPT: Push!!」と表示されます。
３．アニメーションの使い方
ここではアニメーションさせる方法として「プロパティアニメーション」を利用します。これは、関数（go.animate()）を使用して全ての数値プロパティをアニメートする方法です。したがって、スクリプトを使って実装することになってしまいます（今後エディタ上でアニメーションを付けれるようになるかもしれません）。
３．１ 座標を移動させる
ノードの座標を滑らかにアニメ移動させるためには「go.animate()」関数に「gui.PROP_POSITION」プロパティ定数を利用します。下記のようなコードをスクリプトに貼り付けると「IDがcharacter_iconのノードに対し2秒遅延した後、x座標60.0、y座標540.0の位置へ1秒で移動する」というアニメーションが実行できます。
上記スクリプトでは「character_icon」というIDを指定しているのでノードIDを変更しておきます。
GUIのノードをスクリプトから操作するためにはGUI専用のスクリプトを利用する必要があるので、「Assets」ウィンドウから作成したいフォルダ上で右クリックして「GUI Script」を選択します。その後、Guiのルートを選択した状態で右下のプロパティを見ると、「Script」項目があるので作成したスクリプトを割り当てます。割り当てた「GUI Script」に先ほどのアニメーションコードを貼り付けてください。
３．２ Hot Reload
Defoldには「Hot Reload」という強力な機能があります。具体的にどういった機能かというと、ゲーム実行中であってもスクリプトの内容を変更し、それをそのままゲームに反映させることができるという超便利機能です。「Hot Reload」のショートカットは「Ctrl + R」ですが全てのスクリプトがリロードされるのではなく、現在アクティブになっているタブのスクリプトが対象になるので注意して下さい（アセットもリロードできると思っていましたがまだできなさそうです）。3.1章の座標を移動させるスクリプトのパラメータを変更してホットリロードを試すと、座標の調整や移動時間などをリアルタイムに変更させられるので便利さが分かると思います。
３．３ アニメーションスクリプト作成ツール（Mac用）
オブジェクトに対してアニメーションをエディタで作成したいという場合は、Defoldチームの方が作成したツールを利用するという方法があります。但し、バグがあったり使い勝手が悪かったりと問題はあるので注意してください。ツールはこちらよりダウンロードすることができます。
試しにスケールを変更するアニメーションを作成してみます。フレームを「0:0.01」に合わせて「Scale」を選択した状態でダブルタップすると「New Keyframe…」というウィンドウが開くので選択します。
次に「0:2.00」にキーフレームを挿入して右側のウィンドウにあるx、y、zを「2」に設定します。このアニメーションを適用したオブジェクトは2秒かけてスケールが1から2に変化することになります。
「File」ボタンから作成したアニメーションを出力することができます。MacBookでは画面サイズが小さすぎてボタンが表示できないと思いますので、ウィンドウを上に拡大してみてください。
３．４ アニメーションの不具合！？
カメラの位置が変わらなければGUIを使わない場合でも同様の表現をすることができるわけですが、コレクションに直接追加したゲームオブジェクトに対して下記のフェードアウトアニメーションコードを実行すると、点滅しながらフェードアウトする現象が発生しました。
上記のアニメーションコードをGUIに適用すると点滅することなく綺麗にフェードアウトしたため、通常のゲームオブジェクトのα値を変更することは許容していないのかもしれません。PC上および実機上ともに同様の動作でした。
４．シーンを切り替える
Defoldにもシーンを切り替える機能があります。Defoldではシーンのことをコレクションと呼んでいるのですが、このコレクションを切り替えるためにコレクションプロキシを利用しなければなりません。コレクションプロキシを利用すると、メッセージ送信をするだけでコレクションを動的にロードおよびアンロードすることができます。
４．１ コレクションの準備
コレクションを切り替えるためには、予め切り替えたいコレクションを作成しておく必要があります。ここでは「main.collection（コレクションの切り替えを制御）」、「splash.collection（スプラッシュを表示）」、「title.collection（タイトルを表示）」の３つのコレクションを作成しています。
今回は、splash.collectionの内容が終了した後にtitle.collectionへコレクションを切り替える内容を作成していくため、それぞれのコレクションの内容を作っておきます。splash.collectionは下図のように、GUIを利用してゲーム画面を作りコレクションに配置しました。この時、コレクションに名前を付けることができるのですが、この名前が他のコレクションと被ってしまうと正常にコレクション遷移ができません。title.collectionも同様にGUIでゲーム画面を作成しました。
main.collection → Name : collection_main
splash.collection → Name : collection_splash
titile.collection → Name : collection_title
４．２ コレクションプロキシの準備
作成した「main.collection」を開き、Outlineウィンドウに「loader」ゲームオブジェクトを作成し、その下の階層に２つの「Collection Proxy」を作成します。
コレクションプロキシを選択すると「ID」と「Collection」項目が設定できます。「ID」は他のコレクションプロキシと被らないように設定しておきます。「Collection」には遷移させたいコレクションファイルを選択しておきます。
４．３ コレクションロードスクリプト作成
コレクションロードスクリプトは他のスクリプトからコレクション遷移のメッセージを受取り、実際に遷移のメッセージをコレクションプロキシへ送る役割をします。
「collectionLoader.script」には下記のようなコードを記述しました。ゲーム開始時に「collectionproxy_splash」へコレクション読み込み命令を出しているため、「splash.collection」の内容が読み込まれ処理が走ります。この時「load」をメッセージとして送信すると、コレクションの読み込みが完了した時にプロキシが「proxy_loaded」を送信してくるため、「on_message」にて「proxy_loaded」が受信できています。
４．４ GUIスクリプト作成
ゲーム起動時のスプラッシュ画像はフェードインさせたかったため、「プロパティアニメーション」を利用しています。ちなみにこのアニメーションにはコールバックを設定することができるので、再生終了後に次のコレクションへの遷移コードも記述できます。アニメーションチェーンを使ったコーディングができないので辛いですが、コールバックを駆使すれば同様のことは実現できます。下記の内容は「splash.collection」に配置したGUIに割り当てたスクリプト「splash.gui_script」に記述しました。
５．実行結果
６．まとめ
今回はDefoldのGUIエディタを使ってゲーム画面を作成してみました。GUIエディタを利用することで画面を作るのが非常に便利になりましたが、現在のバージョンではゲームオブジェクトに対してGUI上からアニメーションを付けられないのが残念でした。
本記事では紹介しませんでしたが、Defoldにはコレクション遷移のメッセージのようにメッセージを送ることで実行できる機能が多々あります。例えばデバッグ機能として「Visual Profiler」が下記のスクリプトで起動できます。
