Hay un montón de sitios donde se pueden encontrar imágenes gratuitas para sus juegos, pero a veces puede ser difícil encontrar exactamente lo que estás buscando. ¿Y si pudiera crear sus propias imágenes del juego Phaser desde cero, incluso si no tiene habilidades artísticas? De hecho, ¿no sería estupendo si pudiera crear sprites del juego y atlas textura basados ​​en objetos, personas y animales de su propia vida? Eso es exactamente lo que vamos a estar cubriendo en este tutorial!

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 se sienten libres para comprobar Zenva En línea En este supuesto The Complete el juego para móvil Curso de Desarrollo – Construir 15 juegos.

Tutorial archivos de activos

Puede descargar los archivos de código fuente tutorial aquí. Todos los archivos de proyecto se encuentran en la carpeta principal. La carpeta contiene archivos activos intermedios adicionales que se utilizaron durante el proceso de creación de los sprites del juego.

Tutorial objetivos

En este tutorial se explicará cómo crear versiones de dibujos animados a partir de imágenes reales para su uso dentro de cualquier juego, con un enfoque en Phaser.

1. Aprender a recortar una parte de una foto y limpiarlo en preparación para la creación de una versión de dibujos animados para su uso en un juego.
2. Aprende a crear una versión cartoonized de una foto.
3. Aprender lo que es una textura atlas y cómo crear uno usando TexturePacker.
4. Aprender cómo cargar una textura en Atlas Phaser y lo utilizan para crear animaciones.

