tanaka's Programming Memo

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

NavMeshAgentでよい感じにキャラクターを歩かせる

qiita.com

Unityゆるふわサマーアドベントカレンダー 2018の21日目の記事です!

前日は @tsukumaru さんの「Loom Unity SDKのサンプルを動かしてみる」でした。

次は @Nitudon さんの「ShaderGraphを使って頂点シェーダーで遊ぶ」の予定です。


NavMesh(ナビメッシュ)は、障害物を回避して、目的地に到着するルートを探索してくれる素晴らしい機能です。NavMeshAgent(ナビメッシュエージェント)コンポーネントを使えば簡単に作成したルートに沿って移動させるキャラクターが作れます。他のエージェントとの衝突や、動く障害物への対応もできます。しかし、そのまま使うとキャラクターの動き方がイマイチ。ということで、歩き方を変えるスクリプトを公開したのでご紹介します。

  • 2018/8/20 他のエージェントを回避しないことについて追記しました

目次

目的

NavMeshAgentをデフォルトのまま利用した例です。

キャラクターが振り返る時に、ぬる~っと方向が変わって不自然です。また移動が加速方式なので、正反対に目的地を変更すると、ぬるぬるっとスピードが落ちてから移動方向が反転します。歩いている感じがしません。そこで以下のように調整しました。

  • 目指す方向が一定の角度以上の場合は、その場でくるっと方向転換してから歩き始めるようにする
  • 一定の角度以内の場合は、歩きながら一定の角速度以内で旋回
  • キャラクターは向いている方向に定速で歩く

動きの比較

比較のため、改良版とNavMeshAgent版を並べてみました。

改良版 NavMeshAgent版
改良版 NavMeshAgent版

改良版は少し動きが硬いですが、歩いている感じはばっちりだと思います。

こちらにライブデモを用意しました。マウスで指している辺りにユニティちゃんが歩いていきます。

利用方法

こちらに、組み込み用パッケージとサンプルのリポジトリーを公開しました。私が作成したものはMIT License、SDユニティちゃんはユニティちゃんライセンスです。

どのように実装したか

この記事ではどのように実装したかをご紹介します。

方針

移動ルートはNavMeshAgentSetDestinationで目的地を設定すれば自動的に探索してくれます。ルートが完成したら、曲がる座標が配列で得られるので、CharacterControllerを使って自前で動かします。以下のように、NavMeshAgentの移動関連のパラメータはすべて0にして、NavMeshAgentが移動に関与しないようにしました。

ルートの生成

NavMeshが持っているCalculatePathメソッドでもルートを求めることはできるのですが、ブロック関数なので探索中は画面が固まる可能性があることが分かりました(AI.NavMesh-CalculatePath - Unity スクリプトリファレンス)。非同期に経路を探索するにはNavMeshAgentSetDestinationを使えということだったので、NavMeshAgentを利用することにしました。

NavMeshAgentでルートを探索するには、SetDestination()で目的地座標を設定します。

            // agentにNavMeshAgentのインスタンスが設定されていて、
            // posに目的地が入っているとします
            agent.SetDestination(pos);

設定直後はルートは出来ていません。pathPendingプロパティがtrueの間はルート探索中なので、ルートは取得できないので、キャラクターは静止しておきます。

ルートの利用

pathPendingfalseになったらキャラクターを動かします。ルートはVector3型の配列agent.path.corners[]で得ることができます。この配列の0番に次に曲がる座標、1番に次に曲がる座標が入っています。キャラクターを移動させると、通過した座標は自動的に削除されます。

鋭角に曲がる場所では、ほとんど同じ座標にコーナーが続く場合があります。常にagent.path.corners[0]だけを目的地として動かすと、カクカクした動きになったので、1回分の移動距離を越える座標までスキップする処理を加えました。

微調整

agent.path.corners[]で得られる座標をそのまま目指してしまうと、キャラクターがロボみたいなカクカクした動きになってしまいます。通過点を滑らかに繋ぐルートをベジェ曲線などで算出する方法もありますが、今回はシンプルに旋回+前進させることでカクカク軽減を狙いました。

目的地の方向をmokutekiとすると、以下でキャラクターが向いている方向と、目指したい方向の角度が求まります。

float angle = Vector3.SignedAngle(transform.forward, mokuteki, Vector3.up);

この値を元にして、角度がキツければその場を旋回、大丈夫なら規定の角速度でキャラクターを旋回させて前進させました。これにより、目的方向に何フレームかかけて向き直りつつ移動するようになるので滑らかな曲がり方になります。

注意点

以下には非対応です。

他のエージェントの回避(8/20追記)

本来、NavMeshAgentは他のエージェントを避ける動きをしてくれますが、今回の改良版はパスを辿るだけなので他エージェントを避けてくれません。回避させたい場合は、nextPositionの方向も移動に加味する必要があります。この辺りはいずれ対応させたいとは思っています(やるとは言っていない)。

ジャンプや空中

NavMeshAgentは宙に浮くことが考慮されておらず、常に強制着地します。改良版もその点は考慮していないのでジャンプや落下はできません。それらが必要な場合は、ご存知テラシュールブログさんのこちらの記事が参考になると思います。

tsubakit1.hateblo.jp

状況に応じて、NavMeshAgentRigidbodyを切り替える感じです。

立体交差

改良版の到着判定が高さの違いを無視するため、立体交差があると高さが異なる場所でも目的地に到達したと判定する可能性があります。そのようなマップの場合は必要に応じて改造してください。

NavMeshAgentを動かさないために試したこと

参考のためのメモです。

NavMeshAgentを動かさないために、他のブログではStopメソッドを使う例が紹介されていました。が、現在はStopメソッドは廃止されているようだったので使いませんでした。

また、updatePositionupdateRotationというプロパティがあります。これらをfalseにするとTransformは動かなくなります。が、NavMeshAgentは移動してしまいます。Unityの公式マニュアルなどでは、このフラグを利用して、キャラクターの動きやアニメをNavMeshAgentの座標に合わせてカスタマイズできる方法が紹介されています。

docs.unity3d.com

これだとNavMeshAgentの独特の動き方が補正できないとか、ルートデータの管理がどうなるか不明だったとかあったので、問題をシンプルにするためにStealingパラメーターを全て0にしてNavMeshAgent自体を自動では動かないようにしました。

まとめ

NavMeshAgentはとても便利なのですが、動き方がイメージ通りではなかったので改良してみました。NavMeshAgent自身の動きを停止させる機能か、NavMeshのルート算出が非同期で求められるともっと手軽なのですが、やりたいことはできました。

これを応用すると、移動先を指定するプレイヤーや、プレイヤーを追いつつ多彩な動きをする敵の動きを作ることができるのではないかと思います。ご参考になれば幸いです。

ブログ用アセット

デモ動画のプレイヤーと地面はSURIYUNさんのFarmer Girl SD。動物たちは同じくSURIYUNさんのCute Petを利用しました。

assetstore.unity.com

assetstore.unity.com

障害物はProBuilderで作成しました。

キャラクターのモーションはSDユニティちゃんのものを利用しています。

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

この動画のモーションはユニティちゃんライセンス条項の元に提供されています

参考・関連URL

ProBuilderのoverlapping UV'sという警告(warning)を解決する

ProBuilderは便利なアセットですが、ちょいちょい謎の動作があります。そのうちの一つが以下の警告です。

f:id:am1tanaka:20180810155224p:plain

There are 6 objects in the Scene with overlapping UV's. Please see the details list below or use the 'UV Overlap' visualisation mode in the Scene View or Object Maps for more information.

- Floor: 813 texels
- Cube: 244 texels
- Cube (1): 238 texels
- Cube 2: 192 texels
- Pipe: 111 texels
- Cube 1: 96 texels

調べてみるとUnity Forumでこんなのが見つかりました。

https://forum.unity.com/threads/probuilder-2-9-8f3-this-gameobject-has-overlapping-uvs.533490/

解決策として、ライトマップの解像度(Lightmap Resolution)を増やすか、UV2のマージンを増やすということが書いてありました。

このうち、オススメはUV2の再生成です。以下、手順です。

  • Hierarchyビューで、警告が出るオブジェクトを選択します

f:id:am1tanaka:20180810162952p:plain

  • ProBuilderビューのGenerate UV2メニューの右の+をクリックします

f:id:am1tanaka:20180810163731p:plain

  • Pack Marginの値を増やしていきます。5ずつぐらい増やしながら、Rebuild Scene UVsを押して様子を見ます
    • 徐々に警告数が減っていき、手元のプロジェクトでは20でなくなりました
    • Unityフォーラムでは40以上と書かれています。作成しているものによって違うようです

f:id:am1tanaka:20180810163310p:plain

以上です。

