Canvas/WebSocketでディアブロクローンなネトゲを作ってみた
できたよー！
遊び方
次のURLから、twitterアカウントでログインする。 http://w-mtlab.com:4444/
対応(確認)ブラウザはGoogleChrome Firefox4.0以上。
同時に10人ログイン程度まではテスト済。それより増えるとわからん。
矢印キー or WASD 移動
数字キーでスキル設定
1 攻撃
2 強攻撃
3 回復
4 範囲攻撃
青が自分、赤が敵、緑は他のプレイヤー
それぞれにクールタイムが設定してあって、一定時間立つと実行する。具体的には、スキルを選択して敵に近づけば、それを定期実行する。ディアブロ式のネトゲやったことある人なら直感的にわかると思う。
敵を一定数倒すとレベルが上がる。ゲーム的な部分は、あまり詰めてない。クライアントではまだ可視化してないイベントがたくさんある。
死んだらリロードで復活する。
セーブデータはアカウント単位で保存されてるのでリロードしても大丈夫(WebSocketのセッションが切れたときに保存している)。
ソース
Githubにおいてる。修正BSD。で、いいのかな、これ。
https://github.com/mizchi/ws-netgame
自由にフォークしてもらって構いません。アイデアだしてくれる人歓迎です。
依存は Node/MongoDB/Redis… あとは npmのライブラリいろいろ。MacとUbuntuでテストしてる。
これを作った経緯
色々あって、大学院への進学を辞退することにした、のが一昨日。B4のこの時節、一気にナイ内定である。
そういうわけで、某D社の新卒エンジニア枠が11/14が最後、これに応募しようと思ったのだけど、技術アピール用に何か作る必要があった。
最近つくったプロダクトといえば、websocket使ったRSSリーダーとか、ブログに書いてないけどチマチマ作ってたゲームとかあったのだけど、パンチが足りないのでゲームの方をネトゲ化することにした。
開発環境
サーバー
nodejs/CoffeeSciprt/socket.io/express/zappa
クライアント
Canvsa2D, WebSocket, Knockout.js
EaselJSを使おうとしたのだが学習コスト高そうで時間がない現状スルーするしかなかった。素のCanvasAPIを叩いている。キャッシュすればもっと負荷は減らせるはず。
開発期間
ゲームクライアント的なものを作ってたのは、二ヶ月ほど、気が向いたときにちょくちょく継ぎ足してた。つってもそんなに時間を割いてないので、微妙なものだが。
ネトゲ化にあたってブラウザ依存コードを剥ぎとり、メインループをぶん回し、WebSocketでオブジェクトの配置をブロードキャストするようにした。nodejsのモジュールローディングを活用して疎結合にした。ここまで思い立って3時間。
この時勢、大規模JS書くにあたってはCoffeeScript必須だと思う。
開発手法
衆目監視ドリブン開発。
高速な開発のためにテストコードを書かずに機能を実装し次第おもむろにTwitterに貼る。常時3,4人は面白半分でデバッグして(遊んで)くれる。意図しない動作が常に行われているので、バグの網羅性が高い。
これでバグだいたい潰せた。この手のプロダクトで、短時間(実質2日。うちマックの電源席で14時間)で開発したものにしてはかなり安定していると思う。
TODO
機能
- マップ間移動。プレイヤーがいないマップはスリープさせるなどすれば一台でも結構さばけるはず。
- スケールアウトの仕組みを作る。現状さくら鯖一台。
- チャット機能。WebSocket使えばすぐ終わる。
- イベントの可視化とそのためのプロトコル設定
- マップチップ適用。フリー素材のisometricなマップチップってあるの？
追記：
コードのざっくりした解説書きました。
Canvas/WebSocketなネトゲの、ざっくりとしたロジック解説 - mizchi log
