💣
VueBERMAN2をリリースしました
(※過去のブログ記事をZennにアップしています。)
Vue.jsとPixi.jsとWebSocketを使ってオンラインボンバーマンを作ってみました。
以前の記事(Vue.jsでボンバーマンを作ってみました)で作ったVueBERMANを改修して、「VueBERMAN2」を作ってみました。
Let's Play VueBERMAN2
Pixi.jsで表現力と描画付加が軽減されました
フレームワークとしてVue.jsをメインでつかっていますが、ゲーム画面はPixi.jsを使っています。 Pixi.jsは2D描画ライブラリですが、WebGLレンダリングを行ってくれるので、とてもパフォーマンスがいいです。
WebSocketを使って複数人プレイが可能になりました
ここが1番の改良ポイントです。 WebSocket使って、ソケット接続するサーバをNode.jsで構築しました。 これによりサイトに接続した全員で一つのゲームをプレイすることができます。 ちなみにこのサーバは、AWSのEC2で動いています。
スマートフォン、タブレットでも操作可能になりました
いわゆるブラウザゲームなので、ブラウザの特徴を活かして、レスポンシブを採用しています。 タッチデバイスの判定で、画面上にコントローラーが現れて操作が可能になります。 デバッグはしていないので、iPhone以外で動かなかったらすいません。
まとめ
最近AWSを触ってますが、以前SAKURA VPSでNode.jsでサーバを立てた時よりも、やりやすかった感じがしました。 いまいち料金体型を理解していないのでヒヤヒヤしてますが。 このご時世、普段できないことをやろうと、ゴールデンウィークをすべて費やして、作りましたので、 若干、燃え尽き症候群です。 テレワークのお供に、Slackで電話をつなげながら同僚や上司や部下とPlayしてください。 きっと楽しいはずです。
Discussion