Lightmapの解像度を増やす場合は?

一応、Lightmap Resolutionを増やす方法も試してみました。手元のプロジェクトでは200 texels per unitで警告が消えました。

ただ、この方法はベイク時間が大幅に増えるのでおススメできません。UV2の生成で不具合がある場合などの手段として考えておけばよいかと思います。

参考URL

画面のモデルはSuriyunさんのアセットで、後ろ向きの女の子はFarmer Girl SD、カモはCute Petのものです。

assetstore.unity.com

assetstore.unity.com

Ultimate VFXでゲームのイメージを膨らまそう!

Unity アセット真夏のアドベントカレンダー 2018 Summer! 5日目(8/5)の記事です!


アドカレ・ディフェンス

(2018/8/6 作例を公開しました!)

はじめに

学生のみなさんは夏休みに入られたことと思います。夏休み中にゲームを作りませんか!もちろん、社会人のみなさんも。

学生は一ヶ月、社会人だと1週間もないかもです。小作品ではありますが、夏の思い出になるような、花火のような作品を。花火といえばパーティクル。パーティクルの定番アセットの一つであるUltimate VFXをご紹介します!

目次

Ultimate VFXとは

人気パーティクルアセットです。定価は$40ですが、よくセールされている印象です。こちらの動画で雰囲気が掴めると思います。

www.youtube.com

ハデハデです。

概要についてはUnity AssetStoreまとめさんにまとめられています。以下はv3.1のもの。

www.asset-sale.net

以下はv2.6の時のもの。

www.asset-sale.net

2017年の6月の記事の時点でv2.6でしたが、この1年ちょっとの間にv2.7 -> v3.0 -> v3.1 -> v3.2とバージョンアップを続けている意欲的なアセットです。

記事の前提

以下の環境で確認しました。バージョンが異なると画面や注意事項か異なる可能性があります。

  • Unity2018.2.1f4
  • Ultimate VFX v3.2
  • Windows10

v3.2は、Unity 2018.1以降が必要です。Unity2017以前のものを利用する場合は、v3.1以前のものをご利用ください。

おおよその使い方

Ultimate VFXは概要にある通り巨大なアセットです。プロジェクトに組み込むと大変なので、テスト用のプロジェクトを作成してそちらで色々といじったものをエクスポートして、自分のプロジェクトに組み込むのがよいと思います。

確認用のプロジェクトを作る手順です。マニュアルで事前に推奨されている設定などあるのでインポート前にやっておきましょう。

インポート前の準備

読み込み時に圧縮すると遅くなるので、ストレージに余裕があるなら以下の設定をしておくとよいでしょう(マニュアルによる推奨)。

  • EditメニューからPreferencesを選択します

f:id:am1tanaka:20180731234338p:plain

  • Compress Assets on Importのチェックを外します

f:id:am1tanaka:20180731234416p:plain

ビルドターゲットを設定しておく

ビルドターゲットの切り替えには時間がかかります。また、環境によっては正常に動作しないパーティクルも混ざっている場合があるので、予めビルドターゲットを設定しておいた方がよいです。

この例ではWeb GLをビルドターゲットにします。

  • FileメニューからBuild Settings...を選択します

f:id:am1tanaka:20180731234628p:plain

  • ターゲットを選択してSwitch Platformをクリックします。ターゲットが切り替わったら、xをクリックしてダイアログを閉じます

f:id:am1tanaka:20180731234746p:plain

以上を設定したらAsset Storeからインポートします。ネットワークの速度もありますが、10分近くかかるかも知れません。巨大です。

警告について

大量に警告が表示されますが、とりあえず無視して大丈夫です。

デモを眺める

ゲームジャムなどを想定して、ちょっとしたミニ作品を作ろうと思います。ランダムサーチ代わりに、Ultimate VFXのデモを見て、思うままにアイディアを出してみましょう!

Ultimate VFXは複数のアセットを統合したプロジェクトなので、デモシーンがあっちこっちに散らばっています。シーンをフィルタリングして探しましょう。こういう場合は、ProjectビューのSearch by Typeボタンが便利です。

  • Projectビューの右上にあるSearch by Typeボタンをクリックして、Sceneを選択します

f:id:am1tanaka:20180801002109p:plain

プロジェクトに含まれるプロジェクトが抽出されます。v3.2には12シーンあります。これだけでも凄いボリュームです!

f:id:am1tanaka:20180801002209p:plain

ざっと見ていきます。

1 - Ultimate VFX (Demo)

Ultimate VFXのデモです。これまた巨大なので、ダブルクリックしても切り替わるのに結構時間がかかります。反応がなくてもしばらく待ってください。読み込まれたらPlayします。

最初は以下のような画面になります。

f:id:am1tanaka:20180801002717p:plain

マウスを動かすと軌跡が早速パーティクルです!画面をクリックすると選択中のパーティクルが発生します。

f:id:am1tanaka:20180801002812p:plain

左上のメニューのOne Shotだと、クリック時にワンショットで発生するパーティクルを試せます。Loopingに切り替えると、常に発生し続けるパーティクルのデモに切り替わります。それぞれ全然違うものなので、それぞれ見るとよいです。

左下のLEVELBasicに切り替えると、背景が表示されます。

f:id:am1tanaka:20180801003025p:plain

右下にあるPREVNEXTボタンをクリックするか、マウスのホイールを回すとパーティクルを切り替えることができます。このシーンにはOne Shotのパーティクルが82種類、Loopingのものが163種類(#01はパーティクルなし)用意されてます。

想像力を掻き立てながらパーティクルを見ていって、思い浮かんだことを、パーティクル番号と合わせてメモしていきましょう!

1 - XP ACTION (Demo)

Action VFXアセットのデモで、爆発や煙、爆裂のフラッシュを中心としたパーティクル集です。One Shotが20種類、Loopingが9種類用意されています。

画面をクリックするとOne Shotのデモが表示されます。

f:id:am1tanaka:20180801005057p:plain

マウスのホイールで種類を切り替えられますが、UIを表示した方が見るのが楽です。

  • HierarchyビューでCommonオブジェクトの左の三角をクリックして開いたら、UIをクリックして選択します

f:id:am1tanaka:20180801005341p:plain

  • InspectorビューでUIを有効にします

f:id:am1tanaka:20180801005446p:plain

これで、Ultimate VFXのデモと同じインターフェースでデモを確認できます。

f:id:am1tanaka:20180801005553p:plain

爆発、煙などの演出が欲しい場合に注目するとよさそうです。

1 - XP SHOCKWAVES (Demo)

2種類のパーティクルです。こういう感じのキラキラしたやつと、赤系の爆風のものです。

f:id:am1tanaka:20180802232308p:plain

数は少ないですが、印象的なパーティクルです。

1 - XP STORM (Demo)

Loopingの雨、降雪、雷雨などの天候系パーティクル42種類と、雪を一瞬降らせるOne Shotのものが1つあります。

f:id:am1tanaka:20180802232729p:plain

戦闘シーンの背景に使ったり、物語をはじめたり、ドラマチックな天候を表現したい場合に利用できそうです。

1 - XP TITLES (Demo)

ニューロンが繋がるようなもの、火の粉が舞うようなもの、宇宙やワープを彷彿させるようなものなど、Loopingのものが25種類あります。

f:id:am1tanaka:20180802233701p:plain

f:id:am1tanaka:20180802233708p:plain

具体的な天候を表すSTORMと違い、抽象的なものを表現するのに向いていそうです。何かを象徴するようなシーンや、不思議なゲーム世界を表す背景などに使えそうです。

Comet Ocean (UVFX)

これ以降は、単一のパーティクルのシーンです。

流れ星の海、ということで、流れ星が降りながら、稲光が走ります。

f:id:am1tanaka:20180802234113p:plain

Fireworks (Demo)

花火のパーティクル(らしい)。かなり古い感じで、他のものと比べるとびっくりするぐらい質素。

f:id:am1tanaka:20180802235506p:plain

Gravity Clock (UVFX)

光の線がうねうね動いて、マウスを動かしたり、ドラッグすると、それに反応して動きが変わります。体験展示などのネタにいいかも。

f:id:am1tanaka:20180802235411p:plain

Journey to the Singularity (UVFX)

異空間に向けて突き進んでいるようなハデハデなシーン。ちょっとパーティクルの色が古い感じ・・・。少し調整すると、奥に進んでいく感じのゲームの背景に使えるかも。

f:id:am1tanaka:20180802235639p:plain

Particle Force Fields (Demo)

粒子が重力で集められるようなシミュレーション的なシーン。色々なパラメーターをいじると粒子が形を変えて動いて面白いです。

f:id:am1tanaka:20180803000025p:plain

Particle Force Fields Galaxy (Demo)

Particle Force Fieldsのパラメーター設定例のような感じです。Demo ControllerNoneの欄に、該当オブジェクトを設定して、Canvasを有効にすると、UIを表示して調整することができます。

f:id:am1tanaka:20180803000740p:plain

一度バランスが崩れるとなかなか元の状態になりません。右上のRESETボタンをクリックするとデフォルトの値に戻ります。

Particle Plexus (Demo)

ゆらゆら動く点の間を光の線が結ぶ、網状のパーティクルのデモです。

f:id:am1tanaka:20180803001309p:plain

Hierarchyビューを見ると、Particle System AmbientParticle Plexus Line Renderer Templateが無効になっています。有効にすると演出が増えます。

そのまま利用するというより、これを参考にして、自分なりのパーティクルを作るのに利用する感じかと思います。

デモのまとめ

Ultimate VFXは大量すぎるので、まずはそれ以外のシーンを一通り眺めておくとよさそうです。おおよその方向性が分かったところで、Ultimate VFXのデモを眺めて、これは!というパーティクルを探しましょう。

インスピレーションタイム!

イマジネーションを膨らませながら、Ultimate VFXのデモを眺めていきます。すると、Ultimate VFXのOne Shotの#72に目がとまりました!

f:id:am1tanaka:20180804021016p:plain

クリックした場所に光が表れて、それが小さくなっていってから爆発に変わります。時限爆弾っぽくて面白そう。タイミングよくクリックすることで、落下してくる何かを爆破するようなゲームはどうだろう。

そんなことを考えながらさらにパーティクルを見ていくと、今度はLoopingの#93が目にとまりました。

f:id:am1tanaka:20180804021616p:plain

不思議な感じ。これをもう少し小さくして落下物にしよう。

うまく弾き返したら、印象的だったSHOCKWAVESを使おうと思います。

f:id:am1tanaka:20180802232308p:plain

One Shotの#74。大爆発!!うまく爆破できずにゲームオーバーになった時に使えそう。

f:id:am1tanaka:20180804021721p:plain

背景はLoopingの#26が不穏な感じでよさそう。上に敵が出てくる場所、下は守る場所、という感じも出ています。

f:id:am1tanaka:20180804021833p:plain

最後にクリアの背景として、昇天してそうなLoopingの#51。

f:id:am1tanaka:20180804022012p:plain

背景が稲光してるので、それは不穏な感じがするので、利用時に削除すればよさそうです。

作例案

以上から、考えたゲームのルールをまとめます。

  • 画面をクリックすると、爆発を発生させることができます。数か時間で、発生数の制限は必要そうです
  • 上から敵を登場させて、落下させます
  • 爆発がうまく敵に当たると、敵は吹き飛びます
  • 上に吹き飛ばして、渦巻きに当てていきます
  • 敵が落下するとゲームオーバー
  • 敵を沢山ぶつけて、渦巻きを解消したらクリア

ざっくり30分ぐらいで、利用するパーティクルとゲーム案がまとまりました。では開発に入ります!

パーティクルをエクスポートする

利用したいパーティクルが決まったら、それらをエクスポートしましょう。

プレハブを見つける

まずはエクスポートする対象のプレハブを見つけます。

  • エクスポートしたいパーティクルがあるシーンを実行します
  • 該当パーティクルを選びます
  • パーティクルの名前を確認します

f:id:am1tanaka:20180804120442p:plain

上記であれば、かっこの中のfantasticExplosion_tutorialがパーティクル名です。

  • Hierarchyビューの検索に確認したパーティクル名を入力します

f:id:am1tanaka:20180804120749p:plain

  • 名前の最後の部分がパーティクル名と同じオブジェクトを選択して、右クリック -> Select Prefabを選択します

f:id:am1tanaka:20180804121448p:plain

以上で、Projectビューの該当するパーティクルのプレハブが見つかります。

f:id:am1tanaka:20180804121547p:plain

ではこれをパッケージにエクスポートします。

プレハブをエクスポートする

Unityの実行を停止しておきます。

  • Projectビューで見つけたプレハブを右クリックして、Select Dependenciesを選択します

f:id:am1tanaka:20180804122042p:plain

これでこのプレハブに関連するリソースが選択されました。

  • 選択されたリソースのどれかを右クリックして、Export Package...を選択します

f:id:am1tanaka:20180804123047p:plain

  • 候補が表示されたら、Export...ボタンをクリックします

f:id:am1tanaka:20180804123150p:plain

  • 分かりやすいところに、分かりやすいファイル名でエクスポートします

f:id:am1tanaka:20180804123322p:plain

上記では、デスクトップのMyParticlesフォルダーに、fantasticExplosion-tutorialという名前でエクスポートした例です。

同様の手順で、必要なパーティクルを全てエクスポートします。

スクリプトのエクスポート

Ultimate VFXには、パーティクルの大きさを簡単に調整したりする便利なスクリプトが用意されています。スクリプトもエクスポートしておきましょう。

  • Projectビューで、Scriptでフィルタリングします

f:id:am1tanaka:20180804154613p:plain

  • 必要そうなスクリプトを選択して右クリック -> Export Packagesで、任意の場所に出力します

それほど大きいものでもないので、すべてエクスポートして構わないと思います。

パーティクルの大きさ調整

全てのパーティクルのエクスポートが完了したら、組み込みたいプロジェクトを開いて、エクスポートしたパーティクルとスクリプトを全てImportします。

既存のパーティクルを利用する場合、大きさが合わない場合がよくあります。

f:id:am1tanaka:20180804155620p:plain

↑背景にしたいパーティクルが全然小さい・・・

デフォルトの設定では、Scaleを調整してもパーティクル全体が大きくなりません。これを解決するには、パーティクルの設定のScaling ModeHierarchyにします。

f:id:am1tanaka:20180804155453p:plain

これを自動的にやってくれるスクリプトがUltimate VFXにあります。以下、利用方法です。

  • Hierarchyビューにパーティクルを配置します
  • 調整したいパーティクルを選択します
  • Windowメニューから、Mirza Beig -> Particle Scalerを選択します

f:id:am1tanaka:20180804155842p:plain

  • Hierarchyボタンをクリックして、Scaleで調整できるようにします(ここで直接サイズ調整をしても構いません)

f:id:am1tanaka:20180804160038p:plain

これで、TransformScaleを調整すれば、パーティクル全体のサイズも変更できます。イメージに合わせて大きさを調整します。

f:id:am1tanaka:20180804160350p:plain

f:id:am1tanaka:20180804160439p:plain

同様の方法で、すべてのパーティクルのサイズを調整します。

作例ゲーム「アドカレ・ディフェンス」

ここまでまとめた内容から作ったゲームの作例です。unityroomに公開しました!


アドカレ・ディフェンス

Ultimate VFXのパーティクルのみで画面を構成しましたが、なかなかいい感じになりました!

留意点

調子に乗ってパーティクルを利用しまくったら、かなり重くなってしまいました。高速化で効果的な方法があったら、後日、追記したいと思います。

(8/6追記)

まとめ

Ultimate VFXのサンプルの概要と確認方法、オススメの作業手順、作例をご紹介しました。

有料のアセットですが、YouTubeなどでパーティクルのノウハウを公開しつつ、バージョンアップするごとに新しいパーティクルが追加されています。パーティクルは多機能なため、すべての機能を把握するのが大変ですが、Ultimate VFXで気になったパーティクルの構造を見ることで、理解を深める教材にもなります。

派手はパーティクルが大量にあるので、RPGの演出や戦闘シーンにも使えそうですし、1週間ゲームジャムやGGJのように限られた時間で結果を出すことを求められるような場面でも重宝するアセットだと思います。

作例はまだ仕上げていませんが、近日中に仕上げて公開する予定です。(8/6に完成させて公開しました!)

ご参考になれば幸いです!

参考・関連URL

www.youtube.com

MagicaVoxelのPLYモデルにmixamoでアニメ設定をしてUnityで動かす

f:id:am1tanaka:20180725214056g:plain

MagicaVoxelで作ったオリジナルの人型のキャラクターにアニメ設定するには、Adobe社が提供しているWebサービルmixamo(ミクサモ)が便利です。MagicaVoxelで出力したモデルをBlenderの自作プラグインでテクスチャー生成して、mixamoに持って行ってアニメ設定をして、Unityで動作確認する手順をご紹介します。

記事内のキャラクターモデルは、だいし様のMagicaVoxelで作ったプリキュアをUnityで動かすの記事でダウンロードできるbase.voxのものを利用しました。

mixamoを使わずにBlenderだけで設定したい場合はこちらの方をご覧ください。

目次

準備

PLYファイルを利用するには、頂点カラーからテクスチャーを生成する必要があります。手動で作るのが煩わしかったので、Blender用のスクリプトを作成しました。こちらを参照して、Blenderスクリプトをインストールしてください。

また、mixamoを利用するには、無料の会員登録(Sign up)が必要です。事前に登録してログインしておいてください。

MagicaVoxelでキャラクターを作成する

この方法の場合は、base.voxから作業を開始する必要はありません。いわゆるTポーズになっていればOKです。

  • キャラクターが完成したら、Export -> plyをクリックします

f:id:am1tanaka:20180725212913p:plain

  • 分かりやすい場所に任意のファイル名で保存します。ファイル名は半角英数のみ推奨(日本語や全角が混じったファイル名だとUnityで不具合が起きる可能性があります)

f:id:am1tanaka:20180725212935p:plain

BlenderにPLYをインポート

ここからはBlenderでの作業です。必要なファイルを読み込みます。

  • Blenderが起動していなければ起動します。あるいは、FileメニューからNewを選択して、初期状態にします
  • 既存のCamera, Cube, Lamp全て不要なので、[Shift]キーを押しながらクリックして3つとも選択します

f:id:am1tanaka:20180725220842p:plain

  • エディター上にマウスカーソルを移動させて、[Delete]キーを押して表示されるポップアップのDeleteをクリックして、選択していたものを削除します

f:id:am1tanaka:20180725220855p:plain

Outlinerから選択したオブジェクトが消えていればOKです。

f:id:am1tanaka:20180725220911p:plain

  • 3D Viewの左のメニューでMiscタブをクリックして選択して、Import PLYボタンをクリックします

f:id:am1tanaka:20180725220928p:plain

  • PLYファイルを保存したフォルダーを設定して、読み込むファイルを選択して、Import PLYボタンをクリックします

f:id:am1tanaka:20180725220945p:plain

デフォルトのPLYのサイズだとUnityでは大きくなりすぎるので、0.22倍するようにしています。倍率は左下のScale欄で設定できるので、読み込みと同時にサイズを調整したい場合は、値を変更してからImport PLYをクリックしてください。

PLYファイルのインポートが完了しました。

f:id:am1tanaka:20180725220956p:plain

FBXとPNGをエクスポート

mixamoを利用するならBlenderでウェイトを設定する必要はないので、このままFBXにエクスポートします。

  • Export FBX and Textureボタンをクリックします

f:id:am1tanaka:20180725213150p:plain

  • エクスポート先とファイル名を設定したらExport FBX and Textureボタンをクリックすれば完了です

f:id:am1tanaka:20180725213203p:plain

デフォルトで生成されるテクスチャーのサイズは512x512ピクセルです。ボクセル数が多いと足りないかも知れないので、Unityで見た時に色がずれているような場合は、Texture WidthTexture Height10242048に変更してみてください。

ボクセル数が少なくて、もっと小さいテクスチャーで構わない場合は128256にしてみてください。テクスチャーのサイズは2のテクスチャーのサイズは2の累乗である必要があります(よく分からない場合は、この設定はいじらないでください)。

以上で完了です。出力先のフォルダーに、以下のようにfbxpngの2つのファイルが出力されていれば成功です。

f:id:am1tanaka:20180725213217p:plain

mixamoにモデルを読み込む

生成したFBXとPNGをmixamoにアップロードするには、ZIP圧縮しておく必要があります。

  • FBXファイルとPNGファイルを選択して、右クリック -> 送る -> 圧縮(zip形式)フォルダーを選択します

f:id:am1tanaka:20180725221317p:plain

FBXやPNGのあったフォルダーにZIPファイルが出来上がります。

  • mixamoのページを開いて、ログインします
  • UPLOAD CHARACTERボタンをクリックします

f:id:am1tanaka:20180725221634p:plain

  • 先ほど作成したZIPファイルをドラッグして、mixamoの点線の枠内にドロップします

f:id:am1tanaka:20180725221610p:plain

  • モデルが表示されます。こちらを向いて立っているのが確認できたらNEXTをクリックします
    • 変な方向を向いていたら、左下の矢印をクリックして、以下の画像のように調整してからNEXTをクリックしてください

f:id:am1tanaka:20180725221653p:plain

  • 左下に並んでいる丸をドラッグして、キャラクターの該当する場所に設定します
    • 左右が分かりづらいので、以下を参考にしてみてください
    • 左に並んでいる丸は、左半身用なので、向かって右側の関節に設定します

f:id:am1tanaka:20180725221707p:plain

以下、設定が完了した状態です。

f:id:am1tanaka:20180725221714p:plain

  • 指がないボクセルモデルの場合は、下で指の設定をNo Fingersにします

f:id:am1tanaka:20180725221728p:plain

  • 設定が完了したらNEXTをクリックします

キャラクターがくるくる回って、自動的にウェイトを設定する処理が行われます。完了を待ってください。

f:id:am1tanaka:20180725221738p:plain

ウェイト設定が成功すると、アニメーションのデモが動きます。うまく動いていたら、NEXTボタンをクリックします。

f:id:am1tanaka:20180725221749p:plain

失敗していたら、BACKボタンで戻って、間接の設定をし直してください。

色がおかしいのはUnityに持っていけば治るので放っておいて構いません。

以下の画面でNEXTをクリックしたら読み込み完了です。

f:id:am1tanaka:20180725221758p:plain

アニメの作成とエクスポート

アップロードとウェイト設定が完了したら、以下の画面に切り替わります。

f:id:am1tanaka:20180725221839p:plain

左でモーションの選択、右のパラメーターで腕の広げ方や速度などのアニメーションの微調整ができます。使い方は他の記事を検索してください。ここではそのままデータをダウンロードします。

  • 右上のDOWNLOADボタンをクリックします
  • 以下の設定をして、DOWNLOADします
    • Formatは、FBX for Unity(.fbx)
    • Poseは、T-poseのままで大丈夫です
    • 設定したら、DOWNLOADボタンをクリックします

f:id:am1tanaka:20180725221852p:plain

以上で、メッシュ、アニメーション、マテリアル、テクスチャーを埋め込んだFBXファイルをダウンロードできます。

できあがったキャラクターをUnityで動かしてみましょう。

アニメを仕込んだ場合

mixamoでアニメーションを付けた場合は、エクスポートの設定項目が増えます。以下のようなダイアログだった場合の設定です。

  • Formatは、FBX for Unity(.fbx)
  • Frames per Secondは、60が使いやすいと思います
  • その他はそのままでDOWNLOADします

f:id:am1tanaka:20180725221911p:plain

Unityで動作確認する

作成したモデルをUnityに読み込んで動かしてみましょう。以下、前提です。

  • Unity2018.1.3で確認(2017以降なら似たような操作でいけると思います)
  • Standard Assetsインストール済み

テスト用シーンを作成する

Unityを起動して、確認用のプロジェクト(空のプロジェクトでよいです)を開きます。

  • AssetsメニューからImport Package -> Charactersを選択して、Importします

f:id:am1tanaka:20180725213417p:plain

  • 地面用のPlaneを作成します。HierarchyビューのCreateをクリックして、3D Object -> Planeを選択します

f:id:am1tanaka:20180725213428p:plain

  • Hierarchyビューで作成したPlaneをクリックして選択します
  • Inspectorビューで、Transformの右の歯車アイコンをクイックして、Resetを選択して、場所を原点にしておきます

f:id:am1tanaka:20180725213613p:plain

  • Planeにマテリアルを設定して色を着けたり、Main Cameraの位置を調整して、Gameビューでそれっぽく見えるようにします

f:id:am1tanaka:20180725213624p:plain

  • Projectビューで、Standard Assets -> Characters -> ThirdPersonCharacter -> Prefabsの左の三角アイコンをクリックして開きます

f:id:am1tanaka:20180725213632p:plain

  • ThirdPersonControllerプレハブをドラッグして、Sceneビューで良さそうな場所に配置します

テスト用のシーンができました。Playして、矢印キーや[A][S][D][W]キーでキャラクターを操作できます。

作成したキャラクターを設定

エクスポートしたキャラクターを読み込み、設定します。

  • mixamoからダウンロードしたFBXファイルをドラッグして、UnityのProjectビューの読み込みたい場所にドロップします

f:id:am1tanaka:20180725222222p:plain

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

f:id:am1tanaka:20180725213751p:plain

  • Modelについて、以下を設定します
    • Import Visibility, Import Cameras, Import Lightsのチェックを外す
      • くっついてませんが念のため
    • 設定したらApplyボタンをクリック

f:id:am1tanaka:20180725213800p:plain

  • Rigについて、以下を設定します
    • Animation TypeHumanoidに変更します
    • Applyボタンをクリックします

f:id:am1tanaka:20180725213809p:plain

これで、Configure...の左にチェックが表示されれば成功です。これをやらないと、設定したアーマチュアなどの設定が反映されないので重要な設定です。

  • Inspectorビューで、Materialsタブを選択して、Extract Textures...をクリックして、適当なフォルダーを選択します(動作確認なのでそのままの場所で構いません)

f:id:am1tanaka:20180725223034p:plain

  • 同様に、Extract Materials...をクリックして、適当なフォルダーを選択します(動作確認なのでそのままの場所で構いません)
  • Projectビューで、展開したテクスチャーを選択します

f:id:am1tanaka:20180725213740p:plain

  • Inspectorビューで以下を設定します
    • Generate Mip Mapのチェックを外す
      • 小さくした時に変な線が出ることがあるので
    • Wrap ModeClampに設定
      • 画像端のにじみ防止
    • Filter Modeを*Point(no filter)に設定
      • にじみ防止
    • 以上できたら、Applyボタンをクリック

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

プレイヤーに適用して動かす

読み込んだモデルをテスト用のキャラクターに差し替えて動かして見ましょう。

  • Hierarchyビューで、ThirdPersonControllerの左側の三角をクリックして開きます

f:id:am1tanaka:20180725213855p:plain

  • Hierarchyビューで、[Shift]キーを押しながら、EthanBody, EthanGlasses, EthanSkeletonの3つを選択します

f:id:am1tanaka:20180725213907p:plain

  • Inspectorビューの左上のチェックを外して、選択したオブジェクトを無効にします

f:id:am1tanaka:20180725213916p:plain

  • Projectビューから読み込んだモデルをドラッグして、HierarchyビューのThirdPersonControllerにドロップします

f:id:am1tanaka:20180725213924p:plain

  • Hierarchyビューで、ドロップしたモデルをクリックして選択します

f:id:am1tanaka:20180725213932p:plain

  • Inspectorビューで、Animatorの左のチェックを外して、モデルにくっついているアニメーターを無効にします

f:id:am1tanaka:20180725213941p:plain

ThirdPersonControllerのアニメーターを作成したモデルで再生するようにします。

  • Projectビューで、読み込んだモデルの左の三角をクリックして開いておきます

f:id:am1tanaka:20180725214004p:plain

  • Hierarchyビューで、ThirdPersonControllerをクリックして選択します

f:id:am1tanaka:20180725213952p:plain

  • Projectビューからモデルの子供にあるAvatarをドラッグして、InspectorビューのAvatar欄にドロップします

f:id:am1tanaka:20180725214021p:plain

これで、ThirdPersonControllerのアニメーターが、オリジナルキャラクターのアバターを制御するようになります。

Playして、矢印キーなどで操作してみてください。エクスポートに成功していたらアニメーションを確認できます。

f:id:am1tanaka:20180725214056g:plain

キャラクターの大きさを調整したい場合の注意点

動かして見るとちょっとキャラクターが大きすぎるようです。半分の大きさにしてみます。

重要なのは、親のゲームオブジェクトのScaleを変更しないことです。変更するのは、子供にしたモデルのオブジェクトのScaleにしてください。以下の通りです。

f:id:am1tanaka:20180725214039p:plain

RigidbodyをアタッチしているゲームオブジェクトのScaleは、必ず1にしておきます。これを守らないと当たり判定や動作で予想外の不具合を引き起こします。必ず守りましょう!

まとめ

以上で、MagicaVoxelで作成したPLY形式のキャラクターに、maximoでウェイト設定をして、Unityに読み込んで、テスト動作させることができました。

mixamoを利用することで、モデルの体形の自由度があがり、モーションもmixamoで生成することができるようになります。

ご活用いただければ幸いです!

参考・関連URL

MagicaVoxelのPLYファイルにウェイト設定してUnityでアニメーションさせる

f:id:am1tanaka:20180725214056g:plain

以前、表題の作業手順をまとめました。しかし、手軽にモデルを修正してエクスポートし直すには手順が多くて煩雑です。

また、PLYで出力するといい感じのメッシュで出力してくれるのですが、テクスチャーを自分でベイクする必要がありより面倒に。よさそうな方法も見つからず、もう自分で作っちゃえ、と、Blenderスクリプトを作成しました。

github.com

このスクリプトを使って、MagicaVoxelで出力したPLYファイルをUnityでアニメーションさせる手順をご紹介します。

素体を使わずにオリジナルでキャラクターを作った場合は、mixamoでウェイトをした方がよいでしょう。その場合はこちらをご覧ください。

目次

準備

予め、こちらを参照して、Blenderスクリプトをインストールしてください。

また、だいし様のMagicaVoxelで作ったプリキュアをUnityで動かすの記事で配布されているMagicaVoxel用素体(base.vox)と素体用アーマチュア(BaseArmature.blend)を利用するので、ダウンロードしてください

github.dev7.jp

PLYファイルからウェイト設定したキャラクターモデルとテクスチャーをエクスポート

MagicaVoxelでキャラクター作り

  • MagicaVoxelを起動して、base.voxを読み込みます
  • 記事に従ってキャラクターを作成します(手順を確認する場合はbase.voxのままで構いません)
  • キャラクターが完成したら、Export -> plyをクリックします

f:id:am1tanaka:20180725212913p:plain

  • 分かりやすい場所に任意のファイル名で保存します。ファイル名は半角英数のみ推奨(日本語や全角が混じったファイル名だとUnityで不具合が起きる可能性があります)

f:id:am1tanaka:20180725212935p:plain

アーマチュアとPLYの読み込み

ここからはBlenderでの作業です。必要なファイルを読み込みます。

  • Blenderが起動していなければ起動します
  • ダウンロードしてあったBaseArmature.blendBlenderにドラッグ&ドロップするなどして開きます

f:id:am1tanaka:20180725212953p:plain

  • 3D Viewの左のメニューからMiscタブをクリックします

f:id:am1tanaka:20180725213004p:plain

  • Import PLYボタンをクリックします

f:id:am1tanaka:20180725213017p:plain

  • PLYファイルのフォルダーを設定して、読み込むファイルを選択して、Import PLYボタンをクリックします

f:id:am1tanaka:20180725213034p:plain

デフォルトのPLYのサイズだと大きくなりすぎるので、アーマチュアとサイズが丁度良くなるようにサイズを0.22倍するようにしています。倍率は左下のScale欄で設定できるので、読み込みと同時にサイズを調整したい場合は、値を変更してからImport PLYをクリックしてください。

PLYファイルのインポートが完了しました。

f:id:am1tanaka:20180725213047p:plain

デフォルトのアーマチュアとbase.voxを使っていれば、大きさと位置が合っているはずです。もし、モデルとアーマチュアの配置がずれている場合は、縮小や移動をして上記のように重ねてから次に進んでください。

ウェイト設定

Blenderでウェイトを設定する場合は、メッシュとアーマチュアを階層して親子設定をするのですが、それらをAuto Weightボタンで自動化しました。

f:id:am1tanaka:20180725213125p:plain

以下のように、Outlinerarmatureの子供にメッシュが設定されていれば成功です。

f:id:am1tanaka:20180725213136p:plain

エクスポート

PLYはテクスチャーを持たないので、Unityで色を付けるにはテクスチャーをベイクする必要があります。また、マテリアルの作成も必要です。それらの作業を自動的に実行します。

  • Export FBX and Textureボタンをクリックします

f:id:am1tanaka:20180725213150p:plain

  • エクスポート先とファイル名を設定したらExport FBX and Textureボタンをクリックすれば完了です

f:id:am1tanaka:20180725213203p:plain

デフォルトで生成されるテクスチャーのサイズは512x512ピクセルです。ボクセル数が多いと足りないかも知れないので、Unityで見た時に色がずれているような場合は、Texture WidthTexture Height10242048に変更してみてください。

ボクセル数が少なくて、もっと小さいテクスチャーで構わない場合は128256にしてみてください。テクスチャーのサイズは2のテクスチャーのサイズは2の累乗である必要があります。よく分からない場合は、この設定はいじらないでください。

モデルのエクスポート自体は、ここまでで完了です!出力先のフォルダーに、以下のようにfbxpngの2つのファイルが出力されていれば成功です。

f:id:am1tanaka:20180725213217p:plain

Unityで動作確認する

出力したファイルがちゃんとUnityで動くか確認してみましょう(ここからは内容的にはオマケなのですが、記事的にはここからの方が長いです^^; ヒューマノイドモデルの使い方に慣れていたら、この先の手順は不要ですので、エクスポートしたファイルをご利用ください)。

以下、前提です。

  • Unity2018.1.3で確認(2017以降なら似たような操作でいけると思います)
  • Standard Assetsインストール済み

テスト用シーンを作成する

Unityを起動して、確認用のプロジェクト(空のプロジェクトでよいです)を開きます。

  • AssetsメニューからImport Package -> Charactersを選択して、Importします

f:id:am1tanaka:20180725213417p:plain

  • 地面が欲しいのでPlaneを作成します。HierarchyビューのCreateをクリックして、3D Object -> Planeを選択します

f:id:am1tanaka:20180725213428p:plain

  • Hierarchyビューで作成したPlaneをクリックして選択します
  • Inspectorビューで、Transformの右の歯車アイコンをクイックして、Resetを選択して、場所を原点にしておきます

f:id:am1tanaka:20180725213613p:plain

  • Planeにマテリアルを設定して色を着けたり、Main Cameraの位置を調整して、Gameビューでそれっぽく見えるようにします

f:id:am1tanaka:20180725213624p:plain

  • Projectビューで、Standard Assets -> Characters -> ThirdPersonCharacter -> Prefabsの左の三角アイコンをクリックして開きます

f:id:am1tanaka:20180725213632p:plain

  • ThirdPersonControllerプレハブをドラッグして、Sceneビューで良さそうな場所に配置します

テスト用のシーンができました。Playして、矢印キーや[A][S][D][W]キーでキャラクターを操作できます。

作成したキャラクターを設定

エクスポートしたキャラクターを読み込み、設定します。

  • BlenderでエクスポートしたFBXPNGを[Ctrl]キーを押しながら選択して、まとめてUnityのProjectビューにドロップします

f:id:am1tanaka:20180725213725p:plain

注意!! FBXとPNGファイルを同時にドラッグ&ドロップしないとテクスチャーが貼られないので気を付けてください!!

  • Projectビューで、読み込んだPNGを選択して以下を設定します
    • Generate Mip Mapのチェックを外す
      • 小さくした時に変な線が出ることがあるので
    • Wrap ModeClampに設定
      • 画像端のにじみ防止
    • Filter Modeを*Point(no filter)に設定
      • にじみ防止
    • 以上できたら、Applyボタンをクリック

f:id:am1tanaka:20180725213740p:plain

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

f:id:am1tanaka:20180725213751p:plain

  • Modelについて、以下を設定します
    • Import Visibility, Import Cameras, Import Lightsのチェックを外す
      • くっついてませんが念のため
    • 設定したらApplyボタンをクリック

f:id:am1tanaka:20180725213800p:plain

  • Rigについて、以下を設定します
    • Animation TypeHumanoidに変更します
    • Applyボタンをクリックします

f:id:am1tanaka:20180725213809p:plain

これで、Configure...の左にチェックが表示されれば成功です。これをやらないと、設定したアーマチュアなどの設定が反映されないので重要な設定です。

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

プレイヤーに適用して動かす

読み込んだモデルをテスト用のキャラクターに差し替えて動かして見ましょう。

  • Hierarchyビューで、ThirdPersonControllerの左側の三角をクリックして開きます

f:id:am1tanaka:20180725213855p:plain

  • Hierarchyビューで、[Shift]キーを押しながら、EthanBody, EthanGlasses, EthanSkeletonの3つを選択します

f:id:am1tanaka:20180725213907p:plain

  • Inspectorビューの左上のチェックを外して、選択したオブジェクトを無効にします

f:id:am1tanaka:20180725213916p:plain

  • Projectビューから読み込んだモデルをドラッグして、HierarchyビューのThirdPersonControllerにドロップします

f:id:am1tanaka:20180725213924p:plain

  • Hierarchyビューで、ドロップしたモデルをクリックして選択します

f:id:am1tanaka:20180725213932p:plain

  • Inspectorビューで、Animatorの左のチェックを外して、モデルにくっついているアニメーターを無効にします

f:id:am1tanaka:20180725213941p:plain

ThirdPersonControllerのアニメーターを作成したモデルで再生するようにします。

  • Projectビューで、読み込んだモデルの左の三角をクリックして開いておきます

f:id:am1tanaka:20180725214004p:plain

  • Hierarchyビューで、ThirdPersonControllerをクリックして選択します

f:id:am1tanaka:20180725213952p:plain

  • Projectビューからモデルの子供にあるAvatarをドラッグして、InspectorビューのAvatar欄にドロップします

f:id:am1tanaka:20180725214021p:plain

これで、ThirdPersonControllerのアニメーターが、オリジナルキャラクターのアバターを制御するようになります。

Playして、矢印キーなどで操作してみてください。エクスポートに成功していたらアニメーションを確認できます。

f:id:am1tanaka:20180725214056g:plain

キャラクターの大きさを調整したい場合の注意点

動かして見るとちょっとキャラクターが大きすぎるようです。半分の大きさにしてみます。

重要なのは、親のゲームオブジェクトのScaleを変更しないことです。変更するのは、子供にしたモデルのオブジェクトのScaleにしてください。以下の通りです。

f:id:am1tanaka:20180725214039p:plain

RigidbodyをアタッチしているゲームオブジェクトのScaleは、必ず1にしておきます。これを守らないと当たり判定や動作で予想外の不具合を引き起こします。必ず守りましょう!

まとめ

以上で、MagicaVoxelで作成したPLY形式のキャラクターにウェイト設定をして、Unityに読み込んで、テスト動作させることができました。

Unity側での作業も少々あるので、一瞬で完了できる、というほどではありませんが、かなり手軽にモデルの修正をして、Unityに持ってくることができるのではないかと思います。

ご活用いただければ幸いです。

参考・関連URL

Unity1DayChangeJamに参加しました!

ぽにさん( @PonixNews )主催のUnity1DayChangeJamに参加しました!30名中の9番目。立ち上げは大変そうだし、後半は把握が大変そう、と思っていたのでナイスな順番決めビンゴでした。

f:id:am1tanaka:20180704224501p:plain

目次

作った部分

ざっくりと以下のようなことをやりました。

  • license.txtのUTF8化(文字化けしてたので)
  • M+ FONTSのmplus-2m-regularを組み込み、Textにフォントを設定。WebGLビルド時の日本語表示に対応
  • PostProcessing Stack V2の組み込みと、グラフィック設定でHDRを有効にして、列車のバックファイアーと血をBloomで光らせる
  • momoさんが作成された17体の作者モデルを使ったスネークゲームをぶっこんだ

スネークゲームを改造する方法

スネークゲーム部分は、以下のような感じで簡単に要素を増やしていただけます。ネタが詰まったらスネークゲームを豪華にしてあげてください。全然違うゲームにするのも可。

作者ーズのモデルを増やす

17体以降のモデルが追加されたら、SnakePlayerオブジェクトのFollow Modelsにモデルを追加すれば、自動的に増えるようになっています。

f:id:am1tanaka:20180704220447p:plain

現在はここに16体設定していて、残りの1体はぽにさんで常に先頭にいます。後続キャラはランダムに出現させているので、この順番に意味はありません。

設定するのはプレハブではなくモデルデータなのでその点注意を!

敵を増やす

次のことを設定すれば、敵として処理されます。

f:id:am1tanaka:20180704221037p:plain

  • TagEnemyにする
  • 何らかのColliderを設定して、Is Triggerはオフにする

あとはご自由にどうぞ。

Random Spawnerスクリプトをアタッチすると、Colliderが何にも衝突しないようにステージ内のどこかに配置します。

ステージを拡張する

Staticを設定した上で、ご自由に拡張してくださって構いません。広さを変更した場合は、敵やえさを出現させる範囲の調整が必要になるかも知れません。

SnakeGameManagerオブジェクトのSnake Spawnerスクリプトが出現範囲を定義するものです。

f:id:am1tanaka:20180704221524p:plain

このオブジェクトのSpawn BoundsCenterExtentで、出現する範囲の中心座標と、X,Y,Z方向の大きさのを指定します。設定した範囲は上記の例の通り、赤いGizmoで枠が表示されます。

スピードアップ

プレイヤーを徐々にスピードアップさせるなどもいいかなと思います。

f:id:am1tanaka:20180704223455p:plain

SnakePlayerオブジェクトのSpeedプロパティが初期速度です。初期値は4なので、秒速4メートルです。privateで宣言してますが、多分変更するのはSnakePlayerスクリプト内だと思うので大丈夫だと思いますし、駄目ならお好きに変更してください!

企画の紆余曲折

スネークゲームを作ることは、作業当日の朝飯後に決めました。プロジェクト開始から企画決定までの紆余曲折の記録です。

開始当初

ファーストランナーのちょいちょいさんによる凄まじいインパクトのものが出てきました。

続けてろますた38さんが列車を走らせて豪快にぽにさんを放り出す運ぶという展開に。

テンション高!この辺を受けて、当初はこんな感じのものを考えてました。

f:id:am1tanaka:20180628230930p:plain

列車で無事に運べたぽにさんの人数が、巨神兵的な感じで立ち上がって、世の終わりを告げるという感じのもの。真マジンガー 衝撃! Z編の最終回とか、シンゴジラとか、アルマゲドンとかそんな雰囲気。

ゲームとしては、巨神をブルームで光らせながら立ち上げて、時々光線を撃ってきて、それが地面に当たって岩を飛ばしてくる。その岩をよけながらエネルギーを貯めて、突撃するような、スーパーファミコン版のスターフォックス的な。

続いて、3日目にカフェさんが画面遷移、4日目にパンさんが雨の演出、5日目に麻々ソーマさんがノベルエンジンを入れて下さりました。ノベルエンジンによって、冒頭のストーリーがうまく実装できそうな手応えになりました。

6日目にnaichiさんがエラーを解決して下さり、別展開としてコインプッシャーが実装されました。コインプッシャーとアルマゲドンだとあまりに展開が違うな^^;と思い、この段階ではダライアスみたいなステージ選択を入れようかなと考えていました。

7日目に転機

そして7日目。momoさんがコインプッシャーに最初の17名の参加者のモデルを追加して下さりました!

自分のもある!これを活かさない手はありません。アルマゲドンは没にして、これらのキャラクターを活かせる作品を考え始めました。

パズルボブル的なやつ、おはじき的なやつなど考えつつ、グラディウスのオプションがキャラクターになってるやつなどあれこれ考えているうちに、レミングスボコスカウォーズのようなものがまとまりました。高い場所をキャラクターたちがうろうろ適当に歩き回るので、落下しないようにマウスで方向を修正しながら、ところどころ捕まっているキャラクターを解放してゴールを目指すというもの。

f:id:am1tanaka:20180628222756p:plain

フライングですが、ProBuilderを使ってステージも作ってみてました。が、どうもしっくりこないので考え続けて、勇者ヨシヒコのドラ〇エ風シーンが浮かんできました。あれでスネークゲームを作ればいいか、ということで今回のやつに辿り着きました。

当日

担当日の朝、急遽こんなのも考えました。

f:id:am1tanaka:20180628225045j:plain

狙う方向を決めて仲間を発射していって、ブロックを崩して、戻ってくる仲間を回収するようなゲーム。以前、ニカイドウレンジさんのイベントで遊んだゲームから着想したものでした。これはこれで面白そうなんだけど、作る必要のあるものが多すぎるなと思って、スネークゲームに戻して実装しました。

まとめ

トモぞヴPさんが参加表明をされているツイートを見てこの企画に気づきました(TL全部読んでないですすみません)。面白そうだし、1日だから負担も少ないしと、早々に参加を決めました。

毎日の変化が大きくて、当日を迎えるまで何が出てくるか分からない楽しさがありました。バトンタッチ後も進化を続けていて、何かあればみんなで解決策を交換してと収穫も多いです。

素敵な企画を提案、運営して下さったぽにさん、ありがとうございます!参加者の皆さん、楽しい雰囲気や刺激をありがとうございます。まだまだ完成まで精鋭の皆さんが控えているので、どういう変化を見せるか楽しみです。

最後に。誰か通しのスコアを用意してランキング入れてください~。

あとBGMや効果音なども入るといいなぁ~とか書いてたら、青木ととさんがスネークゲームをパワーアップしてくださってた!!!画面が全然かっこよくなってるしBGMと効果音も~~~!!!

3Dモデル、アイコン、2Dキャラに加えて、また一つ嬉しいことが増えました。momoさんのモデルも映えてます!嬉しいこと続きのプロジェクトで、本当に参加してよかったです^^

利用アセット

  • UNITY TECHNOLOGIES. Post Processing Stack V2:画面エフェクトに利用
    • Package Managerでインストールしました
  • UNITY TECHNOLOGIES. Pro Grids:ステージの配置に利用
    • Package Managerでインストールしました
  • UNITY TECHNOLOGIES. UtilityアセットのFollowTarget.cs:カメラの制御に利用
    • Standard Assetsに付属のUtilityからインポートしました
  • M+ FONTS PROJECT. :M+ FONTS:mplus-2m-regular.ttfを利用

BitBucketを使ってみる

共同作業にはGitHubが便利ですが、複数人数でプライベートリポジトリーを使おうとすると少々のコストが発生します(学生であれば無料でプライベートリポジトリーやチームが使える学生アカウントを使える可能性があるので、学校に問い合わせてみてください!)

ちょっと練習したい、とか、完全な非営利のプロジェクトだし、とか、不幸にもGitHubの学生アカウントの登録に協力してもらえない学校の学生だったとかの場合、代替手段としてBitBucket (ビットバケット)やGitLab (ギットラボ)を使うことで同様のことが可能になります。

BitBucketの登録から、プライベートリポジトリーを作って、SourceTreeにクローンするまでの手順をまとめます。

目次

前提

  • 登録にはメールアドレスが必要です

BitBucketとは

ATLASSIAN(アトラシアン)という会社が提供しているクラウドサービスです。無料プランで、プライベートリポジトリーを持てたり、プライベートリポジトリーに5名までメンバーを追加することができます。公開リポジトリーならメンバーの人数制限はないようです(あったらお知らせいただければ幸いです)。

GitBucketというのもあって名前がややこしいですが、GitBucketはGitHubと同様の機能を提供するサーバー用のソフトウェアのことです。BitBucketは、GitBucketを使ってチーム開発向けの機能を提供しているサービスのことです。

無償という点では、プライベートリポジトリーに加えてユーザー数も無制限のGitLab.comの方がお得っぽいのですが、諸事情でBitBucketの方を現在利用しているので、まずはこちらの使い方をまとめます。

BitBucketのアカウントを作成する

まずはアカウントをBitBucketに作成します。

f:id:am1tanaka:20180629164214p:plain

  • 登録に使うメールアドレスを入力して、Continueボタンをクリックします
  • フルネーム欄に表示名を入力して、設定したい8文字以上のパスワードを入力して、私はロボットではありませんにチェックを入れて、Continueボタンをクリックします

f:id:am1tanaka:20180629164700p:plain

登録したメールアドレスに確認用のメールが送信されます。メールを開きます。

f:id:am1tanaka:20180629165025p:plain

HTMLメールだった場合は、Verify my email addressボタンをクリックします。

HTMLメールで見れない場合は、以下のようなリンクを見つけて、URLをコピーしてWebブラウザーで開きます。

f:id:am1tanaka:20180629165450p:plain

アカウントの登録画面が表示されれば完了です。

f:id:am1tanaka:20180629171140p:plain

変更したい項目があれば変更してSaveボタンを押します。そのままでよければリポジトリーの作成に進みましょう。

プライベートリポジトリーを作成する

動作確認のためのリポジトリーをプライベートで作成してみましょう。

  • Bitbucket | The Git solution for professional teamsを開きます
  • 右上のLog inをクリックして、登録したメールアドレスとパスワードでログインします
  • 最初の接続時にはユーザー名を設定する画面が表示されます。使われてなさそうなユーザー名を半角英数で考えて入力してください

f:id:am1tanaka:20180629171552p:plain

  • 簡単なアンケートが表示されます。回答してSubmitをクリックするか、Skipで飛ばします

f:id:am1tanaka:20180629171653p:plain

  • まだリポジトリーがないと以下のような画面が表示されます。一般的な操作に慣れるために、左上のバーガーメニュー(三本線のアイコン)をクリックします

f:id:am1tanaka:20180629171841p:plain

  • 通常はこのメニューがウィンドウの左に表示されます。+をクリックします

f:id:am1tanaka:20180629171906p:plain

  • リポジトリーが作りたいので、Repositoryをクリックします

f:id:am1tanaka:20180629172002p:plain

  • 以下のように設定します
    • リポジトリ名にfirstなどと入力
    • アクセスレベルにチェックを入れると非公開にできます
    • READMEファイルはあった方がよいので、Yes, with a templateを選択します
    • 以上で、リポジトリの作成ボタンをクリックします

f:id:am1tanaka:20180629172126p:plain

以上でリポジトリーが作成されました。Cloneボタンをクリックすると、クローンのための情報が確認できます。

f:id:am1tanaka:20180629172359p:plain

コマンドだけで操作するのはしんどいので、SourceTreeをインストールしましょう。

SourceTreeをインストールする

Gitクライアントでよく使われているものの一つがSourceTreeです。このソフトもBitBucketのATLASSIANが提供しているものです。他にもTrelloなどがATLASSIANのサービスで、共同作業に関する多くのサービスを網羅している企業です。

SourceTreeは、BitBucketだけではなく、GitHub、GitLabのリポジトリーも管理できます。

f:id:am1tanaka:20180629211112p:plain

  • Atlassianアカウントの方がログインが楽なのでそっちをクリックします

f:id:am1tanaka:20180629211903p:plain

  • 登録したメールアドレスを入力して、Continueをクリックします

f:id:am1tanaka:20180629212045p:plain

  • 同様にパスワードを入力してログインします
  • 以下の通り登録が完了したら、次へをクリックします

f:id:am1tanaka:20180629212329p:plain

  • 今回はGitを利用したいので、Gitがインストールされているか、以下のようにNot Installだった場合はチェックした状態で次へをクリックします

f:id:am1tanaka:20180629212511p:plain

  • ダウンロードが完了するのを待って、完了したら次へをクリックします

f:id:am1tanaka:20180629212750p:plain

  • SSHを作成済みの場合ははいを選んで、公開キーのファイルを指定してください。よくわからない場合はいいえを選んでください

f:id:am1tanaka:20180629213016p:plain

以上でインストールと設定完了です。

f:id:am1tanaka:20180629213114p:plain

SourceTreeにリポジトリーをクローンする

先に作成したプライベートリポジトリーをクローンしてみます。

初めての場合は、すぐにRemoteのクリックへ進んでください。2回目以降の場合は、新しいタブをクリックして開いてから、Remoteに進んでください。

f:id:am1tanaka:20180630002958p:plain

※2回目以降の場合は+タブをクリックしてから

  • Remoteをクリックします

f:id:am1tanaka:20180630002836p:plain

  • 初めての作業の時はアカウントを追加します。左のアカウントを追加の+をクリックします

f:id:am1tanaka:20180630003104p:plain

  • ユーザー名などが空欄の場合、OAuthトークンを再読み込みをクリックします

f:id:am1tanaka:20180630003251p:plain

  • BitBucketに登録したメールアドレスとパスワードを入力して、ログインをクリックします

f:id:am1tanaka:20180630003342p:plain

  • パスワードの保存はどちらでもよいです
  • アクセスを許可します

f:id:am1tanaka:20180630003442p:plain

  • こういうのが表示されれば成功です。SourceTreeに戻ります

f:id:am1tanaka:20180630003507p:plain

  • 認証に成功してユーザー名が設定されていたら、OKをクリックします

f:id:am1tanaka:20180630003554p:plain

以上で、SourceTreeとBitBucketの接続が完了したので、リポジトリーが一覧表示されるようになります。

f:id:am1tanaka:20180630003707p:plain

  • クローン先のフォルダーを指定して、クローンボタンをクリックします
    • 赤枠の欄に設定したフォルダーの直下にリポジトリーの内容がクローンされます。プロジェクト名まで指定した方がよいです

f:id:am1tanaka:20180630004129p:plain

クローン完了です。画面のエクスプローラで開くをクリックすると、クローン先のフォルダーを確認することができます。

f:id:am1tanaka:20180630004411p:plain

f:id:am1tanaka:20180630004443p:plain

内容を変更してコミット

コミットしてみましょう。まずはファイルに変更を加えます。

  • エクスプローラーで開くしたフォルダーのREADME.mdをメモ帳などで開きます
  • 以下のように何か書き加えて上書き保存します

f:id:am1tanaka:20180630004659p:plain

  • SourceTreeに切り替えると、作業ツリーのファイルのところに、README.mdが確認できます。これは、README.mdが変更されていて、まだ管理対象に登録されていないという状況です

f:id:am1tanaka:20180630004752p:plain

  • コミットする対象をIndexに追加する必要があるので、全てインデックスに追加をクリックします

f:id:am1tanaka:20180630004957p:plain

  • README.mdが上部のIndexにステージしたファイル欄に移動しました。これで、コミット準備完了です

f:id:am1tanaka:20180630005021p:plain

  • コミットボタンをクリックします

f:id:am1tanaka:20180630005130p:plain

  • 画面下にコミットする概要を入力して、コミットボタンをクリックします

f:id:am1tanaka:20180630005246p:plain

  • 誰がコミットしたかの情報を登録します。これはアカウントとは関係ないので、ハンドル名や連絡用のメールアドレスで構いません

f:id:am1tanaka:20180630005426p:plain

通常はこの段階でコミットできているはずですが、自分の環境だとうまくいきませんでした。コミットができていなさそうだったら、以下の手順で再度コミットしてみてください。

  • 左からmasterをクリックして画面を切り替えます

f:id:am1tanaka:20180630005709p:plain

  • 改めて左上のコミットボタンをクリックします

f:id:am1tanaka:20180630005727p:plain

  • 右下のコミットボタンをクリックします

f:id:am1tanaka:20180630005516p:plain

以上でコミットが完了しました。プッシュ欄に1というバッジが表示されればOKです。

f:id:am1tanaka:20180630005832p:plain

文字コードについて

コミットした内容を確認してみます。masterをクリックして、README.mdをクリックします。そうすると、右下に変更内容が表示されます。

f:id:am1tanaka:20180630010114p:plain

なんか文字化けしてます。macでは大丈夫かも知れません。SourceTreeはデフォルトの文字コードUTF-8のため、ShiftJISがデフォルトのメモ帳とかち合ってしまったのです。

README.mdを開きなおして、UTF-8で保存しなおします。

f:id:am1tanaka:20180630010342p:plain

再び、全てインデックスに追加 -> コミット -> メッセージを入力 -> コミットをして、変更をコミットします。

f:id:am1tanaka:20180630010508p:plain

f:id:am1tanaka:20180630010554p:plain

これで文字化けが治りました。

f:id:am1tanaka:20180630010622p:plain

プッシュする

では、コミットした内容をBitBucketにアップロードするためにプッシュします。

  • プッシュをクリックします

f:id:am1tanaka:20180630010712p:plain

  • プッシュしたいブランチを選択して、プッシュします

f:id:am1tanaka:20180630010802p:plain

以上でプッシュ完了です。BitBucketを開いて、リポジトリーを確認してみてください。README.mdの変更が反映しています。

f:id:am1tanaka:20180630011040p:plain

まとめ

BitBucketの利用開始方法と、簡単な操作練習として以下をご紹介しました。

  • BitBucketにユーザー登録
  • プライベートリポジトリーfirstの作成
  • GUIのGitクライアントSourceTreeのインストール
  • SourceTreeとBitBucketアカウントの連携設定
  • SourceTreeで、BitBucketに作成したfirstをクローン
  • クローンしたREADME.mdを変更
  • コミット&プッシュ

意味が分からなくても、ここの手順に従って操作をしてみてください。Gitはとても便利なのですが、分散開発を実現するために、ほかのバージョン管理ツールに比べると複雑なところがあります。慣れないと理解できないことが色々とあるので、壊してもよいリポジトリーを作成して、あれこれ試してみてください。

用語説明

Git関連の用語を簡単にまとめておきます。参考までに。

リポジトリー(Repository)

  • 日本語にすれば倉庫。バージョン管理のためのデータベースのデータのことです

公開リポジトリ

  • GitHubやBitBucketの公開リポジトリーは、インターネット上で誰からでも中身を見たり、クローンすることができます

プライベートリポジトリー

クローン(Clone)

  • リポジトリーから作業用のフォルダーにファイルを取り出すことです

インデックスに追加する

  • Gitで管理したい変更を登録することです

コミット(Commit)

  • 変更した内容を作業しているローカル環境に記録することです
  • この状態では、まだサーバーには変更は書き込まれていません。いざという時は、作業用のフォルダーを削除して、クローンし直せば、全てなかったことにできます

プッシュ(Push)

  • コミットした変更点を、サーバーのリポジトリーにアップロードします
  • プッシュすることで、BitBucketにあるリポジトリーに作業した変更が反映されます

フェッチ(Fetch)

  • サーバーのリポジトリーの最新の情報を作業用の環境に取得します
  • フェッチをするだけでは、作業用フォルダーの中身は変更されません

プル(Pull)

  • サーバーのリポジトリーの変更を、作業用フォルダーに反映させます
  • フェッチせずに直接プルすることもできます。一人で作業している場合はこれでよいと思います

ブランチ(Branch)

  • 日本語で枝という意味です
  • 複数の状態のリポジトリーを作ることができます
  • 開発者や開発内容ごとに、別のブランチを作成して、作業が完了したら、masterブランチにマージ(結合)するような使い方をします
  • 一人で開発する場合は使わなくてもなんとかなります(使った方がいいですが)

マージ(Merge)

  • 他のブランチや、ほかの人の変更内容を合体させる処理です

コンフリクト(Conflict)

  • 日本語でいうと衝突です
  • 同時に同じファイルの同じ個所を変更した時に起こります
  • どちらが最新版が分からないため、自動的に解決することができません。プログラマーが相談した上で、衝突箇所を解消する必要があります
  • 基本的には、衝突を起こさないように開発するのがベストです。GitHub Flowと呼ばれる手法などが考案されています

参考URL