Dicen que el espacio es la frontera final. No hemos llegado muy lejos cuando se trata de explorarlo, pero lo que si podría eludir esta triste reallity jugando un juego de exploración espacial de estilo retro llamada SpaceHipster?

Por otra parte, lo que si puede aprender a hacer este juego simple desde el principio con el marco Phaser impresionante?

Phaser-tutorial

Phaser es un divertido, libre y rápido juego de marco HTML5 2D creado por Richard Davey y el apoyo de una gran comunidad de desarrolladores que suele pasar el rato en los foros HTML5GameDevs.

Tabla de contenidos

Aprender Phaser mediante la construcción de 15 juegos

Si usted quiere dominar Phaser y aprender cómo publicar juegos Phaser como juegos nativas para iOS y Android tienen que verificar Zenva En línea En este supuesto, el juego completo curso de desarrollo móvil – Construir 15 juegos.

archivos de código fuente

Puede tomar desde aquí. Si desea que le notificará cuando liberamos nuevos tutoriales sobre Phaser o el desarrollo de juegos HTML5 no se olvide de hacer clic en “suscribirse a nuestra lista” al descargar los archivos (si no se quiere optar por no saber de nosotros!).

Tutorial objetivos

1-Conocer las bases de Phaser creando simple juego de exploración espacial (llamado SpaceHipster) que se ejecuta en gran escritorio y móviles.

2-Learn algunas mecánicas de juego básicas en 2D.

