Phaser 3 + TypeScript サンプル 英単語タイピング練習
TypeScriptの勉強もかねて、Phaser 3というゲーム開発向けのライブラリを使ってブラウザゲーム作成に挑戦しました。
まだまだ修正の余地はありますがソースをGitHubで公開しています。
これからJavaScriptでゲーム開発をしようと考えている人の参考になればと思います。
クリックが利かないときはF12キーで開発者ツールを表示しながらだとうまく動くときが…
参考情報
ゲーム開発といっても、以前Scratchでつくった、英単語を覚えるタイピング練習ソフトの移植です。
今回のJavaScript版はWebSpeechAPIで英語を発音するので、リスニング力の強化も期待できる！？
https://majipon.jp/blog/?p=1248TypeScriptでゲーム開発に使えるライブラリには次のようなものがあります。
| 名前 | 使用料 | 2D | 3D | メモ |
| Phaser 3 | 無料 | 〇 | × | 公式情報が豊富。デモをみながらソースを確認できる。 |
| Pixi.js | 無料 | 〇 | × | ゲームエンジンというより描画ライブラリ。 Phaser 3の描画で使用されている |
| Egret Engine | 無料 | 〇 | 〇 | |
| TinyUnity | 無料 | 〇 | 〇 | 2D対応はバージョンによる。 対応言語がTypeScriptからC#へ変わる予定 |
| Akashic Engine | 無料 | 〇 | × | 日本語のチュートリアルがある |
今回は「ひとまず試してみよう」という程度だったので、やりたいことの実現方法が見つけやすかったPhaser 3を選びました。
なお、Phaser 3の開発環境の構築方法、ゲームシーンの取り扱いなどはQiitaのこちらの記事が参考になりました。
フレームワークを使えば比較的簡単にゲーム開発できるので、プログラミング初心者の勉強ネタに良いですね。
使用した素材
BGM、効果音は下記サイトのフリー素材を利用しています。
BGM：DOVA-SYNDROMEより 「High Speed Mission」 by MAKOOTO氏
効果音：音人