Reescalar tus sprites sin perder el aspect ratio (Tutorial)

Cuando estamos haciendo un videojuego debemos intentar optimizar y reutilizar recursos lo máximo posible. Una de los puntos a tener en cuenta es con los enemigos y es que simplemente cambiando de color a un sprite y sus atributos, tendremos a un nuevo enemigo listo para usar y de forma muy barata.

Si además queremos aprovechar ese sprite como un boss, podemos simplemente hacerlo más grande pero ojo, queremos dejar de tener en cuenta el aspect ratio?

En este tutorial, os mostraré como reescalar sprites gracias a Pixel Punch, un programita muy útil que seguro que os da unas cuantas ideas.

Si no estáis entendiendo exactamente a lo que me estoy refiriendo, no hay problema, acompañadme tras el salto y os explico junto a un puñado de imágenes los paso a seguir y sus utilidades.

Paletas automatizadas con Gradientifier.

Elegir una buena paleta de colores es tan sencillo o difícil como queramos que lo sea pero, si realmente queremos dar un paso más, hay que arriesgarse a probar combinaciones más arriesgadas.

Ya hablamos del tema en el último tutorial pero no está de más tener alguna herramienta de ayuda que, como mínimo, nos pueda aportar algunas ideas o sirva de punto de partida para empezar nuestro dibujo. Eso es lo que hace Gradientifier.

La aplicación se puede utilizar directamente desde web y aunque puede confundir un poco al principio, en realidad es sencilla de utilizar. Dejad que os explique un poco tras el salto.

La importancia de las paletas de color (tutorial básico)

Ya tenemos nuestro programa configurado, unas nociones de animación de sprites y es hora de dar un pasito más. Es la hora de darle la importancia que se merece a la paleta de colores.

Como descubriremos, en el pixel art hay algunas normas básica para convertir nuestro dibujo plano y aburrido en algo mucho más interesante.

En el siguiente tutorial aprenderemos los parámetros a tener en cuenta con unos ejemplos y unos cuantos enlaces a otros artistas más experimentados que servirán para ampliar conocimientos.

Empezamos!

Probando Arcade Game Studio - Beta (+Tutorial)

Los que me sigan por Twitter ya estarán al tanto de mi cruzada para conseguir una nueva conexión a internet. Como no hay mal que por bien no venga, me ha servido para disponer de algo más de tiempo y poder trastear una beta que esperaba con muchísimas ganas.

Hablo del programa de Bruno R.Marcos, Arcade Game Studio.

En el transcurso del post, veremos las principales pantallas hasta montar un sencillo matamarcianos en un estado muy básico. Eso quiere decir que moveremos la nave, dispararemos y añadiremos algún enemigo para comprender el funcionamiento del programa. 

Adelanto que me fascinan las posibilidades de Arcade Game Studio y espero que este texto anime a más de uno a probar suerte en este mundillo de los juegos arcade. 

Empezamos, después del salto.

Creación de un Sprite para Owlboy (por Simon Anderson)

Una de las mejores formas de aprender en cualquier ámbito, es fijarse en lo que hacen los expertos. Siguiendo la estela de un añejo post en el que Locomalito compartía un 'paso a paso' con un sprite de Maldita Castilla, hoy veremos el proceso de un sprite de manos del dibujante de D-Pad, Simon Anderson.

El juego del que proviene este artwork es el deseado Owlboy del que podéis encontrar una magnífica demo jugable aquí.

Este es el resultado final del proceso que además estará animado.

Es interesante comprobar como de una idea abstracta se consigue un diseño totalmente distinto y en este caso, enfocado al videojuego ya que debe ajustarse a una medidas y ciertas premisas acordadas.

Éste es el gif original que Simon colgó hace unos días.

A continuación vamos a diseccionarlo con mucho cuidado para poder verlo más de cerca. 

Después del salto.

Pyxel Edit, el creador de tilesets.

Uno de los más habituales usos del pixelart es el que tiene relación con el videojuego. Como la mayoría sabrán se suele trabajar con tiles, que son fragmentos cuadriculados que encajan dentro de una rejilla predeterminada.

Aunque se puede utilizar cualquier programa para ello (previamente configurado) como Photoshop, Cosmigo Promotion (de hecho el autor nombra el programa) , etc, e incluso cualquier otro que no tenga opción de visualizar rejilla, en esta ocasión os traigo un prometedor proyecto que nos hará esta tarea mucho más sencilla. 

Se llama Pyxel Edit.

El programa se centra exclusivamente en esta tarea y todas sus herramientas y opciones girarán en torno a la creación de tilesets.

A pesar de ser una Beta es plenamente funcional y sin abusar de opciones de relleno por lo que es muy sencillo de dominar. A continuación os adapto el tutorial que tienen es su web para dominarlo y de paso, conocerlo un poco más a fondo.

Antes de nada puedes descargarlo AQUI totalmente gratis tanto para PC como MAC  y está basado en Adobe Air. Quieres saber más? Después del salto.

