tanaka's Programming Memo

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

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

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

github.dev7.jp

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

以前、MagicaVoxelからobjファイルをエクスポートして、アニメーションさせる記事を書きました。

am1tanaka.hatenablog.com

その後、MagicaVoxelでply形式でエクスポートができるようになりました。ply形式でエクスポートすると、obj形式の時とは違ってボクセルの形が残るので、面の分割をしなくてもアニメするし、動きも自然になりそうです。

ただ、ply形式はマテリアルやテクスチャーを持たないため、一工夫必要になります。この記事では、以前の記事をベースに、ply形式で作業をする手順をまとめます。

目次

前提

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

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

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

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

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

MagicaVoxelに素体をインポート

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

f:id:am1tanaka:20180325165807p:plain

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

f:id:am1tanaka:20180325165913p:plain

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

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

エクスポートボタン

モデルが完成したら(あるいはとりあえず出力してみたい場合は)エクスポート前に、Saveをクリックして、任意の場所にvoxファイルを保存しておきます。これをやらないと、エクスポートに失敗する場合があります。

f:id:am1tanaka:20180328135854p:plain

作成したモデルをply形式でエクスポートします。右下のExportボタンをクリックします。

f:id:am1tanaka:20180325170622p:plain

エクスポートする形式が一覧表示されますので、"ply"ボタンをクリックします。

f:id:am1tanaka:20180625235204p:plain

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

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

f:id:am1tanaka:20180325174553p:plain

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

f:id:am1tanaka:20180325174831p:plain

f:id:am1tanaka:20180325144105p:plain

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

f:id:am1tanaka:20180325175017p:plain

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

f:id:am1tanaka:20180325175101p:plain

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

  • 任意のファイル名を付けたら保存ボタンをクリックして、キャラクターをply形式で保存します

f:id:am1tanaka:20180626173611p:plain

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

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

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

f:id:am1tanaka:20180325175631p:plain

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

f:id:am1tanaka:20180325175838p:plain

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

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

f:id:am1tanaka:20180325180257p:plain

plyファイルを読み込む

  • FileメニューからImport -> Stanford(.ply)を選択します

f:id:am1tanaka:20180625235610p:plain

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

f:id:am1tanaka:20180325180806p:plain

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

f:id:am1tanaka:20180325180901p:plain

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

f:id:am1tanaka:20180626180412p:plain

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

f:id:am1tanaka:20180325181318p:plain

テクスチャーを表示

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

f:id:am1tanaka:20180325181708p:plain

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

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

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

Blenderの基本操作はこちら(hiroshi harada. Blender入門(2.7版))などをご覧ください。

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

f:id:am1tanaka:20180325182819p:plain

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

f:id:am1tanaka:20180327212838p:plain

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

f:id:am1tanaka:20180626000055p:plain

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

f:id:am1tanaka:20180626000155p:plain

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

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

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

f:id:am1tanaka:20180325183607p:plain

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

f:id:am1tanaka:20180325185047p:plain

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

f:id:am1tanaka:20180325185205p:plain

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

f:id:am1tanaka:20180626000319p:plain

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

f:id:am1tanaka:20180325185554p:plain

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

f:id:am1tanaka:20180325185838p:plain

Remove Doubles

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

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

f:id:am1tanaka:20180325185959p:plain

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

親子にする

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

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

f:id:am1tanaka:20180325191433p:plain

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

f:id:am1tanaka:20180325191509p:plain

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

f:id:am1tanaka:20180325191620p:plain

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

f:id:am1tanaka:20180325192048p:plain

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

f:id:am1tanaka:20180325192132p:plain

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

f:id:am1tanaka:20180325192302p:plain

テクスチャ画像を作成する

ここからがply特有の作業になります。ply形式は頂点と色データしか持たないため、このままFBX形式でエクスポートしてもマテリアルやテクスチャーが生成されません。頂点カラーを利用する方法もあるようですが、テクスチャーならPBRの設定ができるし、テクスチャーを生成することにします。

