NinaLabo

個人ゲーム開発者の技術メモ

ローグライクゲーム制作を振り返って(2017年)

2016年もあと少しで終わりですね。今年は本当にあっという間でした。2017年のゲーム制作を振り返ってみようと思います。

5. アルファ(α)前半(2017/1〜2017/7)

仕事が激務であまり進まなかった時期ですね。

この期間は主にダンジョン外のUI実装をしていました。クエスト一覧、トロフィー一覧、スキル一覧、各種図鑑、カレンダー表示、プレイヤーステータス表示など・・実装は難しくないですが意外に物量が多くて思ったより工数がかかりました。

また、見た目のクオリティアップを並行で少しずつ進めてました。アセットストアからUIの素材を購入して入れ込む作業もprefab作成が思ったより工数かかりました。その他にも、通路に入るとスポットライト風の見た目にしたり、武器や盾を装備したらプレイヤーキャラクターに反映したり、キャラクターに攻撃や歩行など各種アニメを設定したり・・パッと見の印象を良くするためにちょっとずつ改善していました。

あとはNPC処理に力を入れてました。NPCに好感度を追加して、好感度によってセリフや行動が変わるようにしたり、NPCにプレゼントを渡せるようにしたり、NPCに近づいたらセリフを表示するようにしたり・・・とにかくNPCと遊んでいました。

 

この頃作った動画がこれですね。

「クエストクリアで手に入れたアビリティポイントで「盗む」を覚えていろいろ盗んでたら変態扱いされる」

www.youtube.com

また、この時期に一度迷いが出て、ゲーム内のダンジョンを1個だけにしたことがありました。ダンジョンをたくさん用意するのは大変なので、ゲーム内のダンジョンを無限ダンジョン1個だけにしたほうがシンプルで良いのではないかと思ったのです。1ヶ月かけて変更していざ遊んでみると何故かしっくりこないし、面白くない。結局元に戻しました。個人開発で時間もないのに、この無駄な作業は痛かったです。もうだいぶゲームの骨格は固まってきましたし、今後は試行錯誤でプラスとマイナスを行き来するのはやめて、とにかく面白さを積み上げていくようにしなければと思いました。

 

5. アルファ(α)後半(2017/8〜2017/12)

秋ぐらいから仕事が落ち着いてきて、開発の遅れを取り返すべく色々実装しました。

まずはメインクエストの第1章を完成させ(全6章の予定です)、通しでプレイできるようにしました。また、チュートリアルも実装したので、これでリリースしたくなったらいつでもリリースできる状態にはなりました。

物量はまだまだ足りない状態ですが、NPCでは道具屋、娼婦、兵士、相棒など、モンスターでは 2x2サイズのモンスター、ちからをためるモンスター、投げてきたアイテムをはねかえすモンスター、所持アイテムをおにぎりに変えてしまうモンスターなど少しずつ増やしていっています。

ダンジョン外も少しずつ充実してきました。本棚で本が読めたり、コンロで料理ができたり、釣りができたり、ギルドに入会できたり、掲示板からクエストが受注できたり、素材を拾えたり・・・

また、今までスキルとアイテムは別のUI表示だったのですが、スキルリストとアイテムリストの切り替えるがどうしても億劫なので統合することにしました。これで、スキルもNPCもモンスターも家具も障害物も床もトラップもこの世界の大半のものはすべてアイテムにできるようになりました。

 

ゲーム序盤のプレイ動画です。

youtu.be 

来年の抱負

今年でαフェーズを終わらせたかったですが、まだもう少しだけやりたいことが残ってまして... 来年にはα版を体験版として公開して、皆さまからフィードバックをいただけるといいなと思っています。

 

関連記事

2016年の振り返りはこちら

ninagreen.hatenablog.com

2015年の振り返りはこちら

ninagreen.hatenablog.com

 

Photoshop で画像を均等に分割する

アセットストアやフリー素材だとマップチップのデータが1つの画像にまとめられていたりします。ただ、Unityで使用する場合、マップチップのデータを1個1個分割して別ファイルにして保存したい場合が多くていつも困っていました。

自分はエンジニアなので下記が正しい方法なのか定かではないのですが、まとめて一括で分割できる方法を調べたので載せておきます。

Step1. 画像をPhotoshopで開く 

