[HTML5]CreateJSのEaselJSを試してみた Part1

CreateJSのEaselJSを試してみた Part1

WebStormが良いと聞いたので、試してみたらコード補完がばっちりでテンション上がってきたので、以前AS3で作ったバネのやつをEaselJSを使ってHTML5版に移植してみました。

demoはこちら

EaselJSはAS3ライクにcanvasが使えるのが魅力ですが、改めてAS3のようにできることにびっくりしました。
ただ、当たり前ですが、違いはあるのでドキュメントを見ながら試したほうがいいです。
僕は、Shapeにwidth、heightプロパティがないことに気づかずハマりました・・・

また、開いた時間を使って色々試してみたいと思います。

一応、コード載せておきます。

var _canvas;
var _stage;
var _line;
var _ball0;
var _ball1;
var _ballArr;
var _radius = 50;
var _spring = 0.05;
var _friction = 0.95;
var _springLength = 200;
var _bounce = -0.6;

/* ------------------------------------------------------------------------
 * method
 * --------------------------------------------------------------------- */
function init() {
	_canvas = document.getElementById("world");
	_canvas.width = window.innerWidth;
	_canvas.height = window.innerHeight;
	_stage = new Stage(_canvas);

	document.body.onresize = onResize;
	
	Touch.enable(_stage);

	//container
	_line  = new Shape();
	_stage.addChild(_line);

	//ball0
	_ball0 = createBall(_radius);
	_ball0.vx = _ball0.vy = 0;
	_ball0.x = Math.random() * _stage.canvas.width;
	_ball0.y = Math.random() * _stage.canvas.height;
	_ball0.isDragging = false;
	_ball0.onPress = mousePressHandler;

	//ball1
	_ball1 = createBall(_radius);
	_ball1.vx = _ball1.vy = 0;
	_ball1.x = Math.random() * _stage.canvas.width;
	_ball1.y = Math.random() * _stage.canvas.height;
	_ball1.isDragging = false;
	_ball1.onPress = mousePressHandler;

	_ballArr = [_ball0, _ball1];

	//enterframeEvent
	Ticker.setFPS(60);
	Ticker.addListener(window);
}

function springTo(ballA, ballB) {
	var dx = ballA.x - ballB.x;
	var dy = ballA.y - ballB.y;
	var angle = Math.atan2(dy, dx);
	var targetX = ballB.x + Math.cos(angle) * _springLength;
	var targetY = ballB.y + Math.sin(angle) * _springLength;
	ballA.vx += (targetX - ballA.x) * _spring;
	ballA.vy += (targetY - ballA.y) * _spring;
	ballA.vx *= _friction;
	ballA.vy *= _friction;
	ballA.x += ballA.vx;
	ballA.y += ballA.vy;
}

function createBall(radius) {
	var ball = new Shape();
	var g = ball.graphics;
	g.beginFill("#000000");
	g.drawCircle(0, 0, radius);
	_stage.addChild(ball);

	return ball;
}


/* ------------------------------------------------------------------------
 * event handler
 * --------------------------------------------------------------------- */
function mousePressHandler(e) {
	var instance = e.target;
	instance.offset = new Point(instance.x - e.stageX, instance.y - e.stageY);
	e.instance = instance;
	e.onMouseMove = mouseMoveHandler;
	e.onMouseUp = mouseUpHandler;

	if (instance == _ball0) {
		_ball0.isDragging = true;
	}

	if (instance == _ball1) {
		_ball1.isDragging = true;
	}
}

function mouseMoveHandler(e) {
	var target = this.instance;
	var offset = target.offset;

	target.x = e.stageX + offset.x;
	target.y = e.stageY + offset.y;
}

function mouseUpHandler(e) {
	this.onMouseMove = this.onMouseUp = null;
	_ball0.isDragging = false;
	_ball1.isDragging = false;
}

function tick(){
	if (!_ball0.isDragging) {
		springTo(_ball0, _ball1);
	}

	if (!_ball1.isDragging) {
		springTo(_ball1, _ball0);
	}

	//ball0とball1を繋ぐ線
	var g = _line.graphics;
	g.clear();
	g.beginStroke("#000000");
	g.moveTo(_ball0.x, _ball0.y);
	g.lineTo(_ball1.x, _ball1.y);

	//領域
	for (var i = 0; i < _ballArr.length; i++) {
		var ball = _ballArr[i];
		if (ball.isDragging) continue;

		if (ball.x + _radius > _stage.canvas.width) {
			ball.x = _stage.canvas.width - _radius;
			ball.vx *= _bounce;
		} else if (ball.x - _radius < 0) {
			ball.x = _radius;
			ball.vx *= _bounce;
		}

		if (ball.y + _radius > _stage.canvas.height) {
			ball.y = _stage.canvas.height - _radius;
			ball.vy *= _bounce;
		} else if (ball.y - _radius < 0) {
			ball.y = _radius;
			ball.vy *= _bounce;
		}
	}

	//更新
	_stage.update();
}

function onResize() {
	_canvas.width = window.innerWidth;
	_canvas.height = window.innerHeight;
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post Navigation