Tutorial requisitos

  • Conocimientos básicos de JavaScript puede ser útil para la parte Phaser del tutorial.
  • Descargar e instalar el software de edición fotográfica GIMP libre.
  • Descargar e instalar el software de imagen vectorial Inkscape libre. Si utiliza Mac OS X, tendrá que descargar e instalar XQuartz primero.
  • Descargar Phaser de ella de Github de recompra. Puede clonar o bien la cesión temporal o descargar el archivo ZIP.
  • Descargar e instalar TexturePacker. Este es el único software que va a utilizar, que no es libre, pero se puede utilizar para probar sus atlas de texturas y animaciones de forma gratuita.

    Encuentra una imagen

    Como nos estamos centrando en la creación de imágenes para este tutorial, vamos a empezar con una imagen. Por mi último tutorial, que quería crear algunas animaciones perro. No pude encontrar libres fotos del perro que necesitaba, y no tengo absolutamente ninguna capacidades de dibujo artístico, por lo que mi hermano me dio un par de fotos. Me centraré en sólo una de las fotos, porque era el más difícil de limpiar, y cubre casi todo el procesamiento que puede venir a través.

    max-original

    Como se puede ver, el perro (Max) en esta foto no sólo es sesgada, pero uno de sus pies está completamente fuera del marco, y que lleva puesto un arnés! No se preocupe, podemos solucionar todos estos problemas, y no es tan difícil como usted puede pensar.

    Recortar la imagen con GIMP

    En primer lugar, tenemos que reducir al máximo el nivel de la foto. Si abrimos la foto en GIMP, podemos utilizar la herramienta de selección libre de la caja de herramientas para seleccionar nuestra forma. Basta con empezar en cualquier lugar a lo largo del borde de la forma que desea retirarse y continuar haciendo clic a lo largo de todo el perímetro. Terminar la forma haciendo clic en el punto de partida.

    cuadro delimitador

    Si esto no crea un área de selección alrededor del objeto (que se mueve líneas de puntos), compruebe el “modo” en la sección “Selección libre” de las opciones de la herramienta (que se puede encontrar en Windows -> Dockable cuadros de diálogo, si es no está abierto). Usted tendrá que seleccionar un modo que, o bien sustituye a la selección actual o se agrega a él.

    Una vez que se selecciona el objeto, copiarlo (Editar -> Copiar). Crear un nuevo archivo de GIMP (Archivo -> Nuevo). En el cuadro de diálogo Imagen crear una nueva, seleccione Opciones avanzadas -> mete -> Transparencia, a continuación, pulse OK. El tamaño del nuevo archivo no importa, siempre y cuando sea más grande que el objeto que está pegando (se puede arreglar con la imagen -> Canvas Size). Pegar la selección en el nuevo archivo. Aquí es donde se puede conseguir difícil, pero que en realidad no tiene que hacer más de lo necesario. Ya que será girar la foto en un dibujo pequeño, que no tiene que ser perfecto.

    nuevo-image-gimp

    Editar la imagen en GIMP

    El problema más evidente con la foto es que es sesgada. Todo lo que tenemos que hacer para solucionar este problema es elegir la herramienta Rotar en la caja de herramientas y comenzar a girar la imagen en la pantalla. Un cuadro de diálogo aparecerá, y usted puede simplemente moverse a un lado para que pueda ver lo que está haciendo. Una vez que las dos patas delanteras parecen estar planos sobre el suelo (teniendo en cuenta el pie que está fuera del marco, que vamos a arreglar más adelante), hemos terminado de girar.

    imagen-rotación

    El siguiente problema es el arnés. Esto es relativamente fácil de solucionar mediante el uso de la herramienta de clonación de la caja de herramientas. Una vez seleccionada la herramienta, y el cursor se encuentra sobre la imagen, aparecerá un mensaje que le indica que tecla hay que pulsar (que es diferente para cada sistema operativo) con el fin de establecer una fuente. Sólo tienes que pulsar esa tecla y haga clic en algunas de las pieles al lado del arnés.

    imagen-clon

    Una vez que se establece la fuente, empiece a colorear sobre el arnés. Usted tendrá que tener la parte que está colorante en línea con la fuente por lo que no recibe demasiados artefactos. Seleccione una nueva fuente cada vez que mueva a una sección que necesita un color diferente. ¿Quieres probar para que coincida con la parte que está coloración a la piel que está más cerca que lo que se verá lo más fluida posible.

    clon-acabado

    Sorprendentemente, podemos usar el mismo truco herramienta de clonación para llenar los espacios en blanco. Por ejemplo, también se puede utilizar la herramienta de clonación de relleno en el pie que falta que estaba fuera del marco!

    También quieren poner la imagen en modo Max se enfrenta en la otra dirección. Eso es fácil, como se puede ver a continuación:

    image-flip

    Vea cómo el pie de atrás parece demasiado lejos para la perspectiva que estamos tratando de lograr? Todo lo que hice para que se cortó el pie de atrás va a basar la herramienta de selección rectangular, crearon una nueva capa en la ventana de capas (Windows -> Dockable Diálogos si no está ya allí), y luego pegar el pie. Entonces me moví el pie hacia abajo hasta que tuve la perspectiva que quería, se hace clic de nuevo en la capa principal, y se utiliza la herramienta de clonar para llenar el vacío. También copié algunos detalles de la otra pierna, aunque eso no es del todo necesario. También he movido las capas alrededor hasta que los tenía en un orden que era más fácil trabajar con ellos.

    Copy-pierna-partes

    Crea un nuevo fotograma de la animación

    Una vez que estamos contentos con la primera imagen, tendremos que decidir cómo queremos animarlo. He creado una animación muy simple con sólo dos marcos. Decidí que sería más fácil de utilizar la foto resultante de las ediciones ya realizadas como el marco de “paso”, a continuación, retire las patas traseras para crear un marco donde Max parece estar de pie derecho.

    Con el fin de hacer esto, he hecho una copia de la pata delantera de Max, pegado en una nueva capa, gira que se alargó, y utiliza la herramienta de clonación para llenar las áreas problemáticas (similar a lo que hicimos con la parte posterior pie. también he utilizado la herramienta Borrador de borrado parte del pie por lo que no se vería como si tuviera dos de los mismos pies.

    extender la pierna

    En este punto, seleccionamos la imagen -> recorte automático de imágenes, para que sea el tamaño exacto del perro editado. A continuación, se guarda el archivo. Seleccione Archivo -> Exportar, elija GIF como el tipo de archivo y guardarlo. Ahora seleccione Archivo -> Guardar como para crear una copia del archivo. Este será nuestro otro fotograma de la animación.

    Ahora podemos simplemente borrar todas las capas en la ventana de capas, excepto nuestra capa principal. También queremos utilizar la herramienta Borrador para eliminar esa pierna hacia atrás. Guarde el nuevo archivo. Una vez más, seleccione Archivo -> Exportar para exportar nuestro nuevo GIF. Ahora tenemos nuestro otro marco!

    fotos Convertir a los dibujos animados con Inkscape

    Abre uno de los archivos GIF en Inkscape. Está bien para mantener la configuración predeterminada. Haga clic en la imagen de la página para seleccionarla, de modo que tenga un cuadro delimitador alrededor de esta manera:

    seleccionado inkscape--box

    A continuación, seleccione Path -> Trazar mapa de bits. Seleccione “colores”, a continuación, active la casilla “Eliminar fondo”. Cuanto mayor sea el número en el menú desplegable “análisis”, más colores que va a utilizar, y cuanto más cerca el vector será la de la foto original. Probar diferentes opciones y haga clic en “Update” para obtener una vista previa hasta que esté satisfecho con el resultado, a continuación, pulse OK. Ahora tiene una versión de dibujos animados de vectores de su foto!

    cartoonify

    Para exportar el nuevo vector en el formato necesario para el juego, haga clic en la imagen que desea seleccionar (por lo que tiene la caja alrededor de ella), y luego ir a Archivo -> Exportar imágenes PNG. Se le presentará con un gran cuadro de la derecha. Haga clic en la pestaña de “selección” en la parte superior de la caja, a continuación, establecer el ancho final y la altura que desea para la imagen en su juego (es probable que desee una imagen bastante pequeño, a menos que esto sirva como imagen de fondo). Haga clic en “Exportar como” para elegir la ubicación, haga clic en “Guardar”. Tenga en cuenta que esto no guardar la imagen! más hacia abajo en el cuadro es un botón que dice “Exportar”. Al hacer clic en este botón se completará la exportación final de la imagen.

    exportación-png

    Ahora puede hacer lo mismo con la otra foto GIF ha exportado desde GIMP. Otra opción es crear otro marco o marcos con Inkscape. Esto depende de lo que quiere hacer con su animación. Una vez que haya convertido su foto a un vector, haga clic en “Editar caminos por los nodos” de la herramienta. Cuando se mueve el cursor sobre la imagen, verá todo tipo de líneas:

    caminos

    Si hace clic en la imagen, que terminará con muchos puntos que se pueden mover alrededor. Dependiendo de la complejidad de la imagen y qué tipo de cambios que desea realizar en cada cuadro, moviéndose alrededor de estos puntos puede ser la ruta más fácil a la creación de cuadros de animación adicionales.

    puntos

    Crea una textura atlas con TexturePacker

    Una textura Atlas es un gran “spritesheet” que consiste en todos los sprites (o imágenes) que serán utilizados en un juego. El spritesheet se acompaña de un archivo de datos que detalla la ubicación exacta y el tamaño de cada sprite, junto con las teclas (etiquetas) que puede ser utilizado para hacer referencia a cada sprite.

    TexturePacker hace que sea extremadamente fácil de añadir todos su juego de imágenes y cuadros de animación en un único archivo spritesheet, siempre y cuando siga un par de reglas importantes. El primer paso importante es elegir una opción específica Phaser. En este caso, elegimos “Phaser (JSONHash)” como el formato de archivo de datos al crear un nuevo proyecto TexturePacker. Una vez que haga clic en “Crear proyecto”, todo es sencillo.

    archivo de datos

    o bien puede arrastrar archivos o carpetas individuales, o utilizar los botones “Agregar sprites” o “Añadir carpeta inteligente” para elegir las imágenes que va a utilizar en su juego. Esto le permite organizar todas sus imágenes. Si tiene varios personajes que están animados con muchas tramas, por ejemplo, puede crear carpetas para cada carácter que contiene imágenes de animación para ese personaje, a continuación, arrastre toda la carpeta principal a la TexturePacker. Los cuadros de animación pueden contener una convención de nombres que hará que la adición de los marcos para el juego más intuitivo (TexturePacker utiliza automáticamente el nombre del archivo como la clave que va a utilizar para hacer referencia al marco en el juego).

    La segunda regla importante al crear el archivo es uno que es probable que nunca encontrará a menos que intenta utilizar el mismo archivo de imagen en múltiples marcos de juego. Si se va a elegir el genérico “JSON (Hash)” para el tipo de archivo de datos en lugar de la opción Phaser específica, TexturePacker crearía spritesheets más pequeños mediante la rotación de algunas de las imágenes en la hoja. El problema es que Phaser no es compatible con la rotación. Con el fin de solucionar el problema, debe hacer clic en la opción “Mostrar avanzado” que aparece en la sección “Diseño” de la configuración del cuadro de la derecha. Si no seleccionas “Permitir rotación” se solucionará el problema.

    no-rotación

    Todo lo que queda es para establecer la ubicación y el nombre del “archivo de datos” y “Archivo de textura” en la configuración del cuadro de la derecha. Al hacer clic en el botón selector de archivos (la pequeña imagen de la carpeta) al lado de cada cuadro le permitirá buscar la ubicación de su proyecto y definir el nombre que desee en el cuadro “Guardar como”. En la mayoría de los casos, no será necesario tocar ninguna otra configuración. Una vez que haya terminado, haga clic en el botón “Publicar hoja de sprites” y ya está!

    set-ubicación-datos

    Si está utilizando la versión gratuita de TexturePacker, parte de sus gráficos se completará con un color rojo sólido con texto blanco diciendo, “tiene que adquirir una licencia para usar funciones profesionales.” Está bien por ahora, debido a que los sprites conservan su forma, lo que significa que todavía puede utilizar el atlas de texturas para probar el proyecto, como he mostrado a continuación:

    max-animada-TexturePacker

    Carga de los sprites en Phaser

    El proyecto Phaser comienza en una nueva carpeta que contiene un archivo de índice HTML, el archivo javascript Phaser, y los archivos de datos JSON spritesheet y que ha creado en TexturePacker. Phaser puede copiar desde el directorio “acumulación” de la Phaser descargado zip o repositorio clonado.

    Estamos creando un proyecto Phaser extremadamente simple con el fin de poner a prueba nuestros atlas de textura, por lo que nuestra estructura de archivos va a ser mínima. Normalmente, crearíamos un juego con los estados y organizar varios archivos en carpetas adicionales. Para obtener más información sobre los estados y la mejor manera de crear un juego completo puede consultarse en este tutorial Phaser. Por ahora, el siguiente código entra en el archivo index.html.
    Aprender el desarrollo del juego en ZENVA.com </ title> <script src = "phaser.min.js"> </ script> </ head> <body> <! - incluir el principal archivo de juego -> <script src = "max-animation.js"> </ script> </ body> </ html> 123456789101112 <! DOCTYPE html > <html> <head> <meta charset = "UTF-8" /> <title> Aprender el desarrollo del juego en ZENVA.com </ title> <script src = "phaser.min.js"> </ script> </ head> <body> <! - includethemaingamefile -> <script src = "max-animation.js"> </ script> </ body> </ html> </p> <p> Nuestro juego es en realidad inició en el max-animación Js archivo y el marco Phaser se incluye con el archivo phaser.min.js. A los efectos de poner a prueba nuestras imágenes, sólo vamos a hacer una prueba muy simple dentro de un solo archivo javascript en lugar de utilizar un conjunto de archivos de estado. </ P><br /> <H2> Prueba del animaciones </ h2><br /> <P> Aquí está el archivo JavaScript básico que más se necesita para probar nuestras animaciones en Phaser: </ p><br /> window.onload = function () {var max; var = nuevo juego Phaser.Game (800, 400, Phaser.CANVAS '', {precarga: precarga, crear: crear, actualizar: update}); función de precarga () {// Cargar el JSON de TexturePacker game.load.atlasJSONHash ( 'max', 'max.png', 'max.json'); }; función de crear () {// Cargar el sprite max inicial = game.add.sprite (0, 180, 'max', 'max-paso 1'); // crear la animación para caminar usando los nombres de los marcos que queremos de max.json max.animations.add ( 'paseo', [ 'max-paso 1', 'max-paso 2'], 10, verdadero, falso); // mismo para el max.animations.add animación de excavación ( 'dig', [ 'max-DIG1', 'max-DIG2'], 10, verdadero, falso); // poner en marcha el max.animations.play animación paseo ( 'paseo'); } Actualización de la función () {// vez Max camina un poco, tienen que deje de cavar y si (max.x> = 400) {max.x = 400; max.animations.play ( 'dig'); } Else {// de lo contrario, tiene que se mueva hacia la derecha max.x + = 3; }}}; 12345678910111213141516171819202122232425262728293031323334353637383940414243window.onload = function () {VarMax; vargame = newPhaser.Game (800400, Phaser.CANVAS, '', {precarga: precarga, crear: crear, actualizar: update}); functionpreload () {// cargar el JSON de TexturePackergame.load.atlasJSONHash ( 'max', 'max.png', 'max.json');}; functioncreate () {// cargar el spritemax = game.add.sprite (0180, 'max inicial ', 'max-paso 1'); // crear la animación para caminar usando los nombres de los marcos que queremos de max.jsonmax.animations.add ( 'paseo', [ 'max-paso 1', 'max-paso 2'], 10 , verdadero, falso); // mismo para el animationmax.animations.add excavación ( 'dig', [ 'max-dig1', 'max-DIG2'], 10, verdadero, falso); // iniciar el paseo animationmax .animations.play ( 'paseo');} functionupdate () {// vez Max camina un poco, tener detenerse y digif (max.x> = 400) {max.x = 400; max.animations.play (' dig ');} else {// de lo contrario, tiene que se mueva a la rightmax.x + = 3;}}}; </p> <p> la variable ‘max’ es nuestro principal personaje en el juego. La siguiente sentencia crea nuestro lienzo juego. Para obtener más información sobre el estado de la creación del juego y la opción Phaser.CANVAS, por favor ver mi tutorial anterior. </ P><br /> <P> A continuación se produce tres funciones predefinidas en Phaser, y tendrá que ser ampliado con el fin de hacer el trabajo de prueba. La función de precarga es donde todas las imágenes, sonidos y otros activos deben ser cargados para que estén disponibles antes de que el juego comienza en realidad. </ P><br /> <P> En nuestro caso, tenemos una sola imagen con un archivo de datos, que debe ser cargado de acuerdo con el tipo de archivo de datos que hemos creado en TexturePacker. Debemos usar la función de carga atlasJSONHash spritesheet, ya que era la opción seleccionamos en TexturePacker. El primer argumento es la clave que se utilizará para hacer referencia a los atlas de la textura y crear sprites. </ P><br /> <P> La función Crear es donde creamos todos los sprites del juego y otras cosas que se utilizarán durante todo el partido. Comenzamos creando nuestro sprite de carácter inicial. Los primeros dos argumentos son la x e y ubicación para colocar el sprite, que comienza en (0, 0) en la esquina superior izquierda de la lona. El siguiente argumento es la clave hace referencia a la textura del atlas cargamos en la función de precarga. Las últimas referencias argumento uno de los marcos que figuran en el archivo de textura atlas JSON. En la mayoría de los casos, este será el nombre del archivo de imagen cargada en TexturePacker, pero también se puede cambiar manualmente los nombres en el archivo JSON. </ P><br /> <P> El propósito de una textura atlas es cargar un archivo de imagen pequeña que contiene todos los sprites que necesita para su juego. De lo contrario, tendría que cargar varios archivos, que pueden ralentizar el tiempo de carga. Esto significa que puede incluir todas las imágenes que necesita para el juego usando TexturePacker, incluyendo la imagen de fondo y otras imágenes estáticas. Por ejemplo, si se va a comentar todo lo que después la siguiente declaración en el método de “crear”, que se quedaría sólo la primera imagen estática con: </ p><br /> max = game.add.sprite (0, 180, 'max', 'max-paso 1'); 1max = game.add.sprite (0180, 'max', 'max-paso 1'); </p> <p> <img src = "http://fymm-rpg.net/wp-content/uploads/placeholder-798x398.png" alt = "max-estática" /> </ p><br /> <P> Las dos afirmaciones siguientes creará las animaciones que se pueden jugar en cualquier momento durante el juego. Si hubiéramos utilizado un spritesheet sencilla en lugar de que una textura atlas, habríamos cargado muchos spritesheets separados para cada animación, añadido cada sprite separado, luego creó una animación para cada uno. Mi Phaser anterior tutorial trata este método. </ P><br /> max.animations.add ( 'pie', [ 'max-paso 1', 'max-step2'], 10, verdadero, falso); max.animations.add ( 'dig', [ 'max-DIG1', 'max-DIG2'], 10, verdadero, falso); 123456789max.animations.add ( 'pie', [ 'max-paso 1', 'max -step2 '], 10, verdadero, falso); max.animations.add (' dig', [ 'max-DIG1', 'max-DIG2'], 10, verdadero, falso); </p> <p> En este caso, tenemos que hacer referencia a cada fotograma en el archivo de datos de atlas de textura, como lo hicimos con el único sprite. El primer argumento es la clave que va a utilizar para iniciar la animación, y el siguiente argumento es una matriz haciendo referencia a cada fotograma del archivo de datos. El siguiente argumento es la velocidad de fotogramas por segundo (fps). Para obtener más información sobre fps, consulte este otro tutorial Phaser. El siguiente argumento es cierto si queremos que la animación se repita, y tener “falso” en los últimos medios argumento de que los marcos mencionados son cadenas ( “verdadero” significaría que una lista de marcos como números, donde cada número se corresponde con el orden en que aparece en un spritesheet). </ p><br /> <P> Por último, comenzamos una de las animaciones mediante el uso de la función de reproducción, y que pasa en la clave que crea que las referencias de la animación a pie. Si nos vamos a detener aquí, nuestro personaje parece más que en la pantalla y animado, pero permanece en la misma posición. Que se parece un poco raro, por lo que utilizar la función de “actualización” para hacer que nuestra animación hacen algo interesante. </ P><br /> max.animations.play ( 'paseo'); 1max.animations.play ( 'paseo'); </p> <p> El método de actualización es llamado automáticamente “muchas veces por segundo.” Por lo tanto, este es el lugar donde ocurre el juego principal del juego, porque lo hacemos todos nuestros ensayos aquí para ver cuando las cosas cambian. Podemos hacer todo tipo de cosas divertidas con la física del juego, pero ya que sólo estamos probando nuestros atlas de textura, estamos en lugar de ir a continuamente añadir a la ubicación “x” de nuestro personaje principal, por lo que parece ser caminar por la pantalla. < / p><br /> max.x + = 3; </p> <p> Con el fin de probar la otra animación que he añadido al atlas de textura, me cambio max.x a una variable constante cuando a mitad de él a través de la pantalla, a continuación, cambiar la animación simplemente jugando el animación “empuje”. En lugar de hacer las cosas más complejas mediante la adición de temporizadores y continuando la animación, la página debe ser recargada si quieres volver a verla. Mi anterior tutorial se explica cómo agregar contadores de tiempo para permitir una animación a correr por un corto período de tiempo, y luego seguir adelante. </ P><br /> si (max.x> = 400) {max.x = 400; max.animations.play ( 'excavación');} 1234if (max.x> = 400) {max.x = 400; max.animations.play ( 'excavación');} </p> <p> Y ahí lo tenemos! Que haya probado su atlas de textura, y ahora está listo para ser utilizado en un juego completo! </ P><br /> <H2> Recursos adicionales </ h2><br /> <P> Existen otros tipos de juego de imágenes que se pueden agregar a sus juegos, y muchas maneras de agregar varias imágenes en Phaser. Para una discusión completa de las baldosas para crear niveles de juego, por favor ver este tutorial baldosa. También existe este tutorial Phaser la que se explica de una manera diferente a los niveles de juego de las baldosas. También puede comprobar fuera de este tutorial, que discute una manera interesante añadir sprites y animación. Por último, mis anteriores Phaser tutorial explica la manera de crear animaciones de sprites al azar para un juego infinitamente desplazamiento. </ P><br /> <H2> Deja un comentario! </ H2><br /> <P> ¿Qué te pareció este tutorial? ¿Tiene usted alguna pregunta? ¿Necesita más ayuda? ¿Qué más le gusta escribir sobre mí? Por favor, hágamelo saber dejando un comentario. </ P><br /> <H3> Mensajes relacionados </ h3><br /> <Img src = "http://fymm-rpg.net/wp-content/uploads/placeholder-554x104.png" alt = "" /> <img src = "http://fymm-rpg.net/wp- content / uploads / marcador de posición-150x150.png" alt = "> <img src = "http://fymm-rpg.net/wp-content/uploads/placeholder-554x104.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="/295-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='295' 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>