Colisiones con CreateJS

Vamos a describir el procedimiento para detectar cuando el mouse colisiona con un objeto del stage.

El fla creado, 1_colisionObjetoRaton.fla, tiene una sola capa ‘capa cercle1’ en la que hemos situado un circulo rojo cuyo nombre de simbolo es ‘cercle’, y está instanciado como ‘cercle1’. Nuestro objetivo es aplicarle alguna acción cuando el ratón pase por encima.

Una vez exportado con Toolkit, el archivo html creado es el siguiente:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>CreateJS export from 1_colisionObjeto_Raton</title>

<script src=”http://code.createjs.com/easeljs-0.6.0.min.js”></script&gt;
<script src=”1_colisionObjeto_Raton.js”></script>

<script>
var canvas, stage, exportRoot;

function init() {
canvas = document.getElementById(“canvas”);
exportRoot = new lib._1_colisionObjeto_Raton();

stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();

createjs.Ticker.setFPS(24);
//createjs.Ticker.addEventListener(“tick”, stage);
}
</script>
</head>

<body onload=”init();” style=”background-color:#D4D4D4″>
<canvas id=”canvas” width=”550″ height=”400″ style=”background-color:#ffccff”></canvas>
</body>
</html>