7.マリオを描画する
今回はマリオを描画して、キー操作で動かそうとおもいます。
そのためには、マリオの画像と、描画する関数が必要です。
では、描画関数をmario.jsに書きましょう。
/*
描画
*/
cMario.prototype.Draw = function(img,tex,offsetX,offSetY){
if(this.Dir == LEFT_DIR)
{
img.save(); // canvas状態を保存
img.transform(-1, 0, 0, 1, 0, 0); // 画像を左右反転させる
img.drawImage(tex, this.AnimX, 0, 32, 32, -this.PosX - 32, this.PosY, 32, 32);
img.restore(); // canvasの状態をsaveされた状態に戻す
}
else
{
img.drawImage(tex, this.AnimX, 0, 32, 32, this.PosX, this.PosY, 32, 32);
}
}
引数は、
img = すでに作られたcanvas
tex = マリオのテクスチャ
です。
今回の画像は、右方向のマリオの画像しか用意していないので、
マリオが左に向いたときは、画像を左右に反転させないといけません。
その為にimg.save()以下でcanvas状態を変えています。
ただ、ある程度の遅延が発生すると思うので、左右の画像を用意したほうがいいですよね。
次は、canvasのdrawImageです。
ここでは、ちびマリオを描画します。サイズは32×32なので、32が切り取るサイズになります。
this.AnimXはアニメーションさせる為の変数です。どこから画像を切り取るかの範囲になります。
では、次にキーでマリオを動かす関数を見ていきます。
/*
動き
*/
cMario.prototype.Move = function(bRight,bLeft){
// 右キーが押された
if(bRight)
{
this.Dir = RIGHT_DIR;
this.PosX += this.AddNumX;
// 何回でアニメーションを変えるか
if(this.AnimCnt++ >= ANIM_CHANGE)
{
if(this.AnimX == 0)
{
this.AnimX = 32; // 次のコマへ
}
else
{
this.AnimX = 0;
}
this.AnimCnt = 0;
}
}
// 左キーが押された
else if(bLeft)
{
this.Dir = LEFT_DIR;
this.PosX -= this.AddNumX;
// 何回でアニメーションを変えるか
if(this.AnimCnt++ >= ANIM_CHANGE)
{
if(this.AnimX == 0)
{
this.AnimX = 32; // 次のコマへ
}
else
{
this.AnimX = 0;
}
this.AnimCnt = 0;
}
}
}
ここでは、アニメーションをさせる為に変数、AnimCntとAnimXを使っています。
一定回数動いたら、次にアニメーションに移るためにAnimXを次のコマ文移動して、
同じ回数動いたら、またもとのコマに戻しています。
今回アニメーションがフタコマなので、0,32の範囲でOKです。
これで、アニメーションができるようになりました。
後は、これらの関数をメインループに入れれば実行できます。