MrLunfardo

La herramienta: Link a la Web Adobe Photoshop es un editor de gráficos rasterizados desarrollado por Adobe Systems Incorporated. Usado principalmente para el retoque de fotografías y gráficos, su nombre en español significa literalmente "taller de fotos". La versión CS2 de la Suite fue liberada al público de manera gratuita el 1/07/13. Su descarga es libre y gratuita de manera oficial por lo que este Post no viola derechos de autor al ofrecer un link a la página oficial del propietario del software con su respectiva autoría. Configuración especial de Photoshop: Uno de los pasos más importantes es cambiar el tipo de interpolación de imagen que por defecto estará en "Bicubic". Al cambiar el tamaño de una imagen Photoshop intentará reescalarla utilizando distintos métodos. El modo Bicubic intentará suavizar la pérdida de información de la imagen pero nos dará un aspecto emborronado, mientras que el método Nearest Neighbor nos dejará la imagen pixelada con las aristas sin disimular. Para entenderlo mejor, una muestra gráfica: Para el Pixel Art necesitamos que no se nos suavicen los bordes y que cuando utilicemos las herramientas de selección, el antialiasing no nos juegue malas pasadas por lo que iremos al menú "Edit > Preferences > General" y cambiaremos la interpolación a "Nearest Neighbor". Creacion paso a paso del dibujo en Pixel Art: Empecemos creando un nuevo documento en Photoshop en "File > New...". Vamos a trabajar a nivel de pixel por lo que nuestro documento no necesita ser muy grande, pero lo importante de verdad es la resolución. Para ello la fijaremos en 72 dpi como se muestra en la imagen. El fondo podemos dejarlo trasparente, pero en este ejemplo lo haremos en blanco (luego podemos cambiarle el color) para apreciar mejor los detalles. Cuando ya lleves un tiempo dibujando probablemente no necesitarás una cuadrícula, pero para empezar es lo recomendable, sobretodo si quieres practicar copiando sprites ajenos (que es una muy buena manera de habituarse con el tema). Para ello iremos a "Edit > Preferences > Grides, grid & slices". Y veremos una pantalla como esta. Lo configuramos como en la imagen y damos OK. En el apartado Grid (o rejilla), lo configuraremos como se muestra en la imagen. De esta forma, la rejilla se ajustará correctamente y tendremos una guía para dibujar. Tenemos la rejilla configurada pero para mostrarla en pantalla la activaremos en el menú "View > Show > Grid". Se nos mostrará en pantalla un lienzo cuadriculado como éste (recuerden ampliar con Zoom si es necesario). Ahora estamos listos para comenzar a dibujar, seleccionaremos la herramienta lápiz a tamaño 1, y nos dispondremos a dibujar lo que queramos, en mi caso al mítico Mario Bros tomando como referencia el sprite original. Ahora lo primero que se debe hacer para comenzar es abrir el archivo con Photoshop. No te preocupes, no se borralá el lienzo que creamos se abrirá en el mismo programa y quedará así. Algo muy importante a la hora de dibujar el sprite es elegir el tamaño y la forma de la herramienta "Lápiz" que se selecciona de esta manera. Colocamos que la forma de la brocha sea Cuadrada y el tamaño sea 4 en mi caso (pueden elegir distintos tamaños depende de lo que quieran hacer). Ahora lo único que queda es empezar a pintar. Podemos ayudarnos (es necesario, obviamente) con las herramientas de "Gotero" y "Borrador" para poder copiar los colores y borrar respectivamente. Para la herramienta de "Borrador" es necesario que sea también cuadrada del mismo tamaño que nuestro Lápiz y lo configuramos de la misma manera. Comenzamos a pintar hasta terminar el proceso y ver los resultado, en mi caso, el dibujo quedó así. ¡Luego lo guardas donde quieres y puedes usarlo para lo que quieras! En el caso que quieras que quieras guardar la imagen con un tamaño mayor a 100 píxeles, lo único que tienes que hacer es ir a "Image > Image Size..." y cambiar los valores. ¡Y eso es todo, ya eres un principiante en el mundo del Pixel Art! Quiero dedicar este post a mi amigo virtual @Sebasthian1989, un capo en el modelado 3D con excelentes post al respecto, denle un saludo y un follow de mi parte. Aclaración: Todo el material publicado en el post forma parte de la entrada en el blog Configurar Photoshop para Pixel Art publicado por Toni de Pixels Mil, sus méritos a él. GIF GIF

