tanaka's Programming Memo

プログラミングについてのメモ。

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

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

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

(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にして、プロジェクトを作成します。

f:id:am1tanaka:20180503133350p:plain

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

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

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

f:id:am1tanaka:20180503133729p:plain

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

f:id:am1tanaka:20180503133850p:plain

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

f:id:am1tanaka:20180428174102p:plain

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

f:id:am1tanaka:20180428174707p:plain

動作確認

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

f:id:am1tanaka:20180503134135p:plain

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_startlevel_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_startlevel_completeの情報が追加されます。

f:id:am1tanaka:20180503150243p:plain

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

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

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

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

Funnelを作成する

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

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

f:id:am1tanaka:20180503144051p:plain

f:id:am1tanaka:20180510155850p:plain

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

f:id:am1tanaka:20180503144227p:plain

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

f:id:am1tanaka:20180503150457p:plain

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

f:id:am1tanaka:20180503150737p:plain

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

f:id:am1tanaka:20180503151116p:plain

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

f:id:am1tanaka:20180503151249p:plain

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

f:id:am1tanaka:20180503151338p:plain

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

f:id:am1tanaka:20180503151531p:plain

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

f:id:am1tanaka:20180503151611p:plain

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

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

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

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

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

f:id:am1tanaka:20180510162454p:plain

f:id:am1tanaka:20180510162537p:plain

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

f:id:am1tanaka:20180510163025p:plain

  • level_start1以上、level_complete5以上を設定して、保存します。

f:id:am1tanaka:20180510163547p:plain

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

分析の前に

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

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

結果を確認する

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

Funnelを確認する

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

f:id:am1tanaka:20180510160439p:plain

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

f:id:am1tanaka:20180510160645p:plain

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

Event Managerを確認する

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

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

f:id:am1tanaka:20180510161330p:plain

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

f:id:am1tanaka:20180510161516p:plain

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

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

f:id:am1tanaka:20180511221642p:plain

こちらでは、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

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

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

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

目次

  • 目次
  • 前提
  • 必要なリポジトリーをクローンする
    • はじめの一回
    • 上記の作業をすでにやっていたら
  • 最新のJSONファイルを作成
  • Tern用のデータを作成する
  • まとめ
  • 関連URL
  • 備忘録
    • エラーの調査方法
    • 作業時のコツ
    • 誤記の修正(Phaser-CE)

前提

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

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

はじめの一回

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

  • LXTerminalなどのターミナルを起動します
  • 作業フォルダーに移動します。例えば、ユーザーフォルダーのphaser3-projectsというフォルダーなら以下の通り
cd ~/phaser3-projects
  • 以下で、phaser3phaser3-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
  • ファイルのパース(解析)が始まるので、終わるまで待ってください。以下のような画面になれば完了です。

f:id:am1tanaka:20180410170520p:plain

仮想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ファイルを右クリック -> コピーなどでコピーします

f:id:am1tanaka:20180410171425p:plain

f:id:am1tanaka:20180410171611p:plain

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

f:id:am1tanaka:20180410171816p:plain

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

f:id:am1tanaka:20180410171913p:plain

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

f:id:am1tanaka:20180410172100p:plain

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

  • LXTerminalなどのターミナルを起動して、Phaserのプロジェクトフォルダーへ移動します
  • 以下で、node_modules/tern-phaser/generator/nodeフォルダーへ移動します
cd node_modules/tern-phaser/generator/node
  • 以下を実行すると、Tern用のファイルが生成されます。
node ./make_plugin.js

f:id:am1tanaka:20180410175503p:plain

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

まとめ

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

関連URL


備忘録

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

続きを読む

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フォルダー)
  • AtomEditメニューから、Preferencesを選択して、Settingsタブを開きます
  • Installをクリックして、検索欄にatom-ternjsと入力して検索します
  • atom-ternjsの欄にInstallボタンがあれば押して、インストールの完了を待ちます
  • SettingsやUninstallボタンが表示されれば完了です(最初からこの状態になっていたら、インストール済みなので、作業不要です)

f:id:am1tanaka:20180410134023p:plain

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

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

  • LXTerminalを起動します
  • 以下で、フォルダーを移動します
cd ~/phaser3-project-template
  • npm install(あるいやyarn install)を実行していなかったら、以下で実行します
npm install

あるいは

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

ternの設定ファイルを作成

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

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

f:id:am1tanaka:20180410152643p:plain

Ternを設定します。

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

f:id:am1tanaka:20180410151749p:plain

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

