ローグライクゲーム制作を振り返って（2015年）
2016年もあと少しで終わりですね。少し気が早いかもしれませんが、ここまでのゲーム制作を振り返ってみようと思います。
2016年を振り返る前に、2015年を振り返ってなかったので（汗）、まずはプロジェクトの初期の頃をまとめました。
1. 潜伏フェーズ（〜2015/9）
本格的にゲームをつくりはじめたのは、2015年9月からでした。それまでも、Objective-Cでローグっぽいものを途中まで制作したりしていましたが、挫折してエターナったりしていまして....いい加減何かちゃんと作ろうと思い始めたのがこの頃です。
この時点ではダンジョンマップの自動生成、キャラの移動、フロアの移動が実装されているだけですね。まだまだゲームと呼べるものではなかったです。
今振り返っても、このシンプルなビジュアルは嫌いじゃないですね。ただ、このビジュアルだと敵のモンスターのバリエーションを出すのが大変だということに気づき、後にキャラは3Dボクセルで置き換えることになります。
2. プロトタイプフェーズ（2015/9〜2015/12）
見た目はあまり変わってませんが、モンスターに攻撃したり、アイテムが使えるようになったり、レベルアップしたり、死亡したり...
結構バグはありつつも、ダンジョンの基礎部分の実装がされてます。
プロトタイプフェーズで実装した内容を下記に書き出しました。すでに結構な実装量なんですよね。昔パズルゲームを作ったことがありますが、それに比べてローグライクゲームはとにかく実装することがたくさんあるゲームだなと思った記憶があります。そしてこれだけ実装しても、まだゲームの面白さがわかるまでには至らないのかと思ったりもしました。懐かしいです。
・マップの自動生成/ミニマップ表示/階段でフロア移動/
・プレイヤー移動/向き変更/攻撃/通路でダッシュ/レベルアップ/HP自然回復/満腹度/足踏み/攻撃ミス
・モンスター配置/移動AI/攻撃AI/プレイヤー死亡
・アイテム初期配置/アイテム取得/装備/使う/投げる/置く/アイテム効果実装（草、パン、巻物）
・モンスターハウス/突風（ターン数超過）/モンスター特殊攻撃（力下げ、睡眠、吹き飛ばし）
・アイテムドロップ/罠/状態異常実装
関連記事
2016年の振り返りはこちらから
Unity 5.5 にアップデートしたら TexturePacker の画像が崩れてしまう件
Unity を 5.3.6f1 から 5.5.0f3 にアップデートしたら、見た目がおかしくなってしまいました（左：BEFORE、右：AFTER）。
川（水たまり？）の画像のエッジ部分がずれてしまってます。表示が崩れてしまった部分はTexturePackerで画像をまとめていた箇所でした。Unity Editor上で見ると、画像が正しく分割されてない（正確には何も分割されてなくて、パッキングした画像がそのまま出てしまっている）状態でした。
ネットで同じ症状の人がいないか調べても検索に出てこなくて、インポートし直したり、リフレッシュしてみたり、TexturePacker本体をアップデートしたり、Texture Packer Importer をアップデートしたりしてみたのですが、どうしても解決できず・・・
こうなったら Unity をダウングレードしようと思って 5.4.3f1 にしたところ、Sceneファイルを開こうとすると今度はUnityが落ちるようになりました。Unity 5.5 でセーブしたシーンは Unity 5.4 では開けないのでしょうか..
詰んでしまったようです... ＼(*T▽T*)／ﾜｰｲ♪
仕方ないので Unity 5.5 をもう1回ダウンロードしてきてインストール。プロジェクト直下にある Library フォルダと Temp フォルダを削除して、再度Unityを起動。
・・な、なおってるっ！Σ(￣ロ￣lll)
なぜ・・・なぜ・・・・
いや、なおって良かったんですが、すごく気持ちが悪いです... (_ _|||)
【Unity】Unity で ゲームデータをセーブするのに FlatBuffers を使ってみる（導入編）
永続化したいデータ（ゲームを終了しても残しておきたデータ）をどうやって保存するのが最適なのかはいつも悩みます。今開発中のゲームはサーバを使用しないつもりなので、データはローカル（端末）に保存するつもりですが、パッと思いつくだけでも色んな実装方法が考えられますね。
- PlayerPrefs に保存
- SqlLite に保存
- オブジェクトをJsonファイルに変換して保存
- オブジェクトをバイナリに変換して保存
今回は比較的大量のデータを高速で保存したかったので「オブジェクトをバイナリに変換して保存」を採用しました。今までは MessagePack を使ってオブジェクトをバイトデータに変換してたのですが、さらに速いと噂の FlatBuffers を使ってみることにしました。FlatBuffers は cocos-2dx や Facebook でも採用されているみたいです。
FlatBuffers のインストール
導入するまでが結構面倒です（そのうち改善されるとは思いますが..）
Windows だとexeファイルが用意されているようなので簡単そうですが、Macだとソースコードからビルドして実行環境を作らないといけません（*1）
FlatBuffers のソースコードをダウンロード
下記の FlatBuffers の github に行って...
右側の 「Clone or download」からソースコード一式をダウンロード
ダウンロードしたファイルは解凍して適当な場所に置いてください。
CMake のインストール
CMake がインストールされてなければ、下記サイトへ行って...
Mac用をダウンロード
ダウンロードしたファイルをダブルクリックしてアプリケーションをインストール。
CMake の実行
インストールした Cmake.app をダブルクリックして起動すると、下記の画面が立ち上がるので...
[Where is the source code] に 先ほどダウンロードしたFlatBuffersのソースコード（flatbuffers-master）を指定
[Where to build the binaries] には任意のフォルダを指定（ビルドしたファイルが格納される場所です。flatbuffers-build とか適当なフォルダを作成して選択すればOK）
Configure ボタンを実行するとこんな画面が...
赤くてびっくりしましたが、気にせずGenerateボタンを実行
下のウィンドウに Generating doneと出てれば完了。出力先に指定したフォルダに各種ファイルが生成されてるはず。
Make を実行
ターミナルを開いて、先ほど出力先に指定したフォルダに移動して
make
を実行！終わったら、
./flattests
を実行してみて、「ALL TESTS PASSED」と出力されればインストール成功！
Unity で FlatBuffers を使用するための準備
スキーマファイルを作成
とりあえず動かすことが目標なので、UserData というテーブルの中にCoinNum変数があるだけの構造を定義しました。
namespace Rogue;
table UserData {
coinNum:int;
}root_type UserData;
これを UserData.fbs というファイル名で保存しました。公式のサンプルにならって拡張子を fbs (FlatBuffersの略だと思われる）にしましたが、中身は単なるテキストファイルです。拡張子を txt にしても問題なく動きました。
クラスを自動生成
バイナリデータをC#で扱うためのクラスファイルを、スキーマファイルから自動生成します。
./flatc -o [出力先のパス] -n [スキーマファイルのパス（ex: UserData.fbs）]
実行すると出力先のフォルダに UserData.cs が生成されるはずです。生成されたクラスは Unity のAsset フォルダ内の任意の場所に置いてください。
FlatBuffers ライブラリを Unity へインポート
github からダウンロードしたフォルダ（flatbuffers-master）のnetフォルダ配下にある FlatBuffers フォルダを Unity の Assetフォルダ以下へコピー。
実装サンプル
書き込み処理サンプル
バイナリデータを保存する処理のサンプルです。 Startを呼んで値を設定してEndを呼んで最後にFinishという流れで書かないとエラーになります。
// 事前に using FlatBuffers; が必要
FlatBufferBuilder fbb = new FlatBufferBuilder (1);
// 値を設定する前に Start を呼び出す必要があるみたい
UserData.StartUserData (fbb);
// コイン数を15枚で設定
UserData.AddCoinNum (fbb, 15);
// 値の設定が終わったら End を呼び出して..
Offset<UserData> offset = UserData.EndUserData (fbb);
// 最後に Finish すると バイナリデータが生成されるのかな
UserData.FinishUserDataBuffer (fbb, offset);
// 最終的にバイナリデータをファイルに書き出して完了
using (MemoryStream ms = new MemoryStream(fbb.DataBuffer.Data, fbb.DataBuffer.Position, fbb.Offset)) {
File.WriteAllBytes(filePath, ms.ToArray());
Debug.Log("SAVED !");}
filePath には
Path.Combine (Application.persistentDataPath, "UserData.bytes")
などを出力先のパスを設定してください。
読み込み処理サンプル
読み込みのほうが簡単ですね。
if (File.Exists (filePath)) {
ByteBuffer bb = new ByteBuffer (File.ReadAllBytes (filePath));
UserData userData = UserData.GetRootAsUserData (bb);
Debug.Log ("## user coin num = " + userData.CoinNum);
}
あとがき
導入の手軽さで言えば、MessagePack のほうが圧倒的に簡単ですね。JSONで出力してて遅いなと思った時は MessagePack に簡単に移行できます。シリアライズの実装も MessgePack だと1行で済むところが、FlatBuffers だと スキーマファイルを作成して、決められた順序でデータをセットしなきゃいけないので（子要素がある場合は子要素から順番にシリアライズしないといけないとか）、開発コストがかかりそうです。
MessagePack もそこそこ速いので、データ量が多くなければ速度差はそこまで気にならないかもしれないですね。ただ、MessagePack だとオブジェクトを丸ごとシリアライズして保存するので保存ファイルに定義データが含まれるのですが、FlatBuffersだとスキーマが別ファイルなので、ファイルサイズが小さくて済みそうです。
あと、FlatBuffers は生のバイナリデータを持ったまま、必要な時に必要な分だけパース処理をするので、大量にデータはあるんだが実際に使用するデータはごく一部の場合は、FlatBuffes のほうがかなり速くはなりそうです。
参考資料
C# での FlatBuffers を使う流れが解説してあります。
運用面での考察が興味深いです。
英語ですけど、1番わかりやすかったです。
FlatBuffers が何故速いのか、とても参考になりました。
*1:後から知ったのですが、Homebrewでもインストールできるみたいです。こっちのほうが簡単だったかも。
【Unity】MagicaVoxel のモデルに Blender でアニメーションをつけて Unity で動かす（前編）
以前の記事では、MagicaVoxel で3Dドットモデルを作成して、Unity に取り込んで動かすまでをやりました。
実際には、3Dドットのボクセルモデルに攻撃モーションなどのアニメーションをつけたいので、MagicaVoxel でエクスポートしたオブジェクトをそのまま Unity に取り込むのではなく、一旦 Blender 取り込んでアニメーションを追加してから Unity にインポートする方法を試してみることにします。
Blender の インストール
下記のサイトからダウンロードします。
私の場合は Mac なので、
Blender 2.77a for Mac OSX
のZipをダウンロードしました（2.77a は 執筆時点での最新版）
ダウンロードしたZipファイルを解凍して、アプリケーションフォルダなど任意のフォルダに置けばインストールは完了です。フォルダ内の Blender.app をダブルクリックすれば、Blender が起動します。
MagicaVoxel のモデルを Blender にインポート
不要な立方体を削除する
Blender を起動すると、デフォルトで立方体が作成されるので削除しておきます。立方体を左クリックで選択して（選択しても反応があまりないので不安になりますが、オレンジの枠で囲まれてたら選択されてます）、x キーを押すと下記のような確認ダイアログが表示されるので Delete をクリックします。
ショートカットキーを覚えられないという方は、右上に Unity でいうHierarcy Viewみたいな小さなウィンドウがあるので、そこからでも操作できます。立方体オブジェクト（Cubeという名前になってます）を選択後、右クリックして Delete を選択しても削除できます。
MagicaVoxel のデータをインポート
- File > Import > Wavefront (.obj) を選択
- MagicaVoxel で エクスポートした objファイルをダブルクリック
灰色のかなり大きい（?）状態で、モデルが Blender にインポートされました。（マウスのホイールで視点の拡大縮小ができます）
モデルのサイズを小さくする
モデルを選択した状態で s キー（左のToolタブのScaleボタンでもよい）を押してマウスを動かせばモデルのサイズを変更できます。Scale値を直接入力したい場合は、その状態で数値を入力しEnterを押してください。例えば、0.2 と入力してEnterを押せば 20% の大きさになります。実行後は、左下の Resize の Vector が すべて 0.2 になっているのが確認できます。
テクスチャーを設定
下のほうの丸いアイコンを選択して、テクスチャを選択すると色が付きます。
ライトの設定
顔にライトが当たってなくて暗くなっているので、ライトの位置を調整します。右上のHierarcy から Lamp を選択。デフォルトではかなり遠くにあるので、マウスホイールで視点を縮小してください。
左下にある浮き輪みたいな丸は関係ないのでご注意を。（最後に選択した位置を表してるだけっぽいです）Tool の Translate ボタンを選択してマウスを動かせば位置を移動できます（見えやすくするだけなので適当な位置で大丈夫なはず）
ファイルをセーブする
一度ファイルを保存しておきましょう。File > Save で 場所とファイル名を設定して、Save Blender File を押せば完了です。
Unity に取り込む
慣れないツールで疲れたので、まだアニメーションはつけてないですが、一度 Unity にインポートして動作確認することにしました。
1. File > Export > FBX (.fbx) を選択
2. 左のサイドバーの Selected Objects にチェックをつける（チェックしないと Cameraや Lamp オブジェクトも一緒にエクスポートされてしまいます）
3. Scale の値を 100 に変更（100にするとBlender上での座標値1とUnity上での座標値1が同じになるそうです）
4. 任意の場所を設定し、右上の Export FBX ボタンを押します。
5. エクスポートした FBX ファイルを Unity にドラッグ＆ドロップ
6. Materialフォルダが自動的に生成されるので、中にあるマテリアルのテクスチャ画像を設定
無事、インポートできましたー！
あとがき
Blender の UI や操作が独特で、慣れるまで時間がかかりそうです。また、MagicaVoxel でモデルを変更したら、1回Blenderに取り込んでから Unity に取り込まないといけないので、モデルの微調整する場合に手間がかかりそうです。でも、無料で提供してもらえるのは本当に有難いことですし、もう少し使ってみようかなと思います。とりあえず、次の後編ではアニメーションをつけるところまでいきたい！
追記：後編書きました！
参考記事
【Unity】マルチタッチの開発に役立つ Unity Remote
ピンチイン、ピンチアウトで拡大縮小する処理を Unity で実装する際に、いちいちビルドして実機に転送して確認だと開発効率が悪いので Unity Remote を使ってみたのですが、結構使えたので導入手順を記載しておきます。
Unity Remote を使えば、Unity Editor 上の画面とデバイスの画面が同期されるので、ソースコードを修正したらデバイスですぐに確認することができます。マルチタッチだけではなく、加速度やジャイロなどの端末固有の入力処理を開発するときに使えそうです。
導入手順（思ったよりも簡単でした）
1. iOSの場合、App Storeから Unity Remote 5 をインストールする
2. PC と 端末 を ケーブルで接続する
3. Unity の メニューから Editor > Project Settings > Editor を選択する
4. Editor Settings のインスペクタで、Unity Remote の Device を 接続した端末に変更する
5. 端末にインストールした Unity Remote アプリを起動する
6. Unity の再生ボタンを押す
注意点
Unity Remote は便利だったのですが、マルチタッチの場合に TouchPhase.Ended の入力が取れないようです。
TouchPhase で 判定しないように書くこともできるみたいですが、今からそのために入力処理を書き換えるのは避けたかったので、最悪、End（手を離した）イベントが受け取れなくても致命的なエラーにならないようにすることで対処しました。
Unity3D:タップ操作の監視(領域指定付き) - devlog [naru design]
参考記事
【Unity】3Dモデルにシェーダーでアウトラインをつける（失敗編）
キャラクターと背景の色が同系色だと見にくいので、白猫プロジェクトみたいに3Dキャラクターの周りを線で囲みたいと思い、やりかたを調べてみました。
トゥーンシェーダー
最初に行き着いたのが、トゥーンシェーダー。
Unity 付属のシェーダーにアウトラインを付けるトゥーンシェーダー（Basic Outline）があるので、試してみました。
1. Assets > Import Package > Effects を実行
2. キャラクター の Material に Toon > Basic Outline を適用
実行した結果（左がBEFORE、右がAFTER）がこちら
=> 
髪の毛が全部1色で塗りつぶされちゃってるし、アウトラインもブツブツしてて綺麗に出てない！ソウジャナイヨー！
ステンシルバッファ
次に試したのが、ステンシルバッファを使ったアウトライン表現。
自分でシェーダーを書かなくてはいけないらしい（シェーダー書いたことない）。とりあえずは、新規に作成した適当なシェーダーを適用してみます...
- 任意の場所で、右クリック > Create > Shader > Standard Surface Shader（ファイル名は、ここでは CharacterShader にしました）
- キャラクターの Material の Shader で Custom > CharacterShader を選択
結果はこちら（左がBEFORE、右がAFTER）
=> 
とりあえず、新規シェーダーを適用するところまでは試せましたが...ん？なんか暗くない？ん？気のせいじゃないですよね？
もともとキャラクターは Mobile/Diffuse のシェーダーを適用してたのに、別のシェーダーに置き換わったので見た目が変わってしまったんですね、きっと。ということは、Mobile/Diffuse のコードをベースにアウトラインの修正を加えればいいのかな。
てっとり早くシェーダーのコードだけ欲しかったので、Unity内蔵シェーダーのソースコードをのせてくれている、この記事はありがたいです。
Mobile/Diffuse のソースコードを、先ほど新規作成したシェーダーにコピペしたら、とりあえず元に戻りました。そこから、悪戦苦闘すること数時間... こんな感じのシェーダーを書いて試したところ...
Shader "Custom/CharacterShader" {
Properties {
_MainTex ("Base (RGB)", 2D) = "white" {}
_Outline ("Outline Length", Range(0.0, 10.0)) = 0.1
_OutlineColor ("Outline Color", Color) = (1, 1, 1, 1.0)
}
SubShader {
Tags { "RenderType"="Opaque" }
LOD 150
Stencil {
Ref 128
Comp always
Pass replace
}
CGPROGRAM
#pragma surface surf Lambert noforwardadd
sampler2D _MainTex;
struct Input {
float2 uv_MainTex;
};
void surf (Input IN, inout SurfaceOutput o) {
fixed4 c = tex2D(_MainTex, IN.uv_MainTex);
o.Albedo = c.rgb;
o.Alpha = c.a;
}
ENDCG
Pass {
Stencil {
Ref 128
Comp NotEqual
}
Cull Off
ZWrite Off
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
float _Outline;
float4 _OutlineColor;
struct appdata {
float4 vertex : POSITION;
float3 normal : NORMAL;
};
struct v2f {
float4 pos : SV_POSITION;
};
v2f vert(appdata v) {
v2f o;
float4 vert = v.vertex;
vert.xyz += v.normal * _Outline;
o.pos = mul(UNITY_MATRIX_MVP, vert);
return o;
}
half4 frag(v2f i) : COLOR {
return _OutlineColor;
}
ENDCG
}
}
FallBack "Diffuse"
}
結果はこちら（左がBEFORE、右がAFTER）
=> 
斜めはわりとキャラを囲めてるのに、正面向いた時に横の部分のアウトラインが消えてる... うううううう、なんでやー。誰か助けてください（涙
長くなったので一旦ここまでで... 成功したら、記事の続き書きます...
参考記事
Unity のアプリを TestFlight で配信する（iOS編）
ゲームがある程度動くようになったので、自分以外の人（特に非エンジニア）にも遊んでもらうために、TestFlight で 開発途中のゲームを特定のメンバーにだけ配信することにしました。iOS の場合、配信までの手続きが多くて大変だったのでまとめておきます。全体の流れは、以下の記事が参考になりました。
1. iTunes Connect で 新規 App の作成
iTunes Connect のWebページ（https://itunesconnect.apple.com/）を開いて、新規Appを作成します。このままリリースする訳ではないので、中身の情報は仮でいいと思いますが、バンドルIDは、ビルドをアップロードしてしまうと変更できないので、確定させておいたほうがいいかもしれません。
- iTunes Connect を開く（https://itunesconnect.apple.com/）
- マイ App > 左上の+ボタン > 新規 App で App を作成
2. テストユーザーの追加
事前に招待するテスターのメールアドレス（App Store の アカウントに使用しているメールアドレス）を聞いておきましょう。
- iTunes Connect を開く（https://itunesconnect.apple.com/）
- ユーザと役割（マイ App ではないので注意）> iTunes Connect ユーザ > +ボタン で 招待するユーザ情報と権限を設定（ひとまず権限はDeveloperに設定）
- テストユーザの登録が完了すると、招待メールが送信されるのでテスターが承認してくれるまで待つ
3. Unity でビルド
Unityでビルドを実行し、iOS用のプロジェクトを出力します。
- Unity を起動後、File > Build Settings を開く
- ビルド前に Platform を iOS に変更し、Development Build にチェックをつけておく
- ビルド前に Edit > Project Settings > Player で Inspector を開き、Other Settings > Identification > Bundle identifier が 先ほどの新規 App で設定した Bundle Id と一致しているか確認する
- File > Build Settings > Build を実行
4. Xode で Validate
iTunes Connect にビルドをアップロードする前に、Validate を実行してビルドにエラーがないか確認します。
- Unity ビルドで出力された Unity-iPhone.xcodeproj をダブルクリックして Xcode を起動
- Xcode のメニューから Product > Archive を実行
- （しばらく待ちます...）
- アーカイブが完了するとウィンドウが開くので、右側にある Validate ボタンを実行（誤ってウィンドウを閉じてしまった場合は、Xcode メニュー > Window > Organizer で開けます）
私の場合、Validate実行時に設定不足等でいくつかエラーが発生しました。詳細は後述（※1）します。
5. ビルドを iTunes Connect にアップロード
Xcode 経由でビルドを iTunes Connect にアップロードします。
私の場合、アイコンの設定が足りなくてアップロード時にエラーが発生しました。詳細は後述（※2）します。
6. iTunes Connect にアップロードしたビルドを Test Flight で配信する
iTunes Connect で 先ほどアップロードしたビルドを TestFlight で配信します。
- iTunes Connect を開く（https://itunesconnect.apple.com/）
- マイ App > 該当の App を選択 > ヘッダーの「TestFlight」を選択 > 左の「内部テスト」を選択 > 「テストするバージョンを選択」を実行
- ウィンドウ内に先ほどアップロードしたビルドが表示されているので選択
私の場合、アップロードに成功したはずなのに、ビルドが表示されなくて焦りました。調べてみると「待つしかない」とのことで、待ってみたら30分〜1時間ぐらいで表示されました。
※1. Validate 実行時に遭遇したエラー
1-1. Your session has expired. Please log in.
スクショ撮り忘れました... いろいろ調べたのですがよくわからず、何回か Validate 押してるうちに出なくなりました... 謎...
結局やらなかったのですが、Xcode > Preferences > Accounts で サインインしなおすと解消するって言ってる人もいますね。
2-2. Missing iOS Distribution signing identify for xxxxxx
for の後のxxxxxには、実際にはアカウント名が入ります。
解決方法ですが、この記事がわかりやすくて大変参考になりました。
2016年2月15日以降、Missing iOS Distribution Signing identity for XXX というエラーが出た場合の解決方法
私の場合、新しい証明書は入っていたので、古い期限切れの証明書を削除することで解消しました。
※2. Upload 実行時に遭遇したエラー
2-1. This action could not be completed. Try again.
これも、結局原因がよくわかりませんでした。ネットの調子が悪かったのか、iTunes Connect のサーバの調子が悪かったのか... 何回かアップロードしなおしたら、出なくなりました。
2-2. ERROR ITMS-90023: Missing required icon file. The bundle does not contain an app icon for iPad of exactly 167x167 pixels, in .png format.
これは、iOS9用のアイコン画像が足りなかったみたいなんです。
アイコンを追加するには、Xcode > Unity-iPhone > Images.xcassets > AppIcon を選択して、
167 x 167 の適当なアイコン画像を用意して、iPad Pro App iOS9 のところにドラッグ＆ドロップすると追加されます（地味にどうやって追加するのかわからなくなっちゃって四苦八苦した挙句、ドラッグ＆ドロップで追加できることに気づいた時には脱力しました...）
あとがき
久しぶりにビルドをあげたのですが、手順をすっかり忘れていたり、iOSのバージョンがあがったことでエラーになったりとなかなか大変でした。仕事から帰ってきて深夜に頑張って対応したのですが、ビルドアップ完了の連絡をしても、結局すぐにはインストールしてもらえなかったりするんですよね... あるある。
