WEBサイト・WEBゲームの個人開発者ブログ

INWAN'S LABO

ゲームではプレイヤーが操作するとキャラクターが動きます。

動くときには当たり前のようにアニメーションします。

ということで今回はキャラクターアニメーションのプログラムを用意しました。

 

開発環境はPixiJSで作った簡易自作ゲームエンジン(p94e.js)です。

ゲームエンジンや操作入力などのプログラムはゲームサンプルソースコード集にまとめているのでそちらを見てください。

 

サンプルプログラム

サンプルプログラムはcodepenに上げて言います。

See the Pen
キャラクターアニメーション
by いんわん (@inwan78)
on CodePen.


操作はADで左右移動、Nでジャンプします(動かない場合はゲーム画面を一度クリックしてください)。

右上にある「EDIT ON CODEPEN」をクリックするとcodepenのサイトに移動してサイト上で編集できるのでご自由にお使いください(保存する場合はアカウントを作る必要があります)。

コピペして使う場合は参照しているファイルも必要になります(右上のsettingを押すと見れます。わからない場合はこっちの記事をみてください)。

 

スプライトシート

ゲームではキャラクターがいくつも並んだスプライトシートという画像を使います。

スプライトシート

PixiJSではスプライトシートを使う場合はJsonファイルと一緒に使うんですがその方法があまり初心者向けではないのでp94e.jsではenchant.js風に使えるようにしています。

使い方についてはこちらの記事を見るとわかりやすいです(ほとんど同じになってます)。

 

p94e.jsのスプライトについてはこちらの記事に詳しく書いています。

 

サンプルの解説

Actorクラス

Actorクラスはアニメーションするキャラクター用のクラスです。

p94e.jsのEnchantSpriteから継承して作っています。

アニメーションに必要な情報を保存する変数や関数が追加されています。

 

changeAnimationPattern()でアニメーションを切り替えます。

ここでデータを入れ変えます。

 

update()で自動でアニメーションをしてくれるように作っています。

 

今回のアニメーションには関係ないですが座標の小数点を切り分ける関数があります。

これはキャラクターの座標を動かしたとき小数点が入っていると描画時に奇麗に表示されないことがあるのでそれを避けるために使います(解像度を低くすると分かりやすいです)。

基本的にメインループの頭で小数点以下の数字を戻して移動や当たり判定などの処理をして、メインループの最後で小数点以下を切り分けると描画が乱れずきれいに表示されます。

 

Playerクラス

Actorクラスから継承して作っています。

animation.dataには画像のフレーム番号(frameNumbers)と切り替えまでの時間(intervals)が配列で入っています。

それを操作に合わせてchangeAnimationPattern()を使って切り替えます。

 

今回は2Dサイドビューアクションゲームのような感じに左右移動とジャンプがあるのでそれら用の変数がちょこちょこあります。

maxSpeed、acceleration、friction、gravityの値を変えるとかなり動きが変わるので数値を変えて遊んでみてください。

 

おしまい

今回のサンプルプログラムを使えば簡単なアクションゲームなどは作れると思います。

ただアニメーションがループ前提なのでループしない場合などいろいろな状況でも使えるともっと良くなると思います。