Mesh Bakerを使ってみた(LODについて追記)

シーン内の別々のゲームオブジェクトで構成されるメッシュを、マテリアルやシェーダーごとに合体、あるいは、マテリアルも合体させて、ドローコールを減らして高速化してくれるという人気アセットMesh Bakerを使ってみました。

紹介に先立って補足

Mesh Bakerを利用して効果があるのは、多くのマテリアルやシェーダーをバラバラに使っているオブジェクトで構成したシーンです。同じマテリアルを使ったシーンの場合は、Mesh Bakerを利用するメリットは少ない可能性があります。

また、Mesh Baker LODは、事前に用意したポリゴン数を減らしたモデルをこちらで用意して、それを切り替えてくれるというものです。自動的にポリゴン数の削減をやってくれる訳ではないのでご注意ください。これは、Unity謹製のLOD Groupも同様です。

条件に合致した上で、自前でポリゴン数を減らしたモデルを用意すれば、かなりの効果が期待できます。

(2018/5/17追記)

目次

利用したシーン

体験講義用に作成したUNetのマルチ対戦的プロジェクトに適用してみました。立方体や、ProBuilderの円柱、階段などを使ってステージを作ったので形はシンプルなのですが、思いのほか色々と置いてしまったのでそれなりに重そうなステージになっていました。

Mesh Baker適用前はこんな感じでした。

黄緑の足場をMesh Bakerで合体させます。ただし、1つに統合するとカリングなどで不利になるので、適当なグリッドで分割します。

Mesh Bakerでメッシュを統合する

Asset Storeで購入して、通常通りダウンロード＆インポートしました。セール中に購入したので$45.5で買えました^^

チュートリアルを見る

動画チュートリアルが用意されていたので、以下の２つを見ました。

www.youtube.com

www.youtube.com

ゲームオブジェクトを準備する

Mesh Bakerを使ってメッシュを統合するには、TextureBakerオブジェクトをシーンに配置します。対象のプロジェクトを開いて、Asset StoreからMesh Bakerをダウンロード＆インポートしてから作業してください。

• GameObjectメニューから、Create Other -> Mesh Baker -> TextureBakerを選択します

以上で、HierarchyビューにTextureBaker(0)というオブジェクトが生成されます。これを使って、メッシュの選択やマテリアルの結合、Mesh Bakerオブジェクトの作成などを行います。

オブジェクトを選択する

くっつける対象のゲームオブジェクトを選択します。最初のチュートリアルでは、メッシュを持ったゲームオブジェクトを一つずつドラッグ＆ドロップしていますが、このシーンのメッシュは階層構造になっている上に200を越えるオブジェクトがあるのでやってられません。そこで、Adding Objectsツールを利用します。

• HierarchyビューのTextureBaker(0)をクリックして選択します

• InspectorビューからOpen Tools For Adding Objectボタンをクリックします

• ダイアログが開くので、Search For Meshes To Addボタンをクリックします

• Hierarchyビューで、統合したいゲームオブジェクトを選択しておきます

• MB3_MeshBakerダイアログで、追加するオブジェクトの条件を設定します。今回は以下のようにしました。
  • Staticなオブジェクトにする
  • Enableなオブジェクトにする
  • UVが範囲外のオブジェクトもあるので、それは除外しません
  • すでに追加済みのオブジェクトは除外します

• 以上設定したら、Add Selected Meshes To Targetボタンをクリックします

以上で選択完了です。Inspectorビューで、Object To Be Combinedの左の三角アイコンをクリックして開いてみてください。条件にあったオブジェクトが選択されているはずです。

結合マテリアルとBakerオブジェクトの生成

次に、結合したマテリアルやシェーダーと、Bakeを行うためのオブジェクトを生成します。

• Analyse Scene & Generate Bakersボタンをクリックします

• グループ分けする基準があれば設定します。今回はデフォルトのままにしました
• 結合マテリアルを保存する先のフォルダーを指定するために、Select Folder For Combined Material Assetsボタンをクリックします

• Assetsフォルダーから、必要なら新しくフォルダーを作成して、フォルダーを選択します

• List Shaders In Sceneボタンをクリックします

指定したグループ分けの基準に沿って、シーン内のシェーダーとマテリアルがグループ化されます。

• リストアップされたGenerate Bakerボタンをクリックしていって、統合マテリアルとBakerオブジェクトを生成します

HierarchyビューにはBakerオブジェクトが、Projectビューの保存先として指定したフォルダーにはマテリアルとシェーダーが生成されます。

統合メッシュを生成する準備が整いました。

Adding Objectツールは役目を終えたので閉じて構いません。

クラスター分割する

このまま生成すると、シーン全体がまとめられてしまいます。ドローコールは減るかも知れませんが、カリングが効かなくなるので描画ポリゴン数が増えてしまう恐れがあります。適切なサイズに分割して生成するようにします。

• HierarchyビューのMeshBaker-Standard-LM-1の左の三角をクリックして開きます

• 子供のMeshBakerは、まとめてオブジェクトを生成するためのものなので、分割する場合は不要です。選択して削除します

• HierarchyビューのMeshBaker-Standard-LM-1をクリックして選択し直します

• InspectorビューからCluster Type欄を見つけて、Agglomerativeに変更します

• 今回のシーンは大きいので、Max Distanceを最大の10にしておきます

• InspectorビューのBake Materials Into Combined Materialボタンをクリックして、マテリアルを再生成しておきます

• Click To Build Clustersボタンをクリックします

エラーが発生しましたが、とりあえず動いたので気にせず進めました。

• Generate Mesh Bakersボタンをクリックして、Bakerを生成します

これで、MeshBakerが自動的に判断したエリアに分割してくれました。

統合したメッシュオブジェクトを生成する

統合したメッシュオブジェクトを生成します。

• InspectorビューのBake All Child MeshBakersボタンをクリックします

Hierarchyビューに、分割されたメッシュオブジェクトが生成されました。

