[自作ゲーム]phina.jsを使って製作中:2(スプライト画像&フレームアニメーション)

広告
ゲーム制作
ゲーム制作 プログラミング

前回の投稿から、少しでもゲームっぽくする為には何が必要なのか考えた結果、ブロックではなくスプライト画像を使ってみる事にしました。引き続きphina.jsのお世話になりつつスプライト画像の適用をしてみました。

しかし、絵心のない私には自分でイラストを作るだけで数日を要してしまうので、無料配布してくださっているサイト「ぴぽや倉庫」様からお借りしました。

前回のプログラムで表示していたブロックを、お借りした画像に置き換えアニメーションも付け加えたものがこちら

前回からの変更点

ASSETSの追加

Shapeで作っていたブロックを、Spriteに変更

その他、破裂から消滅までの猶予の追加をしました。せっかく素材に破裂アニメーションまで用意されているのに使わないのはもったいないですから。

前回までは当たり判定が反応したと同時に、ブロックの消滅と破片の生成を行っていたのですが、破裂アニメーションを付けた事でスプライト消滅までに少し猶予をもたせる必要が生じました。猶予をもたせるのは簡単ですが、同時にいくつか問題も生じました。

  • 破裂→スプライト消滅→破片生成
    • 破片生成までに時間が空いてしまい不自然に…。
  • 破裂&破片生成→スプライト消滅
    • 消滅前に自身の破片で当たり判定が反応。無尽蔵に破片が生成される結果に…。

私が解決方法として選んだのは、スプライトにHPをつける方法。スプライトのHPが1以上の時に当たり判定が作動するように、当たり判定の部分にちょこっとだけ手を加えました。

あとちょっとしたこだわりで、破裂が始まったらスプライトの移動を停止させたりとか、ちょこちょこ調整しました。

今後はこのプログラム?をきちんとしたゲームの形にしたいと思っています。が、ここからどうすればいいのか…

参考にしたサイト

大変お世話になりました。この場を借りてお礼申し上げます。

旧 phina.js Tips集 - Qiita
コンテンツは以下のzennのbookに移行しました。 今後はzennの方を更新する予定です。 phina.js Tips集 javascriptのゲーム作成用ライブラリphina.jsに関するTipsについて書いています...
phina.js room - ほろほろりドットコム
ゲームライブラリ『phina.js』について今までに書いた記事一覧や、ほろほろりがphina.jsを使って作った作品を紹介しているページです。記事の方は、ただ図形を描画させるだけの基本的なものから、入力関連、少し突っ込んでゲーム作成について、他のライブラリと連携に関しての記事等、色々置いています。
「phina.jsプログラミングまとめ」 vistanさんの公開マイリスト - ニコニコ
phina.jsによる10分間プログラミング マイリスト

特にお世話になっているのが @alkn203 様。本当に感謝しています。

コメント

タイトルとURLをコピーしました