f:id:ninagreen:20171018033113p:plain

 

Step2. ガイドを作成

メニューの「表示」 >  「新規ガイドレイアウトを作成」を選択 

f:id:ninagreen:20171018033253p:plain

今回は 2048 x 2048 の画像を 1画像あたり 128 x 128 になるように分割したかったので、上記のように設定しました。数値を入力して OKボタンを押すと以下のようにガイドの青い線が均等にひかれた状態になります。

f:id:ninagreen:20171018033632p:plain

 

 Step3. ガイドに沿ってスライス

Step2で作成したガイドに沿ってスライスを作成します。

左のツールボックスでスライスツールを選択(尖ったナイフみたいなアイコンです)

f:id:ninagreen:20171018033931p:plain

スライスアイコンを選択すると、ヘッダーに「ガイドに沿ってスライス」が表示されるので、ボタンをクリック

f:id:ninagreen:20171018034100p:plain

押すとスライス作成され、各スライスごとに番号が割り振られた状態になります。

f:id:ninagreen:20171018034319p:plain

 

Step4. スライスの書き出し 

メニューの「ファイル」> 「書き出し」 > 「Web 用に保存(従来)」を選択

*どうしてWeb用に保存を選択しなければいけないのかいまだによくわからない・・

f:id:ninagreen:20171018034615p:plain

必要であれば右上にある書き出しのファイル形式を変更して保存ボタンをクリック

書き出しフォルダを指定して保存ボタンをクリックすると、ファイル名に連番のついた形で画像が書き出されます。

f:id:ninagreen:20171018034807p:plain

エンジニア向けに最低限の Photoshop の使い方を教えてくれるような書籍や記事があるといいんですけどね。

 

【Unity】iPhoneX での UI 開発(予備知識編)

11月3日に発売を予定されている iPhoneX(iPhone 10)が開発者泣かせ。主に UI に影響が出そうで、なんとか uGUI をうまく拡張して最小コストで対応できないだろうか調べ始めております(残念ながら結論は出ていない)

予備知識が全然ないので、開発を始める前にiPhone X の概要を調べてみました。

画面サイズ(解像度)

従来の iPhone 6, iPhone 7, iPhone8 では 375 x 667 (750 x 1334) で 9:16 だったのが、上に伸びて 375 x 812 (750 x 1624) で 9:19.5 になりました。

f:id:ninagreen:20171003005521p:plain

開発中のゲームの設定を改めて見てみたら、なぜか 1080 x 1920 (iPhone 8 Plusサイズ)基準で設定してました。プロジェクト始めた時は Plusシリーズが標準になると思ってたんでしょうか。自分で設定したのですがもう記憶が曖昧で・・・

f:id:ninagreen:20171003010955p:plain

また、UIは横幅基準で拡縮するように実装してあるので縦に長くなってもそれほど影響なさそうです(Canvas Scaler の Match が 0が横基準、1が縦基準)。縦幅基準で実装しているプロジェクトは影響受けそうですね・・・(多分横が見切れる)

 左が 750 x 1334、右が 1125 x 2436で、縦長になっても大丈夫そうでした。

 

f:id:ninagreen:20171003011650p:plain

f:id:ninagreen:20171003011704p:plain

 

レイアウト

iPhoneX の大きな特徴として、まず画面上部にカメラ等が収められている「センサーハウジング」と呼ばれるものがあって、凹型に画面が切り抜かれています。また、時刻や充電などのステータスを非表示にすることが非推奨になったので、上部には文字を配置せず開けておいたほうが無難です。

また、画面下部には、ホームボタンがなくなった代わりに「ホームインジケータ」と呼ばれる細長いバーがあり、スワイプすることでホーム画面が表示できるようになっています。そのため、画面下部にボタンは配置できなさそうです。

この上下の領域を除いた領域がセーフエリア(Safe Area)と呼ばれており、UIのパーツはこの領域内に収めるようにしたほうが無難だと思われます。また、セーフエリア内であっても左右に一定のマージンを取ることが推奨されています。

⬇︎セーフエリアの領域(375 x 667 基準の数値です。1125 x 2436 ならそれぞれ3倍する必要があります)

f:id:ninagreen:20171003015503p:plain

 
 f:id:ninagreen:20171003012918p:plain

 

