hokugで用意されているBlockクラスを使ってフレームアニメーションしようとすると、1コマにつき1画像ファイル使うので凝った動作をつくるとき読み込みや管理が面倒になってきます。

なのでスプライトシートに画像をまとめてアニメーションに使えるようにしてみました。

※スプライトシートはこういうやつです


このロボのキャラを前回作った背景に表示させてみます。
コードは前回のファイルに追加していく感じです。
(前回「ツクセカのマップを利用する」https://simblo.net/u/Nz7RmE/post/476286）

背景と世界観が合いませんが、たまたま手元にあったやつなので仕方ありません。

imgフォルダにスプライトシート画像を保存し
hokug.config.jsのpreLoad部分に画像ファイル名を追加します。

アニメーション用Spriteクラスを作ってみる #

Blockクラスをコピー #

とりあえずhokug.jsからBlockクラスをgame.jsにコピーして書き換えていきます。

// ブロッククラス
hokug.Class.Block = function() {
	this.x = 0; // X座標
	this.y = 0; // Y座標
	this.width = 0; // 幅
	this.height = 0; // 高さ
	this.topImgs = []; // 上向きの時の画像
	this.rightImgs = []; // 右向きの時の画像
	this.bottomImgs = []; // 下向きの時の画像
	this.leftImgs = []; // 左向きの時の画像
	this.startTime = 0; // アニメーション開始時刻
	this.vector = hokug.Vector.Top; // 今向いている方向
//メソッド部分は省略
};

スプライトシートアニメーション用に書き換え #

名前をAnimSprite等にして、書き方も新しいバージョンで書きます

class AnimSprite {
	//初期化
	constructor(option) {
		this.x = option.x || 0; // X座標
		this.y = option.y || 0; // Y座標
		this.width = option.width || 32; // 幅
		this.height = option.height || 32; // 高さ
		this.img = option.img; //spriteの画像
		this.originX = option.originX || 0; //スプライトのx座標原点
		this.originY = option.originY || 0; //スプライトのy座標原点
		this.topImgs = option.topImgs || []; // 上向きの時フレーム番号[idx1,idx2,idx3...]
		this.rightImgs = option.rightImgs || []; // 右向きの時フレーム番号
		this.bottomImgs = option.bottomImgs || []; // 下向きの時フレーム番号
		this.leftImgs = option.leftImgs || []; // 左向きの時フレーム番号
		this.startTime = 0; // アニメーション開始時刻
		this.vector = hokug.Vector.Bottom; // 今向いている方向
	}
}

増えたパラメータは img,originX,Yです。originX,Yは前回やったやつと同じ。
imgはhokug.res["configで指定したファイル名"]の形式です。

topImgsのあたりはパラメータ名はBlockクラスと同じですが、Blockクラスではファイル名の配列だったのに対し、フレーム番号になります（["ファイル0","ファイル1","ファイル2"] → [0,1,2]）

メソッド部分は今回は使わないので外しました。

アニメーションの描画機能を作る #

hokug.drawBlock()を直してフレーム番号での描画に対応した関数を作ります。

drawBlockメソッドをコピー #

Blockクラスと同じようにgame.jsにコピーします。

// Blockを描画する
hokug.drawBlock = function(block) {
	var targetImages = [];
	switch (block.vector) {
		case hokug.Vector.Top:
			targetImages = block.topImgs;
			break;
		case hokug.Vector.Right:
			targetImages = block.rightImgs;
			break;
		case hokug.Vector.Bottom:
			targetImages = block.bottomImgs;
			break;
		case hokug.Vector.Left:
			targetImages = block.leftImgs;
			break;
	}
	if (targetImages.length === 0) {
		return;
	}

	var ago = ((new Date()).getTime() - block.startTime) / 200;
	ago = parseInt(ago % targetImages.length, 10);
	var x = block.x - (block.width / 2);
	var y = block.y - (block.height / 2);
	hokug.ctx.drawImage(targetImages[ago], x, y, block.width, block.height);
};

drawAnimSpriteに書き換え #

コピーしたhokug.drawBlockメソッドをdrawAnimSprite()関数として書き換えます。

/**
 * AnimSpriteの描画
 */
function drawAnimSprite(block) {
	let targetImages = [];
	switch (block.vector) {
		case hokug.Vector.Top:
			targetImages = block.topImgs;
			break;
		case hokug.Vector.Right:
			targetImages = block.rightImgs;
			break;
		case hokug.Vector.Bottom:
			targetImages = block.bottomImgs;
			break;
		case hokug.Vector.Left:
			targetImages = block.leftImgs;
			break;
	}
	if (targetImages.length === 0) {
		return;
	}

	let ago = ((new Date()).getTime() - block.startTime) / 200;
	ago = parseInt(ago % targetImages.length, 10);
	drawBg(block, targetImages[ago]);
}

メソッドから関数に直しただけで中はほとんど同じです。
描画原点をスプライトの中心に移す処理はdrawBg()関数の中にあるので削除します。

前回作ったdrawBg()関数を改造 #

表示するのがBgだけじゃなくなったので名前をdrawSpriteとかに変えてもいいかもしれません

/**
 * Spriteの描画
 */
function drawSprite(bg, frameIdx) {//引数にfremeIdxを追加
	//フレーム番号が-1のとき描画しない
	if (bg.idx == -1) return
	const w = bg.width;
	const h = bg.height;
	//表示位置の調整
	const x = bg.x - (w * bg.originX);
	const y = bg.y - (h * bg.originY);

	let idx = frameIdx || bg.idx; //フレーム番号
	
	const col = Math.floor(bg.img.width / w); //スプライトシートの横コマ数
	const row = Math.floor(bg.img.height / h); //スプライトシートの縦コマ数

	//フレーム番号がコマ数以上のときループ
	const maxIdx = row * col;
	idx = idx % maxIdx;
	//スプライトシートの切り取り開始位置
	const sx = (idx % col) * w;
	const sy = Math.floor(idx / col) * h;
	//hokugのcanvasに描画
	hokug.ctx.drawImage(bg.img, sx, sy, w, h, x, y, w, h);
}

引数にframeIdxを追加して、未指定時はスプライトのidxを使用するようにします

初期化処理の中にキャラ表示を追加 #

変数playerを設定 #

game.jsの頭にAnimSpriteを入れておく変数を設定します。

let player ;

init()内に追加 #

player = new AnimSprite({
		img: hokug.res["robo.png"],
		topImgs: [9, 10, 11, 10],
		rightImgs: [3, 4, 5, 4],
		leftImgs: [6, 7, 8, 7],
		bottomImgs: [0, 1, 2, 1]
});

引数内のパラメータはオブジェクト形式になっているので並び順を覚えなくても指定できます。

timar()内に描画処理を追加 #

canvasを塗りつぶす処理の後に追加します。

hokug.drawFillColor(bgColor);
	field.draw();//追加
	drawAnimSprite(player);//追加

画面左上にアニメーションするキャラが表示されたでしょうか。

touchDown()やkeyDown()にplayerの位置やvectorを変更する処理を入れれば動かせます