2週間でUnityちゃんがバズーカで戦うオンライン3Dアクションゲーム「ユニティちゃんバズーカ」を作ってみた

URL

■サービスURL
http://mikumikuplay.com/bazooka/

紹介動画URL

ニコニコ動画版 http://www.nicovideo.jp/watch/sm23534924
YouTube版 https://www.youtube.com/watch?v=rwyqn2H7K-Y

概要

「ユニティちゃんバズーカ」はブラウザで簡単に遊べる3Dアクションゲームです。ゲームのルールは簡単で、バズーカでクマを10匹倒すタイムを競うというものです。クマはアクロバティックに逃げ回るので、ユニティちゃんをうまく操作してクマを追いかけると弾が当たりやすくなります。

特徴

・美少女キャラ(オープンソース系ヒロイン・アイドル、ユニティちゃん)がバズーカでクマを倒すタイムを競うオンライン3Dアクションクイズゲーム
・成績をオンラインで記録し世界中のプレイヤーとランキングを競うことが出来る
・Webブラウザからプレイ可能(ユーザー登録不要)
・Unityの無料素材をうまく活用することにより個人開発を約2週間で完了。
・開発作業を生放送で配信して視聴者から貰った意見を反映
・Unity4, Ruby2.1, Ruby on rails4, MongoDB等の技術によりUnityとWebを連携したシステムを構築

利用技術

APサーバ: Apache, Passenger
リバースプロキシ: nginx
DB: MongoDB
クライアント技術(Unity): Unity4, JSON Object,
クライアント技術(Web): JQuery, Twitter Bootstrap
サーバー技術: Ruby2.1, Ruby On Rails, Kaminari
アセット: ユニティちゃん, Mecanim Example Scenes, Detonator Explosion Framework

詳細は、http://mikumikuplay.com/bazooka/page/thanks に書いてます。

これらの技術を使ってみての感想

Mecanim Example ScenesのTeddy Bear Bazookaをベースに開発

Mecanim Example ScenesはMecanimの使い方を紹介するアセットでアセットストアからDL可能です。その中にTeddy Bear Bazookaというシーンがあります。バズーカでクマを打つというものです。このアセットをベースにして開発しました。

爆発エフェクトはDetonator Explosion Frameworkを使えば簡単

バズーカの弾が当たった時に爆発エフェクトを発生させているのですが、Detonator Explosion Frameworkを使って簡単に実現できました。検索したら日本語のブログ記事なども複数あり、簡単に使えました。爆発時の音素材も付属してるのでこれのみで完結しました。

弾丸の軌跡はTrail Rendererで簡単に表現できる

バズーカを打った際の弾丸の軌跡はTrail Rendererを使って簡単に実現できました。こちらも検索したら日本語のブログ記事がヒットしたので簡単に導入できました。Unity便利すぎです！

主人公キャラをUnityちゃんモデルに変更

主人公キャラをUnityちゃんに変更するのも簡単でした。UnityちゃんはMecanimに対応してるので、元の主人公キャラの設定をUnityちゃんに設定するだけで簡単に動かすことが出来ました。Unityちゃんにはプロの声優さん(角元明日香さん)の音声も付属しているので、それらを入れたら、ゲームの雰囲気がとてもよくなりました。声の力って偉大です。

レーダー画面の実装は上からカメラで写してワイプ表示するだけ

ゲームの画面右下にレーダーのような敵キャラとプレイヤーの位置関係を表示する画面があります。実現方法はサブカメラをプレイヤーの頭上に配置して上から下に向かって移すだけです。プレイヤーの向きを表す矢印オブジェクトをプレイヤーの頭上に配置して、その矢印オブジェクトをプレイヤーの子オブジェクトにすることで、プレイヤーと連動して矢印が動くようになります。
レーダー画面に映したくないオブジェクトにはレイヤーを設定し、レーダー画面のを移すカメラのCulling Maskでそのレイヤーのチェックを外せばカメラから映らなくなります。逆にレーダー画面に映したいオブジェクトにレイヤーを指定して、そのレイヤーだけCulling Maskでチェックオンにするでもおｋです。

マルチプレイヤー同時対戦は難しかったので先送りした

WebSocketを使ってマルチプレイヤー同時対戦を実装しようとしたのですが、なかなかうまくいきませんでした。WebSocketとUnityの接続自体はうまくいったのですが、マルチプレイヤーの動作を画面に反映するのがうまくいきませんでした。WebSocketの受信はメインスレッドとは違うスレッドで行っているようで、メインスレッド以外からオブジェクトのInstantiateは出来ないようで、Queueを使って、それを回避してInstantiateまでは成功したのですが、そこから、オブジェクトを動かすことがうまくいきませんでした。

UnityにはNetworkViewというネットワーク越しにリアルタイムでオブジェクトを同期する方法があります。また、PhotonCloudというクラウドのサービスを使うとNetworkViewよりもさらに簡単にオンラインゲームが作れるようなので次の機会に別トライしたいと思っています。

音の管理は専用のクラスで行うと捗った！

Unityでの音(サウンド)管理（SoundManager Ver.β)
http://zyyxlabo.blogspot.jp/2013/03/unitysoundmanager-ver.html

このブログに書かれてるSoundManagerというクラスで音素材の管理を行うと音声の再生が簡単にできました。このクラスを使わなくてもAudioSourceとAudioClipを一つ一つ張り付けていけば簡単に音の再生が出来ますが、このクラスを使えばAudioSourceは内部でプログラムが生成してくれるので、より簡単です。

一台のサーバに複数のRuby On Railsアプリを導入するのに手こずった

前作「ミクミク走ってQ！」でもサーバはRailsで作っていたので、2つ目のRailsアプリを今回サーバに構築することになりました。いろいろ手こずったのですが、結論としては
/var/www/html
の下にシンボリックリンクを2つ置く（quiz→/app/quiz/public, bazooka→/app/bazooka/public)
で、ApacheのconfのDocumentRootを/var/www/htmlにして、RailsBaseURIに/quizと/bazookaを指定すればおｋでした。

参考にしたブログ。
http://d.hatena.ne.jp/deis/20101003/multi_app_on_passenger
↑この記事では、/var/www/html配下にrailsアプリを置いてるようでしたが、私はシンボリックリンクを使いました。

ニコ生しながら開発するとペアプログラミングみたくなるからありがたい！

開発作業は前作同様ニコニコ生放送で配信していました。すると視聴者の方がゲームの機能やデザインについてのアイデアをコメントしてくれました。また、技術的なアドバイスも貰えて本当に助かりました。

そんなわけで良かったらプレイしてみてください！
http://mikumikuplay.com/bazooka/

初め、作るゲームが浮かばなかったのですが、↓この本に載ってるアセットをいろいろと試してるうちに、このアセットをベースにすれば作れるかも！と思ったので、この本おすすめです！

【楽天ブックスならいつでも送料無料】Unity実践技術大全 [ 菊田剛 ] 価格：3,996円（税込、送料込）