デモ：シューティングゲーム
Github
良かったらプレイしてね
HTML の DOM ベースのゲームエンジン「Domini(仮)」を開発中。
ゲーム上の自機や弾はブラウザのデベロッパツールで見ていただけると DOM だとわかります。
#なぜ DOM ?
Web ベースのゲームエンジンのほとんどは、自由な描画のために Canvas を利用しています。
DOM を利用したゲームエンジンは全然見つかりません。
(唯一 Crafty.js を見つけましたが、Canvas と DOM のハイブリット)
しかし HTML/CSS にも Transform など、ゲームに使える機能が多数あり、
DOM なら Canvas よりブラウザのデベロッパーツールでデバッグできる内容も多数です。
こんなにブラウザが進化して HTML/CSS がどんどん機能追加されるなら
ゲームに利用しない手はないです。
Domini(仮) では HTML のデフォルト機能に、ゲームに必要な要素を最小限だけ追加して
私が挫折しても Google/Mozilla/Apple/Facebook さん達が勝手に進化させてくれるゲームエンジン目指します。
Domini(仮)の機能
- CSS の Transform をJS/TS側で制御
- 接触判定
デモでは UI は Svelte ですが、
依存性はないので、React や Vue でも使える予定です。
参考ゲームエンジン
| エンジン | 説明 |
|---|---|
| Unity | ご存じ一番人気。設計ほぼパクッてます。 |
| A-Frame | WebVR 用フレームワーク。HTML で VR を実装できます。 「DOM でコンポーネント指向」の設計を参考にしてます |
今後
ロックマン的なゲームを作りたいですね。
そのために下記作ります。
- アセットエディタ。画面上でマウスでDOM置いて絵やステージなどを作る
- アニメーションエディタ
エンジン部分だけのリポジトリはのちほど。
余談
接触判定のために getBoundingClientRect を呼びまくって重たくなってます。
どうにか軽く方法無いかなと思ってたら Intersection Observer なんてものが最近はあるとな。
これで軽くできないかなぁ。