personas:johnny:proyectos:processingjs
no way to compare when less than two revisions
Diferencias
Muestra las diferencias entre dos versiones de la página.
— | personas:johnny:proyectos:processingjs [2016/10/23 20:48] (actual) – creado brolin | ||
---|---|---|---|
Línea 1: | Línea 1: | ||
+ | {{https:// | ||
+ | |||
+ | **Introducción** | ||
+ | |||
+ | La idea sera conocer la librería play.js con ejemplos sencillos y muy funcionales. Al final se compartirá un juego escrito usando la biblioteca y se explicara a modo raso el código y como se crearon las animaciones usando flash para generar los spritesheets. | ||
+ | Si desea conocer el juego directamente, | ||
+ | |||
+ | Esta guia se hace en referencia a este gran tutorial de Allison Parrish: | ||
+ | |||
+ | ====== 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:// | ||
+ | |||
+ | 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:// | ||
+ | |||
+ | // | ||
+ | |||
+ | ==== Instalación ==== | ||
+ | |||
+ | En el sitio oficial esta un guía de referencia para instalar la biblioteca. Puede descargar la biblioteca haciendo click {{ : | ||
+ | |||
+ | ==== 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. | ||
+ | </ | ||
+ | |||
+ | Un ejemplo muy sencillo aquí para la creación de un sprite: | ||
+ | |||
+ | <code javascript> | ||
+ | var forma; | ||
+ | function setup() { | ||
+ | createCanvas(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; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | 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()**, | ||
+ | |||
+ | 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 === | ||
+ | |||
+ | Como mencionamos anteriormente, | ||
+ | En el ejemplo que vamos a ver a continuación, | ||
+ | |||
+ | <code javascript> | ||
+ | var forma; | ||
+ | function setup() { | ||
+ | createCanvas(400, | ||
+ | forma = createSprite( | ||
+ | width/2, height/3, 40, 40); | ||
+ | forma.shapeColor = color(255); | ||
+ | } | ||
+ | function draw() { | ||
+ | background(50); | ||
+ | fill(255); | ||
+ | noStroke(); | ||
+ | textAlign(CENTER, | ||
+ | text(" | ||
+ | width/2, height*0.67); | ||
+ | drawSprites(); | ||
+ | } | ||
+ | function keyPressed() { | ||
+ | if (keyCode == RIGHT_ARROW) { | ||
+ | forma.setSpeed(1.5, | ||
+ | } | ||
+ | else if (keyCode == DOWN_ARROW) { | ||
+ | forma.setSpeed(1.5, | ||
+ | } | ||
+ | else if (keyCode == LEFT_ARROW) { | ||
+ | forma.setSpeed(1.5, | ||
+ | } | ||
+ | else if (keyCode == UP_ARROW) { | ||
+ | forma.setSpeed(1.5, | ||
+ | } | ||
+ | else if (key == ' ') { | ||
+ | forma.setSpeed(0, | ||
+ | } | ||
+ | return false; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | La variable key en //p5.js// solo funciona para los caracteres alfanuméricos. Con el fin de detectar las teclas de las flechas, usamos la variable **KeyCode.** No olvide escribirla con K mayúscula al iniciar. | ||
+ | |||
+ | Para añadir gravedad al dibujo, vasta con usar la función **.setSpeed()** para añadir una fuerza constante. | ||
+ | |||
+ | En las siguientes lineas de código hay un ejemplo que hace que un sprite se dibuje en la pantalla, para que se mueva hacia abajo en cada fotograba y luego rebota cuando llega a la parte inferior. | ||
+ | |||
+ | <code javascript> | ||
+ | var forma; | ||
+ | function setup() { | ||
+ | createCanvas(400, | ||
+ | forma = createSprite(width/ | ||
+ | 40, 40); | ||
+ | forma.shapeColor = color(255); | ||
+ | forma.velocity.y = 0; | ||
+ | } | ||
+ | function draw() { | ||
+ | background(50); | ||
+ | if (forma.position.y >= height) { | ||
+ | forma.velocity.y *= -1; | ||
+ | // set to height to prevent " | ||
+ | forma.position.y = height; | ||
+ | } | ||
+ | // constant downward speed | ||
+ | // (i.e., gravity) | ||
+ | forma.addSpeed(0.25, | ||
+ | drawSprites(); | ||
+ | } | ||
+ | function mousePressed() { | ||
+ | forma.position.y = mouseY; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ==== Siguiendo el mouse ==== | ||
+ | |||
+ | Hay muchas formas de hacer que un sprite siga la posición del mouse. Inicialmente estableceremos la posición directamente. | ||
+ | |||
+ | <code javascript> | ||
+ | var forma; | ||
+ | function setup() { | ||
+ | createCanvas(400, | ||
+ | forma = createSprite( | ||
+ | width/2, height/2, 40, 40); | ||
+ | forma.shapeColor = color(255); | ||
+ | } | ||
+ | function draw() { | ||
+ | background(50); | ||
+ | forma.position.x = mouseX; | ||
+ | forma.position.y = mouseY; | ||
+ | drawSprites(); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Podemos añadir un tipo de **easing** (retrazo) a la forma que esta siguiendo el mouse. Este retrazo se establece en los ejes X y Y, restando la posición del sprite y la posición del mouse. | ||
+ | |||
+ | <code javascript> | ||
+ | var forma; | ||
+ | function setup() { | ||
+ | createCanvas(400, | ||
+ | forma = createSprite( | ||
+ | width/2, height/2, 40, 40); | ||
+ | forma.shapeColor = color(255); | ||
+ | } | ||
+ | function draw() { | ||
+ | background(50); | ||
+ | forma.velocity.x = (mouseX - spr.position.x) * 0.2; | ||
+ | forma.velocity.y = (mouseY - spr.position.y) * 0.2; | ||
+ | drawSprites(); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Por último, podemos usar el metodo **.attractionPoint()** para establecer una fuerza que empuja la forma a la dirección y la posición del ratón: | ||
+ | |||
+ | <code javascript> | ||
+ | var forma; | ||
+ | function setup() { | ||
+ | createCanvas(400, | ||
+ | forma = createSprite( | ||
+ | width/2, height/2, 40, 40); | ||
+ | forma.shapeColor = color(255); | ||
+ | forma.rotateToDirection = true; | ||
+ | forma.maxSpeed = 2; | ||
+ | forma.friction = 0.99; | ||
+ | } | ||
+ | function draw() { | ||
+ | background(50); | ||
+ | if (mouseIsPressed) { | ||
+ | forma.attractionPoint(0.5, | ||
+ | } | ||
+ | drawSprites(); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | En el ejemplo anterior, establecimos también algunos atributos como **.maxSpeed** del objeto. (Este controla la velocidad con la cual un sprite se mueve, independientemente de las fuerzas que operan en el). También el atributo **.friction** (El cual es un multiplicador que reduce lentamente la velocidad del objeto en cada frame) y finalmente el atributo .rotateToDirection (Si se declara en true inicialmente, | ||
+ | |||
+ | ==== Eventos con el mouse ==== | ||
+ | |||
+ | Los sprites dentro de p5.play vienen con un mecanismo incorporado para detectar si el usuario esta interactuando con el sprite usando el ratón. Por ello, hay dos formas de comprobar si esta interactuando con el ratón: callbacks o atributos booleanos. | ||
+ | |||
+ | Hay cuatro atributos que tiene un objeto sprite, que se asignan como funciones para definir el comportamiento del sprite en relación a si el usuario esta moviendo el mouse. En el siguiente ejemplo se ilustran las 4. | ||
+ | |||
+ | <code javascript> | ||
+ | var forma1; | ||
+ | var forma2; | ||
+ | function setup() { | ||
+ | createCanvas(400, | ||
+ | |||
+ | forma1 = createSprite(width/ | ||
+ | 100, 100); | ||
+ | forma1.shapeColor = color(255); | ||
+ | forma1.onMouseOver = function() { | ||
+ | this.scale = 2; | ||
+ | } | ||
+ | forma1.onMouseOut = function() { | ||
+ | this.scale = 1; | ||
+ | } | ||
+ | |||
+ | forma2 = createSprite(width/ | ||
+ | 100, 100); | ||
+ | forma2.shapeColor = color(0); | ||
+ | forma2.onMousePressed = function() { | ||
+ | this.shapeColor = color(128); | ||
+ | } | ||
+ | forma2.onMouseReleased = function() { | ||
+ | this.shapeColor = color(0); | ||
+ | } | ||
+ | } | ||
+ | function draw() { | ||
+ | background(50); | ||
+ | drawSprites(); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Estos cuatro atributos son: | ||
+ | |||
+ | **onMouseOver: | ||
+ | |||
+ | **onMouseOut: | ||
+ | |||
+ | **onMousePressed: | ||
+ | |||
+ | **onMouseReleased: | ||
+ | |||
+ | La función que se asigna a estos atributos se ejecuta cada vez que se produzca el evento especificado. Dentro de la función, la expresión se refiere //al objeto el cual llama la interacción// | ||
+ | |||
+ | Cada **objeto Sprite** también tiene un atributo // | ||
+ | |||
+ | <code javascript> | ||
+ | var forma1; | ||
+ | var forma2; | ||
+ | function setup() { | ||
+ | createCanvas(400, | ||
+ | forma1 = createSprite(width/ | ||
+ | 100, 100); | ||
+ | forma1.shapeColor = color(255); | ||
+ | forma1.mouseActive = true; | ||
+ | forma2 = createSprite(width/ | ||
+ | 100, 100); | ||
+ | forma2.shapeColor = color(0); | ||
+ | forma2.mouseActive = true; | ||
+ | } | ||
+ | function draw() { | ||
+ | background(50); | ||
+ | if (forma1.mouseIsOver) { | ||
+ | background(100); | ||
+ | } | ||
+ | if (forma2.mouseIsOver && mouseIsPressed) { | ||
+ | forma2.rotation += 4; | ||
+ | } | ||
+ | drawSprites(); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Note que también en este ejemplo, usamos el atributo // | ||
+ | |||
+ | ==== Multiples sprites ==== | ||
+ | |||
+ | Podemos llamar a la función // | ||
+ | |||
+ | <code javascript> | ||
+ | |||
+ | function setup() { | ||
+ | createCanvas(400, | ||
+ | } | ||
+ | function draw() { | ||
+ | background(50); | ||
+ | drawSprites(); | ||
+ | } | ||
+ | function mousePressed() { | ||
+ | var forma = createSprite(width/ | ||
+ | random(10, 50), random(10, 50)); | ||
+ | forma.shapeColor = color(255); | ||
+ | forma.velocity.y = random(3); | ||
+ | forma.velocity.x = random(-3, 3); | ||
+ | forma.position.x = mouseX; | ||
+ | forma.position.y = mouseY; | ||
+ | forma.friction = 0.995; | ||
+ | forma.life = 120; | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
+ | Deténgase un momento a analizar el código y encontrara el uso del atributo //.life//, que es el **número máximo de fotogramas** que el sprite puede mostrarse en pantalla, antes de que sea eliminado automáticamente por la librería //p5.play// | ||
+ | |||
+ | Para **modificar los sprites** después de que estos son creados, por excepción de los cambios que realiza la librería **p5.play** por sí sola, usted necesita iterar sobre cada elemento sprite en el método //draw()//. El marco proporciona una matriz llamada **allSprites** incorporada que contiene todos los sprites activos en el boceto. En el ejemplo siguiente, se utiliza la variable // | ||
+ | |||
+ | <code javascript> | ||
+ | function setup() { | ||
+ | createCanvas(400, | ||
+ | } | ||
+ | function draw() { | ||
+ | background(50); | ||
+ | for (var i = 0; i < allSprites.length; | ||
+ | // gravity | ||
+ | allSprites[i].addSpeed(0.1, | ||
+ | if (allSprites[i].position.y > height) { | ||
+ | allSprites[i].velocity.y *= -1; | ||
+ | } | ||
+ | // any code that removes sprites should be | ||
+ | // the *last* thing in the loop! | ||
+ | if (allSprites[i].position.x > width || | ||
+ | allSprites[i].position.x < 0) { | ||
+ | allSprites[i].remove(); | ||
+ | } | ||
+ | } | ||
+ | textAlign(RIGHT, | ||
+ | text(" | ||
+ | width-10, 10); | ||
+ | drawSprites(); | ||
+ | } | ||
+ | function mousePressed() { | ||
+ | var forma = createSprite(width/ | ||
+ | random(10, 50), random(10, 50)); | ||
+ | forma.shapeColor = color(255); | ||
+ | forma.velocity.y = random(3); | ||
+ | forma.velocity.x = random(-3, 3); | ||
+ | forma.position.x = mouseX; | ||
+ | forma.position.y = mouseY; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ==== De ahora en adelante solo mostraremos ejemplos ==== | ||
+ | |||
+ | === Eventos con multiples sprites === | ||
+ | |||
+ | <code javascript> | ||
+ | |||
+ | var score = 0; | ||
+ | function setup() { | ||
+ | createCanvas(400, | ||
+ | for (var i = 0; i < 10; i++) { | ||
+ | var forma = createSprite( | ||
+ | random(width), | ||
+ | random(10, 50), random(10, 50)); | ||
+ | forma.shapeColor = random(255); | ||
+ | forma.onMouseOver = removeAndScore; | ||
+ | } | ||
+ | } | ||
+ | function draw() { | ||
+ | background(50); | ||
+ | drawSprites(); | ||
+ | fill(255); | ||
+ | noStroke(); | ||
+ | textSize(72); | ||
+ | textAlign(CENTER, | ||
+ | if (score < 10) { | ||
+ | text(score, width/2, height/2); | ||
+ | } | ||
+ | else { | ||
+ | text(" | ||
+ | } | ||
+ | } | ||
+ | function removeAndScore() { | ||
+ | score += 1; | ||
+ | this.remove(); | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
+ | === grupos de sprites - sprite group === | ||
+ | |||
+ | <code javascript> | ||
+ | |||
+ | var clouds; | ||
+ | var birds; | ||
+ | function setup() { | ||
+ | createCanvas(400, | ||
+ | clouds = new Group(); | ||
+ | birds = new Group(); | ||
+ | |||
+ | for (var i = 0; i < 10; i++) { | ||
+ | var c = createSprite( | ||
+ | random(width), | ||
+ | random(25, 100), random(25, 100)); | ||
+ | c.shapeColor = color(random(200, | ||
+ | clouds.add(c); | ||
+ | } | ||
+ | for (var i = 0; i < 5; i++) { | ||
+ | var b = createSprite( | ||
+ | random(width), | ||
+ | random(10, 50), random(5, 25)); | ||
+ | b.shapeColor = color(255, 0, random(255)); | ||
+ | b.friction = random(0.97, | ||
+ | b.maxSpeed = random(1, 4); | ||
+ | b.rotateToDirection = true; | ||
+ | birds.add(b); | ||
+ | } | ||
+ | } | ||
+ | function draw() { | ||
+ | background(0, | ||
+ | for (var i = 0; i < clouds.length; | ||
+ | clouds[i].position.x += clouds[i].width * 0.01; | ||
+ | if (clouds[i].position.x > width) { | ||
+ | clouds[i].position.x = 0; | ||
+ | } | ||
+ | } | ||
+ | for (var i = 0; i < birds.length; | ||
+ | birds[i].attractionPoint(0.2, | ||
+ | } | ||
+ | drawSprites(); | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
+ | === colisiones === | ||
+ | |||
+ | Para mas información ir a la [[http:// | ||
+ | |||
+ | <code javascript> | ||
+ | |||
+ | var spr1; | ||
+ | var spr2; | ||
+ | function setup() { | ||
+ | createCanvas(400, | ||
+ | spr1 = createSprite( | ||
+ | width/2, height/2, 150, 150); | ||
+ | spr1.shapeColor = color(0); | ||
+ | spr2 = createSprite(0, | ||
+ | spr2.shapeColor = color(128); | ||
+ | } | ||
+ | function draw() { | ||
+ | background(50); | ||
+ | spr2.velocity.x = (mouseX-spr2.position.x)*0.2; | ||
+ | spr2.velocity.y = (mouseY-spr2.position.y)*0.2; | ||
+ | if (spr2.overlap(spr1)) { | ||
+ | spr1.shapeColor = color(255); | ||
+ | } | ||
+ | else { | ||
+ | spr1.shapeColor = color(0); | ||
+ | } | ||
+ | drawSprites(); | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
+ | === Bloques === | ||
+ | |||
+ | .collide | ||
+ | |||
+ | <code javascript> | ||
+ | |||
+ | var spr1; | ||
+ | var spr2; | ||
+ | function setup() { | ||
+ | createCanvas(400, | ||
+ | spr1 = createSprite( | ||
+ | width/2, height/2, 100, 100); | ||
+ | spr1.shapeColor = color(0); | ||
+ | spr2 = createSprite(0, | ||
+ | spr2.shapeColor = color(128); | ||
+ | } | ||
+ | function draw() { | ||
+ | background(50); | ||
+ | spr2.velocity.x = (mouseX-spr2.position.x)*0.2; | ||
+ | spr2.velocity.y = (mouseY-spr2.position.y)*0.2; | ||
+ | spr2.collide(spr1); | ||
+ | drawSprites(); | ||
+ | } | ||
+ | |||
+ | < | ||
+ | |||
+ | .displace() | ||
+ | |||
+ | <code javascript> | ||
+ | var spr1; | ||
+ | var spr2; | ||
+ | function setup() { | ||
+ | createCanvas(400, | ||
+ | spr1 = createSprite( | ||
+ | width/2, height/2, 100, 100); | ||
+ | spr1.shapeColor = color(0); | ||
+ | spr2 = createSprite(0, | ||
+ | spr2.shapeColor = color(128); | ||
+ | } | ||
+ | function draw() { | ||
+ | background(50); | ||
+ | spr2.velocity.x = (mouseX-spr2.position.x)*0.2; | ||
+ | spr2.velocity.y = (mouseY-spr2.position.y)*0.2; | ||
+ | spr2.displace(spr1); | ||
+ | drawSprites(); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | === Grupo de colisiones === | ||
+ | |||
+ | <code javascript> | ||
+ | |||
+ | var walls; | ||
+ | var boxes; | ||
+ | var player; | ||
+ | function setup() { | ||
+ | createCanvas(400, | ||
+ | walls = new Group(); | ||
+ | boxes = new Group(); | ||
+ | player = createSprite(100, | ||
+ | player.shapeColor = color(255); | ||
+ | for (var i = 0; i < 5; i++) { | ||
+ | var w = createSprite( | ||
+ | random(125, width-125), (height/ | ||
+ | random(10, 100), random(10, 100)); | ||
+ | w.shapeColor = color(0); | ||
+ | walls.add(w); | ||
+ | } | ||
+ | for (var i = 0; i < 4; i++) { | ||
+ | var b = createSprite( | ||
+ | random(50, 100), random(100, height-100), | ||
+ | 25, 25); | ||
+ | b.shapeColor = color(255, 0, 0); | ||
+ | boxes.add(b); | ||
+ | } | ||
+ | } | ||
+ | function draw() { | ||
+ | background(50); | ||
+ | player.velocity.x = | ||
+ | (mouseX-player.position.x)*0.1; | ||
+ | player.velocity.y = | ||
+ | (mouseY-player.position.y)*0.1; | ||
+ | player.collide(walls); | ||
+ | player.displace(boxes); | ||
+ | boxes.collide(walls); | ||
+ | boxes.displace(boxes); | ||
+ | drawSprites(); | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
+ | === Grupo de callbacks === | ||
+ | |||
+ | <code javascript> | ||
+ | |||
+ | var coins; | ||
+ | var player; | ||
+ | var score = 0; | ||
+ | function setup() { | ||
+ | createCanvas(400, | ||
+ | coins = new Group(); | ||
+ | for (var i = 0; i < 10; i++) { | ||
+ | var c = createSprite( | ||
+ | random(100, width-100), | ||
+ | random(100, height-100), | ||
+ | 10, 10); | ||
+ | c.shapeColor = color(255, 255, 0); | ||
+ | coins.add(c); | ||
+ | } | ||
+ | player = createSprite(50, | ||
+ | player.shapeColor = color(255); | ||
+ | } | ||
+ | function draw() { | ||
+ | background(50); | ||
+ | player.velocity.x = | ||
+ | (mouseX-player.position.x)*0.1; | ||
+ | player.velocity.y = | ||
+ | (mouseY-player.position.y)*0.1; | ||
+ | player.overlap(coins, | ||
+ | drawSprites(); | ||
+ | fill(255); | ||
+ | noStroke(); | ||
+ | textSize(72); | ||
+ | textAlign(CENTER, | ||
+ | if (coins.length > 0) { | ||
+ | text(score, width/2, height/2); | ||
+ | } | ||
+ | else { | ||
+ | text(" | ||
+ | } | ||
+ | } | ||
+ | function getCoin(player, | ||
+ | coin.remove(); | ||
+ | score += 1; | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
+ | ===== Finalización ===== | ||
+ | |||
+ | Ir al [[https:// | ||
+ | |||
+ | para ahorro de tiempo, aqui esta el codigo comentado. | ||
+ | |||
+ | <code javascript> | ||
+ | |||
+ | var canvas; | ||
+ | var player; | ||
+ | var anchoPlayer; | ||
+ | var altoPlayer; | ||
+ | var bombillos; | ||
+ | var disparos; | ||
+ | var playerImage, | ||
+ | var score = 0; | ||
+ | var cityImage, spriteCity; | ||
+ | var nubesImage, spriteNubes; | ||
+ | var posXCerca = 0; | ||
+ | var posYCerca = 0; | ||
+ | var posXmitad = 0; | ||
+ | var posYmitad = 0; | ||
+ | var posXLejos = 0; | ||
+ | var posYLejos = 0; | ||
+ | var animacionBombillo; | ||
+ | var animacionExplotion; | ||
+ | var sonidodisparo; | ||
+ | var sonidoExterminado; | ||
+ | |||
+ | function preLoad() | ||
+ | { | ||
+ | // Cargamos imagenes | ||
+ | disparoImagen = loadImage(" | ||
+ | colisionparticleImage = loadImage(" | ||
+ | playerImage = loadImage(" | ||
+ | particleImage = loadImage(" | ||
+ | cityImage = loadImage(" | ||
+ | nubesImage = loadImage(" | ||
+ | | ||
+ | // carga de animaciones (bombillo) | ||
+ | animacionBombillo = loadAnimation(" | ||
+ | | ||
+ | // carga de la animacion que explota | ||
+ | animacionExplotion = loadAnimation(" | ||
+ | | ||
+ | // cambiamos default de load lectura de la explosion | ||
+ | animacionExplotion.looping = false; | ||
+ | } | ||
+ | |||
+ | function setup() | ||
+ | { | ||
+ | preLoad(); | ||
+ | | ||
+ | // cargamos sonidos | ||
+ | sonidodisparo = loadSound(' | ||
+ | sonidoExterminado = loadSound(' | ||
+ | |||
+ | // creamos el canvas y lo referenciamos al id html lienzo | ||
+ | canvas = createCanvas(800, | ||
+ | canvas.parent(lienzo); | ||
+ | | ||
+ | posXCerca = width/2; | ||
+ | posYCerca = 0; | ||
+ | | ||
+ | posYmitad = 420; | ||
+ | posXmitad = 900; | ||
+ | | ||
+ | posXLejos = 0; | ||
+ | posYLejos = 90; | ||
+ | | ||
+ | // nubes | ||
+ | spriteNubes = createSprite(-400, | ||
+ | spriteNubes.addImage(nubesImage); | ||
+ | spriteNubes.setSpeed(0.5, | ||
+ | | ||
+ | // ciudad | ||
+ | spriteCity = createSprite(-700, | ||
+ | spriteCity.addImage(cityImage); | ||
+ | spriteCity.setSpeed(1.5, | ||
+ | | ||
+ | // player | ||
+ | anchoPlayer = 40; | ||
+ | altoPlayer = 150; | ||
+ | player = createSprite(width-anchoPlayer, | ||
+ | // | ||
+ | player.addImage(" | ||
+ | player.rotation = -90; | ||
+ | | ||
+ | // creamos el grupo de bombillos | ||
+ | bombillos = new Group(); | ||
+ | | ||
+ | // numero de bombillos que añadimos al grupo | ||
+ | for (var i = 0; i < 20; i++) | ||
+ | { | ||
+ | // creamos los bombillos haciendo referencia a la función createBombillo | ||
+ | createBombillo(2, | ||
+ | } | ||
+ | | ||
+ | disparos = new Group(); | ||
+ | | ||
+ | // fijamos volumen | ||
+ | sonidodisparo.setVolume(0.1); | ||
+ | sonidoExterminado.setVolume(0.1); | ||
+ | |||
+ | } | ||
+ | |||
+ | function draw() | ||
+ | { | ||
+ | background(0, | ||
+ | | ||
+ | // esta seria con un easing para mover el player | ||
+ | player.velocity.y = (mouseY - player.position.y) * 0.2; | ||
+ | | ||
+ | // movemos los fondos y actualizamos para que inicie desde una posición mas atras | ||
+ | if(spriteCity.position.x > width + 700) | ||
+ | spriteCity.position.x = width - 1500; | ||
+ | | ||
+ | if(spriteNubes.position.x > width + 400) | ||
+ | spriteNubes.position.x = width - 1400; | ||
+ | | ||
+ | // reestablece la posicion de los bombillos | ||
+ | for (var i = 0; i < bombillos.length; | ||
+ | { | ||
+ | // de abajo hacia arriba | ||
+ | if(bombillos[i].position.y < 0) | ||
+ | { | ||
+ | bombillos[i].position.y = height; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // | ||
+ | if(keyWentDown(' | ||
+ | { | ||
+ | disparar(); | ||
+ | } | ||
+ | | ||
+ | // colisiones con la libreria play.js | ||
+ | | ||
+ | // cuando sobre los bombillos esta el disparo | ||
+ | // se ejecuta la animacion haciendo referencia al callback bombilloColisionado | ||
+ | bombillos.overlap(disparos, | ||
+ | | ||
+ | // cuando sobre los disparos esta el bombillo | ||
+ | // actualizamos el score haciendo referencia al callback actualizarScore | ||
+ | disparos.overlap(bombillos, | ||
+ | | ||
+ | // degub info | ||
+ | /* | ||
+ | noStroke(); | ||
+ | fill(12, 249, 206); | ||
+ | textSize(13); | ||
+ | text(" | ||
+ | text(" | ||
+ | */ | ||
+ | |||
+ | drawSprites(); | ||
+ | | ||
+ | // dibujamos el score | ||
+ | noStroke(); | ||
+ | fill(255, 245, 11); | ||
+ | textSize(30); | ||
+ | | ||
+ | score = bombillos.length; | ||
+ | | ||
+ | if( bombillos.length > 0) | ||
+ | { | ||
+ | text(" | ||
+ | } | ||
+ | else { | ||
+ | text(" | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | function createBombillo(type, | ||
+ | { | ||
+ | var bombilloWidth = 20; | ||
+ | var bombilloheight = 80; | ||
+ | var bombillo = createSprite(x, | ||
+ | var img = loadImage(" | ||
+ | // | ||
+ | | ||
+ | // añadimos una animación y la llamamos | ||
+ | bombillo.addAnimation(" | ||
+ | bombillo.shapeColor = color(10, 96, 214); | ||
+ | bombillo.setSpeed(2.5-random(type/ | ||
+ | bombillo.type = type; | ||
+ | | ||
+ | // el type serian como las vidas de los bombillos | ||
+ | if(type == 2) | ||
+ | bombillo.scale = .6; | ||
+ | if(type == 1) | ||
+ | bombillo.scale = .3; | ||
+ | | ||
+ | bombillo.mass = 2+bombillo.scale; | ||
+ | bombillo.setCollider(" | ||
+ | | ||
+ | bombillos.add(bombillo); | ||
+ | return bombillo; | ||
+ | // es necesario retornar el bombillo devido a que necesitamos referenciarlo | ||
+ | // en otra funcion como parametro de colision | ||
+ | } | ||
+ | |||
+ | function bombilloColisionado(bombillo, | ||
+ | var newType = bombillo.type-1; | ||
+ | |||
+ | // cuando es la primera colision del bombillo con el disparo | ||
+ | if(newType> | ||
+ | { | ||
+ | createBombillo(newType, | ||
+ | createBombillo(newType, | ||
+ | | ||
+ | for(var i=0; i<10; i++) { | ||
+ | var explocionDibujada = createSprite(disparo.position.x, | ||
+ | explocionDibujada.addImage(colisionparticleImage); | ||
+ | explocionDibujada.shapeColor = color(245, 59, 10); | ||
+ | explocionDibujada.setSpeed(random(3, | ||
+ | explocionDibujada.friction = 0.95; | ||
+ | explocionDibujada.life = 15; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // cuando es la segunda colision, disparamos la animacion | ||
+ | if (newType == 0) | ||
+ | { | ||
+ | var colision = createSprite(disparo.position.x, | ||
+ | var imgExplotion = loadImage(" | ||
+ | // | ||
+ | colision.addAnimation(" | ||
+ | // | ||
+ | sonidoExterminado.play(); | ||
+ | |||
+ | } | ||
+ | |||
+ | // cuando se terminan los eventos de colision, | ||
+ | // retiramos el disparo y el bombillo respectivo | ||
+ | disparo.remove(); | ||
+ | bombillo.remove(); | ||
+ | |||
+ | } | ||
+ | |||
+ | function actualizarScore() | ||
+ | { | ||
+ | score -= 1; | ||
+ | } | ||
+ | |||
+ | function disparar() | ||
+ | { | ||
+ | var disparoAncho = 60; | ||
+ | var disparoAlto = 6; | ||
+ | var disparo = createSprite(width+anchoPlayer, | ||
+ | disparo.shapeColor = color(255, 0, 0); | ||
+ | disparo.addImage(disparoImagen); | ||
+ | disparo.mirrorX(-1); | ||
+ | // | ||
+ | // | ||
+ | disparo.setSpeed(8.5, | ||
+ | disparo.position.x = player.position.x-anchoPlayer; | ||
+ | disparo.position.y = player.position.y; | ||
+ | disparo.friction = 0.995; | ||
+ | disparo.life = 180; | ||
+ | disparos.add(disparo); | ||
+ | sonidodisparo.play(); | ||
+ | | ||
+ | if(disparo.position.x < 0) | ||
+ | { | ||
+ | disparo.remove(); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
personas/johnny/proyectos/processingjs.txt · Última modificación: 2016/10/23 20:48 por brolin