Programando en PixieJS 1: Un pequeño ejemplo


En esta ocasión no puedo enumerar las plataformas donde corre este framework porque esencialmente lo hace en todo lugar que soporte canvas sobre html5, y usa OpenGL aunque puede hacer fallback a canvas puro si es necesario, así que esencialmente cualquier soporte web. Aún así puedes ver la lista de navegadores soportados en esta página de FAQ.

Dado que no voy a hacer un post únicamente para decir esto, voy a trabajar hoy en poner el engine de pixie en este wordpress para su uso futuro, y comprobar que funciona con un pequeño ejemplo.

Instalar PixieJS en tu WordPress

Lo primero es saber que ficheros tiene una instalación típica, puedo ver en la información sobre setup que puede utilizarse a través de CDN, lo cual, como inicio, parece lo más asequible.

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>

Donde 5.1.3 puede ser sustituido por cualquier versión

Por ahora nos quedamos con esta versión y meto la linea de código directamente en el header.php para tenerlo disponible, ya afinaré más adelante.

Bien, una vez agregado via CDN, es hora de incorporar un ejemplo algo en plan “hola Mundo”_

Para ello con un bloque html personalizado, incluire un área donde ejecutaré este ejemplo de la web de PixiJS con una imagen propia, a ver que sale.

Parece que funciona ¿no?, no del todo, al redimensionar la ventana del navegador no logro que actue como creo que debe.

Aún así el método es algo rudimentario por lo que creo que antes de seguir con el framework en si, voy a crear un plugin que me permita agregar apps pixieJS en cualquier elemento de la página, y gestionar cuestiones como el redimensionado de ventana (que influye también al girar la pantalla del movil por ejemplo).

Para la primera sesión, ya hemos logrado ejecutar la app inline y medio redimensionarla. ¡Al lio!


Quizá te interese leer más sobre Desarrollar en PixiJS

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>