f:id:am1tanaka:20180410154528p:plain

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

f:id:am1tanaka:20180410152845p:plain

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

f:id:am1tanaka:20180410153332p:plain

  • 以下のように、11行目付近に"plugins"の属性に"phaser"を加えます
{
  "ecmaVersion": 6,
  "libs": [
    "browser"
  ],
  "loadEagerly": [],
  "dontLoad": [
    "node_module/**"
  ],
  "plugins": {
    "phaser": {},
    "doc_comment": true
    }
  }
}
  • 上書き保存します
  • index.jsなどのJavaScriptファイルを開きます
  • Packagesメニューから、Atom Ternjs -> Restart serverを選択します

f:id:am1tanaka:20180410153706p:plain

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

f:id:am1tanaka:20180410155007p:plain

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

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

まとめ

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

参考・関連URL

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

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

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

参考URL

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

f:id:am1tanaka:20180403235541p:plain

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になっています。

f:id:am1tanaka:20180304174229p:plain

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

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

f:id:am1tanaka:20180304174738p:plain

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

f:id:am1tanaka:20180304174855p:plain

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

f:id:am1tanaka:20180304174941p:plain

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

f:id:am1tanaka:20180304175455p:plain

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

f:id:am1tanaka:20180304175708p:plain

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

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

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

f:id:am1tanaka:20180403232336g:plain

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

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

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

f:id:am1tanaka:20180403233247p:plain

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

f:id:am1tanaka:20180403233323p:plain

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

f:id:am1tanaka:20180403233407p:plain

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

f:id:am1tanaka:20180403233556g:plain

まとめ

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

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

参考URL

MagicaVoxelにアニメーションを設定してUnityで動かす(obj版)

github.dev7.jp

上記のだいし様の記事に、操作に慣れていない人向けの補足を加えた記事です。BlenderやUnityが使える場合は元の記事で十分だと思います。

  • (2018/3/28 Blenderで、Subdivideする前に頂点をマージすると、形が崩れることがあったので、手順を逆にしました)
  • (2018/3/28 MagicaVoxelでOBJファイルをエクスポートする前に、Saveする手順を追加しました。これをやらないとエクスポートできないことがあったための対応)
  • (2018/3/27 BlenderEdit Modeにしてモデルを選択する前に、Outlinerで一度キャラクターを選んでおかないとアーマチュアが選択されてしまうので、手順を追加)

目次

前提

  • Unity2017.3.1
  • MagicaVoxel 0.99.1
  • Blender2.79a
  • Windowsのフォルダー操作や構造が理解できていること
  • Unityの基本操作ができること

MagicaVoxelへの素体の読み込み方法

"素体をベースにプリキュアモデリング"の"準備"にある"MagicaVoxelをインストールし、素体をインポートしましょう"の具体的な手順です。

必要なファイルのダウンロード

MagicaVoxelで作ったプリキュアをUnityで動かす | daishi blogの"素材配布"のところで、"MagicaVoxel用素体"(base.vox)と"素体用アーマチュア"(BaseArmature.blend)をダウンロードしてください。

MagicaVoxelに素体をインポート

  • MagicaVoxelを起動します
  • ウィンドウ右上のOpenをクリックします

f:id:am1tanaka:20180325165807p:plain

  • ダウンロードフォルダーを開いて、base.voxを選択して、開くボタンをクリックします

f:id:am1tanaka:20180325165913p:plain

以上で素体、と呼ばれるひな形が読み込まれます。

MagicaVoxelで作ったプリキュアをUnityで動かす | daishi blogに戻って、続きを進めてください。

エクスポートボタン

エクスポート前に、Saveをクリックして、任意の場所にvoxファイルを保存しておきます。これをやらないと、エクスポートに失敗する場合があります。

f:id:am1tanaka:20180328135854p:plain

"Blenderプリキュアにボーンを入れる"の"objで出力"の補足です。"obj"ボタンは右下のExportをクリックすると表示されます。

f:id:am1tanaka:20180325170622p:plain

保存先のフォルダーへのパスを表示してコピーしておくと後々便利です。

  • 上のアドレスバーの余白をクリックします

f:id:am1tanaka:20180325174553p:plain

  • パスの文字列が表示されるので、[Ctrl]+[C]キーを押してコピーします

f:id:am1tanaka:20180325174831p:plain

f:id:am1tanaka:20180325144105p:plain

  • 上のアドレスバーの余白をクリックします

f:id:am1tanaka:20180325175017p:plain

  • [Ctrl]+[V]キーを押して先ほどコピーしたパスを張り付けて、[Enter]キーを押します

