前回記事
https://simblo.net/u/Nz7RmE/post/463575

今回は画像を使ってみます。

ゲーム画面で画像を表示する #

画像の準備 #

次の２枚の画像をimgフォルダに入れます。

ファイル名は0.png,1.pngで（どっちが0でも構いません）

次はjsフォルダのhokug.config.jsを開きます。
こいつは画面の大きさや更新間隔を設定しているファイルです。

1番下まで行くと画像の読み込み設定があります。
ここに"0.png","1.png"を追加します。
（この記事の1回目のリンクからダウンロードした場合は"logo.png"がすでに入ってます。使って無いけど）
ファイル名は" "（' '）で囲み、カンマ区切りです。

hokug.preLoad = new Array(
	"logo.png",
	"0.png",
	"1.png"
);

こんな感じになります。(logoは消しちゃってもいい、改行も入れても入れなくても)

画像の使用 #

画像の読み込み設定をしたら再びgame.jsファイルを変更していきます。
変数設定部分に画像用の変数を用意します。
let face;
ここでは内容は入れずに変数名だけ宣言しておきます。

init(){}内に追記します。
face = hokug.createBasicBlock(100, 100, 128, 128, ["0.png", "1.png"]);

hokug.createBasicBlock(x,y,w,h,["使用する画像"]);
読み込んだ画像を利用するにはBlockという形式で登録しておく必要があり（一般的にはSpriteと呼ばれている感じのやつ）
その登録コマンドです。

