次に,
<script type="text/javascript">
var canvas;
var stage;
var circle;
function init() {
canvas = document.getElementById('myCanvas');
stage = new Stage(canvas);
// Shapeを作成してStageに追加
circle = new Shape();
circle.graphics.beginFill("#0000FF");
circle.graphics.drawCircle(0,0,30);
circle.graphics.endFill();
stage.addChild(circle);
circle.x = 50;
circle.y = 50;
//キャンバスを更新
stage.update();
// tickイベント処理の追加
Ticker.addListener(window);
Ticker.setFPS(30);
}
function tick(){
circle.x += 5;
circle.y += 2;
if(circle.x < -30) circle.x = 330;
else if(circle.x > 330) circle.x = -5;
if(circle.y < -30) circle.y = 330;
else if(circle.y > 330) circle.y = -2;
stage.update();
}
</script>
続いてマウスイベントの処理を追加してみます。DisplayObjecに対するマウスイベントのリスナ関数としてはonClick,
<script type="text/javascript">
var canvas;
var stage;
var circle;
function init() {
canvas = document.getElementById('myCanvas');
stage = new Stage(canvas);
// Shapeを作成してStageに追加
circle = new Shape();
circle.graphics.beginFill("#0000FF");
circle.graphics.drawCircle(0,0,30);
circle.graphics.endFill();
stage.addChild(circle);
circle.x = 50;
circle.y = 50;
// マウスクリックリスナーの登録
circle.onClick = function(evt) {
// tickイベント処理の追加
Ticker.addListener(window);
Ticker.setFPS(30);
}
//キャンバスを更新
stage.update();
}
function tick(){
circle.x += 5;
circle.y += 2;
if(circle.x < -30) circle.x = 330;
else if(circle.x > 330) circle.x = -5;
if(circle.y < -30) circle.y = 330;
else if(circle.y > 330) circle.y = -2;
stage.update();
}
</script>
Flash Professional CS6がCreateJSをサポート
CreateJSが注目を集めている要因のひとつは,
CreateJSは単体でも優れたライブラリですが,