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

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

github.dev7.jp

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

• (2018/3/28 Blenderで、Subdivideする前に頂点をマージすると、形が崩れることがあったので、手順を逆にしました)
• (2018/3/28 MagicaVoxelでOBJファイルをエクスポートする前に、Saveする手順を追加しました。これをやらないとエクスポートできないことがあったための対応)
• (2018/3/27 BlenderでEdit 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をクリックします

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

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

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

エクスポートボタン

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

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

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

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

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

• エクスプローラーを起動します

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

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

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

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

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

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

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

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

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

objを読み込む

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

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

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

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

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

テクスチャーを表示

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

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

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

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

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

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

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

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

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

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

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

• 画面下のPivotボタンをクリックして、3D Cursorに変更します

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

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

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

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

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

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

メッシュの編集

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

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

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

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

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

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

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

Remove Doubles

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

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

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

親子にする

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

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

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

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

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

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

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

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

UnityにFBXをインポート

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

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

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

インポートの設定

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

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

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

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

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

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

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

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

Rigの設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

アニメーションさせる

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

参考URL

• MagicaVoxelで作ったプリキュアをUnityで動かす | daishi blog
• hiroshi harada. Blender入門(2.7版)
• MagicaVoxel | daishi blog
• UNITY-CHAN! OFFICIAL WEBSITE

ライセンス

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

MagicaVoxel 0.99.1 のインストール

ドット絵の3D版を作れるエディターMagicaVoxelのインストール手順です。

目次

前提

• MagicaVoxel 0.99.1についてです
• OSはWindows10、WebブラウザーはChromeを利用しています

ダウンロード

• WebブラウザーでMagicaVoxelを開きます

• OSに応じた最新のものをダウンロードします
  • 通常はwin64でよいはずです。動かなかったらwin32を試してください

インストール

• ダウンロードが完了したら、ファイルをクリックして開きます

• エクスプローラーを開きます

• インストール先を開きます。特に決まっていない場合はドキュメントフォルダーにToolsなどのフォルダーを作成して、その中などでよいでしょう

• 先ほど開いたMagicaVoxelのフォルダーをドラッグして、展開先(例えばドキュメントフォルダー内に新規で作成したToolsフォルダー)にドロップして、展開します

起動しやすいように、デスクトップにショートカットを作成しておきましょう（スタートにピンでもよいです）。

• 展開したフォルダーをダブルクリックして開きます

• MagicaVoxelの実行ファイルを右クリックして、送る -> デスクトップ(ショートカットを作成)を選びます

以上で完了です。好みに応じて、ショートカット名をMagicaVoxelなどに整理しておくのもよいでしょう。

ダウンロードしたzipファイルは不要なので、削除して構いません。

起動

デスクトップのMagicaVoxelアイコンをダブルクリックすれば起動します。

参考URL

以下、公式サイトや学習資料です。色々と作ってみてください。

• MagicaVoxel
  • 公式サイトです
• MagicaVoxel 0.98 : Brush and Edit - YouTube
  • 公式チュートリアル動画です
• 【MagicaVoxel】お絵描き初心者でも簡単な３Dドット絵 - 使い方 - - 藍と淡々
  • パネルの説明などです