Conceptos cubierto

  • Juego Unidos
  • configuración básica del juego
  • La precarga activos
  • Trabajo con sprites y spritesheets
  • Audio
  • El desplazamiento automático azulejos
  • La adición de una pantalla de bienvenida
  • Creación de elementos de juego
  • Física básica 2D
  • entrada de Entrega (solo clic o grifo)
  • Partículas
  • Se acabó el juego

    Tutorial requisitos

    -Básico al conocimiento intermedio de JavaScript. Si necesita una sensación refresco libre de visitar nuestro curso de vídeo JavaScript en Zenva Academia.

    editor de código -A o IDE. Corriente Pablo prefiere Sublime Text, pero pudo hacer Pablo ha mostrado más afecto por otro IDE de y estoy seguro de Pablo futuro tendrá algo que decir también.

    Phaser -Download de ella de Github de pases. Puede clonar o bien la cesión temporal o descargar el archivo ZIP.

    Usted necesidad de ejecutar el código y ejemplos Phaser usando un servidor web local o remoto. Algunas opciones populares son Apache (WAMP si en Windows, si MAMP en Mac). A alternativas ligeras son Mangosta servidor web y el servidor HTTP de Python. Echar un vistazo a esta guía para más detalles.

    -Download la totalidad de código fuente y los juegos activos tutorial aquí. Si desea que le permiten saber cuando nos liberamos nuevos tutoriales sobre Phaser o el desarrollo de juegos HTML5 no se olvide de suscribirse a nuestra lista!

    -Tener la documentación y la página de ejemplos a la mano. Asimismo, no se olvide que siempre se puede encontrar respuestas por mirar el código fuente de Phaser.

    Nuevo proyecto

    Vamos a empezar con una nueva carpeta, un archivo de índice y el archivo Phaser, que se puede agarrar desde el directorio “acumulación” de la Phaser descargado zip o repositorio clonado.

    Si está en el modo de desarrollo (en contraposición a la producción, que se despliega su juego a su destino final para el mundo para jugar) Recomiendo incluyendo el expediente no minified phaser.js (en contraposición a phaser.min Js). La razón de ser, no es una buena práctica para el tratamiento de su motor de juego como un cuadro negro. ¿Quieres ser capaz de explorar el contenido del archivo y depurar adecuadamente. No todas las respuestas serán en Google por lo que una gran cantidad de veces que la mejor manera de hacer es leer el código fuente original para entender lo que está pasando.

    Nuestro archivo index.html se vería así:
    Aprender el desarrollo del juego en ZENVA.com </ title> <script type = "text / javascript" src = "js / phaser.min.js "> </ script> </p> <style> body {padding: 0px; margen: 0px; } </ Style> </ head> <body> <! - incluir el archivo principal del juego -> <script src = "js / main.js"> </ script> </ body> </ html> 123456789101112131415161718192021 < ! DOCTYPE html> <html> <head> <meta charset = "UTF-8" /> <title> Aprender el desarrollo del juego en ZENVA.com </ title> <script type = "text / javascript" src = "js / Phaser .min.js "> </ script> </p> <style> body {padding: 0px; margen: 0px;} </ style> </ head> <body> <- includethemaingamefile -> <script src =" js / main.js "> </ script> </ body> </ html> </p> <p> No hay nada para ver / mostrar todavía! </ p><br /> <H2> Unidos </ h2><br /> <P> En Phaser, toda la acción se produce alrededor de <em> Unidos </ em>. Se puede pensar en ellos como principales momentos de su juego. Pensar en un partido de fútbol, ​​que tiene un Estado cuando las puertas están abiertas y la gente comienza a entrar. Entonces usted tiene un Estado cuando el programa previo al juego tiene lugar. A continuación, un Estado donde el espectáculo cosas antes del juego se retira del campo. A continuación, un Estado cuando el juego comienza, y así sucesivamente. </ P><br /> <P> Phaser le da mucha flexibilidad como lo que indica que puede tener, pero hay una convención de facto que se utiliza en muchos juegos y tutoriales. La denominación puede variar un poco, pero por lo general es algo como: </ p><br /> <P> <strong> Estado de arranque </ strong>: configuración general del juego se definen, y los activos de la pantalla de la precarga se cargan (ejemplo la barra de carga). Nada se muestra al usuario. </ P><br /> <P> <strong> precarga Estado </ strong>: los activos de juego (imágenes, spritesheets, audio, texturas, etc.) se cargan en la memoria (del disco). La pantalla de la precarga se muestra al usuario, que por lo general incluye una barra de carga para mostrar el progreso. <br /> <Strong> <br /> MainMenu Estado </ strong>: pantalla de bienvenida de su juego. Después de que el estado de precarga, todas las imágenes del juego ya están cargados en la memoria, para que puedan acceder rápidamente. <br /> <Strong> <br /> Estado juego </ strong>. El juego real donde la diversión se lleva a cabo </ p><br /> <P> Vamos ahora crear archivos para todos los estados y un archivo llamado main.js que es donde añadiremos en el juego. main.js serán los siguientes, los otros archivos están vacías por ahora: </ p><br /> var SpaceHipster = SpaceHipster || {}; SpaceHipster.game = new Phaser.Game (window.innerWidth, window.innerHeight, Phaser.AUTO, ''); SpaceHipster.game.state.add ( 'arranque', SpaceHipster.Boot); // uncomment estos como los creamos el tutorial // SpaceHipster.game.state.add ( 'precarga', SpaceHipster.Preload); // SpaceHipster.game.state.add ( 'MainMenu', SpaceHipster.MainMenu); // SpaceHipster.game. state.add ( 'Juego', SpaceHipster.Game); SpaceHipster.game.state.start ( 'arranque'); 1234567891011varSpaceHipster = SpaceHipster || {}; SpaceHipster.game = newPhaser.Game (window.innerWidth, window.innerHeight, Phaser.AUTO, ''); SpaceHipster.game.state.add ( 'arranque', SpaceHipster.Boot); // elimine el comentario de estos como los creamos el tutorial // SpaceHipster.game.state.add ( 'precarga', SpaceHipster.Preload); // SpaceHipster.game.state.add ( 'MainMenu', SpaceHipster.MainMenu); // SpaceHipster.game.state.add ( 'Juego', SpaceHipster.Game); SpaceHipster.game.state.start ( 'arranque'); </p> <p> lo primero que hacemos es crear un espacio de nombres único para que podamos evitar conflictos con otras bibliotecas que m ight a utilizar. En este ejemplo, el espacio de nombres será SpaceHipser. Se puede usar lo que quieras para esto, siempre y cuando se trata de un nombre único que se pueden encontrar en otros lugares poco probable. También puede simplemente no usarlo y trabajar directamente con los nombres de juego y los estados, pero recomiendo usarlo sólo para las mejores prácticas. </ P><br /> var SpaceHipster = SpaceHipster || {}; 1varSpaceHipster = SpaceHipster || {}; </p> <p> significa que si el objeto ya existe, lo usaremos. De lo contrario, vamos a utilizar un nuevo objeto. </ P><br /> SpaceHipster.game = nuevo Phaser.Game (window.innerWidth, window.innerHeight, Phaser.AUTO, ''); 1SpaceHipster.game = newPhaser.Game (window.innerWidth, window.innerHeight, Phaser.AUTO, ''); < p> iniciamos un nuevo juego y establecer el tamaño de la totalidad de las ventanas. medios Phaser.AUTO que si el juego se representará en un elemento canvas o usando WebGL dependerá del navegador. Si WebGL está disponible, se puede utilizar como la primera opción (como el rendimiento es mejor). </ P><br /> <P> A continuación, registre los estados y finalmente lanzar el estado de inicio. </ P><br /> <P> Incluir estos archivos añadidos en index.html: </ p><br /> <! DOCTYPE html> <html> <head> <meta charset = "UTF-8" /> <title> Aprender el desarrollo del juego en ZENVA.com </ title> <script type = "text / javascript" src = "js / phaser.min.js "> </ script> <script type =" text / javascript "src = "js / Boot.js"> </ script> <script type = "/ javascript" src =" text js / precarga. js "> </ script> <script type =" text / javascript" src = "js / MainMenu.js"> </ script> <script type = "text / javascript" src = "js / Game.js"> < / script> </p> <style> body {padding: 0px; margen: 0px; } </ Style> </ head> <body> <! - incluir el archivo principal del juego -> <script src = "js / main.js"> </ script> </ body> </ html> 12345678910111213141516171819202122232425 < ! DOCTYPE html> <html> <head> <meta charset = "UTF-8" /> <title> Aprender el desarrollo del juego en ZENVA.com </ title> <script type = "text / javascript" src = "js / Phaser .min.js "> </ script> <script type =" text / javascript "src =" js / Boot.js "> </ script> <script type =" text / javascript "src =" js / Preload.js "> </ script> <script type =" text / javascript "src =" js / MainMenu.js "> </ script> <script type =" text / javascript "src =" js / Game.js "> </ script> </p> <style> body {padding: 0px; margen: 0px;} </ style> </ head> <body> <- includethemaingamefile -> <script src = "js / main.js"> </ script > </ body> </ html> </p> <h2> métodos Unidos </ h2><br /> <P> Estados tienen algunos métodos reservadas que poseen objetivos específicos. Estos son los que vamos a utilizar en este tutorial. Puede encontrar la lista completa aquí. </ P><br /> <P> - <strong> init </ strong>: se llama la inicialización Estado. Si necesita enviar parámetros al Estado aquí es donde van a estar accesible (más sobre esto más adelante) </ p><br /> <P> - <strong> precarga </ strong>. Aquí es donde se cargan los activos </ p><br /> <P> - <strong> crear </ strong>. Esto se llama al finalizar la carga de activos </ p><br /> <P> - <strong> actualización </ strong>: esto se llama en cada tick juego. Básicamente se llama “muchas veces por segundo” por lo que este es el lugar donde desea incluir cosas que necesitan ser probados constantemente tales como la detección de colisiones. </ P><br /> <H2> Boot Estado </ h2><br /> <P> Antes de hablar sobre el estado de arranque me gustaría decir que, en teoría, no se podía utilizar estados en los que todo el juego se desarrolla, pero utilizando estados le permite organizar el código mejor. </ P><br /> <P> El estado de arranque es un lugar oscuro. Aquí es donde se define el tamaño de la pantalla y otras opciones de configuración del juego general, tales como el motor de física que usaremos (Phaser tiene tres de ellos, vamos a utilizar la más simple). Además, en el estado de arranque cargamos los activos que serán mostrados en el estado de precarga. </ P><br /> <P> Así que .. las cargas de estado Arranque de los activos para el estado de precarga, y las cargas de estado de precarga los recursos del juego. Está sonando como “un sueño dentro de un sueño” no es cierto? se podría pensar, ¿por qué no en lugar de cargar los recursos del juego allí? Pues nada le impide hacerlo, pero la cuestión es que los recursos del juego lo más probable es tomar mucho más tiempo en cargar que los activos de pantalla precarga. Al cargar los activos de pantalla de precarga (que debe ser ligero) se minimiza el tiempo donde hay una pantalla en blanco (algo que los usuarios no hacen el amor). A continuación, en el estado de precarga tendremos tiempo para cargar todo lo demás con un agradable y encantador pantalla de precarga. </ P><br /> <P> Contenido de Boot.js: </ p><br /> var SpaceHipster = SpaceHipster || {}; SpaceHipster.Boot = function () {}; // valor de configuración de juego y la carga de los activos para la carga screenSpaceHipster.Boot.prototype = {precarga: function () {// activos vamos a utilizar en la pantalla de carga de este .load.image ( 'logo', 'assets / images / logo.png'); this.load.image ( 'preloadbar', 'assets / images / preloader-bar.png'); }, Crear: function () {// pantalla de carga tendrá un fondo blanco this.game.stage.backgroundColor = '#fff'; // opciones de escala this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.minWidth = 240; this.scale.minHeight = 170; this.scale.maxWidth = 2,880; this.scale.maxHeight = 1,920; // tiene el juego centrado horizontalmente this.scale.pageAlignHorizontally = true; // tamaño de la pantalla se ajusta automáticamente this.scale.setScreenSize (true); // sistema de física para el movimiento this.game.physics.startSystem (Phaser.Physics.ARCADE); this.state.start ( 'precarga'); }}; 12345678910111213141516171819202122232425262728293031323334varSpaceHipster = SpaceHipster || {}; SpaceHipster.Boot = function () {}; // valor de configuración de juego y la carga de los activos para la carga screenSpaceHipster.Boot.prototype = {precarga: function () {// nosotros los activos utilizaremos en el screenthis.load.image de carga ( 'logo', 'assets / images / logo.png'); this.load.image ( 'preloadbar', 'assets / images / preloader-bar.png'); }, crear: function () {// pantalla de carga tendrá un backgroundthis.game.stage.backgroundColor blanco = '# fff'; // escalar optionsthis.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.minWidth = 240; this.scale.minHeight = 170; this.scale.maxWidth = 2,880; this.scale.maxHeight = 1,920; // tiene el juego centrado horizontallythis.scale.pageAlignHorizontally = true; // tamaño de la pantalla será conjunto automaticallythis.scale .setScreenSize (true); // sistema de física para movementthis.game.physics.startSystem (Phaser.Physics.ARCADE); this.state.start ( 'precarga');}}; </p> <h2> precarga Estado </ h2><br /> <P> Nuestra pantalla precarga sólo un logotipo y la barra de carga. Preload.js: </ p><br /> var SpaceHipster = SpaceHipster || {}; // carga el juego assetsSpaceHipster.Preload = function () {}; SpaceHipster.Preload.prototype = {precarga: función) {// Mostrar logotipo en la pantalla de carga (this.splash = this.add.sprite (esto. game.world.centerX, this.game.world.centerY, 'logo'); this.splash.anchor.setTo (0,5); this.preloadBar = this.add.sprite (this.game.world.centerX, this.game.world.centerY + 128, 'preloadbar'); this.preloadBar.anchor.setTo (0,5); this.load.setPreloadSprite (this.preloadBar); // activos juego carga this.load.image ( 'espacio', 'assets / images / space.png'); this.load.image ( 'rock', 'assets / images / rock.png'); this.load.spritesheet ( 'playership', 'assets / images / player.png', 12, 12); this.load.spritesheet ( 'poder', 'assets / images / power.png', 12, 12); this.load.image ( 'playerParticle', 'assets / images / reproductor-particle.png'); this.load.audio ( 'recoger', 'activos / / collect.ogg de audio'); this.load.audio ( 'explosión', 'activos / audio / explosion.ogg'); }, Crear: function () {this.state.start ( 'MainMenu'); }}; 1234567891011121314151617181920212223242526272829varSpaceHipster = SpaceHipster || {}; // cargar el juego assetsSpaceHipster.Preload = function () {}; SpaceHipster.Preload.prototype = {precarga: function () {// Mostrar logotipo en screenthis.splash carga = esta .add.sprite (this.game.world.centerX, this.game.world.centerY, 'logo'); this.splash.anchor.setTo (0,5); this.preloadBar = this.add.sprite (this.game .world.centerX, this.game.world.centerY + 128, 'preloadbar'); this.preloadBar.anchor.setTo (0,5); this.load.setPreloadSprite (this.preloadBar); // carga juego assetsthis.load. imagen ( 'espacio', 'activos / images / space.png'); this.load.image ( 'rock', 'assets / images / rock.png'); this.load.spritesheet ( 'playership', 'activos /images/player.png',12,12);this.load.spritesheet('power','assets/images/power.png',12,12);this.load.image('playerParticle','assets /images/player-particle.png');this.load.audio('collect','assets/audio/collect.ogg');this.load.audio('explosion','assets/audio/explosion.ogg ');}, crear: function () {this.state.start (' MainMenu ');}}; º is.preloadBar = this.add.sprite (this.game.world.centerX, this.game.world.centerY + 128, 'preloadbar'); 1this.preloadBar = this.add.sprite (this.game.world.centerX , this.game.world.centerY + 128, 'preloadbar'); </p> <p> Es la forma en que cargamos sprites en la pantalla. Definimos sus coordenadas y el nombre del activo, si volver a Boot.js verá que “preloadbar” es como llamamos a la barra de carga. </ P><br /> this.load.setPreloadSprite (this.preloadBar); 1this.load.setPreloadSprite (this.preloadBar); </p> <p> El método setPreloadSprite en las entidades del cargador nos permite agarrar un sprite (en este caso this.preloadBar) y convertirlo en una barra de carga. Más información en la documentación. </ P><br /> <P> <img src = "http://fymm-rpg.net/wp-content/uploads/loading-screen-300x146.png" alt = "pantalla de carga" /> </ p><br /> <H2> MainMenu Estado </ h2><br /> <P> En esta pantalla vamos a empezar mostrando un fondo desplazado estrellas y algo de texto. </ P><br /> SpaceHipster.MainMenu = function () {}; SpaceHipster.MainMenu.prototype = {crear: function () {// muestran la baldosa espacio, repetido this.background = this.game.add.tileSprite (0, 0, this.game .width, this.game.height, 'espacio'); // darle velocidad en x this.background.autoScroll (-20, 0); // iniciar texto texto var juego = "Toque para comenzar"; estilo var = {font: "30px Arial", relleno: "#fff", align: "centro"}; var t = this.game.add.text (this.game.width / 2, this.game.height / 2, texto, el estilo); t.anchor.set (0,5); // más alta puntuación de texto = "puntaje más alto:" + this.highestScore; style = {font: "15px Arial", relleno: "#fff", align: "centro"}; var h = this.game.add.text (this.game.width / 2, this.game.height / 2 + 50, texto, el estilo); h.anchor.set (0,5); }, Actualizar: function () {if (this.game.input.activePointer.justPressed ()) {this.game.state.start ( 'Juego'); }}}; 1234567891011121314151617181920212223242526272829SpaceHipster.MainMenu = function () {}; SpaceHipster.MainMenu.prototype = {crear: function () {// mostrar la baldosa espacio, repeatedthis.background = this.game.add.tileSprite (0,0, this.game.width, this.game.height, 'espacio'); // darle velocidad en xthis.background.autoScroll (-20,0); // iniciar textvartext juego = "Toque para comenzar"; varstyle = { fuente: "30px Arial", relleno: "# fff", align: "centro"}; vart = this.game.add.text (this.game.width / 2, this.game.height / 2, texto, estilo ); t.anchor.set (0,5); // más alto scoretext = "puntuación del mejor: "+ this.highestScore; style = {font:" 15px Arial", relleno: "# fff", align: "centro"}; varh = this.game.add.text (this.game.width / 2, this.game.height / 2 + 50, texto, el estilo); h.anchor.set (0,5);}, día: function () { si (this.game.input.activePointer.justPressed ()) {this.game.state.start ( 'Juego');}}}; this.background = this.game.add.tileSprite (0, 0, esto. game.width, this.game.height, 'espacio'); // darle velocidad en x this.background.autoScroll (-20, 0); 1234this.background = this.game.add.tileSprite (0,0, this.game.width, this.game.height, 'espacio' ); // darle velocidad en xthis.background.autoScroll (-20,0); </p> <p> TileSprites es cuando se repite una baldosa muchas veces para cubrir un área determinada. Mediante el uso de desplazamiento automático y establecer una velocidad de X e Y podemos hacer que el efecto de desplazamiento infinito. </ P><br /> <P> Queremos escuchar para el grifo de usuario / clic para iniciar el estado del juego y empezar a jugar y lo hacemos en el método update (), ya que es algo que necesita ser constantemente revisados ​​sobre. </ P><br /> <P> Más adelante vamos a mostrar la mayor puntuación en esta pantalla, por ahora va a ser indefinido. </ P><br /> <P> <img src = "http://fymm-rpg.net/wp-content/uploads/empty-main-menu-300x115.png" alt = "vacío-menú principal" /> </ p><br /> <H2> Juego Estado - Jugador </ h2><br /> <P> Finalmente nos movemos en el juego real abierta Game.js: </ p><br /> var SpaceHipster = SpaceHipster || {}; // título screenSpaceHipster.Game = function () {}; SpaceHipster.Game.prototype = {crear: function () {}, actualizar: function () {},}; 1234567891011varSpaceHipster = SpaceHipster || {}; / / title screenSpaceHipster.Game = function () {}; SpaceHipster.Game.prototype = {crear: function () {}, actualizar: function () {},}; </p> <p> en crear vamos a empezar ajustando las dimensiones del mundo del juego: </ p><br /> // dimensionsthis.game.world.setBounds mundo conjunto (0, 0, 1920, 1920); 12 // set dimensionsthis.game.world.setBounds mundo (0,0,1920,1920); </p> <p> El fondo será las estrellas Sprite otra vez, repiten una y otra vez, para lo cual puede crear un TileSprite: </ p><br /> this.background = this.game.add.tileSprite (0, 0, this.game.world.width, this.game.world.height, 'espacio'); 1this.background = this.game.add.tileSprite (0 , 0, this.game.world.width, this.game.world.height, 'espacio'); </p> <p> el jugador será un sprite, inicialmente situada en el centro del mundo: </ p><br /> // crear playerthis.player = this.game.add.sprite (this.game.world.centerX, this.game.world.centerY, 'playership'); 12 // crear playerthis.player = this.game.add. Sprite (this.game.world.centerX, this.game.world.centerY, 'playership'); </p> <p> que sea un poco más grande: </ p><br /> this.player.scale.setTo (2); 1this.player.scale.setTo (2); </p> <p> El jugador será animado todo el tiempo: </ p><br /> this.player.animations.add ( 'volar', [0, 1, 2, 3], 5, true); this.player.animations.play ( 'volar'); 12this.player.animations.add ( 'mosca ', [0,1,2,3], 5, true); this.player.animations.play ( 'volar'); </p> <p> Si nos fijamos en el archivo player.png podrás ver que tiene 4 cuadros y definimos las dimensiones en Preload.js. 5 aquí significa que la frecuencia del cambio. Para información en la documentación de Animación. </ P><br /> // jugador puntuación inicial de zerothis.playerScore = 0; puntuación inicial 12 // jugador de zerothis.playerScore = 0;. <P> puntuación inicial </ p><br /> // permitir physicsthis.game.physics.arcade.enable jugador (this.player); this.playerSpeed ​​= 120; this.player.body.collideWorldBounds = true; 1234 // permitir jugador physicsthis.game.physics.arcade.enable ( this.player); this.playerSpeed ​​= 120; this.player.body.collideWorldBounds = true; </p> <p> Si queremos que el jugador a mover, a punto de chocar con las rocas y potenciadores de energía ajena a cobro revertido tenemos que incluirlo en la física sistema (que definimos en el estado de arranque). </ p><br /> <P> En el método de actualización, vamos a escuchar para grifos / clics y vamos a establecer la velocidad a la ubicación: </ p><br /> actualización: function () {if (this.game.input.activePointer.justPressed ()) {// movimiento en la dirección de la this.game.physics.arcade.moveToPointer entrada (this.player, this.playerSpeed); }}, 1234567update: function () {if (this.game.input.activePointer.justPressed ()) {// movimiento en la dirección de la inputthis.game.physics.arcade.moveToPointer (this.player, this.playerSpeed) ;}}, </p> <p> ver cómo el jugador se va la pantalla después de un tiempo. Necesitamos la cámara para seguir el jugador, por lo que añadir lo siguiente en el método de crear, después de que el código de animación: </ p><br /> // la cámara seguirá el jugador en el worldthis.game.camera.follow (this.player); // 12 la cámara seguirá al jugador en el worldthis.game.camera.follow (this.player); </p> <h2> sonidos de carga </ h2><br /> <P> precargado dos archivos de audio que tenga (ambos son OGG, para soporte completo navegador versiones de carga mp3 también). Vamos a crear los objetos de audio para que podamos reproducirlos más tarde (usando su método de reproducción ()) </ p><br /> //soundsthis.explosionSound = this.game.add.audio ( 'explosión'); this.collectSound = this.game.add.audio ( 'recoger'); 123 // soundsthis.explosionSound = this.game.add.audio ( 'explosión'); this.collectSound = this.game.add.audio ( 'recoger'); </p> <h2> Estado Juego - Asteroides </ h2><br /> <P> flotante alrededor del espacio es divertido (no es que lo he hecho) pero estoy seguro que se vuelve aburrido después de un tiempo. Vamos a añadir algunas rocas flotantes enormes que impactarán la nave tras la colisión. </ P><br /> <P> Fuelle el código de cámara en crear (), añada lo siguiente: </ p><br /> this.generateAsteriods (); 1this.generateAsteriods (); </p> <p> y le permite crear ese método (ver cómo no estamos creando nuestros propios métodos int l Estado, está bien, siempre y cuando no utiliza los nombres de los métodos reservadas): </ p><br /> generateAsteriods: function () {this.asteroids = this.game.add.group (); // activar la física en ellos this.asteroids.enableBody = true; this.asteroids.physicsBodyType = Phaser.Physics.ARCADE; // aleatorios var numAsteroids generador de números de Phaser = this.game.rnd.integerInRange (150, 200) asteroide var; for (var i = 0; i & lt; numAsteroids; i ++) {// añadir sprites asteroide = this.asteroids.create (this.game.world.randomX, this.game.world.randomY, 'rock'); asteriod.scale.setTo (this.game.rnd.integerInRange (10, 40) / 10); // propiedades físicas asteriod.body.velocity.x = this.game.rnd.integerInRange (-20, 20); asteriod.body.velocity.y = this.game.rnd.integerInRange (-20, 20); asteriod.body.immovable = true; asteriod.body.collideWorldBounds = true; }}, 1234567891011121314151617181920212223generateAsteriods: function () {this.asteroids = this.game.add.group (); // permitir la física en themthis.asteroids.enableBody = true; this.asteroids.physicsBodyType = Phaser.Physics.ARCADE; // generatorvarnumAsteroids de Phaser de números aleatorios = this.game.rnd.integerInRange (150200) varasteriod; para (vari = 0; i & lt; numAsteroids; i ++) {// añadir spriteasteriod = this.asteroids.create (this.game.world.randomX, este .game.world.randomY, 'rock'); asteriod.scale.setTo (this.game.rnd.integerInRange (10,40) / 10); // física propertiesasteriod.body.velocity.x = this.game.rnd .integerInRange (-20,20); asteriod.body.velocity.y = this.game.rnd.integerInRange (-20,20); asteriod.body.immovable = true; asteriod.body.collideWorldBounds = true;}}, this.asteroids = this.game.add.group (); 1this.asteroids = this.game.add.group (); </p> <p> Phaser nos permite crear grupos de elementos. Esto tiene sentido cuando se quiere restringir la detección de colisiones por ejemplo a un determinado grupo. También le permite establecer algunas propiedades a nivel de grupo. </ P><br /> numAsteroids var = this.game.rnd.integerInRange (150, 200); 1varnumAsteroids = this.game.rnd.integerInRange (150.200); </p> <p> ¿Cuántos asteroides tendremos? permite que sea al azar dentro de un rango utilizando el método de Phaser para los intervalos de números enteros aleatorios: </ p><br /> <P> A continuación, hemos creado las rocas reales. Establecer su tamaño ser al azar-ish, y permitir a sus propiedades físicas: </ p><br /> <P> Mediante el uso = inamovibles cierto que lo hizo de manera que sus trayectorias no se vea afectado al estrellarse con el jugador (no tenemos conjunto de colisión siendo tú. Después hacemos, intente configurar esta propiedad en false y ver la diferencia) . </ p><br /> <P> No queremos que se vayan el mundo del juego: </ p><br /> asteriod.body.collideWorldBounds = true; 1asteriod.body.collideWorldBounds = true; </p> <p> En la actualización (), vamos a añadir la detección de colisiones entre el jugador y el grupo de asteroides: </ p><br /> // colisión entre el jugador y asteroidsthis.game.physics.arcade.collide (this.player, this.asteroids, this.hitAsteroid, null, este); 12 // colisión entre el jugador y asteroidsthis.game.physics.arcade.collide ( this.player, this.asteroids, this.hitAsteroid, null, este); </p> <p> Definir el método hitAsteroid () donde jugamos un sonido de explosión, destruir el barco e ir a más de juego: </ p><br /> hitAsteroid: function (jugador, asteroides) {// juego explosión this.explosionSound.play sonido (); // se añadirá explosión jugador aquí this.player.kill (); this.game.time.events.add (800, this.gameOver, este); }, 12345678910hitAsteroid: function (jugador, asteroides) {// juego explosión soundthis.explosionSound.play (); // se añadirá explosión jugador herethis.player.kill (); this.game.time.events.add (800, this.gameOver, this);}, </p> <h2> partículas y Juego encima </ h2><br /> <P> Cuando se golpea una roca podemos hacer explotar la nave usando partículas. Las partículas son una técnica de desarrollo de juegos que permite trabajar con muchos elementos individuales o “partículas”. Esto puede ser utilizado para simular explosiones emisiones y mucho más. Echa un vistazo a los ejemplos de ideas. </ P><br /> <P> Vamos a hacer estallar la nave cuando es golpeado por una roca. Recordemos que cargamos un activo imagen llamada playerParticle, que era sólo un cuadrado azul. Vamos a utilizar para que la explosión barco. </ P><br /> hitAsteroid: function (jugador, asteroides) {// juego explosión this.explosionSound.play sonido (); // hacer que el jugador estalle var emisor = this.game.add.emitter (this.player.x, this.player.y, 100); emitter.makeParticles ( 'playerParticle'); emitter.minParticleSpeed.setTo (-200, -200); emitter.maxParticleSpeed.setTo (200, 200); emitter.gravity = 0; emitter.start (true, 1000, null, 100); this.player.kill (); // llamar al método gameover en 800 milisegundos, no hemos creado este método todavía this.game.time.events.add (800, this.gameOver, este); }, 12345678910111213141516hitAsteroid: function (jugador, asteroides) {// juego explosión soundthis.explosionSound.play (); // hacer que el jugador explodevaremitter = this.game.add.emitter (this.player.x, this.player.y, 100); emitter.makeParticles ( 'playerParticle'); emitter.minParticleSpeed.setTo (-200, -200); emitter.maxParticleSpeed.setTo (200,200); emitter.gravity = 0; emitter.start (true, 1000, null, 100); this.player.kill (); // llamar al método gameover en 800 milisegundos, no hemos creado este método yetthis.game.time.events.add (800, this.gameOver, este);}, < p> al iniciar el emisor, el primer parámetro “verdadero” es porque esta será una sola emisión de partículas (una sola explosión), que durará 1 segundo (1000 milisegundos), entonces ponemos nulo porque eso es también para la repetición de las emisiones (que define qué tanto por emisión), por último, te la enviamos 100 partículas en esta sola explosión. </ p><br /> <P> Kill el jugador de sprites también y llamar a un método gameover después de 0,8 segundos (800 milisegundos), que necesitamos para crear: </ p><br /> <H2> Estado Juego - Coleccionismo </ h2><br /> <P> Hasta el momento no hay mucho que hacer en el juego. Vamos a crear coleccionables y la puntuación de complemento. Coleccionables serán algunos joya extraño extranjero que su barco quiere encontrar en este lugar hostil. </ P><br /> <P> Vamos a seguir un enfoque similar de lo que hicimos con las rocas. En create () añadir esto antes generateAsteroids (queremos que los artículos coleccionables hasta pasar por debajo de los asteroides, si añadimos ellos después van a mostrar en la parte superior de ellos): </ p><br /> this.generateCollectables (); 1this.generateCollectables (); </p> <p> Añadir el nuevo método para crear y animar estas joyas exóticas / potenciadores: </ p><br /> generateCollectables: function () {this.collectables = this.game.add.group (); // activar la física en ellos this.collectables.enableBody = true; this.collectables.physicsBodyType = Phaser.Physics.ARCADE; // aleatorios var numCollectables generador de números de Phaser = this.game.rnd.integerInRange (100, 150) coleccionable var; for (var i = 0; i & lt; numCollectables; i ++) {// añadir sprites coleccionable = this.collectables.create (this.game.world.randomX, this.game.world.randomY, 'poder'); collectable.animations.add ( 'volar', [0, 1, 2, 3], 5, true); collectable.animations.play ( 'volar'); }}, 123456789101112131415161718generateCollectables: function () {this.collectables = this.game.add.group (); // permitir la física en themthis.collectables.enableBody = true; this.collectables.physicsBodyType = Phaser.Physics.ARCADE; // generatorvarnumCollectables de Phaser de números aleatorios = this.game.rnd.integerInRange (100150) varcollectable; para (vari = 0; i & lt; numCollectables; i ++) {// añadir spritecollectable = this.collectables.create (this.game.world.randomX, este .game.world.randomY, 'poder'); collectable.animations.add ( 'volar', [0,1,2,3], 5, true); collectable.animations.play ( 'volar');}} , </p> <p> En la actualización () no hay que definen colisión (que hace la parada del barco /”hit” físicamente el objeto), pero <strong> solapamiento </ strong>, que no afectará a la velocidad del barco: </ p><br /> // superposición entre el jugador y collectablesthis.game.physics.arcade.overlap (this.player, this.collectables, this.collect, null, este); 12 // superposición entre el jugador y collectablesthis.game.physics.arcade.overlap ( this.player, this.collectables, this.collect, null, este); </p> <p> Adición el método para recoger y actualización del marcador: </ p><br /> cobro revertido: function (jugador, coleccionable) {// reproducir sonido this.collectSound.play cobro revertido (); // actualización del marcador this.playerScore ++; // agregará más adelante: this.scoreLabel.text = this.playerScore; // eliminar collectable.kill Sprite (); }, 1234567891011collect: function (jugador, coleccionable) {// jugar soundthis.collectSound.play cobro revertido (); // actualizar scorethis.playerScore ++; // añadirá más adelante: this.scoreLabel.text = this.playerScore; // eliminar spritecollectable .kill ();}, </p> <p> Ahora usted debería ser capaz de andar por ahí y maná extranjero a cobro revertido. Lo único que nos falta es el resultado en la pantalla. </ P><br /> <H2> Score y High Score </ h2><br /> <P> Vamos a mostrar la puntuación utilizando un enfoque similar a lo que hicimos en el estado MainMenu. Esto, unido al extremo de crear (): </ p><br /> // Muestra scorethis.showLabels (12); // mostrar scorethis.showLabels (); </p> <p> Vamos a añadir que el nuevo método en el que nosotros nos ocuparemos de mostrar la puntuación (y quizás otras estadísticas si desea ampliar el juego) : </ p><br /> showLabels: function () {// puntuación de texto texto var = "0"; estilo var = {font: "20px Arial", relleno: "#fff", align: "centro"}; this.scoreLabel = this.game.add.text(this.game.width-50, this.game.height - 50, text, style); this.scoreLabel.fixedToCamera = true;}1234567showLabels:function(){//score textvartext="0";varstyle={font:"20px Arial",fill:"#fff",align:"center"};this.scoreLabel=this.game.add.text(this.game.width-50,this.game.height-50,text,style);this.scoreLabel.fixedToCamera=true;}this.scoreLabel.fixedToCamera = true;1this.scoreLabel.fixedToCamera=true;</p> <p>This is so that the number stays on the same position of the screen regardless the camera movements.</p> <p>When collecting (on colect() ), update the text content of the label:</p> <p>this.scoreLabel.text = this.playerScore;1this.scoreLabel.text=this.playerScore;</p> <p>Now, we also want to show the high score in the Menu screen, but hey that’s a different State, how can we pass parameters to another state?</p> <p><strong>The solution is easy</strong>: adding an init() method to the state, where you can add all the parameters you want. Let’s add such a method in MainMenu. We’ll receive the score of the game that was just played (it will use zero if none is passed). Then it will check if it’s the highest and will show it:</p> <p> init: function(score) { var score = score || 0; this.highestScore = this.highestScore || 0; this.highestScore = Math.max(score, this.highestScore); },123456init:function(score){varscore=score||0;this.highestScore=this.highestScore||0;this.highestScore=Math.max(score,this.highestScore);},</p> <p>**<strong>Note:</strong> using the localStorage API you could save this high score, if you want to learn how to use localStorage you can check this tutorial created by Ashley Menhennet, a course creator and trainer at Zenva.</p> <p>Add a gameOver method in the Game state and modify how we send the player back to the MainMenu state:</p> <p>gameOver: function() { //pass it the score as a parameter this.game.state.start('MainMenu', true, false, this.playerScore);},1234gameOver:function(){//pass it the score as a parameter this.game.state.start('MainMenu',true,false,this.playerScore);},</p> <p>The first “true” is because we want to refresh the game world, the second is set to “false” as we don’t want to erase the game’s cache (or we would have to reload all the assets, try with true to see what happens!) then we pass the parameter.</p> <h2>Game finished!</h2> <p><img src="http://fymm-rpg.net/wp-content/uploads/phaser-simple-game-300x123.png" alt="phaser-simple-game" /></p> <p>You can now play an entire (very simple) game! Feel free to use this as a basis for your own games as long as you give us credit (link back to us).</p> <p>If you haven’t already, you can download this tutorial game files and assets here.</p> <h2>Where to go next?</h2> <p>Make sure to check out The Complete Mobile Game Development Course – Build 15 Games and our list of Phaser tutorials.</p> <p><H3> Mensajes relacionados </ h3><br /> <img src="http://fymm-rpg.net/wp-content/uploads/placeholder-150x150.png" alt="" /><img src="http://fymm-rpg.net/wp-content/uploads/placeholder-150x150.png" alt="" /><img src="http://fymm-rpg.net/wp-content/uploads/placeholder-150x150.png" alt="" /></p> </div><!-- .entry-content --> </div><!-- .post-inner --> <div class="section-inner"> </div><!-- .section-inner --> <div class="comments-wrapper section-inner"> <div id="respond" class="comment-respond"> <h2 id="reply-title" class="comment-reply-title">Deja una respuesta <small><a rel="nofollow" id="cancel-comment-reply-link" href="/241-2/#respond" style="display:none;">Cancelar la respuesta</a></small></h2><form action="http://fymm-rpg.net/wp-comments-post.php" method="post" id="commentform" class="section-inner thin max-percentage" novalidate><p class="comment-notes"><span id="email-notes">Tu dirección de correo electrónico no será publicada.</span> Los campos obligatorios están marcados con <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Comentario</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Nombre <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">Correo electrónico <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-url"><label for="url">Web</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Guardar mi nombre, correo electrónico y web en este navegador para la próxima vez que comente.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Publicar el comentario" /> <input type='hidden' name='comment_post_ID' value='241' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- .comments-wrapper --> </article><!-- .post --> </main><!-- #site-content --> <div class="footer-nav-widgets-wrapper header-footer-group"> <div class="footer-inner section-inner"> <aside class="footer-widgets-outer-wrapper" role="complementary"> <div class="footer-widgets-wrapper"> <div class="footer-widgets column-one grid-item"> <div class="widget widget_search"><div class="widget-content"><form role="search" method="get" class="search-form" action="http://fymm-rpg.net/"> <label for="search-form-2"> <span class="screen-reader-text">Buscar:</span> <input type="search" id="search-form-2" class="search-field" placeholder="Buscar …" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Buscar" /> </form> </div></div> <div class="widget widget_recent_entries"><div class="widget-content"> <h2 class="widget-title subheading heading-size-3">Entradas recientes</h2> <ul> <li> <a href="http://fymm-rpg.net/2020/09/20/hola-mundo/">¡Hola, mundo!</a> </li> </ul> </div></div><div class="widget widget_recent_comments"><div class="widget-content"><h2 class="widget-title subheading heading-size-3">Comentarios recientes</h2><ul id="recentcomments"><li class="recentcomments"><span class="comment-author-link"><a href='https://wordpress.org/' rel='external nofollow ugc' class='url'>Un comentarista de WordPress</a></span> en <a href="http://fymm-rpg.net/2020/09/20/hola-mundo/#comment-1">¡Hola, mundo!</a></li></ul></div></div> </div> <div class="footer-widgets column-two grid-item"> <div class="widget widget_archive"><div class="widget-content"><h2 class="widget-title subheading heading-size-3">Archivos</h2> <ul> <li><a href='http://fymm-rpg.net/2020/09/'>septiembre 2020</a></li> </ul> </div></div><div class="widget widget_categories"><div class="widget-content"><h2 class="widget-title subheading heading-size-3">Categorías</h2> <ul> <li class="cat-item cat-item-1"><a href="http://fymm-rpg.net/category/sin-categoria/">Sin categoría</a> </li> </ul> </div></div><div class="widget widget_meta"><div class="widget-content"><h2 class="widget-title subheading heading-size-3">Meta</h2> <ul> <li><a href="http://fymm-rpg.net/wp-login.php">Acceder</a></li> <li><a href="http://fymm-rpg.net/feed/">Feed de entradas</a></li> <li><a href="http://fymm-rpg.net/comments/feed/">Feed de comentarios</a></li> <li><a href="https://es.wordpress.org/">WordPress.org</a></li> </ul> </div></div> </div> </div><!-- .footer-widgets-wrapper --> </aside><!-- .footer-widgets-outer-wrapper --> </div><!-- .footer-inner --> </div><!-- .footer-nav-widgets-wrapper --> <footer id="site-footer" role="contentinfo" class="header-footer-group"> <div class="section-inner"> <div class="footer-credits"> <p class="footer-copyright">© 2020 <a href="http://fymm-rpg.net/">Rpg Dev</a> </p><!-- .footer-copyright --> <p class="powered-by-wordpress"> <a href="https://es.wordpress.org/"> Funciona con WordPress </a> </p><!-- .powered-by-wordpress --> </div><!-- .footer-credits --> <a class="to-the-top" href="#site-header"> <span class="to-the-top-long"> Ir arriba <span class="arrow" aria-hidden="true">↑</span> </span><!-- .to-the-top-long --> <span class="to-the-top-short"> Subir <span class="arrow" aria-hidden="true">↑</span> </span><!-- .to-the-top-short --> </a><!-- .to-the-top --> </div><!-- .section-inner --> </footer><!-- #site-footer --> <script src='http://fymm-rpg.net/wp-includes/js/comment-reply.min.js?ver=5.4.2'></script> <script src='http://fymm-rpg.net/wp-includes/js/wp-embed.min.js?ver=5.4.2'></script> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> </body> </html>