BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. phina.jsを使って横スクロールアクションもどきを作ってみた
by 稲垣 稲垣

phina.jsを使って横スクロールアクションもどきを作ってみた

phina.jsを使って横スクロールアクションもどきを作ってみた

こんにちは稲垣です。

今回は簡単にゲームが作れるphina.jsというライブラリを使って、横スクロールゲームを作成してみます!

phina.jsとは?

以下、公式サイトより引用です。

ゲームやツールを簡単に作る事ができる JavaScript ゲームライブラリだよ♪

PC とスマートフォンどちらでも動くんだ

『プログラミングって気軽にできるもんなんだ』『ゲームってこんなに簡単に作れるんだ』って感じてもらえると嬉しいな

なんだかとてもお手軽そうな印象を受けますね。

初めて触る私でもゲームが作れるのではないでしょうか!

国産でオープンソースとのことなので、英語が苦手でも情報が探しやすそうです。

デモ

今回作ってみたものです。

卵が転がってきたらクリックでキャラクターをジャンプさせてください。

目標の動きとしてはgoogleのネット接続エラー時に遊べる恐竜のゲームを目指したつもりです。

 

飛び越える度に卵がスピードアップするのですが、発射されるタイミングにランダム性がないのでどうしてもスコア600を超えられないものになってしましました…。

今回のサンプルを作るにあたり、下記のページを大変参考にさせていただきましたm(_ _)m

https://qiita.com/alkn203/items/6e0723f4161767a5728f

https://qiita.com/alkn203/items/bca3222f6b409382fe20

phina.jsを読み込む

完成品であるデモがとてもポンコツでしたが、気を取り直して作り方を簡単に説明していこうと思います。

まずは下記のコードを記述します。

背景やラベルの表記は入れてますが、phina.jsの実行に必要な最低限の記述は上記になるのではないかと思います(たぶん)

これを実行するとこのような画面になります。

ここにステージに配置する要素のことを記述して、

 

この部分で描画をするのかなあと…。

あまり理解が追いついてなくてすみません。

とりあえずこのコードに要素を足していく感じで作成していきます。

キャラクターと背景を動かしてみる

画面が殺風景なので背景画像を表示して、操作キャラクターを置いて動かしてみましょう。

まずは必要な変数と画像の読み込みをします。

キャラクターの画像は公式サイトのものを拝借しています。

背景画像はループさせたいので、同じものを二枚セットしています。

横方向のつなぎ目がわからないように加工したものを使ってください。

プレイヤーのクラスも用意します。

正直に言うとクラスの概念がよくわかっておりません…。

とりあえず必要な要素は用意したので、メインシーンに画像の描画と画面クリック時の処理を書きます。

あとは update: function(app) { のあとに毎フレームごとに実行する処理を記述します。

ここまで書いてできるサンプルが下記になります。

スプライトシートを使ってのアニメーションがとてもお手軽な印象でした!

 

障害物の作成

キャラクターの配置はできたので、前方から飛んでくる障害物(卵)を作成しましょう。

ASSETS部分で卵の画像を読み込み、変数も追加します。

卵の画像は通常時と割れた物の2フレームになってます。

画像を用意したらメインシーンに卵を追加しましょう。

卵のX値は画面外に設定しています。

あとはupdate:に転がる卵のアニメと、キャラクターとぶつかった時の処理を追加します。

キャラクターに当たると卵が割れるようになりました!

当たり判定の調整と仕上げ

phina.jsを使うと当たり判定がとても簡単に使えるのですが、前項の書き方のままだと透過されている画像の余白部分も含んでしまうため、判定がとても厳しいものになります。

そこで、キャラクターと卵にそれぞれ円を重ね、その円で衝突判定を行うように下記を追加します。

これでゲームのほぼ全ての機能ができました!

あとは一回飛び越えることにスコアがつくようにし、スタート画面とゲームオーバー画面をつけました。

スタート画面やゲームオーバー画面はデフォルトで準備されているみたいです。

完成!

最後にコードをまとめて載せます!

どんな処理をしているか把握できていない箇所も多いのですが、当たり判定などデフォルトで実装されている機能が豊富そうで、確かに気軽にゲームが作れそうだと思いました。

もうちょっと触ってみてまた別のゲームを作ってみたいです!

 

ページの先頭に戻る