超聖域: Unityでゲームを作ろうとした話

フィードテイラーの赤魔道士すみひろです。

先日、フィードテイラー社内で「超聖域!1週間(2015/07/01〜2015/07/07)ぶっ通しでハッカソン」というイベントが開催されました。

各スタッフからレポートが上がっていますが、私からもやってみたことのレポートを報告します。

何をしたか

Unityを使用してゲーム作りに挑戦してみました。

ちなみに今までに本格的なゲーム作成の経験はありません。

Unity

F8EE9162-5D47-48DC-B63D-47FEC8D17C54

http://japan.unity3d.com/unity/

なぜか

フィードテイラーにおける私の普段のメインの業務はiOSのアプリ作成です。

アプリといえば色々なジャンンルがありますが、担当するアプリの多くはユーティリティや仕事効率化のジャンルに含まれるアプリです。

例えば「玄関で降水確率をお知らせするそら用心」や「勝手にTwitterのタイムラインから画像を集めてくるNyatter」などを担当しました。

そらビーコン
玄関に行けば降水確率を声でお知らせするiPhoneアプリ「そら用心」をリリースしました!

[スクリーンショット 2015-07-28 16.59.21

Twitterでニヤニヤしよう!!画像収集支援iPhoneアプリ「Nyatter(ニヤッター)」を公開します](http://feedtailor.jp/wp/?p=13172)

このようなアプリでキモになってくるのは「バックグラウンドで自動的に処理して云々」や「サーバとの連携が云々」であって、「リアルタイムにユーザーの操作を受け付ける」という部分ではありません。

常日頃から「目の前の問題を殴る道具はたくさん持っている方がいい」と考えている私としては、新しいものに挑戦する良い機会と判断してゲーム作りに取り組みました。

何を作ろうとしたか

まず、Ingressというゲームが流行っておりまして、私も流行りに乗っかってハマっています。(陣営は緑。レベル15です。)

Ingressについてのわかりやすい解説は、実は三菱東京UFJ銀行のサイトに掲載されていますので、そちらをご確認いただければ大体の仕組みや雰囲気をご理解いただけるのではないでしょうか。

BTMU × Ingress タイアップ | 三菱東京UFJ銀行

92BD6BC5-1CFF-4307-8E26-F20909546F56

http://www.bk.mufg.jp/ingress/

詳しい解説は省きますが、ゲームの中で3個の「ポータル(拠点)」を「リンク」でつないで三角形「コントロールフィールド(通称、CF)」を作るという作業があります。

基本ルールの中にあるこの作業がほどよい感じに複雑で、それを詰将棋のようにお題を解く「詰イングレス」という遊び方があります。

詰イングレス

スクリーンショット 2015-07-28 11.22.41

https://plus.google.com/communities/109394012439402992158/stream/c2801c8e-c06a-464d-bd2c-5b838d316e08

「限られたポータルでいくつのCFを効率良く作るか」を競うゲームは頭の体操にも良く、一部のエージェント(Ingressのプレイヤー)から大人気のようです。

その詰イングレスを存分に遊べるゲーム「詰めCF」を作ってみました。

どうなったか

「お題を選択してCFを作る」という部分までなんとか実装したに留まってしまいました。

もう少し作り込めると期待して開始したのですが、なかなか思い通りには進まず。

スクリーンショットだけ公開しておきます。

スクリーンショット 2015-07-28 11.34.45スクリーンショット 2015-07-28 11.47.08スクリーンショット 2015-07-28 11.37.25

レベルを選択すればポータルが生えたフィールドが現れる。ポータルを二つ選択するとリンクが張られ、リンク3本に囲まれるとフィールドが出現します。

スコアはフィールドの総面積で決定されます。

スクリーンショット 2015-07-28 15.32.14

エディットモードもあり、ユーザーの皆さんが自由にお題を作って公開できるようにと考えていたのですが、そこまでの実装は期間内に追いつきませんでした。

結果的には自分に対して惨敗となってしまいましたが、たくさんの知見を得ることができました。新しい環境って難しいけど楽しいものですね。

よって、ここからが本題。

以下に、詰めCFを作るにあたって参考にしたサイトやツールなどをご紹介します。

何を使ったか

まずはUnity

ユーザー登録は必要ですが、基本的には無料で使用できます。

無料のライセンスは有料版のProライセンスに機能の違いがあるのに加え、以下の条件で提供されています。

http://japan.unity3d.com/company/legal/eula

組織規模による Unity 無料版の使用制限

各プラットフォーム向けの無料アドオン製品も含む、Unity Free(以下、「Unity 無料版」)のライセンスは、直前会計年度の総収益が US$100,000 を超える事業体、または組織全体の直前会計年度の総予算が US$100,000 を超える教育機関、学校機関、非営利団体、政府組織には許諾されず、それらの事業体または組織による Unity 無料版の使用は認められません。

一番の注意点は「直前会計年度の総収益が US$100,000 を超える事業体」という条件でしょうか。ベンチャー企業に対する「この条件を超えるまでは無料で、超えたら払ってね」というメッセージのようにも読めます。

アセット

Unityのプロジェクト内で使用できるライブラリをアセットと呼びます。アセットは Asset Storeで販売、または無料で配布され、3Dモデルやオーディオ素材だけでなく、外部サービスとの連携のためのSDKやエディタを拡張するツールなどまで取り扱われています。

また、GitHubなどで無料で公開されている場合もあります。このようなアセットもプロジェクチにインポートしようすることもできます。

今回のプロジェクトで使用したアセットをご紹介します。

JSON Object

2704CFF9-ABE8-44D7-A657-77BA35AB353C

https://www.assetstore.unity3d.com/jp/#!/content/710

JSONのパーサ。

今回はステージのデータをJSONで用意したので、それの読み書きに使用しました。

JSONの文字列からJSONObjectを作成します。JSONObjectからはさらにJSONObject、または数値、文字列が取得できます。

// JSONのテキストからJSONObjectを作成する

JSONObject json = new JSONObject(jsonText);

// 型によって取得できるものが異なる

JSONObject stage = json.GetField(“stage”);

string title = (string)json.GetField(“title”).str;

int count = (int)json.GetField(“count”).n;

Unity-FadeManager

BB54CCBD-BE6F-4690-AA07-3862AD6F7B5B

https://github.com/naichilab/Unity-FadeManager/blob/master/README.ja.md

シーンの切り替えをフェードイン、フェードアウトで行うアセット。

メニュー画面からゲーム画面に切り替える場面で使用しました。パッと瞬間的に画面が切り替わるとユーザは面食らってしまい安く感じてしまいますが、フェードイン、フェードアウトを使うだけでグッと「それっぽく」なりました。

フェードイン、フェードアウトをさせるときはこのように書きます。

// シーンの名前とフェードする秒数を渡す

FadeManager.Instance.LoadLevel (“Scene1″, 2.0f);

iTween

E689A6F1-8051-4BF0-9A54-7F58FD64E6DF

http://itween.pixelplacement.com/index.php

定番のアセット。「ここからここへ滑らかに動かす」ような処理を簡単に書くことができるようになるアセットです。

リンクが伸びていく処理で使用されています。リンクにはこのようなコードを書きました。

void Start () {

string easeType = “easeInOutExpo”;

float time = 0.5f;

// 起点から終点まで伸びる

// 移動

Vector3 target = transform.position; // 本来あるべき位置

Vector3 start = FirstPortal.transform.position; // リンク元の位置

transform.position = start;

iTween.MoveTo(gameObject,iTween.Hash(“x”,target.x, “y”, target.y, “z”, target.z,”easeType”,easeType,”time”,time));

// 長さ

float scale = transform.localScale.x; // 本来の長さ

transform.localScale = new Vector3(0f,transform.localScale.y,transform.localScale.z); // 長さを0に

iTween.ScaleTo(gameObject,iTween.Hash(“x”,scale,”easeType”,easeType,”time”,time));

}

最終的には2個のポータル間の中心に配置され、長さはホータル間の距離になるので、最初に片方のポータルの位置に長さ0の状態で配置し、長さと位置が同時に変わることで「伸びていく」ように見せることができました。

ドキュメントを見ると様々操作が簡単にできることがわかります。

Prototype

D6592C9B-0E7C-4DA1-978F-AE9E86B29AD9

http://www.protoolsforunity3d.com/prototype/

プロトタイプを簡単に作成できることで有名なアセットです。

通常ならばBlenderなどを使って作成する3Dオブジェクトを簡単な設定で作ることができます。

もちろん、細かな自由な形の3Dオブジェクトを作るにはBlenderなどが必要ですが、Prototypeではメッシュの頂点数を自由に設定することができるので、変形させることも簡単になっています。

スクリーンショット 2015-07-28 14.27.57

ポータルやリンク、また床などをこのアセットを使用して作成しました。

New UI Widgets

01533F3D-5D2F-454C-808F-6694F1935CAD

https://ilih.ru/unity-assets/UIWidgets/

標準のUIパーツでは作ることが難しい複雑なUIを作るアセットです。

コンボボックス、リストビュー、プログレスバー、スピナー、タブ、ツールチップ、通知、ドラッグできるウインドウなどなど多彩なパーツを含み、またそれぞれのパーツのリデザインも簡単にできることがウリです。

特に使いたかったのはリストビューです。動的に数が変わるアイテムの一覧を出そうとすると標準のUIではうまくできず、こちらを利用しました。

iOSのUITableViewのようにできればベストでしたが、そこまではできませんでした。

スクリーンショット 2015-07-28 11.47.08

今回は結局ここでしか使わなかったんですけどね…

エディタ

Visual Studio Code

7FFA3930-F64A-43F5-83E0-22EDBEB41B4F

https://code.visualstudio.com/

Unityには標準でMonoDevelopというIDEが入っています。しかし、このMonoDevelopがMacの日本語環境下ではとても使いづらい…具体的にはデフォルトの設定では日本語が正しく入力できなかったりします。

そのため、開発者はSublime Text 3などのエディタを使用してコードを書くのですが、超聖域が始まる少し前にリリースされたVisual Studio Codeを使用してみました。

結論から言うと、非常に使いやすかったです。名前からお分かりかもしれませんが、Visual Studio CodeはWindowsを作っているMicrosoft製のツールです。

Windowsを作っているMicrosoftと、Macを作っているAppleは、いわばライバルの関係にあります。そのライバルが作ったツールなんて…と高を括って試してみたのですが、実際にはとても使いやすいツールでした。

Unityからの呼び出しもスムーズですし、プロジェクトの設定を読み込ませればコード補完もきっちりと動作します。

UnityとVisual Studio Codeの連携の設定の仕方は、こちらの記事が参考になりました。

UnityでVisual Studio Codeを使う – Qiita

http://qiita.com/STAR_ZERO/items/6708b69d18eb8c815963

バージョンの違いにより、一部で設定の方法が変わっている可能性があります。

参考にしたもの

実は超聖域開始前に「完全にニュートラルな状態から入るのは無理がある」と判断し、Unityの入門書を1冊読みました。

その本はとてもわかりやすく参考になり入門書としてはとても良いと思うのですが、一部の内容に技術書として不適切であると判断できる内容が含まれているため、具体的な書名の掲載は控えます。

Youtubeなどの動画サイトでレクチャーも多く公開されており、それらもとても参考になりました。開発中に閲覧したサイトや動画をいくつかご紹介します。

はじめての Unity

C80F93E7-8918-4F54-AF30-3AC40ADC2DF8

http://japan.unity3d.com/developer/document/tutorial/my-first-unity/

公式サイトによる最も初歩的なステップガイド。

よくあるブロック崩しを作ります。ただし、まだ途中までしかなく、スマホへのパブリッシュ手法などは近日公開のままです。

Unity 5 Tutorial : Basics

https://www.youtube.com/watch?v=Ep0rlBQRcVc

Unityの基本的な操作や使い方、書き出しまでを一通り。

3DBuzz Modern UI Development in Unity 4.6

https://www.youtube.com/playlist?list=PLt_Y3Hw1v3QTEbh8fQV1DUOUIh9nF0k6c

全10回に渡る、UI用のパーツの使い方のチュートリアル。

UI用のパーツは通常のパーツとは異なりレイアウトを自動で行ったりする仕組みなど、メニューや設定画面で使いやすい仕組みが用意されています。

今後の展開

「詰めCF」自体は私にとってとても興味深いゲームですので…もしかするといつの日かリリースされるかもしれません。

また、Unityを実際に触ることによって、使用する前とはずいぶんと印象が変わった部分がありました。

開発環境が想像以上にカオス

これはiOSでももちろんそうなのですが、複数人で一つのプロジェクトを回すことがあります。その際に重要なことは他人と自分の触るファイルをできるだけ分けることであると思います。

Unityではメタファイルが存在していたり、プロジェクト設定が個人の環境別になっていなかったりと扱うのが相当に面倒に見えました。

上手に運用するための手法はこちらが参考になりそうです。

Unity開発者が複数人で開発を進める上で覚えておくと幸せになる9つの事

http://tsubakit1.hateblo.jp/entry/20140613/1402670011

また、スクウェア・エニックスさんが公開されているこの資料もとても参考になります。そして、本当に大変そうです。

MEVIUS FINAL FANTASY におけるUnity開発事例

http://japan.unity3d.com/unite/unite2015/files/DAY2_1500_room2_Hamaguchi.pdf

ゲーム以外でも意外と使えそう

ちょうどこのようなツイートがありました。

「何かをしている感」というのはコンソールやターミナルではなかなか伝わりにくいです。

ドラマや映画でもテキストがどんどんスクロールしていく様子より、よくわからないボタンがチカチカと光ってゲージがギュイーンと伸びてアラートがガンガン上がってるような様子の方が映えますよね。

上記スライドでも挙げられていますが、Unityはネットワークソケットをそのまま使えますので外部との連携がとても柔軟にできます。

そして表現力の豊かさとその便利さはまさにUnityのウリですので、どんなUIでも自由に表現することができます。

例えば、MYOという腕のジェスチャーを非常に細かく取れるガジェットがあります。

MYO

arm-dble-tap

https://www.thalmic.com/myo/

このガジェットはUnityに対応しているので、Unityで作ったUIをジェスチャーで操作することが可能です。

これらを組み合わせて映画「マイノリティ・リポート」であったような未来の操作環境を作って、「EC2のサーバーの死活監視を行う」ような超現実的な泥臭いことができるのです。

873F7A0F-A244-4607-B3C8-246903D0463A

10年前でもこの未来感!映画『マイノリティ・リポート』にあった未来技術11選

http://penginez.com/archives/3498

すごくワクワクしませんか?まあ、実際にやるかやらないかというと、やらないんですけど。

ともかく、ゲームだけではなく、状態監視にも使えそうなUnity。今後は表現の方法の一つとして利用できるツールとして、「目の前の問題を殴る道具」として役に立ちそうです。

このエントリーをはてなブックマークに追加