html5 - Líneas con easelJS usando Ticker

drawing html5-canvas (1)

Empecé a aprender html5 y easelJS hace dos días, y estoy trabajando en un juego. Ahora me encontré con algunos problemas, por supuesto :)

Sé que puedo trazar una línea con el código:

var context = canvas.getContext(''2d''); context.beginPath(); context.moveTo(100, 150); context.lineTo(450, 50); context.stroke();

Pero hasta donde yo sé, ¡no debes mezclar el contexto con el Ticker / Stage de easelJS! Uso Ticker para actualizar el escenario en ciertos FPS (la actualización borrará la línea en este caso, ¿verdad?).

Ahora lo que quiero es trazar una línea en el método tick en ciertas ocasiones (presionar la tecla) - PERO necesito dibujar una línea lentamente, para que el usuario pueda ver que se mueve hacia el final. Cuando se presiona una tecla, se llaman algunas funciones, y podría establecer alguna variable global según la cual realizaría el dibujo de líneas en la función tic ...

Pensé que podría usar moveTo / lineTo en un bucle y aumentar las coordenadas en consecuencia.

¿Cuál es la mejor manera de abordar esto? ¿Me estoy perdiendo algo o quizás estoy pensando en algo totalmente incorrecto?

Comprobé Dibujando una línea en un lienzo html5 utilizando EaselJS, pero él tiene coordenadas estáticas y no necesita ver la línea moviéndose también.

Estoy esperando sugerencias / correcciones, gracias!

Dibujando una línea en easeljs

Mira este rudimentario juego de serpientes que hice en jsfiddle. Nota: deberá hacer clic en la ventana inferior derecha para obtener el foco y usar las teclas de flecha para controlar la serpiente. Con easeljs, deberá suscribirse al modelo de uso de DisplayObjects para construir su entorno de juego. DisplayObject es el componente básico para todo el contenido de UI. En este caso, estoy usando un objeto Shape que es una clase secundaria de DisplayObject, y se usa para dibujar contenido vectorial. También querrás familiarizarte con la clase Graphics en easeljs. Cada forma tiene una propiedad de gráficos en la que realizará todas sus llamadas de API de dibujo.

var line = new createjs.Shape(); line.graphics.setStrokeStyle(3); line.graphics.beginStroke(color); line.graphics.moveTo(startX, startY); startY++; line.graphics.lineTo(startX, startY); line.graphics.endStroke();

Actualizando el escenario en tiempo real

Para lograr el movimiento de línea, necesitará escuchar el evento "tic" del objeto Ticker . En el ejemplo de jsfiddle, agregué tanto la etapa como un oyente, como una función de ámbito de ventana donde se realizará el dibujo lineal.

createjs.Ticker.addEventListener("tick", stage); createjs.Ticker.addEventListener("tick", tick);

También notarás que he agregado un oyente onkeydown a la ventana para configurar nuestros modificadores de teclas que controlan la dirección de la serpiente.

window.onkeydown = function(e){ color = createjs.Graphics.getRGB(0xFFFFFF * Math.random(), 1); switch(e.which){ case 38: wPressed = false; ePressed = false; sPressed = false; nPressed = true; break; case 39: nPressed = false; sPressed = false; wPressed = false; ePressed = true; break; case 40: wPressed = false; ePressed = false; nPressed = false; sPressed = true; break; case 37: nPressed = false; sPressed = false; ePressed = false; wPressed = true; break; } }

Finalmente, en la función de marcar, realizará sus llamadas de dibujo y actualizará la posición x / y en función de la dirección actual. Recuerde que la función de marcar se llama cada cuadro, en función de sus cuadros actuales por segundo, que se establece con esta función estática .