他にもオブジェクトがあれば、同様の手順で生成していきます。

仕上げ

元のオブジェクトを削除したり、当たり判定を入れたりして仕上げます。

元のオブジェクトを消す

元のオブジェクトをDisableにするだけであれば、HierarchyビューからTextureBaker(0)を選択して、InspectorビューでDisable Renderers On All Child MeshBaker Source Objsボタンをクリックすれば、自動的に該当するオブジェクトを無効にしてくれます。

完全に不要な場合は、Hierarchyビューから削除してもよいでしょう。

関連オブジェクトの削除

役目が終わったら、TextureBaker(0)なども消して構いません。

当たり判定の設定

元のオブジェクトを削除してしまったので、当たり判定も消えてしまいました。Mesh Colliderを追加して、当たり判定を復活させます。

• Hierarchyビューの検索ボックスに-mesh-と入力すると、統合したメッシュオブジェクトが表示されるので、すべて選択します

• InspectorビューでAdd Componentをクリックして、Physics -> Mesh Colliderを追加します

Staticオブジェクトにしたいので、その設定をします。

• Hierarchyビューの検索ボックスにCombinedMesh-と入力すると、統合メッシュオブジェクトの親が表示されるので、すべて選択します

• InspectorビューのStaticにチェックを入れます

• 子供もすべてstaticにしたいので、Yesをクリックします

以上で完了です。Hierarchyがそのままだと使いづらいので、検索ボックスのxをクリックして検索を解除しておきましょう。

成果

以上で完了です。成果を確認してみます。

もともとマテリアル一つだったので、ドローコールは変化ない模様。Saved by batchingは667から0になってます。

効果的ではなかろうかというのはShadow castersの数で、607から33に激減。

しかし、ポリゴン数が増えちゃいました。

上空ビューも似たような傾向で、Shadow castersが激減してます。

ポリゴン数が増えたことによってパフォーマンスは相殺されて、ほとんど差が分からなかった、というのが今回の結果でした^^;

まとめ

オブジェクトを統合することで、Shadow castersを大幅に減らすことに成功しました。しかし、オブジェクトを統合したことで描画対象のポリゴン数がうまく減らず、パフォーマンスの向上は微妙でした。

本来は、沢山マテリアルやシェーダーがあるシーンで、それらを統合してドローコールを減らすのが目的の機能なので、マテリアルをそれほど使ってないシーンだと効果はあったりなかったりでした。

しかし弾は残っています。Mesh Bakerの追加アセットMesh Baker LODも入手しています。これはLOD(Level Of Detail=距離に応じてモデルのポリゴン数を切り替える機能)をやってくれるやつで、まさにポリゴン数を減らしてくれるやつです。これと組み合わせた時に真価を発揮するに違いないと期待しています。

参考URL

Unity Analyticsを利用する(GDPRについてリンクを追加)

ずっとやろうやろうと思っていて放置していたUnity Analytics(アナリティクス)をようやく組み込んでみました。簡単に手順をまとめました。

EUのプライバシーポリシー強化への対応に伴い、Unity Blogにアドバイスが掲載されました。Unity AdsやAnalyticsをご利用の際は念のため、以下をご確認ください。

• Unity Ads、Unity Analyticsを利用する開発者・パブリッシャー向けGDPR関連情報 – Unity Blog
• EU 一般データ保護規則（GDPR）について | EU - 欧州 - 国・地域別に見る - ジェトロ

(2018/5/24追記)

目次

対象環境

• Unity2018.1.0f2 / 2017.4.x / 2017.3.xで確認

Unity Analyticsとは

公式マニュアルで気になった部分のみ抜粋です。

Unity Analyticsを設定するだけで、月間アクティブユーザー(MAU)、日別アクティブユーザー(DAU)、そして新規ユーザー数を確認することができます。Unity AdsやIAPサービスを利用していれば、それらの統計データも確認できます。 プレイヤーがゲーム内でどのような行動をしたかを知るために、プレイヤーが動作を行った際にStandard Analytics Eventを発生させることで、Analyticsのデータに含めることができます。これにより、チュートリアルを確認したか、IAPストアを訪れたか、想定したようにプレイヤーが上達しているかなどを知る手掛かりが得られます。 また、アプリのアップデートをせずに、Remoteセッティングを使うことでプレイヤーに適したゲーム拡張を配信することができます。

ざっくりと、アプリをリリースした後に、どのようなユーザーに利用されているのか、用意したチュートリアルなどが読まれたか、ゲームをどこまで進めたのかなどの情報を収集することができるUnity Cloudのサービスの一つということです。

コアデータ

Unity Servicesの設定でAnalyticsを有効にするだけで、以下のデータを自動的に収集することができます。

• 新しくインストールされた数
• 日間アクティブユーザー数
• 月間アクティブユーザー数
• 合計セッション
• ユーザーあたりのセッション数
• アプリで遊んでいた時間
• 国やプラットフォーム

Player behaviour data(プレイヤーの行動データ)

プレイヤーの行動を把握するには、AnalyticsEventを利用します。どのシーンを開いたかや、ステージをクリアしたり重要アイテムを取得したユーザーがどれぐらいいるかを調査して、ゲームがどのぐらい遊ばれたか、どの辺でユーザーが脱落しているかを把握することができます。

また、ゲームを開始した時に起動してから何回目のゲーム開始かや、ゲームオーバー時のレベル、ゲームオーバーの原因、スコアなどをカスタムイベントで送信することで、より詳細な情報を得ることができます。

その他

他にもあれこれ機能がありますが、今回の目的はPlayer behaviour dataで解決できるので省きますが、Remote Settingsは気になっています。Analyticsダッシュボードからゲーム内の設定値を変更することができる機能で、アプリを公開した後でこの値を変更すれば、プログラムの更新なしでバランス調整ができるようです。 作成した様々なRemote Settingsをエディター内でゲームオブジェクトに割り当てることができるそうです。

以下のように活用できそうです。いずれ調べよう。