ヘッダーは単純に位置を下にずらすだけでいいかなと思ってますが、フッターは上に位置をずらすとデザインが微妙になるので、どうしようか悩ましいです・・・

 

追記ですが、UnityにセーフエリアAPIなるものが追加されるらしいです。どんなものかよくわからないのですが、これで簡単に対応できるようになると嬉しいですね。

helpdesk.unity3d.co.jp

参考サイト  

Apple 公式ページ (英語)

iPhone X - Overview - iOS Human Interface Guidelines

 

デザインガイドラインまとめてくれてる参考記事

iPhone X対応におけるデザイン上の注意ポイント | fladdict

 

トルネコの大冒険 不思議のダンジョンのセリフまとめ

SFCトルネコの大冒険 不思議のダンジョン で、ダンジョン内のシステムウィンドウに出てくるメッセージのパターンをまとめました。

不思議のダンジョンっぽいローグライクゲームを作ろうとしている人以外には需要なさそうですが、見てるだけで懐かしかったので・・・)

 攻撃

◼︎トルネコ攻撃時

トルネコは、(モンスター名)に

(ダメージ値)ポイントのダメージを与えた。」

◼︎トルネコ攻撃ミス時

トルネコの攻撃は、はずれてしまった。」

◼︎モンスター攻撃時

(モンスター名)から

(ダメージ値)ポイントのダメージを受けた。」

◼︎モンスター攻撃ミス時

「(モンスター名)の攻撃を、かわした。」

◼︎モンスター撃破時

「(モンスター名)をやっつけた。

(経験値)ポイントの経験値を得た。」 

◼︎トルネコレベルアップ時

トルネコはレベル(レベル値)に上がった。」

◼︎トルネコ死亡時

トルネコはちからつきた。」

◼︎矢攻撃

「(矢の名前)は(モンスター名)に当たった。

(ダメージ値)ポイントのダメージを与えた。」

アイテム

◼︎アイテムを拾ったとき

「(アイテム名)を手に入れた。」

◼︎アイテムを装備したとき

「(アイテム名)を装備した。」

◼︎薬草を使用したとき

「薬草を薬にして飲んだ。(少し間をおいて)

HPが(回復値)ポイント上がった。」 

◼︎ルーラ草を使用したとき

「ルーラ草を薬にして飲んだ。(少し間をおいて)

別の場所にワープした!」 

特殊攻撃

◼︎ラリホー

「(モンスター名)はラリホーを唱えた。

トルネコは眠ってしまった。」

◼︎毒

「(モンスター名)は毒をはいた。

ちからが1ポイント下がった。」

状態異常

◼︎睡眠

「・・・眠くてなにもできない。」

チュートリアル

◼︎地下1階の最初に表示されるメッセージ

十字キーで8方向に移動する。

Aボタンでモンスターに攻撃できる。」

◼︎武器を拾ったとき

「(武器名)を手に入れた。

装備すると攻撃力が上がるぞ。」

◼︎防具を拾ったとき

「(防具名)を手に入れた。

装備すると防御力が上がるぞ。」

◼︎地下2階の最初に表示されるメッセージ

 「Rボタンを押しながらだと、十字キー

ナナメだけに動ける。」

◼︎地下3階の最初に表示されるメッセージ

 「Xボタンでウインドウが開く。

Aボタンで決定、Bボタンでキャンセル。」

◼︎地下4階の最初に表示されるメッセージ

 「Bボタンで速く移動する。

同時にAボタンで速く回復する。」

◼︎地下5階の最初に表示されるメッセージ

 「Yボタンを押しながらだと、十字キー

動かずに向きだけをかえられる。」

◼︎パンを拾ったとき

「(パン名)を手に入れた。

食べるとおなかがふくれるぞ。」

◼︎矢を拾ったとき

「(矢の本数)本の(矢の名前)を手に入れた。

これで遠くの敵を攻撃できる。」

「あらかじめ装備しておけば

Lボタンでうつこともできるぞ。」

◼︎毒けし草

「毒けし草を手に入れた。」

「これを薬にして飲むと

ちからが回復するぞ。」

◼︎スカラの巻物

「スカラの巻物を手に入れた。」

「これを読むと

装備してる盾の性能が上がるぞ。」

 

 