D-Fend Reloaded, el emulador de MS-DOS definitivo.

Aunque DosBOX es un emulador relativamente sencillo de utilizar, en ocasiones hay que saber configurarlo  y eso puede echar para atrás a alguno que no lo vea muy claro y/o no tenga ganas de investigar.

Hoy traigo un programa para jugar de manera muy sencilla a nuestros juegos retro de MS-DOS en sistemas actuales, todo autoconfigurado y tan fácil como dar un par de clics.

Esto es D-Fend Reloaded.

Como supondréis, el programa tiene igualmente como base Dosbox pero no tendremos que configurar nada y es tan fácil como arrastrar nuestro juego a la ventana del programa y jugar. En serio, más fácil imposible.

Para ponerlo todavía más sencillo he preparado unos pantallazos con el paso a paso para instalar este gestor de juegos que seguro que os gustará.

Completo, después del salto.

Crear y animar un sprite (Tutorial paso a paso)

Hace lustros aprendimos en Pixels Mil a utilizar Comsigo Promotion para realizar una sencilla animación. El programa a escoger es indiferente pero las bases son siempre las mismas. Así que llega el momento de avanzar un poco más con una animación más elaborada.

En este post crearemos un sprite y crearemos una animación de carrera.

En el último número de Retromaniac expliqué lo mismo pero con un ejemplo más sencillo. Es la mejor manera de poder empezar así que os recomiendo el artículo para realizar algo como lo siguiente.

En ese ejemplo, las piernas son muy cortas para facilitar el animado y no empezar demasiado fuerte, así que esta vez lo complicaremos un poco. Os animo a probarlo o simplemente curiosear en el proceso, después del salto.

Dibujando en MSX (Trail 2)

Aunque ande un poco perdido (lo siento!), lo cierto es que en realidad no paro. En esta ocasión he estado trabajando duro junto a Kotai para la MSXdev'11. 

Al final nos hemos quedado fuera por unos minutos, pero tras el chasco inicial, nos ha servido para poder perfeccionar el juego y lanzarlo con algo más de calma. No hay una fecha concreta, pero sin lugar a dudas ya lo anunciaré por aquí.

Hablo del juego Trail 2.

Hablaré con más calma del juego cuando sea el momento pero en esta ocasión quería explicar como es eso de dibujar para MSX1. 

A modo de tutorial, explicaré los pasos que he seguido para hacer la imagen de portada y las limitaciones que nos encontraremos.

Espero, que aunque no os sirva esa información, disfrutéis viendo el paso a paso, después del salto.

Configurar Gimp para Pixel art : Tutorial

Al ver la buena respuesta del anterior tutorial y viendo de que Gimp era una seria alternativa para muchos,  al final me he decidido a hacer un tutorial básico para usar este programa gratuito para el diseño de píxeles.

A grandes rasgos es muy parecido a Photoshop, sólo que hay que acostumbrarse a él y saber donde buscar las opciones que necesitamos.

Así que lo mejor es ponerse al lío, después del salto.

Configurar Photoshop para Pixel Art : Tutorial

Varias personas se han puesto en contacto conmigo a través de pixelsmil@gmail.com para pedir algunos consejos y embarcarse en este mundo fantástico de baja resolución.  Animo a los que lean esto para invitarles a hacer lo mismo, y a los que ya estén en ello, a seguir investigando sobre el tema.

Antes de nada, aclarar que no llevo demasiado tiempo en este mundillo y probablemente algunas cosas mencionadas o métodos sean más que discutibles. Decir, que estoy abierto a escuchar y a las críticas constructivas.

La primera pregunta siempre es la misma, "Que programa uso?". Y es que en realidad hay un buen puñado de alternativas como Gimp, Photoshop, Paint.net, Cosmigo Pro Motion, Photobie, Rendera ...

Sin duda alguna, el primer programa que se debería utilizar para empezar, a mi parecer, es Ms Paint (el Paint de toda la vida, vamos) ya que es muy sencillo de utilizar y trabaja a nivel pixel y sin antialiasing de por medio. Además no necesita una configuración previa.

Pero vayamos por partes, hoy empezaré por aquellos que quieran utilizar Photoshop para su andadura pixel.

Una vez acabado el tutorial, tendremos el programa enfocado al diseño pixel. Así que si te interesa, te invito a pasar después del salto para ver como hacerlo.

Tus imágenes con aspecto Game Boy (Tutorial)

Después del fabuloso C64 Yourself, somos muchos los que ya no podemos dejar de utilizarlo. Es genial ver nuestras fotos pixelizadas al momento de una manera tan sencilla y automática.

Pero, existen otros filtros retro? Que yo conozca, ninguno tan automático como el anterior, pero siguiendo unos sencillos pasos, podremos recrearlos nosotros mismos con Photoshop. (Gracias por la idea Roy)

En este tutorial, modificaremos una imagen de Joker. Este es el resultado final:

Podría pasar perfectamente como una imagen de Game boy verdad? Todo lo que necesitamos (además de un mínimo de ganas) es la paleta de 4 tonos verdes y una buena imagen.