• ゲームバランスの調整
• 機能の有効/無効設定
• 画面のテーマを変更する

Analyticsを有効にする

新規プロジェクトで有効にする

新規プロジェクトでAnalyticsを有効にするには、ログインした上で、プロジェクト作成時にEnable Unity Analytics欄をONにして、プロジェクトを作成します。

既存のプロジェクトで有効にする

開発済みのプロジェクトに組み込む手順です。

• クラウドボタンをクリックして、Servicesタブを表示します
• 以下のような画面が表示されたら、ユーザーを選択して、Createボタンをクリックして、UnityCloudにプロジェクトを作成します

• Unity Cloudにプロジェクトを作成していたら、以下のメニューが表示されるので、AnalyticsのスイッチをクリックしてONにします

• ANALYTICSのDiscover player insightsを有効にして、Enable Analyticsボタンをクリックします

• Designation for Apps Directed to Children Under the Age of 13欄は、13歳未満の子供が使っても大丈夫なアプリならチェックを入れて、Continueをクリックします
• COPPA compiance changedと表示されたらAnalyticsの有効化成功です。COPPA...の表示はxをクリックして閉じて構いません

動作確認

• UnityをPlayします。数秒すると、Servicesタブに以下のようにAnalyticsデータが表示されます

deviceInfoで起動したデバイスの情報、appInstallとappStartにはインストールされたプラットフォームとUnityのバージョンが表示されています。このデータは、1日後ぐらいにUnity Cloud上で集計されて、ダッシュボードでも確認できるようになります。これだけでも、例えばiPhone向けに配信したアプリがどのiPhoneにどのぐらいインストールされたかや、利用されているAndroid端末の傾向などを把握することができるので有益だと思います。

プレイヤーがどこまでゲームを進めたのかを把握する

Unity Analyticsの機能の一つに、Level Progression(レベルの進み方)があります。どのぐらいのユーザーが、どのレベル(チュートリアルの画面やゲームのステージ)まで進めたかを把握するためのものです。これを利用すれば、ユーザーがチュートリアルを利用しているかや、チュートリアルのどこかで脱落していないか。あるいはユーザーが一気に脱落するステージはないか。また、ステージが進んでいるということは、その端末でゲームが動作している確認もできます。

これをやるためには、ゲームが進んだことをAnalyticsイベントで送信します。staticメソッドを呼び出すだけですのでとても簡単です。

レベルの開始と完了を送信する

ステージ開始時と完了時にステージ数を送信して、プレイヤーがどこまでゲームを進めたかを把握できるようにしてみます。AnalyticsEventというクラスがProgression(進み方)を送信するための以下のようなstaticメソッドを提供しています。

イベント名	概要
game_start	新規にゲームを開始
game_over	ゲームオーバーになった
level_start	レベルを始めた
level_complete	レベルをクリアした
level_fail	レベルをクリアできなかった
level_quit	レベルをクリアせずに抜けた
level_skip	過去のレベルをスキップした
level_up	ランクが上がったり、RPGなどでレベルアップした

知りたいパラメーターを渡して、上記のいずれかのイベントを呼び出せばUnity Cloudに情報が送信されて記録されます。

※これらのメソッドは、送信されるイベントの名前が上記のようになるというだけで、どれを使わなくてはならない！というものではありません。それらしいやつを選んでください。

実装

Level Progressionには、level_startとlevel_completeを利用するのがセオリーのようです。ステージ開始時にlevel_startを、クリア時にlevel_completeを送信するように実装します。現在のステージ数が変数nowLevelに格納されているものとします。

• イベントを送信するコードの先頭で、以下を定義します

using UnityEngine.Analytics;
// 2017.3より前のバージョンの場合は、using UnityEngine.Analytics.Experimental;

• ステージ開始時に、以下を呼び出します。

        AnalyticsEvent.LevelStart(nowLevel);

• ステージクリア時に、以下を呼び出します。

        AnalyticsEvent.LevelComplete(nowLevel);

LevelStart()メソッドとLevelComplete()メソッドは、どちらも引数としてint型かstring型を最低1つ受け取り、開始するステージ数やステージ名を渡します。また、Dictionary<string, object>()で追加のパラメーターを作成して、2番目以降の引数で渡すことで、独自のパラメーターを送信することもできます。

上記を実装したらUnityでPlayして、レベルの開始とクリアを実行してください。デバッグキーを仕込んだり、ボタンで試すと楽です。

実行してから数秒待つと、Servicesタブにlevel_startとlevel_completeの情報が追加されます。

これでプログラムは完了です。とても簡単です。次に、このデータを分析するためのFunnelを作ります。

プレイヤーの進み方を確認するFunnelの作成

Unity Analyticsはデータの送信は簡単なのですが、分析方法にクセがあります。Servicesタブに表示されるようなデータが得られればExcelなどで分析すればよいのですが、生データを得るにはProライセンスが必要です。Proライセンスを持っていない場合は、用意されている分析ツールを利用します。

プレイヤーが何をしたかを確認するにはFunnel Analyzerを利用します。

Funnelを作成する

Unity Cloudのダッシュボードを開きます

• Servicesタブの右上のGo to Dashboardをクリックします

• Webブラウザーが起動して、ダッシュボードが開いたら、GO TO ANALYTICSをクリックします

• 画面左からAnalyticsの下のFunnel Analyzerをクリックします

• 進み具合を知るには、Level Progressionのテンプレートを利用するが楽なのでクリックします

• 確認したいイベントであるlevel_startとlevel_completeが設定済みになっています

• 確認したいレベル数を設定します。特にルールはないので、自分が把握しておきたいというレベル数を入力しておきます。例えば20ステージまで把握したいなら、Num Levelsを20にして次へをクリックします

• 以下のように、テンプレートに従ってファネルが設定されます

• 一番下まで見ると、level_startのlevel_indexが20のものと、level_completeの同様の設定を確認できます。1～20ステージの開始と完了が設定できているということです

