マリオをアニメーションさせる(プログラムでマリオを作る)

今回は、マリオをアニメーションさせます。

アニメーションをさせる方法としては、画像を切り出す始点を動かすことでアニメーションさせます。
今回使うマリオの画像は32×32で区切られているので、32づつずらすことでアニメーションさせるようにします。

動画解説

イントロダクション

今回は、マリオのアニメーション処理をやりたいと思います。

アニメーションの方法ですが、画像を切り出す始点の位置を動かすことによって
実現させます。

この画像は、32×32で区切られていますが、この始点を動かすことによって
アニメーションさせます。

mario.js

まず、mario.jsを開いてください。

アニメーションを行うためのメンバー変数を追加します。

// どのタイミングでアニメーションを切り替えるか
this.animCnt = 0;
// 切り出す始点のX
this.animX = 0;
// 方向を切り替えるための変数
this.direction = RIGHT_DIR;

ここで、RIGHT_DIRという定数を作りたいので、
定数ファイルを作り、その中にRIGHT_DIRを入れたいと思います。

const.js

const.jsを作ります。

var LEFT_DIR = 0;
var RIGHT_DIR = 1;

これらの定数は、マリオの左右を切り替えるために持ちます。
定数は大文字にするのが一般的です。

では、これを閉じて、mario.jsの編集を続けます。

続いて、描画関数を書き換えます。

ctx.drawImage(texture,this.animX * 24,this.direction * 24,24,24,this.posX,this.posY,24,24);

x座標とy座標の始点を動かすことにより、アニメーションさせます。

続いて、アニメーションさせるために移動関数を変更します。

Mario.prototype.moveX = function(moveX){
  // 移動方向を変える
  if(moveX > 0){
    this.direction = RIGHT_DIR;
  }
  else{
    this.direction = LEFT_DIR;
  }
  this.posX += moveX;
  // animation
  if(this.animCnt++ % 6 == 0){
    // 一定以上に達したらアニメーション更新する
    if(++this.animX > 3){
      this.animX = 0;
    }
  }
}

これで、アニメーションの処理が完成しましたが、
const.jsファイルを読み込みたいので、htmlファイルに
const.jsの読み込みを追加します。

index.html

mario.jsが読み込まれる前に追加します。

<script lang="JavaScript" src=const.js></script>

確認して見ましょう。

マリオがアニメーションされることが確認できました。

今回追加したソースファイル

mario.js

function Mario(posX,posY){
	this.posX = posX;
	this.posY = posY;
	// どのタイミングでアニメーションを切り替えるか
	this.animCnt = 0;
	// 切り出す始点のX座標
	this.animX = 0;
	// 方向を切り替えるための変数
	this.direction = RIGHT_DIR;
	
}

/*
	描画関数
	ctx:context
	texture:img class
*/
Mario.prototype.draw = function(ctx,texture){
	ctx.drawImage(texture, this.animX * 32,this.direction * 32,32,32,this.posX,this.posY,32,32);
}

Mario.prototype.moveX = function(moveX){
	// 移動方向変える
	if(moveX > 0){
		this.direction = RIGHT_DIR;
	}
	else{
		this.direction = LEFT_DIR;
	}
	this.posX += moveX;
	// animation
	if(this.animCnt++ % 6 == 0){
		// 一定以上に達したらアニメーションを更新する
		if(++this.animX > 3){
			this.animX = 0;
		}
	}

}

const.js

var LEFT_DIR = 0;
var RIGHT_DIR = 1;

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<script lang="JavaScript" src=const.js></script>
<script lang="JavaScript" src=mario.js></script>
<script lang="JavaScript" src=main.js></script>
</head>

<body>
<div id="fps"></div>
<div id="canvas_wrapper">
	<canvas id="id_canvas" width="640" height="480"></canvas>
</div>
</body>
</html>
Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です