Unityで 謎の Request error (error) を解消する

Unity で開発しているとたまにConsole上に表示されるリクエストエラー。アプリの動作に影響はないものの、ずっと気になってました。

Request error (error):
UnityEditor.AsyncHTTPClient:Done(State, Int32)

 

以下の手順で出なくなります

Unity > Preferences... > Generalタブ > Show Asset Store search hits のチェックボックスをはずす

 

 

【Unity】MagicaVoxel のモデルに Blender でアニメーションをつけて Unity で動かす(後編)

MagicaVoxel で 3Dモデルを作成し、Blender にインポートするところまで前編でやりました。

ninagreen.hatenablog.com

後編ではBlenderに取り込んだモデルに簡単なアニメーションをつけて、Unityで動かしたいと思います。ただ、その前に Blender 初めての方は基本的な操作方法を頭に入れておいたほうがいいかと思います。

Blenderの視点操作を覚える

Blenderはインターフェースが独特でまだ慣れないのですが・・中でも最初にハマったのが視点操作。Blenderの視点は1とか3とかの数字で切り替えられると色々なサイトに書いてあるのに、実際に数字を押してもレイヤーが切り替わってモデルが消えてしまうだけで何故か視点が切り替わらない・・そして悩んだ結果、初歩的なことに気づきます。数字ってテンキーのことか!

ノートPCではテンキーがないので、テンキーを数字キーに置き換える設定をしなければいけませんでした。

  1. File > User Preferences を開く
  2. Input タブを選択する
  3. 左の Emulate Numpad にチェックをつける
  4. 左下の Save User Settings を押す

上記の設定で、キーボード上部の数字キーが10キーと同様の挙動になります。

f:id:ninagreen:20161106024851p:plain

よく使う視点切替テンキー

テンキー1: 正面

テンキー3: 真横

テンキー5: 平行投影(orthographic)と透視投影(perspective)の切り替え

テンキー7: 真上

 

もう1つわからなかったのが、視点を任意に動かす方法。マウスで適当に操作するも動かず・・マウスの中ボタンを使わないと思うように動かせなかったです。

選択中のオブジェクトを中心に視点を回転させる

MMB(マウス中ボタン)を押したままドラッグする

視点を平行移動(スクロール)させる

Shift + MMB を押したままドラッグする

視点を拡大/縮小する

マウスホイールをコロコロする

 

ひとまず、これくらい覚えておけば大丈夫かと思います!

基点を調整する

モデルを右クリックで選択し基点を合わせます(画像のように足と足の間に中心が来るようにモデルを移動します)移動後は、Ctrl-a で Location を選択して位置を適用すると、その場所が (0, 0, 0)になります。

f:id:ninagreen:20170120162356p:plain

アーマチュアを追加する

アーマチュアを追加します(アニメーションの元となるボーンの集合体で、動かせる関節を定義するものです)。ゼロからアーマチュアを作るのは大変なので、Blender が用意している汎用の人型アーマチュアを使います。使用するためには以下の設定が必要です。

  1. File > User Preferences で Add-ons タブを選択
  2. 検索欄で rigify と入力すると表示される Rigging: Rigify のチェックをつけて有効にする

詳細は下記の記事が詳しいです。

qiita.com

Shift+a で Armature > Human を選択して、人型アーマチュアを追加します。ちなみに、Human の下にある Pitchipoy Human は、目、鼻、口、耳といった顔面などのボーンが追加されているらしいのですが、そこまで細かく制御するのは大変なので Human を追加しています。

f:id:ninagreen:20170121002720p:plain

追加すると上記のようにモデルに隠れてボーンが見えなくなってしまうので、モデルを選択して、アーマチュアアイコンを選択して、X-Ray にチェックをつけます。

f:id:ninagreen:20170121003759p:plain

アーマチュアを調整する

モデルは左右対称なので、片方を調整したらもう片方も同様に動くようにしておきます。アーマチュアを選択して、Edit Mode にして、Options タブにある X-Axis Mirror にチェックをつけます。

f:id:ninagreen:20170121010156p:plain

あとは頑張って地道に、モデルにアーマチュアを合わせます。右クリックでボーンを選択、ドラッグで移動、sキーでスケール選択、rキーで回転できます。あと、複数のボーンを範囲選択したいときは、bキーです! 

