chaba log2

第4弾はレースです。そう見えなくてもレースです。各画面中央にいるのが「自機」ですね。画面は回さずに視点が平行移動する、ラジコンみたいな操作系です。
ちょっと趣向を変えて、chrome/firefox/safariと並べてみました。今回はNode.jsよりもjavascriptの実装自体にいろいろ発見というか初めて知ったことがあり、いろいろ勉強になりました。

端末だとこんな感じですが、左からiPhone3GS/touch5G/Nexus7です。iPad miniは撮影係。相変わらず3GSの画面が狭い。なのでいちおう画面下のボタン欄よりちょっと上を触っても反応するようにしています。ボタンは左から左・右・ブレーキ・アクセル。あとマルチタッチもいちおう実装。8台まで接続可能にしていますがそこまで端末が無いので未検証。ブラウザ8枚は並べてみたけど。
コレについてはもうちょっと練り込んだら公開してもいいかなーと思ったりもする。まあパズル同様にソロプレイ限定版になりそうですけど。対戦環境を公開しようと思ったらどこかNode.js対応サーバを借りるか、あるいはご自宅のLANで使ってね！と丸ごとオープンソースにするしかないですわね。なかなかそれも敷居が高い。

そんなわけで第3弾は私的には定番中の定番、パズルにしてみました。2台で対戦する形式で、下から上がってくるパネルを繋げて消していき、連鎖すると相手をせり上げる流れになります。画面内に折れ線グラフみたいに描かれているのは相手方のパネルの高さです。見比べてもらえればちゃんと反映しているのが解ると思います。「PANEL VL」では同様の対戦をP2Pで実装していますが、コレはNode.jsが動くサーバが必要ですけどHTML5さえ動けば端末を選ばないのが大きなメリット。それこそiOSとAndroidでの対戦も可能。
左側がiPhone3GS、右側がiPod touch 5Gなのだけど、画面の狭さにより3GS側では最下段の点数などが表示できていませんorz　まあこのへんはブラウザで見るのでなくアプリ化してWebViewから呼び出せば対処のしようもあるところです。
最大で8×13のパネルを描くのだけど、とりあえずこの程度の物量であればそれなりに描画も付いて来れるようです。3GSでもさほど問題無し。これをイメージで描いたらまだ解らんけど。ネイティブアプリより動作速度が厳しいのは間違いないですが、このへんもさじ加減次第ですわね。

ここまでの写真には出ていませんけどNexus7でも動作を確認しました。しかし長いこと放置してたので最初は全く電源が入らずちと焦った。それで情報検索してみたら、とにかく長いこと電源ボタンを押せという話だったので純正アダプターでしばし充電してからひたすら長押ししてたら復活して一安心。

せっかくなのでオンライン要素を廃したソロプレイ専用モードを公開してみました。キーボードでもタッチでも操作できます。

そもそもの出会いはKAGOHACKでしたが、Node.jsで何か作れそうとなって最初にイメージしたのはビンゴでした。ディーラーを1つ置いてあとを全部プレイヤーに、と思ってたらもう既に製品化されてた。そりゃそうよねー、私ごときが考えつくネタぐらいもう誰かがとっくにやってますよねーと思ったけど、まあせっかくだからどんなもんかやってみようということで今回のネタはビンゴです。
上図では出現番号を管理するディーラーの上にプレイヤー窓をかぶせています。プレイヤー側の上に小さく並んでいるのが出た数で、いちおう自分のカードに含まれている数字は色分け表示をして開封を促します。これ、自動でどんどん開けていくこともできるんだけど（ていうか現段階では面倒なのでそうしている）、やっぱり自分でぽつぽつ開けていくほうが楽しい…ですよね？　まあそのへんはオプション設定とかでどうにでもなりますが。
いちおうビンゴが出たらディーラー側にも通知されます。それとコレ、やろうと思えばディーラー側で出目を決めることも普通にできますわね。もちろん今はランダム抽選ですけど。

例によって別端末でもやってる様子はこんな感じに。ディーラーは別のMacで動いており、MacbookAirの上にiPod touch 5GとiPad mini（横置き）を並べています。前回の戦車ネタより縦方向をちょっと詰めたのだけど、これでもtouch5Gの縦長画面でギリギリですのね。もうちょっと表示を整頓する必要がありそうだ。とか言ってて、MBAの画面でビンゴ出てるのに反応してない（色が変わってない）のに気づいた。
あとコレ、LAN内しか想定していないので、外で使おうと思ったらそれなりのWiFi環境が必要ですよね。普通のモバイルルータとかだと接続台数が5台までとかだったりするので、大人数でやろうと思ったらそれなりの環境が必要。まあ上記の製品プロダクトみたいにグローバルに動かすのが一番手っ取り早いですが…　ちなみに上図も下図もプレイヤーが3つしか出てませんが、別に台数制限はしてません。ていうか環境次第ってとこですね。

ここしばらくいじっていたNode.jsがようやくちょっと動かせました。サーバサイドをjavascriptで実装できるもので、手軽にリアルタイムなネットサービスが動かせます。Node.jsにSocket.ioを加えてWebSocketを使う流れです。クライアントにはHTML5が使えるのでいろいろなところで動かせます。
そもそもその存在を知ったのは以前参加したKAGOHACKのときで、対戦ゲーム作りたいけどどうするんですかねえとか疑問を口にしたらその名を教えてもらいました。そのときはいまひとつよく解らなかったけど、ちょっと前に日経ソフトウェアに載ったWebSocketの記事を見て、サンプルを打ち込んでみたら動いた。うっひょーい。これを使えばLAN内の通信プレイがやりたい放題だぜえ！と感動しました。
でサンプル的に作ってみたのが上図で、電源マークみたいなのを戦車に見立てています。iPhoneを想定した320×480の画面で、上の320×320をゲームフィールドとし、下の矩形群はいちおう方向・ABボタンとしてタッチ操作に対応しています。なのでWiFi内のスマホからも操作可能。まあせっかくのHTML5ですし。しかしiPhoneのSafariで読み込むと、上下ツールバーが思いっきり画面を塞いでいるので操作できないorz　このへんはまあ調整の余地ということで…　iPadでは普通に操作できました。すげえ。
いちおう4台までの対戦としていて、上図では狭いので2台ぶんだけのブラウザ出してますが、4台接続した状態です。公開するにはもうちょっといろいろ体裁を整えないといかんですが、しかしコレでAWSとかに置けばグローバルな対戦も可能なわけですよね。すげえぞNode.js。ありがとう日経ソフトウェア。

上の図だと同一PC内だけなので、せっかくだから別PCとか接続した図も上げてみる。ちょっと見づらいですが、左側がMacbookAir、右側がその上に載せたiPad mini（横向き）。こんな感じで弾も出ます。MBA側はキーボードで操作。実はまだ当たり判定とか付いてないのでゲームになってないのは内緒。