x,yは初期位置(原点は画像の中心）、
w,hは画像の幅と高さを指定（画像サイズと違う場合は自動で拡大縮小されます）。

画像は複数指定すると自動でフレームアニメーションします。

表示するには
hokug.drawBlock(face);

これをtimerの中に入れてやります。

画像を動かしてみる。 #

前回まで動かしていた四角形の代わりにこのBlockを動かします。
四角形の描画関連はコメント化で。

if(life > 0){の直下に

face.x += moveX;
face.y += moveY;
hokug.drawBlock(face);

と追記。

Blockは自身でx,y座標を保持していて、今回だとface.x,face.yという指定で値の取得や変更できます。

その後hokug.drawBlock()で描画します。必要な情報が内包されているので指定するのはBlockを入れてある変数だけです、らくちんです。

※四角形のときは描画してから位置の計算をしていましたが、それだとタッチ成功の判定が見た目とずれちゃうと思い、位置を決めてから描画に変えました。別にBlockだからこうするとかではないです。

反転の処理は原点が画像中央になっているので、画面幅や高さをはみ出た判定は画像のx,yに画像幅や高さの半分を足したり引いたりします。

if (face.x + face.width / 2 > hokug.width || face.x - face.width / 2 < 0) {
	moveX *= -1;
}

if (face.y + face.height / 2 > hokug.height || face.y - face.width / 2 < 0) {
	moveY *= -1;
}

まだタッチ処理を直してないですが先にlifeが0になった時の処理を書いておきます。
こちらも原点と大きさが変わったのでその調整です。

else if(cntDown > 0){〜のところです

let cd = 60 - cntDown * 5;
let w = face.width / 2;
let h = face.height / 2;
let c = textColor3;
let x = face.x - w / 2;
let y = face.y - h / 2;

hokug.drawRect(x - cd, y - cd, w, h, c);
hokug.drawRect(x + cd, y - cd, w, h, c);
hokug.drawRect(x - cd, y + cd, w, h, c);
hokug.drawRect(x + cd, y + cd, w, h, c);

cntDown--;

タッチ処理 #

touchDown(x,y){}のところに書きます
BlockはhitText(x,y)というコマンドが使えます。
x,yがBlockの範囲上にあるか調べられます。

touchDown(x,y){
	if (face.hitTest(x, y)) {
		life--;
		moveX *= rand(2, 4);
		moveY *= rand(2, 4);
	}
}

これだけでタッチした場所がface上かどうか判定できます。ラクチンです。

終わり #

最終的なコード全体を載せておきます。（使ってないところは消してます。）
ずっとtextColorって変数を使ってますが気になるかたはrectColorとかに変えてください。

game.js

//文字色
let textColor3 = new hokug.Class.Color(200, 0, 0, 1);

//ターゲットのライフ
let life = 3;
//終了処理用カウントダウン
let cntDown = 4;

//Block
let face;

//横移動量
let moveX = 3;
//縦移動量
let moveY = 3;
/**
 * ゲームのフェーズが変わった時に呼び出されるイベント.
 */
hokug.phaseChanged = function() {
	switch (hokug.state.phase) {
		case hokug.Phase.UNSTART:
			init();
			hokug.changePhase(hokug.Phase.RUN);

			break;
		case hokug.Phase.READY:
			break;
		case hokug.Phase.GO:
			break;
		case hokug.Phase.RUN:
			break;
		case hokug.Phase.FINISH:
			break;
		case hokug.Phase.GAMEOVER:
			break;
	}
};

/**
 * KeyDownされた時に呼び出されるイベント.
 *
 * @param {object} event キーイベント
 */
hokug.keyDown = function(keyEvent) {
	switch (keyEvent.keyCode) {
		case 37:
			break; // left
		case 38:
			break; // up
		case 39:
			break; // right
		case 40:
			break; // down
	}
}

/**
 * TouchDownされた時に呼び出されるイベント.
 *
 * @param {number} x 座標X(px)
 * @param {number} y 座標Y(px)
 */
hokug.touchDown = function(x, y) {
	if (face.hitTest(x, y)) {
		life--;
		moveX *= rand(2, 4);
		moveY *= rand(2, 4);
	}
};

/**
 * TouchMoveされた時に呼び出されるイベント.
 *
 * @param {number} x 座標X(px)
 * @param {number} y 座標Y(px)
 * @param {number} prevX 前回TouchMove時の座標X(px)
 * @param {number} prevY 前回TouchMove時の座標Y(px)
 */
hokug.touchMove = function(x, y, prevX, prevY) {

};

/**
 * TouchUpされた時に呼び出されるイベント.
 *
 * @param {number} x 座標X(px)
 * @param {number} y 座標Y(px)
 */
hokug.touchUp = function(x, y) {

};

/**
 * 定期的に呼び出されるタイマーイベント.
 * (hokug.state.phase が hokug.Phase.RUN の時に限る)
 */
hokug.timer = function() {
	//背景色設定
	hokug.drawFillRGBA(0, 0, 0, 1);

	//ターゲットのライフが1以上なら
	if (life > 0) {
		face.x += moveX;
		face.y += moveY;

		hokug.drawBlock(face);

		if (face.x + face.width / 2 > hokug.width || face.x - face.width / 2 < 0) {
			moveX *= -1;
		}

		if (face.y + face.height / 2 > hokug.height || face.y - face.width / 2 < 0) {
			moveY *= -1;
		}
		
	} else if (0 < cntDown) {
		
		let cd = 60 - cntDown * 5;
		let w = face.width / 2;
		let h = face.height / 2;
		let c = textColor3;
		let x = face.x - w / 2;
		let y = face.y - h / 2;

		hokug.drawRect(x - cd, y - cd, w, h, c);

		hokug.drawRect(x + cd, y - cd, w, h, c);

		hokug.drawRect(x - cd, y + cd, w, h, c);

		hokug.drawRect(x + cd, y + cd, w, h, c);

		cntDown--;
	}
};

//////////////////////////////////////////////////
// * 関数

/**
 * 初期化処理
 * hokug.state.phase が　UNSTART 状態のときに1度実行
 */
function init() {
	hokug.drawFillRGBA(0, 0, 0, 1);
	face = hokug.createBasicBlock(100, 100, 128, 128, ["0.png", "1.png"]);

}

/**
 * 指定範囲のランダムな整数
 * @param {number} min 最小値
 * @param {number} max 最大値
 */
function rand(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
}

hokug.config.js

//
/**
 * 描画対象のスクリーン.
 * 0=スマホ 1=PC
 *
 * @type {number}
 */
hokug.screenMode = 1;

/**
 * ゲームのCanvas幅(px).
 *
 * @type {number}
 */
hokug.width = 600;

/**
 * ゲームのCanvas高さ(px).
 *
 * @type {number}
 */
hokug.height = 400;

/**
 * Canvas領域以外の背景色.
 *
 * @type {string}
 */
hokug.outsideColor = "#444";

/**
 * タイマーイベント(hokug.timer)が呼ばれる間隔(ms).
 * 0にすると、タイマーイベント無し.
 *
 * @type {number}
 */
hokug.timerInterval = 50;

/**
 * Readyフェーズの時間(ms).
 *
 * @type {number}
 */
hokug.readyTime = 2000;

/**
 * Goフェーズの時間(ms).
 *
 * @type {number}
 */
hokug.goTime = 1000;

/**
 * Runフェーズの時間(ms).
 * -1にすると、無制限になる.
 *
 * @type {number}
 */
hokug.gameTime = -1;

/**
 * Finishフェーズの時間(ms).
 *
 * @type {number}
 */
hokug.finishTime = 3000;

/**
 * リソースファイルが格納されているディレクトリの相対パス.
 *
 * @type {string}
 */
hokug.resDirPath = "img";

/**
 * リソースディレクトリから事前に読み込んでおく画像.
 *
 * @type {Array.<string>}
 */
hokug.preLoad = new Array(
	"0.png",
	"1.png"
);

一応今回で完成です

次は使ってない機能とかをメモ的にまとめます。