Tableless

Busca Menu

EaselJS – Parte 1

Seja o primeiro a comentar por

Nesse tutorial vamos criar uma interatividade básica com JavaScript sobre a tag canvas do HTML5 usando o framework EaselJS. Para quem não conhece esse framework, ele é inspirando no ActionScript3 a linguagem de programação mais atual do plugin FlashPlayer.

O EaselJS faz parte de um conjunto de frameworks escrito em JavaScript do pacote CreateJS, faz parte também dessa família os frameworks TweenJS, PreloadJS e SoundJS. Os principais patrocinadores dessas ferramentas são: Adobe, Microsoft, AOL e GSkinner. Ano passado (2012) a GSkinner reescreveu uma série de games criado pela ATARI no passado, usando CreateJS, você pode conferir aqui.

Então chega de blablabla e vamos ao que interessa.

Primeiro, aconselho que vocês naveguem no site da CreateJS, vejam os trabalhos já publicados, teste os vários exemplos que tem disponíveis, aproveite também e espie a documentação, pois ela vai atender suas necessidades. Logo em seguida, baixe todo o pacote da CreateJS ou se preferir, apenas o EaselJS.

Após baixar o(s) pacote(s), crie um simples arquivo html, como abaixo, e salve com um nome de sua preferência.

TEST with JavaScript

CLICK TO DRAW

Nessa estrutura básica de html, temos um elemento canvas onde acontecerão nossas interações, arquivos javascripts onde na linha 11 e a referência para o framework EaselJs baixado, a linha 12 está configurada para o arquivo “Main.js” que criaremos logo em seguida.

Observe que a tag body tem a propriedade “onload” que recebe como parâmetro uma função JavaScript.

Crie um arquivo Javascript como abaixo, salve-o com o nome “Main.js”. Se salvar com um nome diferente, não se esqueça de alterar esse nome no html.

var canvas;
var stage;
var containerBalls;
var containerLines;
var shapeLines;
var graphicsLines;

function Main()
{
// canvas
canvas = document.getElementById('canvas');
stage = new createjs.Stage( canvas );
// enabled interaction
stage.mouseEventsEnabled = true;

// container
containerBall = new createjs.Container();
containerLines = new createjs.Container();

//lines
shapeLines = new createjs.Shape();
graphicsLines = new createjs.Graphics();

//background black
var g = new createjs.Graphics();
g.beginFill( "#000000");
g.drawRect(0,0, canvas.width, canvas.height);
var s = new createjs.Shape(g);
s.x = 0;
s.y = 0;

stage.addChild(s);

//add elements
containerLines.addChild(shapeLines);
stage.addChild(containerLines);
stage.addChild(containerBall);

stage.addEventListener( 'click', onClickStage );
}

function onClickStage( e )
{
var ball = createBall(8);
ball.x = stage.mouseX;
ball.y = stage.mouseY;
containerBall.addChild(ball);

stage.update();
debug( "stage-click => x "+ ball.x + " y => " + ball.y );
}

function createBall( raio )
{
var g = new createjs.Graphics();
g.beginFill('red');
g.drawCircle(0, 0, raio);
var s = new createjs.Shape(g);

return s;
}

function debug( s )
{
console.log( s );
}

Segue abaixo fluxo do algoritmo.

Figura 1.

Figura 1.

 

Observe: sempre que adicionarmos uma bola ao palco é necessário fazer uma atualização do mesmo. Caso você se esqueça de fazer essa atualização, não conseguirá visualizar as alterações ocorridas.

Até o momento, nosso experimento está adicionando uma bola vermelha ao clicar no palco. Que deve estar parecido com esse abaixo.

Figura 2.

Figura 2.

Até o momento estamos conseguindo visualizar apenas as bolas, mas calma, vamos implementar agora o desenho das linhas. Basta alterar a função “onClickStage”, como abaixo, e todas as bolas estarão conectadas umas com as outras.

function onClickStage( e )
{
var ball = createBall(8);
ball.x = stage.mouseX;
ball.y = stage.mouseY;
containerBall.addChild(ball);

debug( "stage-click => x "+ ball.x + " y => " + ball.y );

var len = containerBall.getNumChildren()-1;
for (var i = 0; i < len; i++)
{
//debug("filhos: ", i);
var l = containerBall.getNumChildren();
for (var j = i+1; j < l ; j++)
{
//captura bola i
var dObj1 = containerBall.getChildAt(i);
//captura bola j
var dObj2 = containerBall.getChildAt(j);
//inicia define cor da linha em hexa
graphicsLines.beginStroke("#ffffff");
//início da linha, como se movesse a caneta para cima da bola i
graphicsLines.moveTo(dObj1.x, dObj1.y);
//como se riscasse um traço da bola i em direção a bola j
graphicsLines.lineTo(dObj2.x, dObj2.y);
//finaliza linha
graphicsLines.endStroke();

//debug("container I: ", dObj1, " container J: ", dObj2);
}

}

//apenas atualiza a propriedade graphics.
//containerLines.removeChild(shapeLines);
//shapeLines = new createjs.Shape(graphicsLines);
shapeLines.graphics = graphicsLines;
// containerLines.addChild(shapeLines);

stage.update();
}

O segredo está nessa estrutura de repetição. Então vou detalhar todo o processo.

Cada bola deve estar conectada uma com a outra e cada bola estará adicionada no container “containerBall“. Com o método “getNumChildren() eu consigo saber quantos filhos tem dentro do container. Agora faremos uma simulação de três bolas para ficar mais fácil o entendimento.

Vamos supor que tenho 3 bolas dentro do container, essas bolas devem estar conectadas entre si. A bola 1 deve estar conectada com a bola 2 e 3. A bola 2 tem que se conectar apenas com a bola 3, já que temos uma conexão da bola 1 com a bola 2. Então, não é nessário repetir a conexão da bola 2 com a 1, concorda? Já a bola 3 não precisa ter nenhuma conexão, pois as bolas 1 e 2 já fazem conexão com ela.

Veja o um exemplo com 4 bolas.

O código está bem comentado e simples, mas caso você tenha alguma dúvida, não deixe de perguntar.

Figura 3.

Figura 3

Você pode baixar o código fonte aqui e visualizar o resultado final aqui.

Publicado no dia