マウスムーブで、ひよこちゃんにマウスの後を追わせてみるよ。 :piyo:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name=”viewport” content=”width=600” />
<title>MouseEvent [stagemousemove] | CreateJS</title>
<script src="js/easeljs-1.0.0.min.js"></script>
<script src="js/tweenjs-1.0.0.min.js"></script>
<script src="js/Piyo.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
html, body {
margin:0;
padding:0;
font-family: sans-serif;
}
#canvas{
display:block;
width:600px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
padding-left:0;
padding-right:0;
}
</style>
<script>
var canvas, stage, stats;
var piyo;
var cx, cy;
function init() {
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "fixed";
stats.domElement.style.right = "0px";
stats.domElement.style.top = "0px";
document.body.appendChild(stats.domElement);
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
background();
initialize();
cx = canvas.width/2;
cy = 210;
piyo = new lib.Piyo();
stage.addChild(piyo);
piyo.x = cx;
piyo.y = cy;
piyo.mouseEnabled = false;
stage.addEventListener("mouseenter", enter);
createjs.Ticker.framerate = 30;
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
if (createjs.Touch.isSupported()) {
createjs.Touch.enable(stage);
}
stage.enableMouseOver(10);
stage.update();
}
function initialize() {
createjs.Ticker.addEventListener("tick", update);
}
function update(event) {
piyo.update();
stage.update();
stats.update();
}
function enter(event) {
stage.removeEventListener("mouseenter", enter);
stage.addEventListener("stagemousemove", move);
stage.addEventListener("mouseleave", leave);
}
function move(event) {
piyo.x = event.stageX;
piyo.y = event.stageY;
}
function leave(event) {
stage.removeEventListener("stagemousemove", move);
stage.removeEventListener("mouseleave", leave);
stage.addEventListener("mouseenter", enter);
createjs.Tween.get(piyo, {override: true})
.to({x: cx, y: cy}, 200, createjs.Ease.quadOut);
}
function background() {
var sky = new createjs.Shape();
stage.addChild(sky);
sky.graphics.beginLinearGradientFill(["#0069A0", "#00AAE4"], [0, 1], 0, 0, 0, 180);
sky.graphics.drawRect(0, 0, 600, 180);
var ground = new createjs.Shape();
stage.addChild(ground);
ground.graphics.beginLinearGradientFill(["#99CC33", "#7EB133"], [0, 1], 0, 180, 0, 240);
ground.graphics.drawRect(0, 180, 600, 60);
var basic = new createjs.Text("HTML5 / CreateJS [1.0.0]", "14px Myriad Pro", "#FFFFFF");
stage.addChild(basic);
basic.textAlign = "left";
basic.textBaseline = "bottom";
basic.x = 10;
basic.y = 20;
basic.alpha = 0.6;
var title = new createjs.Text("MouseEvent", "24px Myriad Pro", "#FFFFFF");
stage.addChild(title);
title.textAlign = "center";
title.textBaseline = "bottom";
title.x = canvas.width/2;
title.y = 65;
title.alpha = 0.6;
var subtitle = new createjs.Text("stagemousemove", "20px Myriad Pro", "#FFFFFF");
stage.addChild(subtitle);
subtitle.textAlign = "center";
subtitle.textBaseline = "bottom";
subtitle.x = canvas.width/2;
subtitle.y = 110;
subtitle.alpha = 0.6;
var publish = new createjs.Text("authoring: Sublime Text 2 + Flash CC", "14px Myriad Pro", "#FFFFFF");
stage.addChild(publish);
publish.textAlign = "right";
publish.textBaseline = "bottom";
publish.x = canvas.width – 10;
publish.y = 20;
publish.alpha = 0.6;
}
</script>
</head>
<body onload="init();" style="background-color:#EEEEEE">
<canvas id="canvas" width="600" height="240" style="background-color:#FFFFFF"></canvas>
<div id="footer"></div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta name=”viewport” content=”width=600” />
<title>MouseEvent [stagemousemove] | CreateJS</title>
<script src="js/easeljs-1.0.0.min.js"></script>
<script src="js/tweenjs-1.0.0.min.js"></script>
<script src="js/Piyo.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
html, body {
margin:0;
padding:0;
font-family: sans-serif;
}
#canvas{
display:block;
width:600px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
padding-left:0;
padding-right:0;
}
</style>
<script>
var canvas, stage, stats;
var piyo;
var cx, cy;
function init() {
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "fixed";
stats.domElement.style.right = "0px";
stats.domElement.style.top = "0px";
document.body.appendChild(stats.domElement);
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
background();
initialize();
cx = canvas.width/2;
cy = 210;
piyo = new lib.Piyo();
stage.addChild(piyo);
piyo.x = cx;
piyo.y = cy;
piyo.mouseEnabled = false;
stage.addEventListener("mouseenter", enter);
createjs.Ticker.framerate = 30;
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
if (createjs.Touch.isSupported()) {
createjs.Touch.enable(stage);
}
stage.enableMouseOver(10);
stage.update();
}
function initialize() {
createjs.Ticker.addEventListener("tick", update);
}
function update(event) {
piyo.update();
stage.update();
stats.update();
}
function enter(event) {
stage.removeEventListener("mouseenter", enter);
stage.addEventListener("stagemousemove", move);
stage.addEventListener("mouseleave", leave);
}
function move(event) {
piyo.x = event.stageX;
piyo.y = event.stageY;
}
function leave(event) {
stage.removeEventListener("stagemousemove", move);
stage.removeEventListener("mouseleave", leave);
stage.addEventListener("mouseenter", enter);
createjs.Tween.get(piyo, {override: true})
.to({x: cx, y: cy}, 200, createjs.Ease.quadOut);
}
function background() {
var sky = new createjs.Shape();
stage.addChild(sky);
sky.graphics.beginLinearGradientFill(["#0069A0", "#00AAE4"], [0, 1], 0, 0, 0, 180);
sky.graphics.drawRect(0, 0, 600, 180);
var ground = new createjs.Shape();
stage.addChild(ground);
ground.graphics.beginLinearGradientFill(["#99CC33", "#7EB133"], [0, 1], 0, 180, 0, 240);
ground.graphics.drawRect(0, 180, 600, 60);
var basic = new createjs.Text("HTML5 / CreateJS [1.0.0]", "14px Myriad Pro", "#FFFFFF");
stage.addChild(basic);
basic.textAlign = "left";
basic.textBaseline = "bottom";
basic.x = 10;
basic.y = 20;
basic.alpha = 0.6;
var title = new createjs.Text("MouseEvent", "24px Myriad Pro", "#FFFFFF");
stage.addChild(title);
title.textAlign = "center";
title.textBaseline = "bottom";
title.x = canvas.width/2;
title.y = 65;
title.alpha = 0.6;
var subtitle = new createjs.Text("stagemousemove", "20px Myriad Pro", "#FFFFFF");
stage.addChild(subtitle);
subtitle.textAlign = "center";
subtitle.textBaseline = "bottom";
subtitle.x = canvas.width/2;
subtitle.y = 110;
subtitle.alpha = 0.6;
var publish = new createjs.Text("authoring: Sublime Text 2 + Flash CC", "14px Myriad Pro", "#FFFFFF");
stage.addChild(publish);
publish.textAlign = "right";
publish.textBaseline = "bottom";
publish.x = canvas.width – 10;
publish.y = 20;
publish.alpha = 0.6;
}
</script>
</head>
<body onload="init();" style="background-color:#EEEEEE">
<canvas id="canvas" width="600" height="240" style="background-color:#FFFFFF"></canvas>
<div id="footer"></div>
</body>
</html>
[修正] (19/12/23 Sun 22:48)
CreateJS 1.0.0 にバージョンアップ。