こんにちは！ゲーム好きのセミマサです。
ゲーム好きなら一度は「自分もゲームを作ってみたい」と思うことがあるのではないでしょうか？とはいえゲームプログラミングって敷居が高そうなイメージがありますよね。
そこでおすすめしたいのが「phina.js」という JavaScriptのゲームライブラリです。チュートリアルやサンプルが豊富で「こんな処理をしたいなー」って思ったときは調べれば大体出てきます。
私のJavaScriptレベルはprogateで学べる内容に毛が生えた程度でしたが、それでもゲームを完成させることができました。
この記事ではphina.jsを使ってゲームを作る際に参考にした記事・ 使ったソフト ・躓いた点などを書きたいと思います。
成果物
実際に作ったゲーム「すすまナイト」はこちらから遊べます。※音が鳴ります
参考にした記事
主に参考にした2つをご紹介します。大変お世話になりました。
使用したソフト
- edge ：キャラクターのドット絵を描くのに使ったソフトです。
- CLIP STUDIO PAINT：タイトル画面とリザルト画面の絵はこれで描きました。
- Visual Studio Code：入力補完が超優秀なエディタ。今回の開発にあたりLive Serverという拡張機能を導入。
- Google Chrome:動作確認の際に使ったブラウザ。
躓いた点等
全体的にしょうもない内容が多いですが、せっかくなのでまとめておきます！今後phina.jsを使う人の参考になれば幸いです。
‘domElement’ of undefined
phina.jsにおいて使用する画像や音楽などはASSETSとして定義しておくのですが、これをmain関数に渡すのを忘れていたために起きたエラーです。そんな画像ねぇよ！って怒られたわけですね。
なんともいえない理由でしたが、画面に画像を表示するという最初の最初で遭遇したので出鼻を挫かれました。
jsonやオーディオファイルを使う時はローカルだとダメ
動作確認をする時、ローカル(URLバーにfile://~て出る状態)だとjsonファイルやオーディオファイルがCORS policyにひっかかってしまいエラーになりました。
Visual Studio Code のLiveServerやBracketsのライブプレビューを使うことで回避できます。
複数の行動をさせるならifよりswitch
最初はifとフラグを使ってキャラクターの状態を管理していましたが、それだと複雑な動きがさせ辛かったです。そこで有効だと感じたのがswitch！ifより見やすく書けるのも利点ですね。
宙に浮いてから攻撃してくる敵や弾を撃ってくる敵の制御、プレイヤーが今何をしているかの管理等にswitchを使っています。
break;を書き忘れると挙動が大変なことになるので気を付けましょう。
おわりに
自分で作ったものが動いて遊べるのはやっぱり嬉しいので、今後もゲームを作っていきたいと思います！作ったゲームは自作ゲーム置き場にまとめています。
phina.jsはかなりとっつきやすいライブラリだと思うのでゲーム作ってみたいなって人は一度チェックしてみてくださいね！
