フロントエンド開発Blog

オレには鈍器がある

HTML5 , canvas , enchant.js

enchant.jsを使ったブラウザゲーム、「オレには鈍器がある」をリリースしました。

オレには鈍器がある 公式サイト

ゲーム本体の詳細は公式サイトに掲載いたしました。

ここでは開発にいたった経緯やら技術よりのお話を少し。

 

以前から「iPhoneとかAndroidとかでできるゲーム作りたいな」と思っていました。

アプリストアのゲームコーナーをぱらぱら見ていると、幼いころゲーム雑誌をめくりながら「面白そう!」「かっこいい!」「やってみたい!」とわくわくしていたあのころのドキドキ感がふいによみがえってきました。

これはまだインターネットが普及していない、ゲーム雑誌全盛時代を経験したことのあるユーザさんなら理解してもらえると思いますwそこで刺激を受けて「自分も作れたらきっと楽しいだろうな」と漠然とした思いを持っていました。

そんな折、HTML5+JSでゲームが作れるという情報をゲットし、次のように思いました。

ネイティブアプリ全盛の時代から、プラットフォームを選ばないHTML5アプリの時代へ遷移していくのでは、と。

だって便利なんですよwどう考えても。一人複数台のデバイスを所持するこのご時勢、単一端末しか遊べないとなると遊びを制限されている気持ちになる。「ゲームは宿題終わってから!」とかあちゃんにいさめられるような気持ちっていうんですかね?そのてんiphone+ipadでアプリ共有できるってのは考えた人頭いいなと思うんですけど「PC」とか「携帯ゲーム端末で」とかはどうしてもこぼれる。さらにはipad+Android携帯所持者だともうそもそも遊べるゲームが違ったりしてくる。

確かにネイティブアプリのほうがパフォーマンスもでるし制約は少ない。でもファミコン時代を知っている自分としては、高度な処理や流麗なグラフィックが必ずしも面白さに直結するわけではない、と。グラフィックすげえからこのゲームやりたい、とは正直私個人は思ったことがない。

ゲームの面白さは「システム」面にあると思うんです。「ランダムダンジョン!」とか「プレイヤーも歳をとる!」とか。

ファミコンがいい例ですね。グラフィックも音も今と比べたら低スペックでした。それでも世界中の人が熱狂的に愛しました。

そう考えたとき、じゃあネイティブアプリとHTML5アプリにおいてシステム面の制約ってなんだ?と考えました。正直この時点では「ない」と考えました。

考えるだけじゃいまいちぴんとこなくて実際に作ってみよう、と思い立って作ったのがこの「オレドン」でした。

「こういうゲーム作りたい」から始めてみて、「あーHTML5だとこういうシステムは実現できないわー」と実感するか否かで実体験として知見をためようと。

そしてHTML5でゲームを作り始めました。ここでは思わぬ落とし穴がいくつかあり、実際に作って検証してみてよかったと思ったことが以下の2つ。

 

音声ファイルのサポート状況がブラウザ毎に異なる

これが一番の問題でした。音が鳴らない、ならまだかわいいもんで、ゲームが起動しなくなることもありました。(mp3をfirefoxで再生しようとしたときなど)音声ファイルの対応状況がまちまちなもんで、「今HTML5で音ありのゲームを作るのはリスクが高い」と思っていったん音はなくしています。

まぁこれは開発当初の話で、今改めて調べてみると「がんばればいける」みたいですね。次期アップデートで対応しようかなあと画策中ですw

また、同じmp3でもitunesでエンコードするとだめで、lameならOKなどなど。そんなこともあって気軽に音が使えないのが非常に、非常に残念でした。実感としてはlameで圧縮が一番多くの端末で動いたかな。自分が使用させていただいたenchant.jsの仕様かもしれません。別ライブラリのcocos2D-html5のDEMOを見ると今のところfirefoxだろうがandroidだろうが平気で音がなっている点を考えるとライブラリで仕様の差を吸収できるかもしれません。

 

セーブがカジュアルじゃない

ネイティブアプリなら自端末に保存できますがHTML5の場合はデータが「揮発」してしまうリスクがあり、どうしてもajax頼みでサーバサイドにデータを保存しなければならなかった。まぁこれはそこまでクリティカルではないかなといった印象。HTML5のlocalstorageを使う方法もありますが、クロスプラットフォームを謡うならデータを複数端末で共有できなければいけない。

一時保存としてlocalstorageを使い、恒久保存はサーバサイドのように切り分けが必要かな。今回はサーバサイドのみでセーブデータを管理しています。enchant.jsにはajax機能がバンドルされていないためここは素で対応。バックエンドは仕事でちょくちょくやっててオレオレMVCフレームワークを持っているためそのまま流用しました。

バックエンドの実装経験がない人はここで躓くかもしれません。

 

 

こんな感じでした。逆に言うと今回の開発で躓いたことはこの2点のみ。いずれも「気合」でカバーできそうです。いやーしかしゲーム開発とWEB制作はまったくもって使う頭が違いますね。自分にとっていい刺激になりました。

ページトップへ

関連ページ

ページトップへ