tanaka's Programming Memo

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

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でつまづいたのでメモです。

※PPS用のレイヤー追加を手順に加えました(2020/8/2)

目次

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

  • PPSレイヤーが見つからない場合は、Layer欄からAdd Layer...を選んで、開いているレイヤーに追加してから、改めて操作して選択します
  • 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メニューから3D Object > Post-process Volumeを選択します
    • 2018以前のUnityだと上記がないかも知れないので、GameObjectメニューからCreate Emptyを選択して空のゲームオブジェクトを作成して、名前はPostProcess Volumeなどにします
    • InspectorビューからAdd Componentをクリックして、Rendering -> Post-process Volumeを選択して追加します

f:id:am1tanaka:20180518091932p:plain

  • InspectorビューのLayerで、先ほどカメラのLayerに設定したものを設定します。今回はPostProcessingです

f:id:am1tanaka:20180518091848p: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 日本語で検索すると色々と出てくるので、スペルチェックを利用するにはそれらを調べて見ると解決するかも。

Mesh Bakerを使ってみた(LODについて追記)

シーン内の別々のゲームオブジェクトで構成されるメッシュを、マテリアルやシェーダーごとに合体、あるいは、マテリアルも合体させて、ドローコールを減らして高速化してくれるという人気アセットMesh Bakerを使ってみました。

紹介に先立って補足

Mesh Bakerを利用して効果があるのは、多くのマテリアルやシェーダーをバラバラに使っているオブジェクトで構成したシーンです。同じマテリアルを使ったシーンの場合は、Mesh Bakerを利用するメリットは少ない可能性があります。

また、Mesh Baker LODは、事前に用意したポリゴン数を減らしたモデルをこちらで用意して、それを切り替えてくれるというものです。自動的にポリゴン数の削減をやってくれる訳ではないのでご注意ください。これは、Unity謹製のLOD Groupも同様です。

条件に合致した上で、自前でポリゴン数を減らしたモデルを用意すれば、かなりの効果が期待できます。

(2018/5/17追記)

目次

利用したシーン

体験講義用に作成したUNetのマルチ対戦的プロジェクトに適用してみました。立方体や、ProBuilderの円柱、階段などを使ってステージを作ったので形はシンプルなのですが、思いのほか色々と置いてしまったのでそれなりに重そうなステージになっていました。

Mesh Baker適用前はこんな感じでした。

f:id:am1tanaka:20180510223601p:plain

f:id:am1tanaka:20180510223608p:plain

黄緑の足場をMesh Bakerで合体させます。ただし、1つに統合するとカリングなどで不利になるので、適当なグリッドで分割します。

Mesh Bakerでメッシュを統合する

Asset Storeで購入して、通常通りダウンロード&インポートしました。セール中に購入したので$45.5で買えました^^

チュートリアルを見る

動画チュートリアルが用意されていたので、以下の2つを見ました。

www.youtube.com

www.youtube.com

ゲームオブジェクトを準備する

Mesh Bakerを使ってメッシュを統合するには、TextureBakerオブジェクトをシーンに配置します。対象のプロジェクトを開いて、Asset StoreからMesh Bakerをダウンロード&インポートしてから作業してください。

  • GameObjectメニューから、Create Other -> Mesh Baker -> TextureBakerを選択します

f:id:am1tanaka:20180511004249p:plain

以上で、HierarchyビューにTextureBaker(0)というオブジェクトが生成されます。これを使って、メッシュの選択やマテリアルの結合、Mesh Bakerオブジェクトの作成などを行います。

オブジェクトを選択する

くっつける対象のゲームオブジェクトを選択します。最初のチュートリアルでは、メッシュを持ったゲームオブジェクトを一つずつドラッグ&ドロップしていますが、このシーンのメッシュは階層構造になっている上に200を越えるオブジェクトがあるのでやってられません。そこで、Adding Objectsツールを利用します。

  • HierarchyビューのTextureBaker(0)をクリックして選択します