Es un tutorial MUY sencillo. Os animo a probarlo.

Completo después del salto.

Tutorial : Añade Scanlines a tus imágenes

Algo que se ha perdido al pasar a nuestros monitores TFT, es el efecto 'rayado' de las antiguas pantallas conocido concretamente como Scanline.

Para algunos (en los que me me incluyo) el jugar a juegos antiguos sin ese efecto es un lujo pero bien es cierto que la mejor manera de recrear la sensación de jugar a los clásicos es con la opción de Scanline activada (que muchos emuladores traen consigo)

Hoy modificaremos una imagen cualquiera para añadirle ese efecto tan auténtico.

La imagen elegida es de Monkey Island (como no...). Este es el resultado:

Este es el resultado del proceso.

Para verlo con mayor claridad, lo mejor es ver la comparativa con algo de zoom:

Pincha encima para verla en su tamaño real

En sencillos pasos y usando Photoshop, se puede simular el efecto en la imagen que queramos.

Tutorial paso a paso en el interior:

Aprendiendo Pixel Art : Tutorial de introducción

Últimamente me estoy interesando por el mundo del pixel art en vista isométrica. Un arte que aunque laborioso no me parecía demasiado difícil como para aprenderlo en corto plazo, pero como todo, es un mundo y es mucho más complicado de lo que parece.

Este es mi primer dibujo después de seguir varios tutoriales y vídeos extraídos de la red. Me ha llevado unos días acabarlo.

En este caso la transparencia de los cristales no es real sino que he buscado los tonos necesarios para recrear artificialmente ese efecto. Otra opción más rápida es hacer los cristales opacos y con reflejos o usar Photoshop para crear una capa traslúcida real.

Si te apetece aprender los fundamentos básicos (o tienes curiosidad por el asunto), te invito que pases a ver unos sencillos pasos para aprender lo básico y poder empezar a hacer figuras sencillas como esta:

Te animas? 

Continúa después del salto.

Pixels Shots: Tutorial paso a paso

A estas alturas todo el mundo conocerá el trabajo de Aled Lewis por sus imágenes 8 biteras con aspecto añejo y vintage (como me gusta usar esa palabra). Podéis ver unas cuantas aquí.

Un artista con muy buenas ocurrencias, que es lo más importante.

Pues bien, me he puesto manos a la obra para recrear una imagen de características parecidas y explicar paso a paso como construirla.

Aquí esta:

Doom Vs 'The Duke'

Quieres probar? Sigue el tutorial después del salto.

Tutorial: Aprendiendo a animar en 2d ( en 10 pasos)

Para el que tenga alguna inquietud o mera curiosidad por la animación de la vieja escuela, aquí traigo unos sencillos 10 pasos para empezar a crear sprites animados.

En este tutorial voy a explicar las bases para crear una sencilla animación frame a frame.

Desde descargar el software hasta el resultado final.

Resultado final

Existen diversos programas para ello pero el que más me ha convencido es el Cosmigo Promotion que además puede descargarse mínimamente capado y se puede usar hasta 30 dias antes de que prohíba guardar nuestros proyectos. Más que suficiente.

Este es su aspecto:

Si aún sigues teniendo curiosidad y te animas, después del salto está toda la información necesaria.

Multiplayer con el Emulador de Genesis

O Megadrive como se conoce en estos lares.

Seguro que muchos ya lo sabréis pero para mi ha sido un descubrimiento, no solo por lo que comporta sino por lo fácil que resulta ser.

En poquísimos pasos explicaré desde donde descargar el emulador hasta como jugar con tu vecino al que también le gusta el Bonanza Bros.

Este es el aspecto del emulador GENS

MUY FÁCIL.

Los pasos a seguir después del salto

ScummVM para Android

"Quiero un iphone" repetía una y otra vez mirando mi viejo Nokia... Y la verdad es que en lo más profundo lo sigo queriendo, pero no estaba dispuesto a gastarme tanto dinero en él. Así que ahora tengo mi HTC Legend con Android que la verdad es que me ha alegrado la existencia de igual manera (exageraoo!)

Hoy traigo el manual para instalar correctamente Scummvm para sistemas Android:

En realidad es muy sencillo, pero como sé que muchas veces no se hacen cosas por perrería, a continuación del salto explico como instalarlo de manera sencilla.

Portada de videojuego Retro

Chris Spooner es un diseñador que tiene un blog bastante concurrido en el que muestra sus técnicas con jugosos tutoriales de diferente índole.

Pero a mí el que me ha llamado la Atención es el siguiente; Una portada del típico juego de los 80 (que como diría mi amigo Zervio, "Que daño hicieron" (pero que recuerdos... ))

Genial verdad? El tutorial explica paso a paso cómo hacerlo (añado link al final del post).

Pero claro, no podía perder la oportunidad de hacer  intentar hacer mi propia carátula de videojuego retro. Que cómo ha quedado? no te asustes y pincha al salto de página: