tanaka's Programming Memo

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

Unity1週間ゲームジャム「あつい」に参加しました

Unity 1週間ゲームジャム | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

今回のテーマは「あつい」。公開した作品はこちらからどうぞ。

ログインすると評価できます。面白かったら評価いただければ嬉しいです!

溶岩番

溶岩番 | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

目次

開発の流れ

ツイートを交えつつ、一週間を振り返ります。

準備会

今回も前回に続き、秋葉原コワーキングスペースWeeybleさんにて、ニムさん主催の準備会のLT枠に参加することにしました。

準備会では、前回と同様にnaichiさんのネットランキングとツイートの実装方法と、TextMesh Proのフォントアセットの作り方をご紹介しました。発表資料はこちら。

docs.google.com

LT後は、参加者の皆さんの作業にお邪魔しつつ、Voxelゲームプロジェクトのボクセルの影の研究をもくもくしてました。

9/3(月)

お題発表。

0:26にTrelloにボードを作成して作業開始!前回参加した直後は「ランダム要素でスコアが左右されるネットランキングがアツい短時間で終わるゲーム」というメモを残していました。しかし、その後の活動で方針が変わって「Voxelを使ったタッチ操作で遊べるようなパズル的なゲーム」という頭になってました。

まず考えたのが溶岩の上を岩が流れてくるので、それをタイミングよくジャンプして進んでいくフロッガー的なゲーム「ボルケーノジャンプ」でした。岩の上に乗っていると徐々に岩が沈んでいくので、なるべく早く次にジャンプするゲームです。ワンキーゲームで簡単に作れそうだけど、ゲーム性が大味になりそうに感じたので保留にしました。

昔からゲーム中にジャンプするのが大好きだったのですが(メルヘンメイズとかジオグラフシール、ジェノサイドなどなど)、最近はジャンプが出来ない方がゲーム性は出しやすいのではないかと考えるようになっていました。ゼルダキノピオ隊長の影響です。そして、昔ながらのマス目ごとにきっちり動くようなものを作ってみたいという気持ちが出てきて、「溶岩の上にうまく岩を置いてゴールを目指すゲーム」→「岩を押して、溶岩に落とすゲーム」という感じで、1時半頃、企画がまとまりました。

タイトルに表れている通り、ネタ元は「倉庫番」です。そこにペンゴを少々。

TLで肉を焼く系のアイディアや奇抜なネタで盛り上がっている中、あまりにど直球なパズルゲームの企画。今回も埋もれる...と腹をくくりました。企画がまとまったところで就寝。日野方面の大学の後期が始まる日だったので、手一杯で開発には入りませんでした。

9/4(火)

日曜日に「今週は月曜日以外は休みなんですよ」とか言ってましたが、水曜日から専門学校でした^^; この日はその準備でほぼ終わり。せめてもということでUnityのプロジェクトを作成して、Unity Collaborateにプッシュだけはしました。

短期勝負だしGitHub使うまでもないかと思って、Unity Collaborateでバージョン管理しました。Gitを使う自信がない...という場合もUnity Collaborateがおススメです。ちょっと設定するだけなので楽ちんです。Unity Collaborateに小まめにPushしておけば、アセットの設定が壊れるなどの事故があっても、以前の状態に戻すことができます。一人で開発する場合でも何らかのバージョン管理サービスは使った方が安心安全です!

9/5(水)

朝一から専門学校の講義。夕方に講義を終えてから、画面を整えるためにモデルやテクスチャ探しをはじめました。3D Cartoon Box Mapのブロックを配置してみたり、CC0のテクスチャーを配布している3D TEXTURESの溶岩をダウンロードして背景に置いたりしてみましたが、しっくりきません。

この日はそれで終わり。成果なし!

9/6(木)

丸1日開発に使える貴重な日。まずは画面続きの続き。思い切って素のCubeにエッジを描いただけのテクスチャーを貼って、あとはマテリアルとライトだけで仕上げたところ、良い雰囲気の画面になりました。

そこからは以下のような作業を黙々と。

  • 沈むブロックや、押すときの矢印、階段などをMagicaVoxelでモデリング
  • 画面レイアウトを調整
  • 溶岩のアニメーション作成
  • 動作確認用のステージの作成
  • プレイヤーが歩ける範囲をマッピングする処理

まだゲームに動きはついていませんが、画面は整いました。

9/7(金)

この日は講義&人に会っていたので帰宅は23時頃。

表示されている数字はプレイヤーからの歩数です。これを使ってプレイヤーが移動できるかや、どこを通るかを計算することができます。つまり、まだこの時点でプレイヤーは動いていません^^; こんな状態から完成したんだっけ。

9/8(土)

まるまる時間が使える最後の日です。といいつつ、ニュース見たりしててお昼過ぎから作業をはじめましたf^^;

  • クリックしたら場所へ歩く処理
  • 歩ける場所や押せるカーソルアイコンの作成
  • ノーマルブロックの動きを実装
  • 氷ブロックの動きを実装
  • プレイヤーをカメラが追う処理
  • プレイヤーを移動に応じて回転させたり、歩かせるアニメ処理
  • フォントを組み込んで、タイトル作成

目の前の作業を次々に撃破していって、なんとかゲームっぽく動き始めました!

まだ沈むブロックが入っていませんが、ギリギリ間に合うかも。間に合わないかも。な状態まで辿り着きました。

9/9 最終日

ついに最終日。家事をやってから11時ぐらいから開発スタート。

  • 沈むブロックを実装
  • ライトや背景色の仕上げ
  • ステージクリアの実装
  • ブロックが沈まなくなったり、氷が滑らなくなったバグを修正
  • 「タイトルへ」ボタンと「やり直し」ボタンの実装
  • ツイート内容の設定

あとはWeeybleさんに移動して最後の仕上げ。

  • エンディング実装
  • ステージ2つ追加

残り30分の時点で、なんとか最低限のゲーム要素が揃いました。2つステージを作って、ほぼ20時ちょうどに公開することができました!

ハッシュタグなどつけ忘れていたので、改めて正式にリリースのツイート。

これにて1週間終わり!20時以降はWeeybleに集まった皆さんのゲームを遊んだり、お互いのおすすめゲームを紹介したり、打ち上げ会を楽しみました!

嬉しい誤算

この企画を考えた時は、地味すぎてあまり遊んでもらえないだろうなと覚悟してました。公開前のTLはほぼ無風でしたし。しかし、1日経ってからunityroomを覗いてみたら人気TOP3に入っているではありませんか!!

1週間ゲームジャムにちゃんと参加した作品はこれが6回目です。これまでは真ん中より少し上が定位置でした。TOP6は果てしなく遠いと感じていたので本当に嬉しい予想外の結果でした。その後、おすすめアプリや週間ランキングにも入ることができました。一度ここに載ると、その後は実況で取り上げていただけたりするので順調にプレイ回数や評価が増えるのを実感しました。公開からすぐに遊んでご評価してくださった皆様、ありがとうございました!

実況

実況プレイしていただいた動画です。ぱふもどきさん( @PafuOfDuck )のチャンネルはこちら。

youtu.be

溶岩番の実況中は帰宅していなかったので生では見られませんでしたが、時間が合う時に遊びながら拝見してました^^

そしてntnyさん( @nD_ntny )と椿さん( @tsubaki_t1 )という豪華布陣による実況。

www.twitch.tv

こちらも帰宅した時には終わっていたのでアーカイブで拝見しました。

どちらの動画も何かやらかしていないかドキドキしながらの視聴でしたが、楽しんでいただけていたようでホッとしました。また、僕が考えた解法と違うクリア方法が示されたり、気になっていた説明方法や操作性の確認ができて大変有意義でした。ありがとうございました!

次回に向けて

次回は、専門学校の作品展が終わって1年生の皆さんが個人作品を持つべき時期です。主テーマは学生さんのゲーム作りの援護射撃です。それと同時に、伴走のために自分でも何か作る予定です。

画面作りはローポリ&Voxelの方向性でしっくりきたので、次回もこの路線で表現を磨くのがテーマの一つです。あとは機械学習、Photon、Firebaseのいずれかを使った超ミニゲームとかを出たとこ勝負で。次回も楽しみです!

最後に

人気TOP3に入ることができたのは嬉しい成果でした。狙って出した結果ではありません。狙わずに力を抜いて出したジャブが急所に当たってKO勝ちしたような、そんな感覚です。続けるのは大変ですが、実感しているメリットは多いです。

  • コンパクトに完成させるノウハウが身につく
  • 同じ条件で作られたゲームと自作品を比較することで次のテーマが見つかる
  • 軽いアイディアを試せる
  • ゲームジャムに参加している作者さんと交流が持てる
  • 講義で利用できるゲームのひな形が増える
  • 今回のような成果が出ることもある New!!

今後も基本は埋もれる方向だと思いますが、目立てなくても心がけ次第で得るものは沢山あります。参加を検討している方は是非参加してみてください!遊ばれた数やいいね数が少ないと落ち込みますが、本当に大切なのは完成させて発表することで得られる経験や発見です。そこから課題を見つけて次に繋げて、積み上げていけばレベルアップできます!運がよければいきなりヒットすることも有り得るでしょう。それも発表してこそです。

今回の作品は手応えがあったのでアプリ化に取り組もうと考えています。タイミングよくデジゲー博に当選したので参考展示を目指します。自然と新しい目的が見えてくる好循環になったので、積み上げていこうと思います!

利用アセット

利用アセットなどは以下の作品ページからご覧ください。いつも素晴らしいツールをありがとうございます。

溶岩番 | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

関連・参考URL

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

qiita.com

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

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

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


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

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

目次

目的

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

f:id:am1tanaka:20180807162946g:plain

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

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

動きの比較

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

改良版 NavMeshAgent版
改良版 NavMeshAgent版

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

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

利用方法

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

どのように実装したか

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

方針

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

f:id:am1tanaka:20180819235830p:plain

ルートの生成

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を利用しました。

障害物は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を利用