f:id:am1tanaka:20180510224730p:plain

  • InspectorビューからOpen Tools For Adding Objectボタンをクリックします

f:id:am1tanaka:20180510225038p:plain

  • ダイアログが開くので、Search For Meshes To Addボタンをクリックします

f:id:am1tanaka:20180510225124p:plain

  • Hierarchyビューで、統合したいゲームオブジェクトを選択しておきます

f:id:am1tanaka:20180510225625p:plain

  • MB3_MeshBakerダイアログで、追加するオブジェクトの条件を設定します。今回は以下のようにしました。
    • Staticなオブジェクトにする
    • Enableなオブジェクトにする
    • UVが範囲外のオブジェクトもあるので、それは除外しません
    • すでに追加済みのオブジェクトは除外します

f:id:am1tanaka:20180510225455p:plain

  • 以上設定したら、Add Selected Meshes To Targetボタンをクリックします

以上で選択完了です。Inspectorビューで、Object To Be Combinedの左の三角アイコンをクリックして開いてみてください。条件にあったオブジェクトが選択されているはずです。

f:id:am1tanaka:20180510225940p:plain

結合マテリアルとBakerオブジェクトの生成

次に、結合したマテリアルやシェーダーと、Bakeを行うためのオブジェクトを生成します。

  • Analyse Scene & Generate Bakersボタンをクリックします

f:id:am1tanaka:20180510230150p:plain

  • グループ分けする基準があれば設定します。今回はデフォルトのままにしました
  • 結合マテリアルを保存する先のフォルダーを指定するために、Select Folder For Combined Material Assetsボタンをクリックします

f:id:am1tanaka:20180510230437p:plain

  • Assetsフォルダーから、必要なら新しくフォルダーを作成して、フォルダーを選択します

f:id:am1tanaka:20180510230426p:plain

  • List Shaders In Sceneボタンをクリックします

f:id:am1tanaka:20180510230437p:plain

指定したグループ分けの基準に沿って、シーン内のシェーダーとマテリアルがグループ化されます。

f:id:am1tanaka:20180510230642p:plain

  • リストアップされたGenerate Bakerボタンをクリックしていって、統合マテリアルとBakerオブジェクトを生成します

f:id:am1tanaka:20180510230918p:plain

f:id:am1tanaka:20180510231020p:plain

HierarchyビューにはBakerオブジェクトが、Projectビューの保存先として指定したフォルダーにはマテリアルとシェーダーが生成されます。

f:id:am1tanaka:20180510231245p:plain

f:id:am1tanaka:20180510231108p:plain

統合メッシュを生成する準備が整いました。

Adding Objectツールは役目を終えたので閉じて構いません。

クラスター分割する

このまま生成すると、シーン全体がまとめられてしまいます。ドローコールは減るかも知れませんが、カリングが効かなくなるので描画ポリゴン数が増えてしまう恐れがあります。適切なサイズに分割して生成するようにします。

  • HierarchyビューのMeshBaker-Standard-LM-1の左の三角をクリックして開きます

f:id:am1tanaka:20180511010004p:plain

  • 子供のMeshBakerは、まとめてオブジェクトを生成するためのものなので、分割する場合は不要です。選択して削除します

  • HierarchyビューのMeshBaker-Standard-LM-1をクリックして選択し直します

  • InspectorビューからCluster Type欄を見つけて、Agglomerativeに変更します

f:id:am1tanaka:20180511012142p:plain

  • 今回のシーンは大きいので、Max Distanceを最大の10にしておきます

f:id:am1tanaka:20180511012154p:plain

  • InspectorビューのBake Materials Into Combined Materialボタンをクリックして、マテリアルを再生成しておきます

f:id:am1tanaka:20180510234541p:plain

  • Click To Build Clustersボタンをクリックします

f:id:am1tanaka:20180511012239p:plain