• 問題がなければ保存をクリックして確定します

以下のメッセージが表示されれば完了です。このダイアログのxをクリックして閉じて構いません。

あるレベル以上までクリアできているかを確認したい場合のファネル

Level Progressionは、あるシナリオに沿ってプレイヤーが進めているかを確認するのが目的の機能のようです。そのため、設定と異なる順番で送られてきたレベルについては無視されてしまいます。

また、Unity Analyticsは送信されてくるイベントの記録がかなり遅いようで、頻繁にレベルアップするようなゲームの場合、実際に送信した順番と、Unity Analyticsが受け取る順番が前後してしまうことがあるようなのです。

あるレベルまで到達したかを確実に把握するには、先の設定は適さない可能性があります。そこで、特定の基準となるレベルまで到達したかを別のファネルを作成して確認するようにしました。

• ファネル分析画面の右上の作成するファネルの右の▼をクリックします

• Level Progressionを選択します

• Funnel Nameや説明を適宜設定して、レベル数は1で次へをクリックします

• level_startは1以上、level_completeは5以上を設定して、保存します。

送られてくるレベル数が多少前後しても、確実に目的のレベルを超えたかを確認しようという狙いの設定です。

分析の前に

では、いざ分析！と行きたいところですが、Unity Analyticsではファネルを作成したり、イベントデータを送信してからダッシュボードに反映されるまでに、1日程度かかります。

プロジェクトをビルドして、色々なデバイスやWebGLからイベントを送信したら、一日寝かせてください。Unity AnalyticsはスマホやWebGLなど、多様なプラットフォーム上で動きますので、この機会にあれこれビルドして実行するのもよいでしょう。

結果を確認する

一日経過したらデータを確認してみましょう。

Funnelを確認する

Funnelを作成した時と同じ要領で、AnalyticsタブのGo to Dashboardをクリックしてダッシュボードを開き、GO TO ANALYTICSをクリックして、AnalyticsのFunnel Analyzerを開きます。

• Level Progressionをクリックします

分析が終了していると、以下のようなグラフが表示されます。これを見ると、一人遊んでいて、レベル2まで完了した、ということが分かります。

しかし、実際にはもっと上のレベルまでクリアデータは送信してありました。これは失敗例です^^;

Event Managerを確認する

本当に送られてきたデータが信用できるかは、Event Managerで送信されてきたイベントデータを見ることで確認できます。

• 画面左のメニューからEvent Managerをクリックします

• 下にスクロースしてカスタムイベント欄を表示させたら、確認したいイベントをクリックして開きます。例えば、level_completeをクリックして、さらにlevel_index Aをクリックします

確認すると15レベルまでクリアデータがあるので、先のファネルでは目的の情報が記録できていなかったということが分かりました。

では、もう一方のレベル5までクリアできているかを確認するファネルに切り替えましょう。

こちらでは、level_complete > 5に値が入っているので、ちゃんとレベル5がクリアできているかが確認できました。この辺りの運用には注意が必要そうです。

Analyticsを利用する上での注意点

Analyticsを利用する上で気付いた注意点です。

• Unity AnalyticsでのStandardイベントやカスタムイベントの送信回数は、ユーザーごとに1時間あたり100回までに制限されています。1時間以内に100回以上のイベントを送信すると、101回目以降のデータは破棄されます
• 2017.3以前のUnityでStandardイベントを利用する場合は、事前にアセットストアからStandard Events SDKをダウンロードしてインポートする必要があります
  • 自分はUnity2017.3やUnity2018.1を利用したので、アセットのインポートは不要でした。
• Level Progressionは、想定した順番でレベルがクリアされたかどうかを判定する機能のようです。Analyticsに反映される前に次のレベルクリアの情報が送られてしまうと、実際にはクリアしているのにそのように集計されないので注意が必要です

調べきれていないので、もっとよい方法があるかも知れませんが、現状ではこんな感じでした。

まとめ

なんとなく敬遠していたAnalytics機能でしたが、使ってみるとめちゃくちゃ簡単に使えました。一方で、データの活用方法はちょっとクセがあって注意が必要そうでした。

今回は到達レベルのみでしたが、カスタムパラメーターを利用すれば、ゲームオーバー時の状況を送信したり、エラー報告を送信したり、フレームレートを送信して想定した速度で動作しているかを把握するなど様々な活用ができます。

ちゃんと運用するなら、生データがダウンロードできて、プレイヤーの移動軌跡を表すヒートマップも使えるProライセンスは強いなと思いました。

最後に。配布するアプリで利用する場合は、どのようなデータを送信するかを明示してユーザーの同意を得ておいた方がよいだろうと思います。

参考URL

• Unity Analytics - Unity マニュアル
• カスタムイベント（Custom Event）のご紹介 - Unity
• Unity Ads、Unity Analyticsを利用する開発者・パブリッシャー向けGDPR関連情報 – Unity Blog
• EU 一般データ保護規則（GDPR）について | EU - 欧州 - 国・地域別に見る - ジェトロ

Phaser3の最新版のTern設定ファイルを作成する

AtomでPhaserのコード補完をする設定をこちらに書きました。Phaser3はまだリリースされたばかりで、ドキュメントが全部揃っていなかったり、機能が抜けていたり、仕様が変化しています。

ドキュメントもすぐに新しいものが出てくる状況なので、更新をセルフサービスでできるように手順をまとめておきます。

目次

前提

• Lubuntu16.04での操作を前提としています。他のOSの場合は、適宜読み替えてください
• 事前にこちら( AtomでPhaser3のコード補完をする - tanaka's Programming Memo )を完了させておいてください

必要なリポジトリーをクローンする

ドキュメントの作成に必要な以下の２つのリポジトリーの最新版を入手します。

• 最新のPhaser3のプロジェクト https://github.com/photonstorm/phaser
• Phaser3のドキュメント生成プロジェクト https://github.com/photonstorm/phaser3-docs

はじめの一回

はじめて作業する時は、リポジトリーのクローンをします。すでに一度クローンしていたらこちらに進んでください。

• LXTerminalなどのターミナルを起動します
• 作業フォルダーに移動します。例えば、ユーザーフォルダーのphaser3-projectsというフォルダーなら以下の通り

cd ~/phaser3-projects

• 以下で、phaser3とphaser3-docsのリポジトリーをクローンします

git clone git@github.com:photonstorm/phaser.git
git clone git@github.com:photonstorm/phaser3-docs.git

以上で完了です。JSONのファイルを作成に進んでください。

上記の作業をすでにやっていたら

新しくリリースされたバージョンに対応させたい場合は、以下の手順になります。

• はじめの時と同様、LXterminalなどを開いて、作業用フォルダーへ移動します
• 以下を実行します

cd phaser
git pull origin master
cd ..
cd phaser3-docs
git pull origin master

以上で、phaserとphaser3-docsが最新の状態になります。

これらのプロジェクトはこちらでは変更しないので、ここでは問答無用でプルをしてます。もし開発しているプロジェクトだった場合は、手順を踏んで更新してください。

最新のJSONファイルを作成

最新版のPhaser3のJSDocから、Ternの設定ファイルの元となるJSONファイルを作成します。

• LXTerminalなどのターミナルで、phaser3-docsフォルダーに移動します
• 以下を実行します

npm run json

• ファイルのパース(解析)が始まるので、終わるまで待ってください。以下のような画面になれば完了です。

仮想PCのLubuntuで20秒ちょっとでした。PCの性能次第ですが、1分程度待つつもりでいれば完了するでしょう。

Tern用のデータを作成する

作成されたファイルは、json/phaser.jsonとして保存されます。これを、Phaserのプロジェクトのnode_modules/tern-phaser/generator/data/jsdoc-ast.jsonにコピーします。

• phaser3-docsフォルダーで以下のコマンドで、jsonフォルダーをファイルマネージャーで開くことができます

pcmanfm json

• phaser.jsonファイルを右クリック -> コピーなどでコピーします

• ホームフォルダーをクリックしたら、Phaserのプロジェクトを開きます

• node_modules -> tern-phaser -> generator -> dataフォルダーをダブルクリックで開いていきます
• [Ctrl]+[V]キーなどで、先ほどコピーしておいたphaser.jsonをデータフォルダー内に貼り付けます

• jsdoc-ast.jsonを選択して、[Delete]キーなどで削除します

• phaser.jsonを右クリック -> ファイル名の変更を選んで、jsdoc-ast.jsonにファイル名を変更したら[Enter]キーを押して確定します

ここからはターミナルでの作業です。予め、こちらの記事に従ってPhaserのプロジェクトに対して、AtomでPhaserのコード補完が動くようにしておいてください。

• LXTerminalなどのターミナルを起動して、Phaserのプロジェクトフォルダーへ移動します
• 以下で、node_modules/tern-phaser/generator/nodeフォルダーへ移動します

cd node_modules/tern-phaser/generator/node

• 以下を実行すると、Tern用のファイルが生成されます。

node ./make_plugin.js

これで完了です。PhaserのプロジェクトをAtomで開いて、Packagesメニューから、Atom Ternjs -> Restart serverを実行すれば、最新版の情報でコード補完ができるようになります。

まとめ

Phaserは活発に開発されるため、頻繁に仕様変更やドキュメントの追加が行われます。こちらの情報が古いな、と思ったら、自分で更新してみてください。

関連URL

• AtomでPhaser3のコード補完をする - tanaka's Programming Memo
• GitHub - angelozerr/tern-phaser: A Tern plugin for Phaser
  • tern-phaserのリポジトリー
• Phaser CE Index
  • Phaser-CEのAPI
• atom-ternjs
  • AtomでTernjsを使うためのプラグイン。Third Partyのプラグインを利用するときの修正箇所がある
• javascript - Getting JSDoc output in JSON format - Stack Overflow
  • jsdocをjson形式にする方法

---

備忘録

以下、調査や以前の情報についての自分用のメモです。

AtomでPhaser3のコード補完をする

HTML5ゲームエンジンPhaser3のコード補完をAtomに組み込む手順をご紹介します。

(バージョンの変更に伴い、以前の同様のドキュメントは削除しました。)

目次

前提

• Lubuntu16.04上での手順です。他のOSの場合は適宜読み替えてください
• Atom( https://atom.io/ ), node, npm(あるいはyarn), gitがインストールされていること
• Atom, gitが最低限使えること
• Phaser3のプロジェクトフォルダーが作られていること
  • ない場合は、任意のフォルダーで、git clone git@github.com:photonstorm/phaser3-projet-template.gitを実行して、公式のテンプレートをクローンするとよいでしょう

gitコマンドで警告が出る場合...

Git - 最初のGitの構成を参考に、gitの設定にユーザー名とメールアドレスを登録してください。

AtomをTernに対応させる

まずは、AtomにTernjsの機能をインストールします。この作業は一度Atom上で実行していれば、それ以降は不要です。

• AtomでPhaserのプロジェクトフォルダーを開きます(公式テンプレートなら~/phaser3-projet-templateフォルダー)
• AtomのEditメニューから、Preferencesを選択して、Settingsタブを開きます
• Installをクリックして、検索欄にatom-ternjsと入力して検索します
• atom-ternjsの欄にInstallボタンがあれば押して、インストールの完了を待ちます
• SettingsやUninstallボタンが表示されれば完了です(最初からこの状態になっていたら、インストール済みなので、作業不要です)

プロジェクトにPhaser用のternデータを読み込む

ターミナル(LXTerminalなど)で作業します。ここでは、Phaserのプロジェクトをphaser3-project-templateとして説明するので、別のプロジェクトだった場合は読み替えてください。

• LXTerminalを起動します
• 以下で、フォルダーを移動します

cd ~/phaser3-project-template

• npm install(あるいやyarn install)を実行していなかったら、以下で実行します

npm install

あるいは

yarn install

• Phaser用のternツールをクローンします。オリジナルであるGitHub - angelozerr/tern-phaser: A Tern plugin for Phaserのリポジトリーをフォークして、Phaser3のJSDocを処理するための変更をしたものです

git clone git@github.com:am1tanaka/tern-phaser.git node_modules/tern-phaser

ternの設定ファイルを作成

ternを有効にするために、設定ファイルを作成します。この作業はAtomで行います。TernはJavaScriptのファイルを開いている時のみ動作するので、まずはなんでもよいのでJavaScriptのファイルを開きます。

• Atomに切り替えたら、srcフォルダーを開いて、index.jsを開きます(.jsファイルなら何でも構いません)

Ternを設定します。

• Packagesメニューから、Atom Ternjs -> Configure projectを選択します

• 設定ファイルが開くので、libs欄のbrowserにチェックを入れます

• 他にも、jQueryやUnderscoreなどを利用する場合は、それぞれの欄にチェックを入れると、それらについても補完できるようになります。よく分からなければ次に進んで構いません
• 一番下のSave & Restart Serverボタンをクリックします

以上で、プロジェクトフォルダー内に.tern-projectというファイルが出来上がります。それを開きます。

• 以下のように、11行目付近に"plugins"の属性に"phaser"を加えます

{
  "ecmaVersion": 6,
  "libs": [
    "browser"
  ],
  "loadEagerly": [],
  "dontLoad": [
    "node_module/**"
  ],
  "plugins": {
    "phaser": {},
    "doc_comment": true
    }
  }
}

• 上書き保存します
• index.jsなどのJavaScriptファイルを開きます
• Packagesメニューから、Atom Ternjs -> Restart serverを選択します

これで設定完了です。試しに、Phaser.と入力してみてください。以下のように、Phaserオブジェクトのメンバーが表示されるようになりました。

表示されない場合は、Atomを起動し直してみてください。

以上で完了です。Visual Studioなどの高機能補完に比べると精度が低いですが、長いメンバー名を入力しなくて済むのは助かります。

まとめ

AtomでPhaserの補完機能が動くように設定しました。これで入力が随分楽になるはずです。ゲーム作りを楽しみましょう！

参考・関連URL

• Tern
• https://atom.io/packages/atom-ternjs
• JavaScriptの静的解析によりコード補完やクロスリファレンスを実現するatom-ternjsの紹介 - Qiita
• オリジナルのtern-phaser GitHub - angelozerr/tern-phaser: A Tern plugin for Phaser
• 改造版 GitHub - am1tanaka/tern-phaser: A Tern plugin for Phaser
• GitHub - am1tanaka/10k-gamedev: 1万円(+インターネット)ではじめるゲーム開発用リポジトリー
• Git - 最初のGitの構成

TernのJSON型定義ファイルのメモ

TernはJavaScriptの構造を解析して、オートコンプリートなどをしてくれるツールです。Phaserの最新版のTern用データを生成する際にエラーが発生して、解決策を知るために定義ファイルの仕様を確認したくなりました。これは、公式ドキュメントのTern Reference Manualを読んだメモです。

Ternは現在、開発が止まってしまっていて、Issuesが積み重なってしまっています。しかし、今のところ他の選択肢が見つかっていないので、できるところまではこれでやろうと考えています。クレジットカードがあれば、AWSのアカウントを取得してCloud9を利用する方がよいかも知れません。

目次

JSON type definitions

概要

Ternは、ソースコードを解析せずに型の特定するためのJSONデータフォーマットを持ちます。

型定義ファイルは、Objectのツリー構造をしています。最上位のオブジェクトがグローバルな変数を定義して、オブジェクトの型を定義するプロパティーをネストさせます。頭に!が付いているプロパティーは特殊な定義(Special directives)で、それ以外のものは通常の変数やプロパティー名の定義です。

例

以下、例です。

{
  "!name": "mylibrary",
  "!define": {
    "point": {
      "x": "number",
      "y": "number"
    }
  },
  "MyConstructor": {
    "!type": "fn(arg: string)",
    "staticFunction": "fn() -> bool",
    "prototype": {
      "property": "[number]",
      "clone": "fn() -> +MyConstructor",
      "getPoint": "fn(i: number) -> point"
    }
  },
  "someOtherGlobal": "string"
}

この定義にはグローバルな関数と変数が定義されています。MyConstructorはコンストラクター関数を持ち、someOtherGlobalは文字列を持ちます。型や変数、プロパティーのoriginはmylibraryであり、!nameプロパティーで定義されています。

文字列による定義

変数やプロパティーの値は文字列とオブジェクトのいずれで持つこともできます。文字列では以下が利用できます。

• number, string, booleanの組み込み型
• fn(arg1: type1, arg2: type2) -> rettypeという関数型。-> rettypeは省略可能
• [type]という配列型

文字列では、グローバルスコープにおけるパスでの指定(Date.prototype)や、+を頭に書いたコンストラクターのインスタンス(+Date)を使うこともできます。

オブジェクトによる定義

オブジェクトによる型定義は、プロパティーを列挙して行います。デフォルトでは「単なるObjectのインスタンス」として型定義されますが、!typeプロパティーを使うと、例のMyConstructorのように関数や配列の型を作ることができます。あるいは、!protoプロパティーを使って、カスタムのプロトタイプをオブジェクトに与えることもできます。

例：

"!proto": Element.prototype

ドキュメント

!docを使って、短文ドキュメントをアタッチできます。詳細ドキュメントについては、!urlで文書があるURLを指定するとよいでしょう。

関数の注釈(Annotation)

関数は注釈を表示することができます。defs/ecmascript.jsonから!effectsを探すと例を見ることができます。同様に、関数型の文字列は戻り値を表すことができます。!0は最初の引数型、!Nは(N-1)番目の引数、!thisは呼び出しの自己型、!retは関数の戻り値の型を返します。

参考URL

• Tern Reference Manual

Lubuntuで環境構築のシェルを作ったメモ

Lubuntuで、Phaserをやるのに必要な最低限の環境を構築するためのシェルスクリプトを作りました。作業中なのでドキュメントも中途半端ですがこちら。

今後もメンテナンスをしないといけないものなので、調べたことを片っ端から備忘録としてまとめておきます。

目次

文字に色をつける

エラーや完了メッセージを目立たせるために、赤の太字と緑の太字の設定をしました。

RED="\e[31;40;1m"
GREEN="\e[32;40;1m"
COLEND="\e[m"

echo -e "${RED}赤字${COLEND}普通の文字${GREEN}緑字${COLEND}普通の文字"

といった感じ。\e[で指定を開始して、3xで文字色、4xで背景色、最後の1が太字です。こちらを参考にしました↓

シェル - echoで文字に色をつける その1 - Miuran Business Systems

時間の出力

現在時間を、年-月-日 時:分:秒の形式で出力する例です。

now=$(date "+%Y-%m-%d %H:%M:%S")

echo "${now}"

apt-get updateのタイムアウトを防ぐ

apt-get updateは並列にリクエストを発行するのですが、ネットワークが弱いなどの環境ではタイムアウトになりやすくなります。そこで、以下の設定をして同期処理にすることでエラーの発生を減らします。

設定開始

if [ -f /etc/apt/apt.conf.d/75download ] ; then
  sudo mv -u /etc/apt/apt.conf.d/75download /etc/apt.conf.d/75download.bk
fi
echo 'Acquire::Queue-Mode "access";' | sudo tee /etc/apt/apt.conf.d/75download

これで、/etc/apt/apt.conf.d/75downloadがあれば、最後に.bkを付けてバックアップをした後に、同期処理にするための設定を同ファイルに行います。

こちらを参考にしました↓

apticronのタイムアウトを防ぐ – 備忘録 for myself in the future

設定解除

元の環境に戻しておくために、以下の関数を定義して、終了時に呼び出すようにしておきます。

function fin
{
  sudo rm -f /etc/apt/apt.conf.d/75download
  if [ -f /etc/apt/apt.conf.d/75download.bk ] ; then
    sudo mv /etc/apt/apt.conf.d/75download.bk /etc/apt/apt.conf.d/75download
  fi
}

この関数を呼び出す時は、通常であればfinとすればOKです。関数内から呼び出す時は、$(fin)とします。

エラー中断

処理がエラーだった時に、エラーメッセージを画面とログファイルに出力して、シェルを中断する処理です。以下のような関数を定義します。

function abort
{
  echo -e "${now} ${RED}$@:エラーが発生しました。ネットワーク環境を確認して、再度実行してみてください。何度やってもこのエラーが出続ける場合は、このフォルダー内のinstall-gdev.logを添付して開発者に連絡してください。${COLEND}" |& tee -a install-gdev.log
  $(fin)
  exit 1
}

以下のような呼び出し方で使います。

command ||  abort "コメント"

||を使うと、commandがエラーコードを返すと、||以降の処理を実行します。

参考にしたのはこちら↓

bashでちょっと高度なシェルスクリプトを書くときの Tips - ぴょぴょぴょ？ - Linuxとかプログラミングの覚え書き -

bash: 標準出力、標準エラー出力をファイル、画面それぞれに出力する方法 - Qiita

Atomを起動しようとしたら「許可がありません」と言われた

~/.atomフォルダーのパーミッションが自分になっていないからのようです。以下、参考ブログです。

Atomで「Uncaught Error: EACCES: permission denied」が表示されたので解決する | Ystk Log 【ヨシタカログ】

以下で治りました。

sudo chown -R $(whoami) ~/.atom

インストールされていない時のみ処理

バージョンの確認やヘルプなどの害のない(?)処理を実行して、エラーが発生していたら未インストールなので、インストールの処理をするという方法です。例えばnodeの場合は以下の通りです。

node -v &> /dev/null
if [ $? -ne 0 ] ; then
  インストール作業
fi

昔、自分で記事書いてました。

Linux(やmacで)のbashでインストール済みか確認する方法 - tanaka's Programming Memo

-vが使えないコマンド(http-server)や、実行ファイルがどこにあるのかよく分からないツール(Chrome)などあるので、インストール後、ちゃんとそのコマンドが動くか確認する必要があります。

未解決のこと

Google Chromeをapt-getでインストールすると、余計な設定が残るようで、それ以降にapt-get updateでワーニングが表示されるようになります。エラー箇所をコメントアウトするようなのですが、この辺気持ち悪いので、よりよい方法があれば差し替えます。

Atomもよくタイムアウトでエラーが発生しましたが、aptを同期設定にしたら今のところエラーは出ていません。

参考URL

• シェル - echoで文字に色をつける その1 - Miuran Business Systems
• Atomで「Uncaught Error: EACCES: permission denied」が表示されたので解決する | Ystk Log 【ヨシタカログ】
• シェルスクリプトで関数を利用する - Qiita
• シェルスクリプトでエラー時の処理を行う方法 - Qiita
• bashでちょっと高度なシェルスクリプトを書くときの Tips - ぴょぴょぴょ？ - Linuxとかプログラミングの覚え書き -
• bash: 標準出力、標準エラー出力をファイル、画面それぞれに出力する方法 - Qiita
• apticronのタイムアウトを防ぐ – 備忘録 for myself in the future
• Linux(やmacで)のbashでインストール済みか確認する方法 - tanaka's Programming Memo

2D Game Kit：ゲームオーバーになったらタイトルへ戻す

Unity公式からリリースされた（迷路探索系の）2Dゲームをコーディングなしで作れる2D Game Kitですが、ゲームオーバーになってもタイトル画面に戻すことができません。一度ゲームを始めたら、Ellenを強制的に出現させようとするためです。

「ゲームオーバーになったらタイトルに戻して、最初からプレイし直しにしたい！」

ということ、改造してみました。

目次

手順

やることは以下の通りです。

• ゲーム以外のシーンに移行させるメソッドを追加します
• ゲームオーバー後にタイトルシーンへ戻します
• タイトル画面のSTARTイベントを再設定
• ゲームオーバー画面の調整

ゲーム以外のシーンに移行させるメソッドの追加

SceneController.csをエディターで開いて、SceneControllerクラスに以下の2つのメソッドを追加します。

        public static void TransitionToOutOfGameScene(String sceneName)
        {
            Instance.StartCoroutine(Instance.TransitionToOutOfGame(sceneName));
        }

        protected IEnumerator TransitionToOutOfGame(string sceneName)
        {
            m_Transitioning = true;
            PersistentDataManager.SaveAllData();

            if (m_PlayerInput != null)
                m_PlayerInput.ReleaseControl(true);
            yield return StartCoroutine(ScreenFader.FadeSceneOut(ScreenFader.FadeType.Loading));
            PersistentDataManager.ClearPersisters();
            yield return SceneManager.LoadSceneAsync(sceneName);
            PersistentDataManager.LoadAllData();
            m_PlayerInput = null;
            yield return StartCoroutine(ScreenFader.FadeSceneIn());

            m_Transitioning = false;
        }

このメソッドは、既存のシーン切り替え用のメソッドTransition()からEllenの入力を再開したりする処理を削除して、シーンの切り替えをSceneManager.LoadSceneAsync()で行うように変更したものです。

ゲームオーバー後にタイトルシーンへ戻す

ミスした時、デフォルトの挙動ではLifeが残っているとチェックポイントに戻されて、Lifeが無くなるとゲームオーバーと表示された後にゾーンの最初からゲームが再開します。これを、Lifeが無くなった時はゲームオーバーと表示した後にタイトルシーンに切り替えるようにします。

ついでに、ゲームオーバーシーンではBGMを消す機能も付けました。この辺りは、ゲームオーバー用のジングルを流すなど改造してもよいですね。

• PlayerCharacter.csをエディターで開きます
• DieRespawnCoroutine()メソッドを探して、以下のように書き換えます

        IEnumerator DieRespawnCoroutine(bool resetHealth, bool useCheckPoint)
        {
            PlayerInput.Instance.ReleaseControl(true);
            if (!useCheckPoint)
            {
                BackgroundMusicPlayer.Instance.Mute(1f);
            }
            yield return new WaitForSeconds(1.0f); //wait one second before respawing
            yield return StartCoroutine(ScreenFader.FadeSceneOut(useCheckPoint ? ScreenFader.FadeType.Black : ScreenFader.FadeType.GameOver));
            if (!useCheckPoint)
            {
                yield return new WaitForSeconds(2f);
                yield return ScreenFader.FadeSceneIn();
                SceneController.TransitionToOutOfGameScene("Start");
            }
            else
            {
                Respawn(resetHealth, useCheckPoint);
                yield return new WaitForEndOfFrame();
                yield return StartCoroutine(ScreenFader.FadeSceneIn());
                PlayerInput.Instance.GainControl();
            }
        }

以上でPlayしてゲームオーバーになるとタイトルシーンへ遷移するようになります。しかし、STARTボタンをクリックしてもゲームが開始しません。これを直します。

タイトル画面のSTARTイベントを再設定

ゲームオーバーになってから表示されるタイトル画面で、STARTボタンのOn Clickイベントを見てみるとMissingになっています。

SceneControllerオブジェクトのTransitionStartメソッドを呼び出すように設定されているのですが、ゲームシーンからタイトルシーンに戻ってくる時にMissingになってしまいます。これを解決するために、SceneControllerWrapper.csスクリプトが用意されています。これを同じシーン内のオブジェクトにアタッチしておけば、そのオブジェクトからSceneControllerのメソッドを呼び出すことができます。

• HierarchyビューからStartMenuCanvasを選択します
• InspectorビューからAdd Componentボタンをクリックして、SceneControllerWrapperを検索してアタッチします

• HierarchyビューのStartMenuCanvas -> MenuBackgroundを開いて、その中のStartButtonを選択します

• HierarchyビューのStartMenuCanvasをドラッグして、InspectorビューのOn Click()欄左下にドロップします

• ドロップした右上のコンボボックスがNo Functionに変わるのでクリックして、SceneControllerWrapper -> TransitionToScene (TransitionPoint)を選択します

以上で、新しく表示される欄にTransitionStart (TransitionPoint)と表示されれば完了です。表示されなかった場合は、HierarchyビューからTransitionStartオブジェクトをこの欄にドラッグ＆ドロップしてください。

Playしたら、ゲームオーバーにして、再スタートしてみてください。今度はちゃんとゲームが最初から始まります。

ゲームオーバー画面の調整

処理はできましたが、ゲームオーバーの表示のあと、一度ゲーム画面が表示されてから読み込みが表示されて、不自然な感じがします。

この辺りの遷移をいじるのは面倒なので、背景の黒塗りを消して不自然さを消すことで対応しました。

フェード画面はScreenFaderオブジェクトにまとめられています。ゲームオーバーの黒塗りパーツを無効にします。

• HierarchyビューからScreenFader -> GameOverCanvasを開きます

• Imageをクリックして選択したら、[Shift]キーを押しながらBlackBarを選択します

• Inspectorビューの左上のチェックを外して無効にします

以上で完了です。これなら不自然さはないように思いますがどうでしょう。

まとめ

シーンを遷移させる処理を追加したり、ゲームオーバー時の処理を改造したり、イベントの呼び出しを変えることで、2D Game Kitでタイトルに戻すことができるようになりました。タイトル画面に戻せれば、スコアを実装してランキングに対応させることもできるので、タイムやスコアを競うゲームも作れるようになります。

また、タイトルに限らず、エンディングやイベントシーンへも移行できるので、表現の幅が広がると思います。ご活用いただければ幸いです。

参考URL

• Unity - 2D Game Kit