解決策をネットで探求していたところ、cores_g様の記事に辿り着いて救われました。

urkgdmp.hatenadiary.jp

少しパラメーターを変更したり、手順を調整したものをいかにまとめます。

  • 画面上部のChoose screen layout欄をクリックして、UV Editingに変更します

f:id:am1tanaka:20180626001133p:plain

以下のような感じに、左にUVエディター、右に3Dビューが表示されます。

f:id:am1tanaka:20180626001242p:plain

テクスチャーにUV値をマッピングします。

  • モデルを選択するために3D ViewをクリックしてOutlinerに切り替えます

f:id:am1tanaka:20180626185832p:plain

  • armatureの左の+をクリックして開いて、キャラクターのモデル(この例ではmychr)を選択します

f:id:am1tanaka:20180626190512p:plain

  • 先ほどOutlinerに切り替えたのを、3D Viewに戻します

f:id:am1tanaka:20180626190736p:plain

  • 右の3D View画面をEdit Modeに切り替えます

f:id:am1tanaka:20180626001524p:plain

  • [A]キーを押して、以下のようにキャラクターがすべて選択されている状態にします

f:id:am1tanaka:20180626001557p:plain

  • Meshメニューから、UV Unwrap... -> Smart UV Projectを選択します

f:id:am1tanaka:20180626001716p:plain

  • Island Margin0.06程度に設定して、OKをクリックします
    • この設定は、隣りの色がはみ出さないようにするためのものです

f:id:am1tanaka:20180626001823p:plain

これで、UVエディターに以下のように各面が割り当てられます。

f:id:am1tanaka:20180626002119p:plain

おおよそのマス目の数を数えてください。以下なら、縦横30マス弱といったところです。1マス辺りのピクセル数を5ピクセル程度(特に根拠はなく、なんとなく感覚の値)と想定すると、縦横150ピクセルあれば良さそうです。テクスチャーは2の累乗にしますので、150ピクセルより大きい2の累乗の最小値である256ピクセルをテクスチャーサイズにしたいと思います。

よくわからない場合は1024x1024ピクセルでよいと思います。

  • UVエディターの下のNewをクリックします

f:id:am1tanaka:20180626002608p:plain

  • ウィンドウが表示されたら以下を設定します
    • Nameにテクスチャーのファイル名
    • WidthHeightにテクスチャーサイズ(よくわからなければ1024のままが無難です)
    • 以上設定したら、OKボタンをクリックします

f:id:am1tanaka:20180626002701p:plain

これで、設定したサイズのテクスチャー画像が生成されます。

f:id:am1tanaka:20180626002848p:plain

このテクスチャーに、頂点カラーを焼き付けます。

  • 右のウィンドウの左下にある3D Viewをクリックして、Propertiesに変更します

f:id:am1tanaka:20180626003026p:plain

  • プロパティーウィンドウを一番下までスクロールさせて、Bakeをクリックして開きます

f:id:am1tanaka:20180626003126p:plain

  • 以下の通り設定します
    • Bake ModeVertec Colorsに変更します

f:id:am1tanaka:20180626003259p:plain

  • Margin4px程度にしたら、Bakeボタンをクリックします

f:id:am1tanaka:20180626003449p:plain

これで、以下のように各面の色がテクスチャーに焼きこまれました。

f:id:am1tanaka:20180626003518p:plain

Marginを増やしておくことで、外側に余分に色を塗って、隣の色の影響を受けないようにしています。

出来上がったテクスチャーを保存すれば完了です。

  • ImageメニューからSave As Imageを選択します

f:id:am1tanaka:20180626003700p:plain

保存したい先を設定したら(この例ではplyファイルをエクスポートしたフォルダーと同じ)、Save As Imageボタンで保存します。

f:id:am1tanaka:20180626004019p:plain

モデルデータをFBX形式でエクスポートします。

  • FileメニューからExport -> FBXを選択します

