Phaser 3 + TypeScript サンプル 英単語タイピング練習

開発

TypeScriptの勉強もかねて、Phaser 3というゲーム開発向けのライブラリを使ってブラウザゲーム作成に挑戦しました。

まだまだ修正の余地はありますがソースをGitHubで公開しています。
これからJavaScriptでゲーム開発をしようと考えている人の参考になればと思います。

クリックが利かないときはF12キーで開発者ツールを表示しながらだとうまく動くときが…

参考情報

ゲーム開発といっても、以前Scratchでつくった、英単語を覚えるタイピング練習ソフトの移植です。
今回のJavaScript版はWebSpeechAPIで英語を発音するので、リスニング力の強化も期待できる!?

TypeScriptでゲーム開発に使えるライブラリには次のようなものがあります。

名前 使用料 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氏

フリーBGM(音楽素材)無料ダウンロード|DOVA-SYNDROME

フリーBGM音楽素材を無料ダウンロード配布しています。商用や非商用など、用途を問わず連絡不要でご自由にご利用頂けます。[配信BGM素材数 10624曲/SE素材数 1216音 2020/6/20現在]

効果音:音人

フリー効果音 On-Jin ~音人~

On-Jin ~音人~ 各連絡・通知 効果音コンテンツ 効果音ジャンル 関連サイト ランダム・ピックアップ・リンク リンクさせていただいているサイトさんをランダムに紹介しています 【 half 】   管理者:はる助 様  [ ゲーム ] :音人著:ゲーム制作サークルさん。音源をご利用いただきました。 効果音について 個人・サークル・学校・ボランティアでの利用は、様々な組込み利用事例(営利・非営利に関わらず)においてフリーでご利用いただけます。 各事業(営利会社・営利法人・営利事業)に関わる場合はご連絡下さい。 利用規約は必ずご覧下さい。 更新情報   素材ご利用作品リスト copyright © 2004-2018 On-Jin ~音人~ all rights reserved. 当サイト内における、音声、画像、文章等の無断使用、無断転載は一切禁止です。

javascript

Posted by moto2g