Yo.
HTML5 Japan Cup 2014にエントリーしました。
どういうわけか
「HTML5 Japan Cup 2014」というものが開催されていたそうです。
ちょっと会社で話題になっていたので、「なるほど、参加するか！」（※ただし締め切りまで3日）、と思った次第です。
とは言っても締め切り近すぎるし、最初は気が向いたら参加しようかな〜くらいだったのですが、テーマ一覧を見ていたら下のようなテーマを見つけてしまい…
スマフォで気軽に1タップで遊べるゲーム | HTML5 Japan Cup 2014
OK、参加するんじゃねーの！？
なにをつくろうかな
テーマなどを踏まえてまず最低限思うことは、
- 締め切りに間に合うこと（当然）
- 平日はつらぽよなので土日の間にケリを付けたい
- ハッカソン的な作業感覚かなー
- スマホで動く
- 書くまでもなく。Ruたんですし。
- ルール説明不要
- テーマが「1タップ」なので長々としたルール説明が必要になるゲームは向かなさそう
- 逆に1タップだからプレイのハードル相当低いし「やればわかる」をトコトン追求できるようなほうがいいなー
こんな感じ。
大前提、間に合わないといけないので分量作戦はNG。分量作戦、元々ニガテですし。
ルール説明不要にしたいのもあって、それこそ「風天号」くらいのスケール感、というか即死感かなぁ。アレもワンボタン系だし。
あと、つい先日「爽快感が〜」みたいな話を社内チャットで見たのでそっちも意識しよう。
こう「ドッカン！ばごーん！チュドーン！」みたいのがいいよね！！
そうだ、「ばくれつカブトむし」つくろう！！！！！
ばくれつカブトむし
誰もが知ってるSFC「スーパーマリオRPG」のミニゲームですね。
このゲーム、敵が破裂したときの星に敵がぶつかると一緒に誘爆するんですけど、子どものときそれがすっごく気持ちよかったんですよね。ポコポコポコポコ！っとつながっていく感じ。クリボー8匹たおして1UPする感覚です。
これの誘爆部分をパｋ……オマージュする感じで行きましょう！
敵が飛んでてタッチするとそこから誘爆始まるみたいな！
ダイジェスト
- 敵画面内に全部いると結局画面内の敵全部倒すゲームになるな
- どんどん補充されるようにしよう
- パズルっぽいし落ちゲーだな！上から振ってこよう！
- そういえばコレ物理演算っぽくね！ Box2D使えるんじゃね！？
- 一度使ってみたかった＞物理演算エンジン
- 敵を描く時間は無いな……よくある幾何学系のオサレ系（？）にしよう
- 僕はあまり作らないジャンルですね＞オサレ系
- こないだFlashProCCでCanvas出力とかやって遊んだしCreateJSでやろう！
- Arctic.jsのこと嫌いにならないでください
というわけで『BakusanTiles』です
ワンタップパズル『BalusanTiles（バクサンタイルズ）』です。
以下、エントリーしたときに載せた説明文（普段サイトに書くやつですね）
『うまいタイミングでタイルを壊せ！10秒で遊べるワンタップパズルゲーム』 『BakusanTiles』（バクサンタイルズ）はブラウザで遊べる『瞬間パズルゲーム』です。 パソコンはもちろん、iPhoneやAndroidのブラウザからも遊ぶことができます。 空から降り注ぐタイルをなるべく多く壊してください。 壊し方は簡単。あなたがクリック/タッチした場所が爆散（！）します。 その爆発にタイルを巻き込めばタイルを壊すことができるのです。 でも、気をつけて。クリック/タッチできるのは1回だけです。 降り注ぐタイルをよく見て。ホントウに今爆散させても大丈夫？ 降り注ぐタイルを見切り、完璧なタイミングで爆散！ 瞬間パズルゲーム『BakusanTiles』へようこそ！
作業時間的に1日でかっ飛ばしたけど、それなりにカタチになったので満足。CreateJSとbox2dweb.jsのおかげだ！ とてもわかりやすいライブラリだった。
今回はいろいろわけあってCoffeeScriptとか使わずにJSそのままです。Coffeeはもういやぁ＞＜； TypeScriptとか他のaltJSの環境ちゃんと構築しておけばよかったね。
コードはGitHubとかには上がってないですが、コンテスト用なのでMinifyしないで直接JSが上がってます。
http://toripota.com/bakusan/assets/js/app.js
いろいろハマったこととか
スマホだと重くなるー
爆発するタイミングは結構重いみたいですね……PCなら問題ないけど、スマホだとガクガクになっちゃう。物理演算も重いだろうけど、一番は描画周りだろうなー。この辺、PCでつくってるときはあまり意識しないところなので、僕の課題だと思います。
とりあえずアレコレ処置はしたのですが、快適な操作のために苦肉の策としてスマホの場合は30fpsで動かすようにしてます。もうちょっといろいろ対応したい。ぜひとも60fps維持したい。
タイルの描画にShape使ってるけど、実はBitmapとかのほうが軽かったりするのだろうか？
こういうライブラリの特性とかちゃんと把握しないとだなー。
もしくは、画質（解像度）捨てればもうちょっと軽くなったかなぁとも思ったです。基本解像度を540x960で作ってしまったので、普段つくるやつに比べると大きめ。「サガドル」のときは320x416だったし。
プールはうまくやりましょう
上からガンガン降ってくるのでインスタンス作りまくるのもアレかなと思って、画面外に出たやつを回収+プールして使ってたんですが、userDataの中でいろんなもの参照したのを切っていなかったので、再利用したときに変なもの参照したまま処理をしてしまって「なんかタイルが点滅してる！！」みたいなトラップ発動してました。
こういうことやるときはちゃんと考えてやらないとだめですね……一瞬何が起こったのかと思った。
それにしても年々ブラウザでゲーム作るためのアレコレが整って行ってるのがすごい。
今年はUnity先生もWebGL出力対応したりブラウザゲームが熱まっているので、この調子でWebがもっと盛り上がっていくと嬉しいですね！
7/19追記 落選のご連絡が来ました！残念！
