Share
Con la llegada de herramientas como Adobe Edge y bibliotecas como EaselJS, cada vez hay más recursos disponibles para los desarrolladores que buscan crear contenido HTML5 interactivo. Muchas de estas herramientas están diseñadas específicamente para los desarrolladores de Flash para que la transición de ActionScript al lienzo HTML5 sea fácil. Este artículo presentará una descripción general de oCanvas, una biblioteca HTML5 que los desarrolladores no solo encontrarán de gran valor sino que también son muy fáciles de usar..
Antes de profundizar en la exploración de oCanvas, establezcamos rápidamente la escena de cómo funciona el lienzo HTML5. Si desea una explicación más detallada sobre cómo utilizar el lienzo HTML5, consulte este tutorial..
Si conoces ActionScript, ya sabes mucho JavaScript, que es donde reside el poder real cuando se trabaja con Canvas. Usamos la API de dibujo HTML5 para crear nuestro contenido junto con algunos buenos JavaScript para hacer que las cosas sean interactivas y dinámicas. Pero cuando combinamos los dos, el enfoque detrás de cómo hacemos para armar nuestro código es un poco diferente al que estamos acostumbrados con ActionScript..
En resumen, para utilizar la API de Canvas nativa, dibujamos píxeles en el contexto de dibujo del canvas. Pero la clave para recordar es que estamos trabajando con todo el lienzo, no solo con una sola forma o imagen que hemos dibujado. Cada vez que queremos alterar algo que hemos dibujado, tenemos que volver a dibujar todo el lienzo. Si queremos animar algo, tenemos que volver a dibujar el lienzo una y otra vez en nuestro JavaScript para que parezca que las cosas se están moviendo..
Esta noción es muy similar a la animación tradicional, donde los animadores tenían que dibujar cada pose en su secuencia y hacer que la cámara se moviera a través de ellas muy rápidamente para simular el movimiento. Pero si está acostumbrado a estructuras tipo árbol, como el DOM, o la lista de visualización en Actionscript, esta idea puede ser difícil de entender. Este enfoque de enjuague y repetición de la programación es muy diferente al trabajo con objetos para la mayoría de los desarrolladores..
Afortunadamente para aquellos de nosotros que estamos tan acostumbrados a trabajar con objetos, oCanvas trae ese enfoque familiar al lienzo HTML5. oCanvas es una biblioteca de JavaScript desarrollada por Johannes Koggdal con la intención de facilitar el desarrollo con lienzo HTML5. Te permite trabajar directamente con objetos, modificar sus propiedades y conectar eventos para todos ellos mientras manejas las cosas detrás de las escenas para ti. Como puso mejor Johannes en su blog:
Mi objetivo siempre ha sido facilitar que las personas construyan lienzos basados en objetos. Me decidí por el nombre oCanvas como una contracción del "lienzo de objetos".
Para comenzar a usar oCanvas necesitamos incluir una copia de la biblioteca en nuestra página HTML. Podemos hacer referencia al archivo alojado en CDN o alojar una copia local nosotros mismos. Vaya al sitio web de oCanvas y puede descargar una copia de la biblioteca o obtener la referencia a la versión alojada en CDN. La versión actual es 2.0 y se lanzó hace solo unas semanas, que abordó muchos de los errores que se encontraban en la versión inicial. En el sitio hay una versión de producción reducida, que es buena para usar cuando esté listo para implementar su proyecto. También hay una versión de desarrollo, que no está comprimida pero es mejor para la depuración. Me gusta enlazar directamente con la versión alojada para que el navegador cargue y almacene en caché más rápidamente..
Después de hacer una referencia a oCanvas, a continuación, debemos configurar un elemento de lienzo en el cuerpo de nuestro HTML y crear una referencia a él para usarlo en nuestro Javascript..
Como siempre, si coloca su script sobre el elemento de lienzo, debe envolverlo en una función para que sepa que el DOM está listo. Hay un par de maneras de ir aquí. Puedes crear tu propia función y luego invocarla en el elemento de tu cuerpo cuando se carga, de esta manera:
función Main () // su código oCanvas
O puede envolver su código dentro de la función incorporada de oCanvas domReady () método. Este es el equivalente a jQuery $ (documento) .ready (). En oCanvas usamos esto:
oCanvas.domReady (function () // Your Code Here);
Nota: Podrías usar jQuery $ (documento) .ready () método si quisieras.
Este código es absolutamente necesario y es lo primero que debe escribir al usar oCanvas.
var canvas = oCanvas.create (canvas: "#canvas", background: "# 0cc", fps: 60);
En este código almacenamos una referencia al elemento del lienzo dentro de nuestro documento y obtenemos acceso a la instancia central, lo que le permitirá comenzar a crear objetos. los crear() el método toma un objeto como su argumento que controla cómo funcionará oCanvas. Hay numerosas propiedades para pasar a la crear() método, pero el único obligatorio es la propiedad del lienzo: un selector de CSS que debe apuntar a un elemento del lienzo dentro del DOM.
Las otras propiedades pasadas en el código anterior son las propiedades de fondo y fps. La propiedad de fondo le permite aplicar un fondo al lienzo, que puede ser valores de color CSS, degradados e imágenes. Si se omite, el lienzo será transparente. La propiedad fps establece el número de cuadros por segundo en que se ejecutará cualquier animación. El valor predeterminado es 30 fps..
Nota: Mientras revisamos muchas de las funciones de oCanvas, recomiendo consultar la documentación de la biblioteca para comprender mejor cada sección..
Existen numerosos tipos de objetos de visualización que puede crear con oCanvas. Puede crear formas como rectángulos, elipses, polígonos y líneas junto con imágenes, texto e incluso hojas de sprites. Para crear un nuevo objeto de visualización, usamos el módulo de visualización de oCanvas, y especificamos qué tipo de objeto de visualización queremos crear, así como algunas propiedades básicas, como por ejemplo:
var box = canvas.display.rectangle (x: 50, y: 150, ancho: 50, altura: 50, relleno: "# 000");
Luego, para agregarlo a la pantalla, llamamos un método familiar para los desarrolladores de Flash ...
Sí, un antiguo pero bueno, lo que hace que agregar objetos a oCanvas sea un proceso familiar. Entonces, para agregar nuestra caja al lienzo, escribiríamos:
canvas.addChild (caja);
Al igual que en ActionScript, addChild () agrega el objeto especificado como hijo de la persona que llama. Y a su vez, las x y y del niño serán relativas a sus padres. Entonces, en este caso, estamos haciendo una caja un hijo del lienzo, que podríamos simplificar así:
box.add ();
los añadir() El método también agrega el objeto al lienzo, que en realidad es lo mismo que canvas.addChild (cuadro). Pero addChild () es más útil para agregar un objeto como un elemento secundario a un objeto de visualización ya creado, como:
var square = canvas.display.rectangle (x: 0, y: 0, ancho: 10, altura: 10, relleno: "# 990000"); box.addChild (cuadrado);
Veamos algunos de los diferentes tipos de objetos de visualización que puede crear en oCanvas.
Ya viste un cuadrado, pero podemos usar el rectángulo Mostrar objeto para crear muchas cosas. Aquí hay un rectángulo con un trazo azul:
var rectangle = canvas.display.rectangle (x: 500, y: 100, ancho: 100, altura: 200, relleno: "# 000", trazo: "fuera de 2px azul");
los llenar La propiedad puede tomar cualquier color CSS válido, junto con gradientes CSS e incluso patrones de imagen..
Para crear una elipse escribiríamos:
var ellipse = canvas.display.ellipse (x: 100, y: 100, radius_x: 20, radius_y: 30, fill: "rgba (255, 0, 0, 0.5)");
Si desea un círculo completo, simplemente reemplace el radius_x y radio_y propiedades con una sola radio propiedad.
Crear cualquier tipo de polígono regular es igual de fácil: todo lo que tiene que hacer es especificar el número de lados y el radio que desea que tenga su forma. Para crear un triángulo:
var triangle = canvas.display.polygon (x: 320, y: 145, lados: 3, radio: 50, relleno: "# 406618");
Que tal un pentagon?
var pentagon = canvas.display.polygon (x: 200, y: 50, lados: 5, rotación: 270, radio: 40, relleno: "# 790000");
Para lograr eso con la API de lienzo HTML5, tendrías que dibujar un montón de caminos e intentar averiguar en qué posiciones x e y se unirán a ellos. Intenté dibujar un octágono para comparar, pero como puedes ver más abajo, me rendí con bastante facilidad. No estoy seguro de lo que se supone que es esto.
Accentsconagua
var canvas = $ ("# canvas"); var ctx = canvas.get (0) .getContext ("2d"); ctx.fillStyle = '# 000'; ctx.beginPath (); ctx.moveTo (0, 0); ctx.lineTo (100,50); ctx.lineTo (50, 100); ctx.lineTo (0, 90); ctx.closePath (); ctx.fill (); Crear objetos de visualización con imágenes no es más sencillo que en oCanvas. Solo especifique una posición x e y la ruta al archivo de imagen:
var tree = canvas.display.image (x: 100, y: 350, imagen: "tree.png");
Una buena característica del objeto de visualización de imagen es la azulejo propiedad, que le permite crear fácilmente una cuadrícula de la misma imagen en lugar de dibujarla una y otra vez.
oCanvas contiene un objeto de visualización de texto y maneja el estilo de fuente al igual que lo hace CSS.
var text = canvas.display.text (x: 70, y: 300, align: "center", fuente: "bold 18px sans-serif", texto: "oCanvas Rocks", fill: "purple");
Puedes usar muchas de las otras propiedades de texto con las que estás familiarizado desde CSS. Echa un vistazo a la documentación en el texto para más.
Todos los objetos de visualización heredan un grupo común de propiedades y métodos. Algunas de las propiedades de objetos de visualización más comunes son: x, y, ancho, altura, rotación, escaladoX, escaladoY, opacidad, sombra (usa la sintaxis CSS-box-shadow) y índice de z. Puede consultar este enlace para obtener una lista completa de las propiedades y los métodos básicos. Echemos un vistazo a algunos otros notables.
Este método ahorra mucho tiempo porque le permite establecer fácilmente el origen dentro del objeto. En otras palabras, le permite establecer el punto de registro del objeto. Si alguna vez intentaste realizar una rotación desde el centro con la API de Canvas de HTML5, sabes qué tan grande puede ser el dolor de cabeza. Debe realizar una serie de acciones para guardar el estado del dibujo, traducir el lienzo, realizar su rotación y luego restaurar el estado del dibujo. Con el origen propiedad puede definir fácilmente el origen de un objeto:
var obj = canvas.display.image (x: 270, y: 270, origen: x: "centro", y: "centro");
Esto dibujaría la imagen desde su centro; Si tuviéramos que rotar el objeto, también giraría desde su centro. Además de "centro", también puede pasar en "izquierda" o "derecha" para x y "arriba" o "abajo" para las posiciones y. Además de usar las palabras clave predefinidas, también puede proporcionar números positivos o negativos como valores de dónde dibujar el objeto. El origen predeterminado para todos los objetos de visualización se define en su parte superior izquierda.
También puedes usar el setOrigin () Método en cualquier momento para definir el origen de un objeto:
obj.setOrigin ("left", "bottom") La identificación de un objeto de visualización, que en realidad es una propiedad de solo lectura, corresponde al lugar en el que se encuentra el objeto en la lista de dibujos, que puede considerarse como la lista de visualización. Encuentro que es muy útil porque puede servir como un identificador único en ciertas situaciones cuando podría estar buscando un objeto específico en su código. Considere un fragmento básico como este:
Función getId (box.id) getId (id) if (id == 9) console.log ("CORRECT!" + id) else console.log ("WRONG!" + id) La propiedad de composición es el equivalente de globalCompositeOperation dentro de la API de Canvas nativa. Si no está familiarizado con él, básicamente determina cómo se representan los píxeles cuando se dibujan en píxeles ya existentes en el lienzo. Le animo a leer sobre las diferentes operaciones de composición que puede establecer, pero con oCanvas puede simplemente configurar la operación que desee pasándola como una cadena:
var shape = canvas.display.rectangle (x: 270, y: 270, ancho: 180, altura: 80, relleno: "# ff6900", composición: "destination-atop");
Hay muchas operaciones diferentes que puede pasar, pero creo que una de las mejores cosas que puede hacer con la propiedad de composición es crear máscaras entre diferentes objetos de visualización. Echa un vistazo al archivo llamado masks.html en el paquete de descarga. Si alguna vez confió en la creación de máscaras de capa en sus aplicaciones Flash, disfrutará de esta..
Como mencionamos anteriormente la rotación de objetos, puede rotar rápidamente un objeto con la girar() y rotateTo () métodos:
obj.rotate (45);
También puede simplemente establecer la propiedad de rotación:
obj.rotation = 45;
También está el movimiento() y mover a() métodos que, como sugieren sus nombres, le permiten mover un objeto una cantidad específica de píxeles para el primero y para una posición x e y especificada para el segundo.
obj.moveTo (100, 100)
La misma idea funciona para el escala() y scaleTo () métodos ():
obj.scale (1.25, 0.25) obj.scaleTo (1.5, 1.5)
Mencionamos addChild () antes de; no nos olvidemos de removeChild () y removeChildAt (). Y como el añadir() Método, podemos hacer lo contrario con retirar().
Otro método realmente útil es clon(), lo que le permite duplicar un objeto de visualización y todas sus propiedades.
var box = canvas.display.rectangle (x: 50, y: 150, ancho: 50, altura: 50, relleno: "# 000"); var box2 = box.clone (x: 200)
Una gran ventaja de oCanvas es que puede agregar eventos a objetos específicos. OCanvas contiene muchos métodos y propiedades para manejar fácilmente el mouse, el teclado e incluso eventos táctiles, todo con un método simple.
Si está familiarizado con jQuery, probablemente ya sepa a dónde voy con esto..
canvas.bind ("click tap", function () canvas.background.set ("# efefef");); Todo lo que hace es cambiar el color de fondo del lienzo, pero observe cómo pasamos en "click tap", lo que nos permite agregar soporte para dispositivos táctiles y de mouse..
Además de los eventos de clic, también puede escuchar otros eventos del mouse:mousedown, mouseup, mousemove, mouseenter, mouseleave y hacer doble clic.
Un simple efecto de rollover podría verse así:
box.bind ("mouseenter", function () canvas.background.set ("# 333");). bind ("mouseleave", function () canvas.background.set ("# 000"); ); Este es un ejemplo de funciones de encadenamiento, que (por no parecer un disco roto) es otra característica de jQuery que se aprovecha en oCanvas..
Pero en lugar de alterar el lienzo cuando ocurre un evento del mouse, ¿qué hay de alterar un objeto de visualización real? Esto sigue siendo HTML5 Canvas después de todo, así que debemos recordar llamar a un método importante para decirle al Canvas que se actualice..
los redibujar () El método (que en realidad forma parte del Módulo de dibujo, no el Módulo de eventos) vuelve a dibujar el lienzo con todos los objetos de visualización que se han agregado. Por lo tanto, si desea realizar una acción en un objeto en particular y mantener el resto de la lista de sorteos intacto, debemos agregar esta línea de código simple a nuestras funciones:
square.bind ("click tap", function () square.x + = 50; canvas.redraw ();); ¿De qué sirve un detector de eventos si no podemos eliminarlo??
rectangle.bind ("click tap", function onClick () this.fill = "# FF9933"; canvas.redraw (); rectangle.unbind ("click tap", onClick)); No necesitamos el enlazar() método para este Simplemente escribimos:
circle.dragAndDrop ();
Ese es probablemente el código de arrastrar y soltar más rápido y fácil que jamás escribirá.
Nota sobre eventos: Cuando trabajas con eventos, es natural querer obtener la mayor cantidad de información posible sobre el evento. Por suerte, todavía podemos hacerlo cuando trabajamos con oCanvas. Por ejemplo, si tomamos el controlador de clic unas cuantas líneas y registramos el evento en la consola, podemos ver todas las propiedades que tenemos del evento..
rectangle.bind ("click tap", function onClick (e) this.fill = "# FF9933"; canvas.redraw (); rectangle.unbind ("click tap", onClick); console.log (e); ); 
Además de los eventos del mouse, oCanvas tiene módulos completos dedicados al teclado y los eventos táctiles con sus propios métodos y propiedades únicos. Estos eventos también se manejan con el enlazar() método. El sistema de eventos en oCanvas es un tema muy amplio, por lo que recomiendo echar un vistazo a la sección de eventos en la documentación y experimentar..
Con el Módulo de línea de tiempo podemos configurar nuestro bucle principal para nuestra aplicación. Si estuvieras creando un juego, este sería esencialmente tu bucle de juego. Me gusta pensar que es el equivalente a un ENTER_FRAME en flash.
Es fácil de configurar, solo llamamos al setLoop función y cadena del comienzo() Método para ello:
canvas.setLoop (function () triangle.rotation + = 5;). start ();
Si quisiéramos atar el setLoop () función a un evento, digamos a un clic del mouse, podríamos hacer algo como esto:
canvas.setLoop (function () triangle.rotation + = 5;) button.bind ("click tap", function () canvas.timeline.start ()); Y podríamos detener la línea de tiempo simplemente llamando:
canvas.timeline.stop ();
Utilizando setLoop () es el camino a seguir para las animaciones que se producirán durante un largo período de tiempo y para manejar las actualizaciones constantes que debe realizar a lo largo de su aplicación. Pero oCanvas ha incorporado métodos para manejar animaciones más simples y básicas que comúnmente se necesitan. Estos métodos también son prácticamente tomados textualmente de jQuery..
los animar() El método funciona igual que en jQuery. Si no está familiarizado con este lado de jQuery, piense si es como un motor de interpolación como TweenMax o Tweener para Flash. Puede animar cualquier propiedad que se pueda establecer mediante un valor numérico:
circle.animado (y: circle.y - 300, scalingX: .5, scalingY: .5, "short", "eas-in", function () circle.fill = "# 45931e"; canvas.redraw (););
Aquí animamos la posición y del círculo y el tamaño general, aplicamos algo de suavizado y, cuando termina, ejecutamos una función de devolución de llamada que cambia su color de relleno. Pero no olvides llamar redibujar ().
fundirse(), fadeOut (), y desvanecerse hacia() Para desvanecer un objeto dentro y fuera podríamos simplemente llamar:
square.fadeIn (); square.fadeOut ();
Para atenuar la opacidad a un valor específico, utilizaríamos desvanecerse hacia():
square.fadeTo (.6);
También puede definir la duración, facilitar y proporcionar una función de devolución de llamada para estos métodos de la misma manera que lo haría con el animar() método.
oCanvas contiene un Módulo de escenas muy útil que le permite separar fácilmente su aplicación en diferentes estados. Los desarrolladores de juegos pueden apreciar esto porque es un método simple para dividir tu juego en diferentes secciones. Incluso los animadores Flash de la vieja escuela podrían comparar el Módulo de escenas con el panel Escenas, lo que le permite crear literalmente diferentes escenas dentro de un proyecto de Flash.
Para crear una escena en oCanvas llamamos al crear() método para devolver un escenas objeto:
var intro = canvas.scenes.create ("intro", function () // agregar objetos de visualización aquí); Dentro de crear() método que pasamos en dos argumentos: el nombre de la escena como una cadena y una función donde agregamos el objeto de visualización que queremos agregar a esa escena.
var introText = canvas.display.text (x: canvas.width / 2, y: canvas.height / 2, align: "center", fuente: "bold 36px sans-serif", texto: "Introduction", relleno: "# 133035"); var intro = canvas.scenes.create ("intro", function () this.add (introText);); Ahora tenemos que cargar nuestra escena y esos objetos se agregarán a la pantalla:
canvas.scenes.load ("intro"); Observe que pasamos el nombre que le dimos a la escena cuando la creamos.
Y por supuesto podemos descargar una escena en cualquier momento:
canvas.scenes.unload ("intro"); Imagínese cuánto podría ahorrarle tiempo si usara escenas y controladores de eventos juntos.
El único inconveniente real de oCanvas es que no ha ganado tanta tracción en la comunidad de desarrollo como podría suponer, o al menos parece que es así por ahora. Creo que parte de ese motivo para esto se debe a la popularidad de EaselJS. Parece que hay mucho más conocimiento y recursos para EaselJS que para oCanvas, lo cual es difícil de creer, ya que este último se lanzó por primera vez en marzo de 2011, pero por alguna razón, ha caído bajo el radar..
He estado usando ambas bibliotecas desde hace bastante tiempo, y puedo decir honestamente que soy un gran fan de ambas. EaselJS definitivamente se siente más como si estuvieras usando ActionScript y si eres un desarrollador de Flash será fácil de aprender. Y como hemos visto, oCanvas podría pasar por el hermano perdido de jQuery de muchas maneras. Por lo tanto, si usted es un ActionScripter puro, podría naturalmente gravitar hacia EaselJS, especialmente porque Easel fue escrito específicamente para atraer a los desarrolladores de Flash..
Sin embargo, he estado usando Actionscript mucho más tiempo que jQuery y personalmente me parece que oCanvas es más fácil de usar y menos detallado para escribir. Y aunque EaselJS es bastante fácil de usar, la sintaxis simple en oCanvas lo convierte en una herramienta tan bienvenida..
Pero además de la sintaxis más simple, oCanvas y EaselJS en muchos aspectos son prácticamente intercambiables. Ambas bibliotecas pueden realizar más o menos las mismas tareas y hay muy poca diferencia en el rendimiento, si lo hay. Sin embargo, me doy cuenta de que la función de Ticker en EaselJS funciona un poco más suavemente que oCanvas ' setLoop Función (aunque eso podría ser una diferencia basada en el navegador).
EaselJS tiene una API mucho más extensa, especialmente cuando se trata de dibujos y efectos. Y si tiene en cuenta TweenJS y SoundJS, Easel es definitivamente una herramienta más completa, especialmente si está acostumbrado a usar una aplicación como Flash que ofrece un control preciso sobre sus proyectos. Pero si eres nuevo en todo el juego HTML5, es probable que comiences a correr con oCanvas mucho más rápido. Cuando me introduje por primera vez en oCanvas, me resultó muy divertido jugar con él. Todo está listo para ti, todos los métodos y eventos necesarios para comenzar a crear, manipular y animar objetos de inmediato..
Cualquiera que sea la biblioteca que prefiera, oCanvas y EaselJS son solo el comienzo de lo que creo que será una afluencia de herramientas y recursos para permitir a los desarrolladores crear fácilmente aplicaciones basadas en navegador. Las características de oCanvas que se detallan en este artículo apenas rayan la superficie de lo que podría crearse utilizando esta biblioteca muy poderosa.
De ninguna manera, sin embargo, es oCanvas (o cualquier otra biblioteca) una razón para no aprender y usar la API nativa de HTML5 Canvas. Pero si te encuentras en una situación en la que todos tus antiguos clientes de Flash ahora te buscan para crear aplicaciones HTML5 (como las mías) y no tienes tiempo para aprender algo como la matriz de transformación hostil en la API de Canvas nativa - oCanvas Definitivamente puede facilitar la curva de aprendizaje.