f:id:am1tanaka:20180626191302p:plain

  • 保存したい先を設定したら(この例ではplyファイルをエクスポートしたフォルダーと同じ)、モデルのファイル名を設定して(この例ではmychr)、Export FBXボタンをクリックして保存します。

f:id:am1tanaka:20180626191610p:plain

UnityにFBXをインポート

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

  • Blenderで保存したフォルダーを開きます
  • 作成したテクスチャーPNGと保存したFBXファイルを選択して、UnityのProjectビューにドラッグ&ドロップします

f:id:am1tanaka:20180626004630p:plain

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

f:id:am1tanaka:20180626004736p:plain

f:id:am1tanaka:20180326110911p:plain

インポートの設定

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

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

f:id:am1tanaka:20180626191855p:plain

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

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

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

f:id:am1tanaka:20180326112430p:plain

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

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

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

f:id:am1tanaka:20180326112817p:plain

Rigの設定

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

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

f:id:am1tanaka:20180326113003p:plain

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

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

f:id:am1tanaka:20180326113114p:plain

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

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

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

f:id:am1tanaka:20180326113349p:plain

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

f:id:am1tanaka:20180326113539p:plain

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

f:id:am1tanaka:20180626005020p:plain

No Nameだとよくわからないので、mychrなどに名前を変更しておきましょう。

f:id:am1tanaka:20180626005111p:plain

このマテリアルにテクスチャーを割り当てます。

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

f:id:am1tanaka:20180626005347p:plain

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

f:id:am1tanaka:20180326114339p:plain

アニメーションさせる

これ以降は、objファイルと同じ手順です。

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

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

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

f:id:am1tanaka:20180626192201p:plain

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

f:id:am1tanaka:20180326115746p:plain

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

f:id:am1tanaka:20180326115917p:plain

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

f:id:am1tanaka:20180326120015p:plain

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

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

f:id:am1tanaka:20180326121308p:plain

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

f:id:am1tanaka:20180626192408p:plain

  • 同様の手順で、FaceUpdateスクリプトもキャラクターにドラッグ&ドロップしてください

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

f:id:am1tanaka:20180326121547p:plain

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

まとめ

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

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

参考URL

ライセンス

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

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

Unity2018.1.xでSmart MergeをSourceTreeに設定する

多人数開発の際に、シーンやプレハブをマージするのに便利らしいということで、設定してみます。

目次

前提

  • Windows10
  • Unity2018.1.3
  • SourceTree

SourceTreeに設定する

Smart MergeのためのツールUnityYAMLMergeは、Unityに同梱されているそうです。公式ページのSmart Merge - Unity マニュアルを見ながら設定します。

  • SourceTreeでツールメニュー -> オプションを選びます

f:id:am1tanaka:20180619001629p:plain

  • マージツールをカスタムに設定します

f:id:am1tanaka:20180619001900p:plain

  • Diff コマンドに UnityYAMLMerge へのパスを入力します
    • Windows<Unityのインストールフォルダー>\Editor\Data\Tools\UnityYAMLMerge.exe
    • mac/Applications/Unity/Unity.app/Contents/Tools/UnityYAMLMerge

f:id:am1tanaka:20180619002238p:plain

Unity HubでUnity2018.1.3をインストールしていた場合、C:\Program Files\Unity\Hub\Editor\2018.1.3f1\Editor\Data\Tools\UnityYAMLMerge.exe

  • 引数欄にmerge -p $BASE $REMOTE $LOCAL $MERGEDと入力します

f:id:am1tanaka:20180619002325p:plain

以上設定したら、OKをクリックします。

とりあえずこれでいいと思うのですが、まだ競合起きてなくて試せてません。後日追記することになるでしょう...。mac版もいずれ...。

参考URL

Unity1週間ゲームジャム「ギリギリ」に参加しました!

こちらの作品です。ぜひプレイを!ノーブレーキではクリアできないので、まずは安全運転で^^

走れ!ワゴン!! | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

ランキングにもぜひご参加ください^^

目次

[:Contents]

学生さん作品

ここまで4作品!あと2作品ほど増えそうです。

Giri Car (ゆう茶ん@実況者(休止中)君)

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

駆け込み乗車はおやめください (ぜう君)

駆け込み乗車はおやめください | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

がけっぷち! (hiro君)

がけっぷち! | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

ノコギリギリ (ルナ氏はただの重力球君)

ノコギリギリ | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

今回のテーマ

事前に考えていたこと。

  • シンプルにスコアを競う
  • ネガポジ要素を意識する
  • 体験講義で使える素材で作る

これに、UnityRoomのお題である「ギリギリ」を組み合わせました。

振り返り

前日

今回の参加はここから始まりました。

weeyble-game.connpass.com

そろそろ外向きの活動をせねばと思い、LTへの参加を決めました。前日ぐらいは、ベテラン揃いだったら全く身のない話になっちゃうな・・・とプレッシャーを感じてましたが、主催のニムさんのお人柄で集まって来られるみなさんは温かく、LTも大変参考になるものが多くてとてもよいスタートになりました。

締め切りの6/10に体験入学の担当だったので、今回は不参加かなと考えていたのですが、準備会の雰囲気がとてもよく、この状態で作らないのはおかしいと感じて突っ込むことにしました!

初日

とか余裕な発言しましたが、裏では10個ぐらい企画考えて没に^^; 体験入学で配布したかったので、アセットストアの素材が使えなかったのが没の原因としては大きかったです。素材をProBuilderで作れるものという方向で整理して、両側が崖の道で2,3個のコーナーを攻めるタイムアタックもの「ギリギリバギー」が企画の初版です。

単にギリギリを走るだけではネガポジにならないので、小ジャンプとハンドル操作を組み合わせて、タイミングよくドリフトを決めたらダッシュでコーナーを抜けられる、というのを考えました。まあ、マリオカートです。

この日は日野で講義なので、モノレールに揺られながらPolyやSketchfabでクリエイティブコモンズライセンスの素材探し。今回の主人公の車を見つけました。

poly.google.com

良さげなバギーがいくつか見つかったのですが、軒並みPUBGがどうとか書いてあって本当にCCなのか良くわかりません。そこで、確実に大丈夫そうでご機嫌なこれにしました。なんか屋根に乗ってるし、後ろに像乗ってるし。バギーじゃないじゃん・・・。タイトルを「疾走!ワゴン!!」に変えました。

当初の案では、2~3個のコーナーを攻めるだけの作品を考えていて、すぐできるだろうと思っていたので、帰りにホタル見に行ったりしてましたね。

実作業開始は23時頃から。

初日は3時間ぐらい作業して、フレームワークを作って、道路の幅を決めて、車を動かしてみてこんな感じで終わり。

体験入学で使うんだから2018じゃダメだった...と気付いて、WeeybleさんでLTしたプロジェクト使えず^^; Package Managerで入れたTextMesh ProとPostProcessing Stackが2017には持って行けないので、2017.3で構築し直しました。

フォントを入れてみたら「疾」の字がありません。ということで、「走れ!ワゴン!!」になりました。

2日目

ProBuilderの日。まずは動画で機能を確認。

かなりあれこれ知見が溜まりましたが、それはまた別の機会に。

2~3コーナーのつもりが「S字が走りたいな」とか「日本人として立体交差は必要じゃないか」とか考えてしまった結果こんな感じに。ゴールはサバンナで動物に囲まれる、とか考えていたような気もするけどループさせてしまった。1周で終わりなのに^^;

動きとしてはこんな感じ。

はい。殆どUnityさんのサンプルのままの動きになりました...。

3日目

朝から池袋で講義。放課後に少し作業を進めて、Weeybleさんへ。この日はゲームのルールをある程度揃えることと、崖作成。ProBuilderが発生するエラーやライトのベイクの知見がなかったので苦しみました。

久々にサークル室のような雰囲気を味わえました^^

本丸のプレイヤーの操作には手を付けられず。木曜日勝負、のつもりでしたが。。。

4日目

この日はタイトル画面や演出などを実装して終わり。

ほぼ形になりました。

5日目

いよいよプレイヤーカーのプログラムに手を付ける。が、難航。練習コース作ったりして時間を使っちゃったし。

これじゃダメだったのです。ちょっとした段差ですぐ跳ねてしまう。Wheel Colliderの優秀さに脱帽。これは敗戦色濃厚と見て、こんな手に。

22時ぐらいに、自前の車の動きは諦めて、Wheel Colliderさんで行くことに。じっくり操作してみると、結構あれこれ問題が発覚。

一通り気になるところを潰して、4WDをやめてリア駆動にしたらすごく操作感が好みになりました。

6日目

午前中は日曜日の体験入学の準備。ドキュメント書いたり、あれこれプログラム外したり。少し早起きして作業できたので、お昼には終えられました。

午後は、ダッシュ音やカメラの演出を入れたり、コース幅を調整したり、ランキング周りのフローを調整したり、細かいあれこれやってました。

最終日

今回は木曜日には公開したいと思っていたけど甘かった。午後には体験入学の担当だったので池袋へ。

空き時間を使って、練習モードを作ったりしてからWeeybleさんへ。ブレーキランプが欲しかったので最後の最後に入れたのですが、これがなかなかいい感じにできました^^

影の範囲などを調整して無事に公開!

あとはWeeybleにいらっしゃったみなさんと完成したゲームで遊んだり、情報交換して盛り上がりました!

次回に向けて

車の動きを自作するのを断念した結果、操作性がシビアなゲームになりました。難しいとみなさんおっしゃいつつ、なんだか繰り返し遊んでしまう。自分自身もそうで、ゲームオーバーにならないぐらいのバランスで調整した足すと3より、こっちの方が繰り返し遊べます。多少の理不尽さはスパイスとして有効だと感じました。

ということで、以下のような要素を次回用のTrelloのボードに書き込みました。

  • ゲームの終わりがすぐくるようなミニゲーム
  • 運によって結構スコアが変わる
  • パネルクリックで遊べるようなもの

あるいは、チーム参加もありかな?

まとめ

今回は文字通り、Weeybleさんで始まり、Weeybleさんで終わった1週間ゲームジャムでした。ゲームジャム直後は疲れていてなかなか他の方々のゲームが遊べず、また、反応もそれほどいただけないのが通例でしたが、参加者で集って公開直後にみんなで遊ぶことができてよい締めくくりとなりました。LTで発表していなければ、参加もせず打ち上げにも出席しなかったと思うので、動くの大切、と実感しました。

もう一つ。

この時は本当に駄目だこりゃ!と思った瞬間でしたが、そのあとに「だが作る」という言葉が浮かんで、ここから吹っ切って作り込むことができました。今回も参加して、いろいろと得るものがありました。

今回のゲームジャムで関わって下さった皆様、そしてゲームで遊んでくださった皆様、ありがとうございました。また、魅力的なアセットを提供して下さった作者の皆様、ありがとうございました。今後もよろしくお願いします!

参考URL

PostProcessing Stack v2を使う

f:id:am1tanaka:20180518095534p:plain

ようやくUnity2018.1に手をつけたところ、PostProcessing Stack v2でつまづいたのでメモです。

目次

PostProcessing Stack v2の初期設定

Asset Storeにある古いやつと比べると少し手順が増えているので、公式ドキュメントに沿った手順です。

PostProcessing Stack v2をプロジェクトに追加

既存のPostProcessing Stackを使っていないプロジェクトや、3Dのテンプレートで新規にプロジェクトを作成した場合、初期設定が必要です。以下の3D With Extras以下のテンプレートでは初期設定済みなのでこの手順は不要です。Post Processの調整にすぐに進めます。

f:id:am1tanaka:20180518084032p:plain