La herramienta: Link a la Web ARGS es una herramienta para crear juegos con el aspecto y la sensación de las máquinas arcade de los años 80. Incluye generos Run'n'Gun, Shooters vericales y horizontales o Plataformas, por lo que podrás hacer juegos similares a Pac-Man, Commando, 1942, Gauntlet o Ghosts'n' Goblins, todo con tus propios sprites, música y sonidos. Es libre y gratuita. Tutorial e Introducción: Ejecutamos el programa y nos encontramos con esta ventana: El aspecto retro del programa y esas fuentes pixeladas recuerdan a una de estas utilidades de MS-DOS o Amiga. Nada mejor para crear un clásico arcade. Lo primero que tenemos que hacer es escoger el tipo de juego que queremos hacer: Prácticamente podemos crear cualquier juego arcade o adaptar alguna de las plantillas a nuestro gusto. El programa incluye algunos ejemplos para hacernos más fácil la elección. Lo cierto es que las ideas se amontonan, la imaginación se dispara y se hace muy dificil escoger sólo una. Pero como de lo que se trata es de familiarizarse, lo mejor es empezar por algo sencillo. Haremos un Shooter vertical emulando a un sencillo Space Invaders. Ésta es la pantalla principal con las fuentes a la derecha que podemos cambiar entre varias tipografías retro, y la zona de la izquierda donde deberemos ajustar algunas de las opciones más generales del juego. Desde el nombre del juego al número de vidas o sonidos en elementos tan principales como la pantalla de Game Over. Tenemos hasta 6 pantallas distintas en las que nos moveremos con los números del teclado correspondientes. Actores: Como hay que empezar por algún sitio, lo haremos por la creación de nuestro personaje principal, en este caso una nave espacial. Elegimos nuestro programa favorito, en mi caso Cosmigo promotion como siempre, y dibujamos nuestra nave. Recomiendo dividir el lienzo en una cuadrícula de por ejemplo 16x16 píxeles y de esta forma colocar de manera correcta todos los sprites. Lo más importante una vez vayamos a guardar nuestro spritesheet es darle un nombre predefinido para que el programa lo reconozca. Lo explica muy bien en su web, pero centrándonos en este caso en el que he usado 3 filas (una para la posición básica y movimiento arriba y abajo si fuera el caso, una para el giro hacia la derecha y otro para el de la izquierda) sería así: (nombre)3wh(número de imágenes).png Entonces quedaría así nave3wh6.png. 3wh significa que son 3 filas en un spritesheet horizontal y el '6' es el número de imágenes. Siguiendo esta simple premisa el mismo programa nos reconocerá el sprite automáticamente. Pero ojo, cada juego requiere de un tipo de sistema diferente así que tengan a mano la página que hace referencia a ello AQUI. Ya tenemos nuestro spritesheet así que ya podemos agregarlo en la pantalla de Spritesheets pulsando la tecla (5). En esta pantalla elegimos la velocidad de la animación, los frames que queremos utilizar y si queremos que entre en un bucle de reproducción. Si pinchamos encima del sprite, fijaremos en área de colisiones. Aquí es donde añadiremos todos los sprites que queramos utilizar. Ahora pasamos a la pantalla de programación de actores (pulsando 4) para configurar el comportamiento de enemigos o como en este caso, nuestra nave principal. Aquí elegimos crear a un nuevo héroe y adjuntamos el spritesheet que queremos utilizar. Lo que he hecho aquí es fijar el movimiento en posición horizontal del mismo modo que sucede en Space Invaders. Fijamos la velocidad a la que queremos que se mueva la nave. Para probar el funcionamiento correcto del sprite pulsamos la barra SPACE y entramos en la zona de pruebas. Ahora haría falta un disparo. El procedimiento es el mismo que antes. Creamos la imagen del disparo, lo añadimos en la página de spritesheets (5) y luego volvemos a la página de actores (4) para añadirlo como 'GUN'. Lo primero es añadir el sprite que hemos subido antes en la zona de 'Move' para cuando el proyectil salga disparado. El segundo paso es volver a la pestaña HERO y añadir en 'BUTTON 1' esa arma que hemos creado (GUN). Así enlazamos el arma con nuestro héroe. Con IDLEMOVE seleccionado (si nos fijamos al lado hay una G de color naranja), podremos fijar el punto exacto donde saldrá el proyectil. Para el arma no bastará adjuntarla aquí sino que habrá que decirle como comportarse. Para ello pulsamos en SET BEHAVIOUR para descubrir una nueva pantalla. El centro neurálgico del programa. Para saber que significa cada icono hay que ir a la web de AGS donde está perfectamente explicado. Para el disparo he definido el ángulo del proyectil y la velocidad a la que sale disparado. Solo queda añadir a un enemigo. Lo mismo que en anteriores casos. Dibujamos el sprite, lo añadimos como sprite (5) y luego como ENEMY en la pantalla de actores (4). Una vez más añadimos el comportamiento. Para no complicarnos, voy a lo básico, defino la velocidad del enemigo y le digo que se dirija hacia el jugador de manera que lo persiga mientras baja la pantalla. Niveles: Ahora que tenemos nuestros actores necesitamos dibujar el escenario. Para ello vamos a la pantalla de STAGES (2). Antes de nada he fijado el scroll a 0, eso significa que es fijo. Para no complicarlo lo haremos así de momento. Pero ahora falta añadir elementos a esta escena así que volvemos a nuestro programa de pixelart y dibujamos una plantilla de tiles. Para ello, creamos una cuadrícula de 16x16 de manera que podamos separar todos los elementos. Se me olvidaba que el fondo debe ser siempre de un color específico, #505050. La base de la creación de tiles es cercionarse de que podemos alargar las piezas todo lo que queramos y siempre encajen. No voy a descubrir nada a nadie pero a base de practicar es más sencillo de lo que parece al explicarlo. Una vez tenemos la plantilla vamos a la pantalla de TILES (3) y la incrustamos en el programa. Ahí podemos coger las piezas por separado. Con la selección de la pieza hecha, solo tendremos que ir a la pantalla STAGES (2) y montar nuestro escenario. Una vez montado el escenario podemos pulsar SPACE para testear la pantalla. Ahora mismo no hay nada, por lo que añadiremos a nuestro héroe y algunos enemigos. Para ello pulsaremos las teclas Q y E hasta ponernos en la sección de Actores. Ahí alternamos con las teclas Z y X para colocar a nuestra nave y algunos enemigos. Volvemos a testear pulsando la barra espaciadora para comprobar que todo funcione. En esta misma pantalla STAGES, en el lado izquierdo veremos que por defecto hay 3 pantallas llamadas NOTICE, TITLE y RANKING. Como sus nombres indican, la de NOTICE es para agregar nuestro logo por ejemplo con un 'presenta...'. TITLE es la pantalla principal del juego en la que presionar Start para empezar. Ranking es donde veremos las puntuaciones, Para llenar estas pantallas seguiremos los pasos anteriores crear un title y pegarlo en su pestaña correspondiente. Pues ya esta. ¡Tenemos una primeriza versión del juego listo en muy poco tiempo! Aquí dejo un video con el resultado del tutorial y con ese efecto de scanlines que el mismo programa añade por defecto. Como ves es una muestra muy sencilla pero un primer paso para hacer algo más grande. Aclaración: Todo el material publicado en el post forma parte de la entrada en el blog Probando Arcade Game Studio - Beta (+Tutorial) publicado por Toni de Pixels Mil, sus méritos a él.

Jugaron mejor que la Argentina, aunque sea por penales. Messi no es pecho frío, le queda muy grande la camiseta, nada más. Si siempre la pecheamos en las finales por algo será, basta de vivir del pasado, en el presente no ganamos nada.