今回は、マリオをアニメーションさせます。
アニメーションをさせる方法としては、画像を切り出す始点を動かすことでアニメーションさせます。
今回使うマリオの画像は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>