メッシュを編集する 

モデルを選択して、 Edit Mode にして、Shading/UVs タブを選択して、Faces で Flat を選択。Tools タブを選択して、Remove で Remove Doubles を選択。重複する頂点を削除します。(さらに Subdivided を選択すれば適当に頂点を分割できます)

モデルとアーマチュアを統合する

先にモデルを選択して、Shift 押しながらアーマチュアを選択して、Ctrl-p で With Automatic Weights を選択すると、モデルとアーマチュアが統合されます。

f:id:ninagreen:20170121013905p:plain

Unity で アニメーションをつける

File > Export > FBX (.fbx) で fbx ファイルをエクスポート。Selected Objects のチェックは外し、Armature と Mesh だけを選択したほうが便利。

f:id:ninagreen:20170121021443p:plain

エクスポートした fbx ファイルを Unity に配置。Unity の Inspector 上で Rig タブを選択して、Animation Type で Humanoid を選択し、Apply を押す。

あと、アーマチュア入れる前は Scale 100 でちょうど良かったのに、アーマチュア入れてエクスポートすると何故か大きかったので 1 に戻しました。 

あとは fbx を Hierarcy に配置して、適当なAnimatorをつけて、Unity chan などのアニメーションを適用すれば動きます。ちなみに、Asset Store などでダウンロードすると、アニメーションファイルがFBXファイルの中に含まれていて編集できないことがありますが、Ctl-d で取り出せますよ。

注意点としてはモデルの時点で手と足は広げた状態にしておき、髪なども他の頂点と隣接しないようにしないと、手足を動かしたら下記のように余計なところまで引っ張られちゃいます。

やっと、Blender にちょっと慣れてきました〜

 

参考サイト  

  • 「【12分で】MagicaVoxelモデルをUnityで動かした」

とても参考になる素晴らしい動画。かなり参考にさせていただきました。

www.nicovideo.jp

  • ノートパソコンでの Blender の視点設定を参考にさせていただきました

www.cho-design-lab.com

  • 視点の操作方法を参考にさせていただきました

【Unity】Segmentation fault 11 でエラーになる件

エラー発生

Unityのアプリを TestFlight にアップしようと思い、Unity で iOS ビルド実行後、Xcode の Product の Archive を実行したところ、以下のエラーが発生しました。

clang: error: unable to execute command: Segmentation fault: 11

clang: error: linker command failed due to signal (use -v to see invocation)

普通に実機にインストールして遊ぶことはできるのに、アーカイブを実行するとエラーになります。調べたところ、下記で Xcode 7.2 を 7.3 にしたらうまくいったとのこと。

Error | Unity Community

そういえば、こないだ Unity のバージョンを 5.3 から 5.5 にアップデートしたので、そのせいかもしれません。Xcode は 7.2 を使ってました。

Xode のアップデート

12/28 時点の Xcode の最新は 8.2.1 ですが、Mac の OS を Sierra にしないといけないので、まだ El Capitan な私は 7.3.1 にアップデートしました。

最新以外の過去バージョンの Xcode へアップデートする際は、iTunes Connect ではなく下記リンクから該当のバージョンの dmp ファイルをダウンロードしてインストールします。

Sign in with your Apple ID - Apple Developer

f:id:ninagreen:20161228030711p:plain

Xcode の起動時のダイアログ

Xcode をアップデートして起動すると、以下のダイアログが出ます。

Unexpected code bundle "Unity4XC.xcplugin"

f:id:ninagreen:20161228030957p:plain

下記の記事によれば「Load Bundle」を選んどいたほうがよさそうです。うっかり、Skip すると後で面倒なことになるみたいです。

dev.classmethod.jp 

Upload to App Storeでエラー

Redundant Binary Upload. Thre already exists a binary upload with build version '0' for train '1.0'

f:id:ninagreen:20161228031519p:plain

ぐっ・・・バージョンを更新し忘れました。以前にアップロードしたバージョンからバージョンを上げないといけなかったのに。またビルドし直しです...(泣 

 まとめ

いろいろありましたが、最終的には無事 TestFlight へ配信できました。Unity のバージョンをあげたときは要注意ですね。TestFlight でのアプリの配信方法はこちらから。

ninagreen.hatenablog.com