f:id:am1tanaka:20180325175101p:plain

以上で、保存先のフォルダーを開いておけます。このエクスプローラーは開きっぱなしにしておいて、BlenderやUnityの作業でファイルが必要になったら利用しましょう。

素体用アーマチュアを読み込む

アーマチュアBlenderの読み込み方です。

  • Blenderを起動します
  • 先ほど開いたエクスプローラーに切り替えて、左からダウンロードを右クリックして、新しいウィンドウで開くを選択します

f:id:am1tanaka:20180325175631p:plain

  • BaseArmature.blendをドラッグして、Blenderにドロップします

f:id:am1tanaka:20180325175838p:plain

Blenderを起動したら、エクスプローラーを開いて、ダウンロードフォルダーから先ほどダウンロードしたBaseArmature.blendをBlenderにドラッグ&ドロップします。

以下のようなものが読み込まれればOKです。

f:id:am1tanaka:20180325180257p:plain

objを読み込む

パスの指定方法を補足します。元のブログの通りにFile -> Import -> Wavefront (.obj)を開いた後のパス指定です。

  • 先に開いていたMagicaVoxelの保存先のエクスプローラーに切り替えます
  • パスの余白部分をクリックして選択します

f:id:am1tanaka:20180325180806p:plain

  • [Ctrl]+[C]キーを押してパスをコピーします
  • Blenderに切り替えて、C:\Users\とある欄をクリックして選択します

f:id:am1tanaka:20180325180901p:plain

  • [Ctrl]+[V]キーを押して、先ほどコピーしたパスを貼り付けて、[Enter]キーを押します
  • MagicaVoxelで保存したキャラクターファイルが表示されるので、.objの方のファイルを選択して、Import OBJボタンをクリックします

f:id:am1tanaka:20180325181026p:plain

以下のように巨大ですがキャラが読み込まれればOKです。

f:id:am1tanaka:20180325181318p:plain

テクスチャーを表示

灰色のままでもいいのですが、色付きにしたい場合は、中央下あたりにある以下のボタンをクリックして、Textureを選択します。

f:id:am1tanaka:20180325181708p:plain

アーマチュアにキャラクターのサイズを合わせる

"拡大縮小&移動でモデルをアーマチュアのサイズ・位置に合わせます。"としか書かれていないので、具体的な操作手順です。

キャラクターの見え方を調整する

Blenderの基本操作はこちら(hiroshi harada. Blender入門(2.7版))にあります。

  • [Home]キーを押して、キャラクターがちょうどよいサイズと場所に表示します

f:id:am1tanaka:20180325182819p:plain

  • 右のOutliner画面でキャラクターをクリックして選択します(以下の例ではmychr)

f:id:am1tanaka:20180327212838p:plain

  • [Tab]キーを押して、Edit Modeに変更します

f:id:am1tanaka:20180325183309p:plain

  • 先にOutlinerでキャラクターを選んでおいたので、キャラクターがオレンジ色になって選択されているはずです。もし、以下のようになっていなければ、[A]キーを押して、すべての頂点を選択してください

f:id:am1tanaka:20180325184647p:plain

  • [Shift]+[C]キーを押して、3D Cursorを原点に移動しておきます

    • Blenderでは、左クリックで3D Cursorを移動させるというちょっと信じられないキーアサインのため、気付かないうちに3D Cursorが違う場所になっていることがあります。とりあえず操作する前に3D Cursorの位置を調整しておきましょう
  • 画面下のPivotボタンをクリックして、3D Cursorに変更します

    • Pivotとは基準点のことで、3D Cursorにすることで、足元に赤と白の円で示された3D Cursorを中心に変形が行われるようになり、調整がしやすくなります

f:id:am1tanaka:20180325183607p:plain

  • [S]キーを押すと、拡大・縮小モードになります。マウスを動かしてキャラクターを縮小させて、アーマチュアとちょうどよいサイズになるように調整します。大きさを決めたらクリックで決定します

f:id:am1tanaka:20180325185047p:plain

  • 小さすぎて細かいところがわからないので、[Home]キーを押して拡大します

f:id:am1tanaka:20180325185205p:plain

  • 再調整が必要そうであれば、また[S]キーを押して拡大・縮小モードにして、マウス操作で修正してクリックで確定します

f:id:am1tanaka:20180325185300p:plain

