マウスに反応させる

今回はマウスの動きや動作に合わせてスプライトを操作するお話です。
スプライトにはあらかじめその機能もしっかり備わっています。
(ありがたや!!)

マウスに関するイベントとしてよく使う機能は下記の通りです。

マウスが重なった時
マウスが離れた時
マウスでクリック(押した)時
マウスでクリック(離した)時

以下、順番に見ていきましょう。

マウスが重なった時

マウスがスプライトに重なった時に何かを実行したい場合は、
onMouseOverに関数を定義します。

スプライト.onMouseOver = (event)=>{
   // やりたい処理
}

マウスが離れた時

マウスがスプライトにから離れた時に何かを実行したい場合は、
onMouseOutに関数を定義します。
関数にある"event"引数には、対象のスプライト自身を示すオブジェクトが格納されています。

スプライト.onMouseOut = (event)=>{
   // やりたい処理
}

マウスでクリック(押した)時

マウスでスプライトをクリック(押した)時に何かを実行したい場合は、
onMousePressedに関数を定義します。
関数にある"event"引数には、対象のスプライト自身を示すオブジェクトが格納されています。

スプライト.onMousePressed = (event)=>{
   // やりたい処理
}

マウスでクリック(離した)時

マウスでスプライトをクリック(離した)時に何かを実行したい場合は、
onMouseReleasedに関数を定義します。
関数にある"event"引数には、対象のスプライト自身を示すオブジェクトが格納されています。

スプライト.onMouseReleased = (event)=>{
   // やりたい処理
}

サンプルを作ってみる

実際にonMouseOver、onMouseOutを使ってサンプルを作ってみましょう。

使っているタヌキの画像を置いておきますね。

大きさが変わるサンプル

次のコードは、マウスが重なった時は大きくなり、
離れた時に元の大きさに戻るサンプルです。

let img;

function preload() {
	img = loadImage("t_tanu.png");
}

function setup() {
	createCanvas(windowWidth, windowHeight);
	frameRate(32);
	noSmooth();
	// スプライト
	let spr = createSprite(width/2, height/2);
	spr.addImage(img);
	// マウスが重なった時
	spr.onMouseOver = (event)=>{
		event.scale = 2;// 2倍の大きさになります
	}
	// マウスが離れた時
	spr.onMouseOut = (event)=>{
		event.scale = 1;// 元の大きさに戻ります
	}
}

function draw() {
	background(33);
	drawSprites();
}

マウスが重なると2倍になり、離れると元の大きさ(1倍)になります。(お見事!!)
余裕があったら、onMousePressedやonMouseReleasedも試してみましょう。

クリックするとどこかに行っちゃうサンプル

次のコードは、クリックするとどこかへ行ってしまうサンプルです。

let img;

function preload() {
	img = loadImage("t_tanu.png");
}

function setup() {
	createCanvas(windowWidth, windowHeight);
	frameRate(32);
	noSmooth();
	// スプライト
	let spr = createSprite(width/2, height/2);
	spr.addImage(img);
	// マウスでクリックした時(押した時)
	spr.onMousePressed = (event)=>{
		event.scale = 0.5;// 半分の大きさになります
	}
	// マウスでクリックした時(離した時)
	spr.onMouseReleased = (event)=>{
		event.scale = 1;// 元の大きさになります
		event.position.x = random(width);// ランダムで何処かへ!!
		event.position.y = random(height);
	}
}

function draw() {
	background(33);
	drawSprites();
}

絶対に捕まえることは出来ません!!
(座標がランダムで変わるだけですね)

次回も引き続き、スプライトについてのお話になります。

前回の記事 | 次回の記事

おまけ動画(こちらもよろしくお願いします)