PostProcessing Stack v2をPackage Managerからプロジェクトに読み込み、カメラとボリュームオブジェクトを設定していきます。

  • Unity2018.1.xを起動したら、WindowメニューからPackage Managerを選びます

f:id:am1tanaka:20180518083357p:plain

  • All -> PostProcessing -> Install 2.0.5-previewの順にクリックしていきます

f:id:am1tanaka:20180518084513p:plain

  • インストールが完了したら、Packagesダイアログの右上のxをクリックして閉じます

Cameraにレイヤーを設定

PostProcessingを適用したいカメラにPost-process Layerコンポーネントを追加します。

  • HierarchyビューからPostProcessingを適用したいカメラを選択します
  • InspectorビューでAdd Componentをクリックして、Rendering -> Post-process Layerをクリックして追加します

f:id:am1tanaka:20180518084955p:plain

f:id:am1tanaka:20180518085123p:plain

  • Anti-aliasingは任意で。モバイルやVRなど軽量にしたい場合はFXAA、デスクトップなど高負荷で構わない場合は用途に合わせてSMAA, TAAでもよいでしょう

Trigger

Triggerは、後に設定するPost-process Volumeのうち、Localなものを発動させる距離を決めるtransformのオブジェクトを指定します。通常はデフォルトでアタッチしてあるカメラのままで構いません。トップビューのゲームの場合、カメラではなく、プレイヤーオブジェクトからの距離で発動範囲を設定できた方が便利かも知れません。そのような時、ここにプレイヤーオブジェクトを設定します。

Layer

このカメラが影響を受けるPost-processing Volumeを設定したゲームオブジェクトのレイヤーを設定します。Unity2018.1.xにはデフォルトでPostProcessingレイヤーが定義されているので、設定するとよいでしょう。古いプロジェクトに適用する場合など、レイヤーがない場合は自分で追加してください。無効なオブジェクトを含めるとパフォーマンスに影響するので、DefaultやEverythingを選択するのは推奨されていません。

Anti-aliasing

Post Processによるアンチエイリアシング(ドットのギザギザを滑らかにする処理)を使いたい時に設定します。FXAAがモバイル用の軽量なもの。SMAAはハイクオリティーですが、モバイルには不向きで、VR/ARでは現状で非対応のもの。TAAは過去のフレームなどを使ったアルゴリズムでやはりFXAAより高負荷で、リソースも食い、数年前のopenGLES2のモバイル端末は非対応のものです。FXAAを選択しておいて、必要に応じてその他のものに変更して様子を見るのが良さそうです。

Stop NaN Propagation

真っ黒な場所にPost Processを適用しようとすると無効な計算が行われておかしな現象が起きたりするので、それを防ぐ設定です。基本的にtrueのままにしておくのがよいでしょう。

Post-process Volumeを設定

これがv2で新しく増えた設定です。Post Processを適用する範囲や内容を個別に設定して、レイヤーやTriggerからの距離で適用範囲を切り替えられるようになりました。シーン全体で設定する場合は、1つだけ設定すれば構いません。それ用の空のオブジェクトを作成することが推奨されていますので、それに従います。

  • GameObjectメニューからCreate Emptyを選択して、空のゲームオブジェクトを作成します。ゲームオブジェクトの名前はPostProcess Volumeなどにしておくとよいでしょう
  • InspectorビューのLayerで、先ほどカメラのLayerに設定したものを設定します。今回はPostProcessingです

f:id:am1tanaka:20180518091848p:plain

  • InspectorビューからAdd Componentをクリックして、Rendering -> Post-process Volumeを選択して追加します

f:id:am1tanaka:20180518091932p:plain

  • シーン全体に適用して構わない場合は、Is Globalをチェックします

f:id:am1tanaka:20180518092705p:plain

ここにチェックを入れないと、このゲームオブジェクトと、カメラのPost-process LayerTriggerに設定したオブジェクトの距離がBlend Distance欄で設定した距離以内になった時に、Post Processが発動するように設定できます。

  • Profile欄のNewボタンをクリックして、このPost-process Volumeで発動させたいプロファイルデータ用のアセットを生成します

