Diferencias

Muestra las diferencias entre dos versiones de la página.

--- proyectos:nombre_proyecto_2 [2016/09/06 21:16] – kz
+++ proyectos:nombre_proyecto_2 [2016/10/23 20:47] (actual) – borrado brolin
@@ Línea 1: / Línea 1: @@
-====== Programación de juegos con play.js ======
-En este tutorial, vamos a ver como funciona una biblioteca de la librería p5 llamada p5.play.js. Escrita por **Paolo Pedercini**[[http://p5play.molleindustria.org/|p5-play]]
-Esta va a ser una guía muy simple, con algunos ejemplos para entender como funciona a modo raza la librería. Por favor siempre este consultando la [[http://p5play.molleindustria.org/docs/index.html|referencia]] para conocer mas a fondo la librería.
-//Play.p5.js// es una librería que ofrece una serie de objetos y funciones útiles para escribir videojuegos y otras aplicaciones interactivas. Los objetos y funciones que introduce se incorporan en p5.js, es como si fuera una biblioteca del framework.
-==== Instalación ====
-En el sitio oficial esta un guía de referencia para instalar la biblioteca. Puede descargar la biblioteca haciendo click {{ :proyectos:p5.play-master.zip |aqui}}; después de descomprimir el archivo, vaya al directorio libraries y copie el archivo // p5.play.js// y péguelo en la biblioteca libraries de su directorio. Hay que recalcar que en su propio vocero index.html, no olvide usar la etiqueta script para importar la biblioteca a su vocero. Si desea mas información al respecto, [[http://creative-coding.decontextualize.com/external-libraries/|Aquí]] hay un gran tutorial de como importar esta librería a su proyecto.
-==== Sprite ====
-Para crear un elemento en el mundo de //p5.play// logramos esto usando la función **createSprite()**. Esta función devuelve un objeto Sprite, que a su vez posee una serie de atributos y métodos que nos permite consultar y modificar las propiedades del sprite.
-<WRAP center round tip 60%>
-Es muy importante que si desea usar los ejemplos aquí descritos, use un servidor local para correr los ejemplos.
-</WRAP>
-Un ejemplo muy sencillo aquí para la creación de un sprite:
-<code>
-var forma;
-function setup() {
-  createCanvas(400, 400);
-  forma = createSprite(
-    width/2, height/2, 40, 40);
-  forma.shapeColor = color(255);
-  forma.velocity.y = 0.5;
-}
-function draw() {
-  background(50);
-  drawSprites();
-}
-function mousePressed() {
-  forma.position.x = mouseX;
-  forma.position.y = mouseY;
-}
-</code>
-La función **createSprite()** para poderse crear toma cuatro parámetros. La posición en **X** y en **Y** ademas del **ancho** y el **alto**. El atributo **.shapeColor** es una función que recibe como parámetro un color, que en este caso establecerá el color de nuestro sprite, que por defecto siempre sera un cuadrado. Para que la librería p5.play pueda mostrar el sprite, tenemos que añadir la función drawSprites() antes del final de la función draw().
-Cada objeto creado con **createSprite()**, posee ademas atributos como la **posición** y la **velocidad**. Ambos se pueden configurar para controlar o establecer la posición y la velocidad del sprite. La biblioteca //p5.play// se encarga de actualizar la velocidad o de preguntar la posición actual para nosotros. Y por ello no tendremos que preocuparnos de las matemáticas complejas que hay detrás de ese proceso.
-En el ejemplo anterior el sprite se mueve constantemente hacia abajo. Su posición inicial siempre sera fijada a la posición en X y en Y del mouse cuando se hace click sobre el lienzo.
-==== Moviendo los sprites ===