CreateJSの簡単なメモ


今って、描画ライブラリって何がいいんでしょ。
CreateJSをいじらなければいけない機会があったので最低限のノウハウをメモしておきます。

[こちら](https://ics.media/tutorial-createjs/index.html)が大変参考になりました。

>CreateJSって、最新版が2015/11/26なんですね。もう下火なんでしょうかね？？？

## 基本編

では簡単に使い方を見ていきます。

### テンプレートとShapeの描画

いちおう、下記を基本のテンプレートとして利用してみます。
jQueryは特に使いませんが、共存に問題が無い確認するためにロードしています。

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- canvas -->
<canvas id="myCanvas" width="640" height="480"></canvas>
<!-- js -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
$(function(){

	//stage
	var stage = new createjs.Stage("myCanvas");

	//shape
	var shape = new createjs.Shape();
	shape.graphics.beginFill("Red");
	shape.graphics.drawCircle(0,0,100);
	shape.x = 100;
	shape.y = 100;

	//stageに追加
	stage.addChild(shape);
	
	//stageに追加
	stage.addChild(shape);
	
	//text
	
	//image

	//sstage.update
	stage.update();

});
</script>
</body>
</html>
```

ここではcreatejs.Shape()を利用しましたが、createjs.Graphics()の方がよりプリミティグのようです。

### 常にStageを更新する

```html
	//sstage.update
	// stage.update();

	createjs.Ticker.timingMode = createjs.Ticker.RAF;
	createjs.Ticker.addEventListener("tick",function(){
		stage.update();
	});
```

### Textの描画

```html
	//text
	var txt = new createjs.Text("Hello World","24px serif","Black");
	stage.addChild(txt);
```

### 画像の描画

```html
	//image
	var bmp = new createjs.Bitmap("assets/blue.jpg");
	stage.addChild(bmp);
```

>なお、単にstage.update()するだけではタイミングにより画像が描画されないことがあります（読み込み終了前に、全体が描画されてしまうため等）。そのために"tick"を設定して、常に描画が更新されるようにしています。

### イベントの設定

>なお、イベント機能を利用するにはhttp://経由でアクセスする必要があるようです。

```html
	//image
	var bmp = new createjs.Bitmap("assets/blue.jpg");
	bmp.addEventListener("click",function(){
		alert("クリックされた！");
	});
	stage.addChild(bmp);
```

>なお、bmp.addEventListener()は、単にbmp.on()と書けるようです。

### マウスの座標を取得する

```html
	createjs.Ticker.timingMode = createjs.Ticker.RAF;
	createjs.Ticker.on("tick",function(){

		bmp.x = stage.mouseX;
		bmp.y = stage.mouseY;

		stage.update();
	});
```

## 応用編

### ドラッグ＆ドロップ

ドラッグ＆ドロップを試してみたいと思います。

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- canvas -->
<canvas id="myCanvas" width="640" height="480"></canvas>
<!-- js -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
$(function(){

	var stage = new createjs.Stage("myCanvas");

	//ドラッグ開始座標
	var dragPointX;
	var dragPointY;

	//ボールを描画
	var ball = new createjs.Shape();
	ball.graphics.beginFill("Red").drawCircle(0,0,50);
	ball.x = stage.canvas.width/2;
	ball.y = stage.canvas.height/2;
	stage.addChild(ball);

	//イベント設定
	ball.on("mousedown", handleDown);
	ball.on("pressmove", handleMove);
	ball.on("pressup", handleUp);

	//down
	function handleDown(event){

		//drag start x,y
		dragPointX = stage.mouseX - ball.x;
		dragPointY = stage.mouseY - ball.y;

		ball.alpha = 0.5;
	}

	//move
	function handleMove(event){
		ball.x = stage.mouseX - dragPointX;
		ball.y = stage.mouseY - dragPointY;
	}

	//up
	function handleUp(event){
		ball.alpha = 1.0;
	}

	//update
	createjs.Ticker.on("tick",function(){
		stage.update();
	});

});
</script>
</body>
</html>
```
>イベントが設定されたオブジェクトが重なっている場合、上位が優先される。上位にイベントが設定されていなければ、設定されたものが優先されるらしい。

### Z-Indexを変更

```js
	stage.setChildIndex(ball,1);
	console.log(stage.getChildIndex(ball));
```

>実在するIndexじゃないと設定できないようです。無条件に+1000とかしてもダメ。