f:id:am1tanaka:20180518092718p:plain

以上で、Post Processの初期設定完了です。効果を設定していきます。

Post Processを設定する

Post Processの内容は、Post-process Volumeオブジェクトで設定できます。定番のBloomを設定してみます。

  • Hierarchyビューで、設定したいPost-process Volumeが設定されているオブジェクトを選択します

f:id:am1tanaka:20180518092955p:plain

  • InspectorビューのPost Process VolumeコンポーネントAdd effect...ボタンをクリックします

f:id:am1tanaka:20180518093043p:plain

  • Unity -> Bloomを選択します

f:id:am1tanaka:20180518093337p:plain

  • InspectorビューにBloomが追加されるので、クリックして開きます

f:id:am1tanaka:20180518093500p:plain

Bloomが使えない ?

ここでものすごく引っかかりました。全ての項目が無効になっていて操作できません...。何が悪いのかと色々と調べまくった後、左の丸の部分がクリックできることに気づきました...。

f:id:am1tanaka:20180518093631p:plain

  • Intensityの左の●をクリックして有効にしたら1を入力します

f:id:am1tanaka:20180518094016p:plain

以上でBloomが有効になります。他の項目もチェックを入れれば使えるので必要に応じてチェックを入れて設定してください。あとは光らせたいオブジェクトのマテリアルの設定をします。

オブジェクトを輝かせる

Sphereなどを作成したら、Materialを作成して適用します。

  • Bloomの効果を出すには、自己発光させますので、マテリアルのEmissionにチェックを入れます

f:id:am1tanaka:20180518094249p:plain

  • EmissionのColor欄をクリックします

f:id:am1tanaka:20180518094331p:plain

  • 輝かせたい色を設定したら、Intensity欄を1以上の値にします。例では5にしています

f:id:am1tanaka:20180518094353p:plain

光りました!

f:id:am1tanaka:20180518094451p:plain

Directional Lightを日没させて、SphereのIntensityを3程度に下げて、全てのオブジェクトをStaticにしてみました。やっぱBloomいいですね!

f:id:am1tanaka:20180518095534p:plain

まとめ

v2では、カメラへの設定に加えて、発動条件を設定できるPost-processing Volumeの設定が必要になりました。これにより、シチュエーションや環境に応じて、自動的に演出を切り替えられるようになりました。また、それぞれのエフェクトの項目ごとに有効/無効を設定できるようになったので、パフォーマンスも良さそうです。

注意点としては、多くの機能がデフォルトでは無効になっていることです。何らかの設定をしないと効果が現れず、あれ?となることが増えたように思います。このような設定は初心者には厳しいので、正規版では修正して欲しいところです。また、公式機能にも関わらず、UIのデザイン方針が他の機能と異なるのはよくありません。この辺り、今後の改良に期待です。(この辺りは最新版で早速変わった模様です。さすがUnityさん、仕事速い 2018/7/9追記)

参考URL

AtomでCannot load the system dictionary for 'ja_JP'というエラーが発生した

macAtomでファイルを開いた時にCannot load the system dictionary for 'ja_JP'というエラーが表示されていたのを対処した方法です。

f:id:am1tanaka:20180519145702p:plain

原因はこちらの模様。

spell-check throws an error at atom launch · Issue #253 · atom/spell-check · GitHub

Atomにデフォルトでインストールされているスペルチェックのパッケージが、英語以外のシステムだと設定ファイルが見つけられずに、それを知らせるためにエラーを出しているようです。

スペルチェックいらない、という場合はパッケージを無効にすればエラーは出なくなります。

  • AtomメニューからPreferencesを開きます
  • Packagesを選択して、検索欄にspellと入力します
  • spell-checkが列挙されたら、Disableボタンをクリックします

以上です。

Atomの日本語スペルについては、atom spell-check 日本語で検索すると色々と出てくるので、スペルチェックを利用するにはそれらを調べて見ると解決するかも。