専用のアーマチュアなので、正面で設定ができれば他の角度もOKになるはずです。マウスのホイールをドラッグして、マウスを動かすと視点を回すことができます。いろいろな方向から見て、アーマチュアがキャラクターにちゃんと入っていることを確認してください。

f:id:am1tanaka:20180325185554p:plain

もしずれていたら、3D Cursorのところに表示されている矢印をドラッグして動かすと、矢印が示す軸方向に移動させることができます。

f:id:am1tanaka:20180325185838p:plain

メッシュの編集

関節を入れたい位置に頂点を追加するなどしていい感じに編集

キャラクターの関節が曲がるには、曲がる場所に頂点が必要です。素体を見ると、腕などが棒になっていて、これでは曲げることができません。

f:id:am1tanaka:20180325190333p:plain

そこで、曲がるように頂点を増やしてあげます。真面目にやるなら、ループナイフなどで必要な場所に必要な数の切り込みを入れるのですが、ここではブログと同じくSubdivideでざっくりと分割してしまいます。

すべての頂点が選択されている状態で操作を続けます。

  • ウィンドウ左上の方にあるToolタブをクリックして、下にスクロールさせるとAdd:グループにSubdivideがありますのでクリックします

f:id:am1tanaka:20180325190756p:plain

  • 1回押すごとに、半分の場所に切り込みが入ります。2回やればとりあえずよいでしょう

f:id:am1tanaka:20180325190849p:plain

これで、腕が4つに分割されたので、曲げることができるようになりました。

Remove Doubles

MagicaVoxelが作成するモデルは、隣り合う立方体の頂点が個別になっていて、このままだとうまくアーマチュアが入らない場合があります。Remove Doublesコマンドで、同じ場所にある頂点を統合します。

Remove Doublesコマンドは、ウィンドウ左上の方にあるToolタブをクリックして、下にスクロールさせると見つかります。

f:id:am1tanaka:20180325185959p:plain

全ての頂点が選択されている状態で、Remove Doublesボタンをクリックしてください。特に変化はありませんが、重なっている頂点が統合されます。

親子にする

アーマチュアとキャラクターを親子にします。これは、オブジェクトモードで行います。

  • [Tab]キーを押して、Objectモードに切り替えます

f:id:am1tanaka:20180325191433p:plain

  • ウィンドウ右の階層で、キャラクターをクリックして選択します

f:id:am1tanaka:20180325191509p:plain

  • [Shift]キーを押しながら、armatureをクリックします

f:id:am1tanaka:20180325191620p:plain

  • Objectメニューをクリックして開いたら、Parent -> With Automatic Weightsを選択します

f:id:am1tanaka:20180325192048p:plain

  • Set Parent Toのダイアログが表示されたら、With Automatic Weightsを選択します

f:id:am1tanaka:20180325192132p:plain

以上でキャラクターのメッシュにアーマチュアが適用されます。右上の階層を見ると、armatureにキャラクターが統合されていることが確認できます。

f:id:am1tanaka:20180325192302p:plain

元記事の手順に従って、FBXファイルでエクスポートしてください。

UnityにFBXをインポート

Unityを起動して、インポートしたいプロジェクトを開いておきます。ない場合は、新規にプロジェクトを作成してください。

  • Blenderで保存したフォルダーを開きます
  • 保存したFBXファイルを、UnityのProjectビューにドラッグ&ドロップします

f:id:am1tanaka:20180326110634p:plain

  • Projectビューにモデルが読み込まれます。これをHierarchyビューにドラッグ&ドロップすると、モデルがシーンに表示されます

f:id:am1tanaka:20180326110814p:plain

f:id:am1tanaka:20180326110911p:plain

インポートの設定

最初の状態だとアニメーションが適用されず、色も着いていません。いくらかの設定をします。

  • Projectビューに読み込んだモデルをクリックして選択します

f:id:am1tanaka:20180326111228p:plain

不要なオブジェクトを削除

キャラクター単体を読み込みたい場合、カメラやライトなどの情報は不要です。以下の設定をしておくと問題が起きにくいです。

  • Inspectorビューにモデルの読み込み設定があるので、まずはModelをクリックして選択します
  • Import Visibility, Import Cameras, Import Lightsのチェックを外して、可視性、カメラ、ライトの読み込みを解除します

f:id:am1tanaka:20180326112430p:plain

3Dツールの方でそれらの制御をしている場合はチェックはそのままにしておいてください。

Unityにモデルを持ってくると、大きさが全然違うことがよくあります。その場合は、上記のScale Factorで調整してください。

  • 設定を完了したら、下の方のApplyをクリックします