エラーが発生しましたが、とりあえず動いたので気にせず進めました。

  • Generate Mesh Bakersボタンをクリックして、Bakerを生成します

f:id:am1tanaka:20180511011016p:plain

これで、MeshBakerが自動的に判断したエリアに分割してくれました。

統合したメッシュオブジェクトを生成する

統合したメッシュオブジェクトを生成します。

  • InspectorビューのBake All Child MeshBakersボタンをクリックします

f:id:am1tanaka:20180510234910p:plain

Hierarchyビューに、分割されたメッシュオブジェクトが生成されました。

f:id:am1tanaka:20180511012717p:plain

他にもオブジェクトがあれば、同様の手順で生成していきます。

仕上げ

元のオブジェクトを削除したり、当たり判定を入れたりして仕上げます。

元のオブジェクトを消す

元のオブジェクトをDisableにするだけであれば、HierarchyビューからTextureBaker(0)を選択して、InspectorビューでDisable Renderers On All Child MeshBaker Source Objsボタンをクリックすれば、自動的に該当するオブジェクトを無効にしてくれます。

f:id:am1tanaka:20180510231739p:plain

完全に不要な場合は、Hierarchyビューから削除してもよいでしょう。

f:id:am1tanaka:20180510231851p:plain

関連オブジェクトの削除

役目が終わったら、TextureBaker(0)なども消して構いません。

f:id:am1tanaka:20180510232002p:plain

当たり判定の設定

元のオブジェクトを削除してしまったので、当たり判定も消えてしまいました。Mesh Colliderを追加して、当たり判定を復活させます。

  • Hierarchyビューの検索ボックスに-mesh-と入力すると、統合したメッシュオブジェクトが表示されるので、すべて選択します

f:id:am1tanaka:20180511013201p:plain

  • InspectorビューでAdd Componentをクリックして、Physics -> Mesh Colliderを追加します

f:id:am1tanaka:20180510232330p:plain

Staticオブジェクトにしたいので、その設定をします。

  • Hierarchyビューの検索ボックスにCombinedMesh-と入力すると、統合メッシュオブジェクトの親が表示されるので、すべて選択します

f:id:am1tanaka:20180511013327p:plain

  • InspectorビューのStaticにチェックを入れます

f:id:am1tanaka:20180510232741p:plain

  • 子供もすべてstaticにしたいので、Yesをクリックします

f:id:am1tanaka:20180510232757p:plain

以上で完了です。Hierarchyがそのままだと使いづらいので、検索ボックスのxをクリックして検索を解除しておきましょう。

f:id:am1tanaka:20180511013457p:plain

成果

以上で完了です。成果を確認してみます。

f:id:am1tanaka:20180510235656p:plain

もともとマテリアル一つだったので、ドローコールは変化ない模様。Saved by batchingは667から0になってます。

効果的ではなかろうかというのはShadow castersの数で、607から33に激減。

しかし、ポリゴン数が増えちゃいました。

f:id:am1tanaka:20180510235731p:plain

上空ビューも似たような傾向で、Shadow castersが激減してます。

ポリゴン数が増えたことによってパフォーマンスは相殺されて、ほとんど差が分からなかった、というのが今回の結果でした^^;

まとめ

オブジェクトを統合することで、Shadow castersを大幅に減らすことに成功しました。しかし、オブジェクトを統合したことで描画対象のポリゴン数がうまく減らず、パフォーマンスの向上は微妙でした。

本来は、沢山マテリアルやシェーダーがあるシーンで、それらを統合してドローコールを減らすのが目的の機能なので、マテリアルをそれほど使ってないシーンだと効果はあったりなかったりでした。

しかし弾は残っています。Mesh Bakerの追加アセットMesh Baker LODも入手しています。これはLOD(Level Of Detail=距離に応じてモデルのポリゴン数を切り替える機能)をやってくれるやつで、まさにポリゴン数を減らしてくれるやつです。これと組み合わせた時に真価を発揮するに違いないと期待しています。

参考URL