En este artículo le dará una introducción básica a la MightyEditor y el proceso de desarrollo que lo rodea. Tutorial le mostrará cómo hacer un prototipo en realidad un mini-juego dentro de una hora.

Tabla de contenidos

Requisitos

Lo nuevo navegador Google Chrome. Puede probar otros navegadores, pero no probarlas todavía.

¿Qué es MightyEditor?

MightyEditor es una solución basada en la nube de código abierto para la creación y alojamiento de juegos HTML5. Es compatible con el marco de desarrollo Phaser juego, pero también se puede utilizar con otras herramientas. Características principales del editor son: gestión de activos, edición de mapas, editor de código, la exportación de datos .

¿Cómo funciona MightyEditor?

Diseño proceso de usar editor de obras de los siguientes pasos:


  1. Crear un proyecto
  2. Subir activos
  3. Arrastrar y soltar los activos al mapa

  4. activos del Grupo en capas por ejemplo fondo, bloques …
  5. Añadir colisiones y funcionalidad en editor de código
  6. partido abierto y exportación de datos

    ¿Por qué debo usar MightyEditor?

    Tener una herramienta basada en navegador con toda la funcionalidad básica del mapa y código de editor le permite centrarse en la creación de prototipos rápida de los juegos. Abrir un enlace en el navegador y que son buenos para ir. No hay problemas con la instalación y configuración de varias soluciones de software consiguiente ahorro de su precioso tiempo.

    Cooperación con el diseñador, otro miembro del equipo o un cliente se ha hecho tan fácil como el intercambio de enlace con el proyecto. Puede realmente el trabajo en equipo, asignar un ilustrador para hacer frente a los activos, mientras que el diseñador de juegos crea diferentes niveles en el editor de mapas y desarrollador agrega funcionalidad con código JavaScript.

    MightyEditor no requiere su proyecto a depender de ello. Todos los activos y el código se pueden exportar en cualquier momento. ¿Cuál es incluso mejor – el editor es de código abierto y los datos se pueden mover a su equipo local con la versión local del editor. El código fuente se puede encontrar en GitHub https://github.com/TheMightyFingers/mightyeditor.

    Idea de mini-juego

    En este tutorial vamos a crear un sencillo minijuego llamado Digger . El juego se trata de un pequeño minero que excava bloque de tierra para el oro y vende varios minerales en la tienda. Las teclas de flecha se utilizan para la navegación y un simple física y colisión se añadirán al objeto minero.

    Creación de un proyecto

    Abrir el enlace http://mightyeditor.mightyfingers.com. Introduzca el título del proyecto -. En este caso, será Digger


    En el panel inferior derecho de introducir las dimensiones del juego: worldWidth , worldHeight 640 x 640. En aras de la simplicidad vamos a definir la vista puertos tamaños de la misma de 640 x 640.


    recursos del juego Subir

    En la siguiente parte del tutorial vamos a utilizar los activos que se pueden descargar aquí. En el panel superior derecho de uso seleccione de la lista carga de archivos opción y añadir archivos. Como alternativa, puede arrastrar y soltar archivos en el panel y los activos cargará automáticamente.


    Crear un mapa

    Haga clic en el icono del sello en el panel de herramientas de la izquierda y luego seleccione background_sky.png en el panel de activos y haga clic en el mapa creando así fondo (Ctrl botón de espera para el ajuste a la cuadrícula). Puede cambiar la posición del fondo seleccionando la flecha desde el panel de herramientas de la izquierda. Para más precisa cambio posicionamiento x, y posición en el panel de configuración.

    A continuación, repita este paso con los siguientes activos: background_city.png, background_hill1.png, background_hill2.png, background_grass.png . Al final todo debe parecer que es muestra en la siguiente imagen


    Crear grupo

    Crear grupo Vamos a objetos de fondo de nueva creación. En el panel derecho Objetos sección de la lista de selección elige Agregar grupo . Cambiar el nombre de grupo a bg y arrastrar objetos a este grupo. Para arrastrar varios objetos mantenga pulsada la tecla de mayúsculas.


    Agregar resto de gráficos

    Vamos a crear 5 filas de bloques de bajo fondo. Hay cuatro tipos diferentes de ellos: roca, tierra, hierba, oro. bloques de oro son de colección y no se puede excavar rocas. Los objetos que se han añadido en bloques grupo.


    Por último tenemos que añadir objetos de carácter y de la tienda. En cuanto al carácter activo – la imagen contiene varios fotogramas. Tenemos que definir ancho del marco y la altura en el panel inferior derecha Configuración panel. El tamaño es de 90 x 90. marcos separados se pueden ver en la parte inferior assetPreview panel. También editar anchorX y anchorY . los dos se establece en 0,5


    También puede definir sus propias variables de objeto. Abrir userData pestaña en el mismo panel y añadir de oro parámetro con 0 valor;

    Seleccione el icono de texto en el panel de herramientas izquierda y puso un objeto de texto en la esquina superior derecha del mapa. Escribir “0” como texto representará puntos. Cambiar el nombre de objeto de texto en el panel de objetos en el lado derecho.


    Ahora estamos listos para agregar objetos y terminar de trabajar con la edición de mapas. Carácter y tienda de objetos se añaden al igual que en la imagen de abajo


    Hemos terminado la parte gráfica del tutorial. A continuación vamos a ir a la codificación y la adición de la funcionalidad como controles de caracteres, colisiones, etc.

    editor de fuente

    Cambiar a editor de código fuente en la parte superior izquierda.


    En el menú de la izquierda con los archivos del juego se muestran. Tendrá que código en su mayoría en Estado / play.js archivo. Puede encontrar códigos cortos clave para el editor aquí.

    Juego Unidos

    Para codificar vamos a utilizar el marco de desarrollo Phaser. Los estados en Phaser son unas partes separadas de la lógica del juego. Por editor por defecto le da una plantilla con cuatro estados de arranque, carga, menú, juego . Para cada estado hay algunos métodos predefinidos: precarga, crear, actualizar, hacer . Para los propósitos de demostración debe saber que Crear método se llama justo después de todos los activos se cargan y actualización método es llamado por bucle de juego 60 veces por segundo. Se puede obtener más información en la documentación.

    Por plantilla predeterminada llama estado de menú. Por simplicidad no vamos a crear menús de este tiempo y vamos a ir directamente a jugar estado. Para ello tenemos que llamar estado de reproducción en el archivo menu.js bajo el método de creación.
    window.Digger.state.menu = {crear: function () {this.game.state.start ( «juego»); }} = {12345window.Digger.state.menu crear: function () {this.game.state.start ( «juego»);}}

    Abrir juego

    El primer juego abierto de panel superior Juego abierto botón. Por el momento sólo hay pantalla en negro. Para mostrar los objetos que acaba de hacer lo que tenemos que inicializarlas en el archivo play.js crear método.
    crear: function () {this.bg = mt.create ( «bg»); this.blocks = mt.create ( «bloques»); this.shop = mt.create ( «comprar»); this.character = mt.create ( «carácter»); this.points = mt.create ( «puntos»);} 1234567create: function () {this.bg = mt.create ( «bg»); this.blocks = mt.create ( «bloques»); this.shop = mt.create ( «tienda»); this.character = mt.create ( «carácter»); this.points = mt.create ( «puntos»);}

    la inicialización se realiza con la función mt.create. “BG” y “bloques” representan los nombres de grupos en el panel de objetos en el lado derecho. “Tienda” y “carácter” representan nombres de sprites en el mismo panel y, finalmente, “puntos” representan texto. Como se puede ver todos los objetos del grupo, sprite y el texto se inicializan con el mismo método.

    Abrir el juego ahora y objetos inicializados será visible en la pantalla.

    física Agregando

    Por la física por defecto están desactivados en Phaser por mejores razones de rendimiento. Vamos a permitir que la física más ligero y más rápido de todos los disponibles – la física Arcade. pestaña de la física abierta en la esquina inferior derecha. Cambio de parámetro activar a 1 y resto de parámetros aparece a continuación. Configurar el tamaño del cuerpo carácter anchura 60 y altura 60. Activar la gravedad y el conjunto y a 1000. En el último juego de collideWorldBounds parámetro en 1.

    juego de apertura verá personaje que caían hasta la parte inferior de la pantalla.

    Controla

    Inicializar teclas del cursor en el método create.
    this.cursors = this.game.input.keyboard.createCursorKeys (); 1this.cursors = this.game.input.keyboard.createCursorKeys ();

    Esta función nos da un objeto con las cuatro teclas de flecha para jugar: arriba, abajo, izquierda y derecha. En el método de actualización vamos a realizar un seguimiento cuando la izquierda / derecha / arriba flecha se pulsa la tecla y dar una velocidad de carácter o detenerlo claves no se están inactivos.
    actualización: function () {if (this.cursors.left.isDown) {this.character.body.velocity.x = -200; } Else if (this.cursors.right.isDown) {this.character.body.velocity.x = 200; } Else {this.character.body.velocity.x = 0; } If (this.cursors.up.isDown) {this.character.body.velocity.y = -300; }} 1234567891011update: function () {if (this.cursors.left.isDown) {this.character.body.velocity.x = -200;} elseif (this.cursors.right.isDown) {this.character.body. velocity.x = 200;} else {this.character.body.velocity.x = 0;} if (this.cursors.up.isDown) {this.character.body.velocity.y = -300;}}

    juego abierto y tratar las flechas para el carácter de control.

    colisión entre el carácter y bloques

    Habilitar la física de los bloques y las dejó inmóvil en el Editor de mapas panel de la física inferior derecha.


    A continuación añadimos la detección de colisiones en el método update . En primer lugar dos argumentos declaran que vamos a comprobar la colisión entre el objeto Sprite y grupo de objetos. El tercer argumento es una función 2 argumento que se llama en caso de colisión.
    this.game.physics.arcade.collide (this.character, this.blocks.self, la función (carácter, bloque) {console.log ( ‘Colisión entre’, carácter, bloque);}, null, este); 123this. game.physics.arcade.collide (this.character, this.blocks.self, la función (carácter, bloque) {console.log ( ‘colisión entre’, carácter, bloque);}, null, este);

    Apertura juego verá carácter no caerá hasta el final de la pantalla, pero caerá en la parte superior de los bloques.

    Carácter animaciones

    Primero necesitamos definir marcos en spritesheet para diferentes tipos de animaciones. Añadir estas líneas en el crear método.
    this.character.animations.add ( ‘stand’, [0, 1, 2, 3], 10, true); this.character.animations.add ( ‘volar’, [4, 5, 6, 7], 10 , true); this.character.animations.add ( ‘run’, [8, 9, 10], 10, true); this.character.animations.add ( ‘caída’, [12, 13, 14, 15] , 10, true); this.character.animations.add ( ‘dig’, [16, 17, 18], 10, false); this.character.animations.add ( ‘dig_down’, [20, 21, 22] , 10, false); this.character.animations.play ( ‘stand’); 1234567this.character.animations.add ( ‘stand’, [0,1,2,3], 10, true); this.character. animations.add ( ‘volar’, [4,5,6,7], 10, true); this.character.animations.add ( ‘run’, [8,9,10], 10, true); esto. character.animations.add ( ‘caída’, [12,13,14,15], 10, true); this.character.animations.add ( ‘dig’, [16,17,18], 10, false); this.character.animations.add ( ‘dig_down’, [20,21,22], 10, false); this.character.animations.play ( ‘stand’);

    última línea de código se inicia el juego de animación por defecto < em> Stand .

    Para resto de animaciones que tenemos que cambiar actualización método y de animación específica juego complemento para cada pulsación de tecla. Tenga en cuenta que tenemos la misma animación para la marcha a la izquierda y la derecha. Con el fin de dar la vuelta horizontalmente Sprite estamos utilizando escala -1.
    si (this.cursors.left.isDown) {this.character.body.velocity.x = -200; this.character.animations.play ( ‘run’); this.character.scale.x = -1;} else if (this.cursors.right.isDown) {this.character.body.velocity.x = 200; this.character.animations.play ( ‘run’); this.character.scale.x = 1;} else {this.character.body.velocity.x = 0; this.character.animations.play ( ‘stand’);} if (this.cursors.up.isDown) {this.character.body.velocity.y = -300; this.character.animations.play ( ‘volar’);} 123456789101112131415if (this.cursors.left.isDown) {this.character.body.velocity.x = -200; this.character.animations.play ( ‘correr’) ; this.character.scale.x = -1;} elseif (this.cursors.right.isDown) {this.character.body.velocity.x = 200; this.character.animations.play ( ‘run’); esta .character.scale.x = 1;} else {this.character.body.velocity.x = 0; this.character.animations.play ( ‘stand’);} if (this.cursors.up.isDown) {este .character.body.velocity.y = -300; this.character.animations.play ( ‘volar’);}

    bloques Destruir

    Con el fin de excavar bloques que necesitamos para agregar funcionalidad a nuestra función chocan:
    this.game.physics.arcade.collide (this.character, this.blocks.self, la función (carácter, bloque) {if (this.cursors.left.isDown) {if (block.body.touching.right) {este .destroyBlock (bloque);}} if (this.cursors.right.isDown) {if (block.body.touching.left) {this.destroyBlock (bloque);}} if (this.cursors.down.isDown) { si (block.body.touching.up) {this.destroyBlock (bloque);}}}, null, este); 1234567891011121314151617this.game.physics.arcade.collide (this.character, this.blocks.self, la función (el personaje , bloque) {if (this.cursors.left.isDown) {if (block.body.touching.right) {this.destroyBlock (bloque);}} if (this.cursors.right.isDown) {if (bloque. body.touching.left) {this.destroyBlock (bloque);}} if (this.cursors.down.isDown) {if (block.body.touching.up) {this.destroyBlock (bloque);}}}, null , este);

    Varios bloques necesita ser manejado de manera diferente. Hierba y tierra bloques son simplemente destruidos, rocas son indestructibles y que pueden recoger el oro y guardarlo en el parámetro de oro carácter. Añadir destroyBlock método bajo juego Estado.
    destroyBlock: función (bloque) {switch (block.key) {case ‘/rock.png’: break; caso ‘/grass.png’: caso ‘/ground.png’: block.destroy (); descanso; caso ‘/gold.png’:. this.character.getData () userData.gold ++; block.destroy (); descanso; }}, 1234567891011121314destroyBlock: función (bloque) {switch (block.key) {case ‘/ rock.png’: break; case ‘/ grass.png’: caso ‘/ ground.png’: block.destroy (); descanso y el caso ‘/ gold.png’:. this.character.getData () userData.gold ++; block.destroy (); break;}},

    superposición y venta de oro

    En el siguiente paso que tenemos que vender oro recoger en la tienda. Al final de actualización método add siguientes líneas:
    si (this.checkOverlap (this.character, this.shop)) {if (this.character.getData () userData.gold & gt;. 0) {var newPoints = parseInt (this.points._text) + this.character. getData () userData.gold.; this.points.setText (newPoints); this.character.getData () userData.gold = 0.; }} 1234567if (this.checkOverlap (this.character, this.shop)) {if (this.character.getData () userData.gold & gt;. 0) {varnewPoints = parseInt (this.points._text) + this.character. . getData () userData.gold; this.points.setText (newPoints); this.character.getData () userData.gold = 0;.}}

    Y crear nuevo método en juego estado las que los controles tanto de carácter y grada de sprites:
    checkOverlap: function (spriteA, spriteB) {var boundsA = spriteA.getBounds (); var boundsB = spriteB.getBounds (); Phaser.Rectangle.intersects de retorno (boundsA, boundsB);} 12345checkOverlap: función (spriteA, spriteB) {varboundsA = spriteA.getBounds (); varboundsB = spriteB.getBounds (); returnPhaser.Rectangle.intersects (boundsA, boundsB);}

    Refactoring y añadiendo animaciones finales

    Vamos a añadir animaciones de excavación como paso final de este tutorial y re-factor de actualización método para satisfacer nuestras necesidades de buen juego buscando. muestras anteriores, dado el código de abajo deberían ser autoexplicativas.
    «Utilizar estricta»; window.Digger.state.play = {crear: function () {this.cursors = this.game.input.keyboard.createCursorKeys (); this.bg = mt.create ( «BG»); this.blocks = mt.create ( «bloques»); this.shop = mt.create ( «comprar»); this.character = mt.create ( «carácter»); this.points = mt.create ( «puntos»); this.character.animations.add ( ‘stand’, [0, 1, 2, 3], 10, true); this.character.animations.add ( ‘volar’, [4, 5, 6, 7], 10, true); this.character.animations.add ( ‘run’, [8, 9, 10], 10, true); this.character.animations.add ( ‘caída’, [12, 13, 14, 15], 10, true); this.character.animations.add ( ‘dig’, [16, 17, 18], 10, false); this.character.animations.add ( ‘dig_down’, [20, 21, 22], 10, false); this.character.animations.play ( ‘stand’); }, Día: function () {var collideDown = false; this.game.physics.arcade.collide (this.character, this.blocks.self, la función (carácter, bloque) {if (this.dig) return; si (this.cursors.left.isDown) {if (bloque. body.touching.right) {this.dig = this.character.animations.play ( ‘dig’); this.dig.onComplete.addOnce (function () {this.destroyBlock (bloque);}, this);} else {this.character.animations.play ( ‘run’);}} if (this.cursors.right.isDown) {if (block.body.touching.left) {this.dig = this.character.animations.play ( ‘excavación’); this.dig.onComplete.addOnce (function () {this.destroyBlock (bloque);}, this);} else {this.character.animations.play ( ‘run’);}} if (esto .cursors.down.isDown) {if (block.body.touching.up) {this.dig = this.character.animations.play ( ‘dig_down’); this.dig.onComplete.addOnce (function () {esto. destroyBlock (bloque);}, this);} else {this.character.animations.play ( ‘stand’);}} if (block.body.touching.up) {collideDown = true;}}, nula, esto) ; si (this.dig) {return; } If (this.cursors.left.isDown) {this.character.scale.x = -1; this.character.body.velocity.x = -200; } Else if (this.cursors.right.isDown) {this.character.scale.x = 1; this.character.body.velocity.x = 200; } Else {this.character.body.velocity.x = 0; } If (this.cursors.up.isDown) {this.character.body.velocity.y = -300; this.character.animations.play ( ‘volar’); } Else {if (collideDown!) {This.character.animations.play ( ‘caída’); } Else if (this.character.body.velocity.x === 0) {this.character.animations.play ( ‘stand’); }} If (this.checkOverlap (this.character, this.shop)) {if (this.character.getData () userData.gold & gt;. 0) {var newPoints = parseInt (this.points._text) + esto. character.getData () userData.gold.; this.points.setText (newPoints); this.character.getData () userData.gold = 0.; }}}, DestroyBlock: función (bloque) {this.dig = false; interruptor (block.key) {case ‘/rock.png’: break; caso ‘/grass.png’: caso ‘/ground.png’: block.destroy (); descanso; caso ‘/gold.png’:. this.character.getData () userData.gold ++; block.destroy (); descanso; }}, CheckOverlap: function (spriteA, spriteB) {var boundsA = spriteA.getBounds (); var boundsB = spriteB.getBounds (); Phaser.Rectangle.intersects de retorno (boundsA, boundsB); }, StopDig: function () {this.dig = false; }}; 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136 «uso estricto»; window.Digger.state.play = {crear:; this.bg = mt.create ( «bg función () {this.cursors = this.game.input.keyboard.createCursorKeys () «); this.blocks = mt.create (» bloques «); this.shop = mt.create (» tienda «); this.character = mt.create (» carácter «); this.points = mt.create ( «puntos»); this.character.animations.add ( ‘stand’, [0,1,2,3], 10, true); this.character.animations.add ( ‘volar’, [4,5,6 , 7], 10, true); this.character.animations.add ( ‘run’, [8,9,10], 10, true); this.character.animations.add ( ‘caída’, [12,13 , 14,15], 10, true); this.character.animations.add ( ‘dig_down’, [20; ( ‘dig’, [16,17,18], 10, false) this.character.animations.add 21,22], 10, false); this.character.animations.play ( ‘stand’);}, actualizar: function () {varcollideDown = false; Thi s.game.physics.arcade.collide (this.character, this.blocks.self, la función (carácter, bloque) {if (this.dig) return; si (this.cursors.left.isDown) {if (bloque. body.touching.right) {this.dig = this.character.animations.play ( ‘dig’); this.dig.onComplete.addOnce (function () {this.destroyBlock (bloque);}, this);} else {this.character.animations.play ( ‘run’);}} if (this.cursors.right.isDown) {if (block.body.touching.left) {this.dig = this.character.animations.play ( ‘excavación’); this.dig.onComplete.addOnce (function () {this.destroyBlock (bloque);}, this);} else {this.character.animations.play ( ‘run’);}} if (esto .cursors.down.isDown) {if (block.body.touching.up) {this.dig = this.character.animations.play ( ‘dig_down’); this.dig.onComplete.addOnce (function () {esto. destroyBlock (bloque);}, this);} else {this.character.animations.play ( ‘stand’);}} if (block.body.touching.up) {collideDown = true;}}, nula, esto) ; si (this.dig) {return;} if (this.cursors.left.isDown) {this.character.scale.x = -1; this.character.body.velocity.x = -200;} elseif (esto .cursors.right.isDown) {this.charact er.scale.x = 1; this.character.body.velocity.x = 200;} else {this.character.body.velocity.x = 0;} if (this.cursors.up.isDown) {this.character .body.velocity.y = -300; this.character.animations.play ( ‘volar’);} else {if (collideDown!) {this.character.animations.play ( ‘caída’);} elseif (esto. character.body.velocity.x === 0) {this.character.animations.play ( ‘stand’);}} if (this.checkOverlap (this.character, this.shop)) {if (this.character. . getData () userData.gold & gt; 0) {varnewPoints = parseInt (this.points._text) + this.character.getData () userData.gold;. this.points.setText (newPoints); this.character.getData () .userData.gold = 0;}}}, destroyBlock: función (bloque) {this.dig = false; conmutador (block.key) {case ‘/ rock.png’: break; case ‘/ grass.png’: caso ‘/ground.png’:block.destroy (); break; case’ / gold.png ‘: this.character.getData () userData.gold ++; block.destroy (); break;}}, checkOverlap:. función ( spriteA, spriteB) {varboundsA = spriteA.getBounds (); varboundsB = spriteB.getBounds (); returnPhaser.Rectangle.intersects (boundsA, boundsB);}, stopDig: function () {this.dig = false; }};

    proyecto de juego completo está disponible aquí: http://mightyeditor.mightyfingers.com/#pde5-copy

    juego Final aquí: http://mightyeditor.mightyfingers.com/data/projects/pde5/phaser/index.html

    Mensajes relacionados

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *