phina.jsを使ってシンプルなゲームを作ってみた

こんにちは！ゲーム好きのセミマサです。

ゲーム好きなら一度は「自分もゲームを作ってみたい」と思うことがあるのではないでしょうか？とはいえゲームプログラミングって敷居が高そうなイメージがありますよね。

そこでおすすめしたいのが「phina.js」という JavaScriptのゲームライブラリです。チュートリアルやサンプルが豊富で「こんな処理をしたいなー」って思ったときは調べれば大体出てきます。

私のJavaScriptレベルはprogateで学べる内容に毛が生えた程度でしたが、それでもゲームを完成させることができました。

この記事ではphina.jsを使ってゲームを作る際に参考にした記事・使ったソフト・躓いた点などを書きたいと思います。

成果物

実際に作ったゲーム「すすまナイト」はこちらから遊べます。※音が鳴ります

主に参考にした2つをご紹介します。大変お世話になりました。

外部サイト

全体的にしょうもない内容が多いですが、せっかくなのでまとめておきます！今後phina.jsを使う人の参考になれば幸いです。

phina.jsにおいて使用する画像や音楽などはASSETSとして定義しておくのですが、これをmain関数に渡すのを忘れていたために起きたエラーです。そんな画像ねぇよ！って怒られたわけですね。

なんともいえない理由でしたが、画面に画像を表示するという最初の最初で遭遇したので出鼻を挫かれました。

動作確認をする時、ローカル(URLバーにfile://~て出る状態)だとjsonファイルやオーディオファイルがCORS policyにひっかかってしまいエラーになりました。

Visual Studio Code のLiveServerやBracketsのライブプレビューを使うことで回避できます。

最初はifとフラグを使ってキャラクターの状態を管理していましたが、それだと複雑な動きがさせ辛かったです。そこで有効だと感じたのがswitch！ifより見やすく書けるのも利点ですね。

宙に浮いてから攻撃してくる敵や弾を撃ってくる敵の制御、プレイヤーが今何をしているかの管理等にswitchを使っています。

break;を書き忘れると挙動が大変なことになるので気を付けましょう。

自分で作ったものが動いて遊べるのはやっぱり嬉しいので、今後もゲームを作っていきたいと思います！作ったゲームは自作ゲーム置き場にまとめています。

phina.jsはかなりとっつきやすいライブラリだと思うのでゲーム作ってみたいなって人は一度チェックしてみてくださいね！