JavaScript
Node.js
HTML5
canvas
pixi.js

HTML5でブラウザゲームを作る(ハイブリッドアプリ)

More than 1 year has passed since last update.

ブラウザゲームに関して何もノウハウが無い状態からGoogle先生を頼りに頑張る事約半年、やっと公開できるレベルに達しました。
道中、何度も落とし穴に嵌って、その都度、解決に相当時間を取られました...
たくさんのブログ記事にも色々と助けられなんとかここまで来れましたので恩返しの意味も兼ね、今後Qiitaでこのゲーム作りで得られた技術情報やTipsを共有していきたいと思います。
のんびり投稿していきますので気長にお待ちください。 m(_ _)m

初回投稿ですのでまずは完成したハイブリッドゲーム(中身はブラウザゲームそのもの)の紹介

HMG大富豪オンライン

Androidアプリ版
GooglePlay
https://play.google.com/store/apps/details?id=net.hasemonmon.df5on

_1-min.jpg_2-min.jpg_3-min.jpg

概要

トランプゲームの大富豪です。
オンライン対戦(4人まで)とAI対戦(一人用)が可能です。

Webブラウザ版
https://hasemonmon.net/df5/
Android 4.0以上 最新Chromeブラウザ
iOS 8以上 Safariブラウザ
Windows10モバイル Edgeブラウザ

描画はcanvas+pixi.jsをメインにGLSLのカスタムシェーダーを部分的に使用。
ゲームサーバーはnode.js+socket.ioで構築。
ハイブリッドアプリ化はcordovaを使用。