f:id:am1tanaka:20180326112817p:plain

Rigの設定

アニメーションできるように設定します。

  • InspectorビューでRigをクリックします
  • Animation TypeHumanoidに変更します

f:id:am1tanaka:20180326113003p:plain

  • Applyボタンをクリックします

これで、モデルを操作するためのRigが設定されました。以下のようにConfigure...ボタンの左にチェックが入れば成功です。

f:id:am1tanaka:20180326113114p:plain

マテリアルとテクスチャーの設定

この状態では色が反映されていません。モデルからマテリアルを生成して、そこにMagicaVoxelのモデルが持っていたPNGをテクスチャーとして読み込んで反映させる必要があります。

  • InspectorビューでMaterialsをクリックします
  • MaterialsExtract Materials...をクリックします

f:id:am1tanaka:20180326113349p:plain

  • マテリアルの展開先を指定します。Materialsフォルダーがあれば、そこを選択してフォルダーの選択ボタンをクリックします。フォルダーがない場合は、新しいフォルダーで作成して、指定するとよいでしょう

f:id:am1tanaka:20180326113539p:plain

これで、ProjectビューのMaterialsフォルダー内に、paletteという名前のマテリアルが作成されます。これがこのモデルのマテリアルです。

まだ真っ白のままです。テクスチャーで着色されているので、テクスチャーも必要です。これはMagicaVoxelで保存したobjファイルと同じ場所にあります。

  • 先に開いておいたエクスプローラーに切り替えます
  • PNGファイルをドラッグして、UnityのProjectビューの何もない部分にドロップします

f:id:am1tanaka:20180326123125p:plain

これで、Unityからこの画像を使えるようになりました。あとはマテリアルに設定します。

  • ProjectビューからMaterialsフォルダーの左の三角をクリックして開いて、paletteをクリックして選択します

f:id:am1tanaka:20180326114154p:plain

  • Projectビューに読み込んだPNGファイル(この例ではmychr)をドラッグして、InspectorビューのAlbedoの左の四角欄にドロップします

f:id:am1tanaka:20180326114313p:plain

以上で、キャラクターの読み込み完了です。

f:id:am1tanaka:20180326114339p:plain

アニメーションさせる

ここからは追加の情報です。アニメーションさせるまでの手順です。

適用したいアニメーションデータがあれば読み込んでください。以下、SDユニティちゃんのモーションを適用する例です。SDユニティちゃんはこちらからダウンロードできます。

(DATA DOWNLOAD -> 一番下のライセンス同意のチェック -> データをダウンロードする -> SDユニティちゃん 3Dモデルデータ -> Download ver1.xx。以上でダウンロードしたunitypackageをダブルクリックして、Importします)

  • Hierarchyビューで、読み込んだキャラクターを選択します

f:id:am1tanaka:20180326115055p:plain

  • Projectビューで、UnityChan -> SD_unitychan -> Animationsのフォルダーを開きます

f:id:am1tanaka:20180326115746p:plain

  • SD_unitychan_motion_humanoidのアニメーションデータをドラッグして、InspectorビューのController欄にドロップします

f:id:am1tanaka:20180326115917p:plain

実行すると、SDユニティーちゃんの立ちポーズになります。

f:id:am1tanaka:20180326120015p:plain

他のアニメーションも確認できるようにしましょう。実行を停止してから以下の操作をしてください。

  • Projectビューで、UnityChan -> Scriptsフォルダーを開きます

f:id:am1tanaka:20180326121308p:plain

  • ProjectビューからIdleChangerスクリプトをドラッグして、Hierarchyビューのキャラクターにドロップします

f:id:am1tanaka:20180326123659p:plain

以上で、アニメーションを切り替えるボタンが表示されるようになります。実行してみてください。

f:id:am1tanaka:20180326121547p:plain

実行するとGameビューの右上にChange Motionと表示されます。NextBackをクリックすると、用意されているアニメーションが切り替わりますので、いろいろなポーズを確認してみてください。

まとめ

MagicaVoxelを使うと味わいのあるキャラクターをドットを置く感覚で作れます。

今回はキャラクターを作りましたが、MagicaVoxelはステージ作成に使うこともできます。Voxelのキーワードで検索すれば、様々な例をインターネットで見つけることができますので、表現方法の一つとしてご活用ください。

参考URL

ライセンス

ユニティちゃんライセンス

アニメーションのポーズはSDユニティちゃんのものです。SDユニティちゃんはユニティちゃんライセンス条項の元に提供されています