Nuevo aspecto del blog

¿Os gusta? Como ya habréis notado, este va a ser el nuevo aspecto del blog a partir de ahora. Todo está igual que antes, no os preocupeis, tan sólo he cambiado los colores, el tema, y he añadido unos "aparatillos" a la derecha para que nos entretengamos un poco. Entre ellos hay un reloj, para escuchar música con el iTunes, acceso al Messenger y para dejarme algún mensaje de voz grabado con vuestro micro (por si algún día no os apetece escribir un comentario, es más cómodo así...). 

Bueno, sin nada más que decir, me despido. Espero que no os disgusten los cambios. ¡Hasta luego!

Transiciones

¡Hola otra vez! Hoy vamos a atrevernos por fin con las transiciones, ¿qué os parece? Sobra explicar para qué sirven, ya que todo juego lleva transiciones y todos las conocemos... Así que, dicho esto, vamos a lo nuestro:

1º. Trabajaremos con Palib Template con la carpeta "data" incluida.

2º. Lo primero va a ser elegir la imagen con que probar la transición. Debe ser una imagen GIF, ya que los comandos del código de ejemplo están orientados a este tipo de formato, por si quereis ir acumulando conocimientos y fusionar proyectos. Yo he elegido esta imágen y la he llamado "agua" (obviamente), asi que si quereis poner una distinta tendréis que cambiar en el código el nombre del archivo dos veces, al incluirlo, y al cargarlo. Recordad, sólo imágenes GIF ahora.

3º. Tras poner nuestra imágen GIF en el directorio "data", sólo queda vérnoslas con el código. Esta vez es complicado, leed con cuidado. Aquí está.

4º. Tras compilar, nos debería quedar algo como esto:

Bueno, pues ya está, espero que os haya gustado. Y supongo que será muy útil, porque da un aspecto profesional a las aplicaciones.

¡Nos vemos!

Cargando imágenes GIF

Muchas veces lo más sensato para reproducir una animación sencilla e incluso una breve historia es utilizar imágenes en formato GIF. Hoy aprenderemos cómo se pueden usar mediante las funciones que nos ofrece PaLib.

Lo que haremos será reproducir una imágen GIF de corta duración y experimentaremos con su velocidad y cómo pausarla y reanudarla.

1º. Se prepara un nuevo Palib Template.

2º. Dentro de esta carpeta, vamos a crear otra llamada "data" (si no la hay), que será donde vaya la imágen GIF.

3º. En dicha carpeta, se introduce la imágen GIF. Yo he usado ésta pero, por supuesto, podéis poner la que querais. Si hacéis esto, cambiad el código para que funcione, ojo.

.

4º. Ahora toca la edición del código. Aquí esta el "main", leedlo con cuidado.

5º. Sólo falta compilar con el "build" y tendremos esto.

En esta aplicación podemos pulsar START para pausar y reanudar la animación GIF, además de modificar su velocidad presionando arriba y abajo (recordad que en el emulador el START es la tecla "4").

Y eso es todo. Espero que os haya gustado. Me despido y hasta otra.

Sprites. Rotaciones.

¡Hola! Para seguir avanzando con el tema de los sprites y conocer algunas más de sus muchas funciones que ofrece PaLib, vamos a hacer un ejemplo donde crearemos tres sprites que rotarán de maneras diferentes estableciendo un ángulo. Veamos:

1º. Antes que nada, ponemos a punto un nuevo PaLib Template.

2º. Vamos a usar tres imágenes cualquiera a las que yo he llamado colores, colores2 y colores3. Son éstas y las teneis que convertir en texturas con el PAGfx Coverter y ponerlas en "sourcegfx".

         

3º. Este es el código. Por favor, leedlo cuidadosamente entendiéndolo, porque sólo así se aprende.

4º. Solo queda compilar con el "build" y comprobar el resultado.

Espero que os haya gustado. ¡Nos vemos en la próxima entrada!

Aviso: ¡juego RPG!

Tras finalizar las votaciones de la encuesta que coloqué en el blog, y viendo que el porcentaje de los resultados para "RPG" es muy alto, he decidido que podríamos empezar uno. Así que lo voy a ir mezclando con las entradas habituales, para que podais ver como se complica la cosa cuando planeas hacer algo así. Supongo que os gustará, y cuento con vuestras sugerencias para que lo hagamos todos juntos.

Un saludo.

Texturas.

¡Hola a todos! Por cosas de la vida he estado un tiempo perdido por el ciberespacio, pero ya he vuelto para intentar saciar vuestras mentes ávidas de conocimientos... En fin, que vamos a empezar fuerte el año (por cierto, feliz año y todo eso...), nada más ni nada menos que con las texturas. Hay que prestar mucha atención para pillarlo todo de estas simpáticas amigas, asi que no os durmais, allá vamos:

1º. ¡Nuevo Palib Template!

2º. Va a ser una especie de tres en raya que no es para nada un tres en raya, pero vaya... Así que primero que nada teneis que coger, por ejemplo, estas tres imágenes:

       

Perdonad la falta de profesionalidad, lo mio no es el diseño gráfico, ni mucho menos. Teneis que nombrar a estas imágenes A, B y C, respectivamente.

3º. Tras meter las imágenes en la carpeta de "sourcegfx", hay que convertirlas en texturas de 256 colores (8 bits).

   

4º. Ahora hay que editar el código del "main", que como siempre aquí lo teneis. Por supuesto, y si no quereis que os aburra con entradas teoricas, al menos leedlo entendiéndolo.

5º. Pues bien, compilad el proyecto con el "build" de Palib Template, y obtendremos esto:

En esta aplicación solo hay que tocar las fichitas para que se cambien. A vuestra libertad, gusto e imaginación he dejado en blanco lo que sería la última parte que haría esto divertido o útil. Me refiero a que siempre podeis hacer una condición tipo... "Si las tres texturas son iguales... entonces... realiza esta acción."... ¿Me he explicado bien?

Ojalá os haya gustado y nos vemos la próxima vez, os prometo que mucho más pronto.

Reconocimiento de texto.

Vamos a empezar a hacer algo más difícil: aprender a que la DS nos reconozca texto que le escribimos. Para facilitarnos la tarea, existe una tabla desarrollada por PaLib que tiene registrados los trazos de las letras, aunque no es 100% eficaz, ni mucho menos. Lo que vamos a ha hacer es crear un sencillo modelo de como se usa esto:

1º. Preparamos un Palib Template.

2º. Lo primero es colocar la tabla en el directorio de Palib Template, sin que esté dentro de ninguna carpeta. Para que no haya ningún problema, la podeis descargar aquí, y para que la veais, es ésta:

Es importante que no le cambieis el nombre que lleva, o no funcionará.

3º. Ya que esta vez tampoco necesitamos imágenes, falta el código. Descargar el "main".

4º. Compilad con "build" y ¡listo! Queda lo siguiente:

Como podeis comprobar, solo hay que escribir la letra bajo y la va poniendo arriba (aunque se equivoque bastante). Para ver por qué no os reconoce una letra, se puede consultar la tabla y ver donde hay que empezar la letra (punto gordo), y como debe ser su trazo. Espero que os guste. ¡Nos vemos!

Fondos - Scrolling.

Hacer scrolling en un fondo es hacer que se mueva de acuerdo a las direcciones que pulsemos con las flechitas de Nintendo DS o el teclado si utilizamos emulador. Lo que vamos a hecer ahora es justamente eso. Veamos los pasos:

1º. Como no, ponemos a punto un Palib Template.

2º. Vamos a usar este fondo, que os debe sonar:

3º.Recordad que teneis que convertir esta imagen a EasyBg con el PAGfx Frontend.

4º. Aquí teneis el código para que lo reviseis y lo estudieis cuidadosamente, aunque éste es fácil de entender.

¡Y ya está listo! Es así de fácil. Además, podeis experimentar añadiendo un sprite y conseguir que ambos se muevan al mismo tiempo si pulsamos las teclas de dirección. En realidad, esa es la base de todo juego. ¡Adiós!

Sprites - Dificultad 2.

Seguro que muchos de vosotros conoceis la popular entrega de Mario para GameCube Paper Mario, ¿verdad? Lo que vamos a hacer hoy es trabajar con unas funciones 3D de los sprites que permiten hacer efectos como los de este juego al cambiar de dirección. Ahora vereis a lo que me refiero:

1º. Preparar un Palib Template nuevo.

2º.Para este ejemplo, necesitais ambas cosas, el sprite y el fondo por el que se moverá. Llamaremos "mario" al sprite y "mariobg" al fondo. Aquí están:

      

3º. Aquí hay algo nuevo. Para hacer efectos de 3D no hay que poner el Mario en la pestaña de "Sprites", sino en la de "Textures", y ponerla en "256 colors".

4º. Ahora hay que editar el código del "main". Aquí lo teneis listo.

5º. Si todo ha ido bien, compilad con el "build" y no os debe dar error. Quedará algo como esto:

En esta aplicación podeis mover a Mario con el puntero (o el ratón, si estais usando un emulador para ganar tiempo) y cuando le hagais girar produce el efecto de giro de Paper Mario, ese que tanto me gusta. Debo deciros que este ejemplo está sacado de la web de PaLib y traducido al español para que podais ver como se hace. Me despido con esto y como siempre, espero que os haya gustado y sido útil en el aprendizaje.

API. Botones.

¡Hola mundo! Esta vez vamos a empezar con las API. Una interfaz de programación de aplicaciones o API (del inglés Application Programming Interface) es el conjunto de funciones y procedimientos (o métodos si se refiere a programación orientada a objetos) que ofrece cierta biblioteca para ser utilizado por otro software como una capa de abstracción. Así , las API sirven para comunicar elementos de un programa entre sí, lo que puede llegar a ser muy útil. Pues bien, PaLib nos facilita una serie de APIs para que trabajemos con ellas, como lo son los botones. Crearemos una pequeña aplicación basada en 3 botones que ejecutan 3 funciones al ser presionados:

1º. Preparamos el Palib Template de rigor.

2º. Vais a poner este "main" en "source". Si lo leeis, como supongo que haceis, comprobareis que para llamar a las API usamos PAPI_loquesea, en lugar de PA_loquesea. Esto es lo que las distingue de las funciones corrientes de PaLib.

3º. Compilamos con "build" y ya está listo. Queda de la siguiente manera:

En esta sencilla aplicacion, podeis ver como al pulsar un determinado boton, se ejecuta la funcion que tiene asignada, en este caso la de escribir texto diciendo que boton ha sido pulsado. Esto os puede servir para, por ejemplo, crear el menu principal de un juego, poniendo botones de "Cargar Partida", "Opciones", etc., y asignando una funcion de cambio de pantalla a cada uno.

Sentios libres para experimentar, esa es la clave. ¡Nos vemos!

Aviso: ejemplos para descargar.

Quizás hayais visto que a partir de ahora voy a poner los ejemplos en Megaupload en la sección de Enlaces para que podais completar vuestro trabajo. Esto va a ir independiente de las entradas, es decir, cada entrada no corresponde a un ejemplo y viceversa, ¿vale? Espero que os sea de utilidad, es algo para mejorar el blog.

Un saludo.

Texto - Fuentes.

Bueno, pues como me aburro, hoy pondré dos entradas ya que la anterior estaba planeada y esta es una petición, asi que allá vamos. Lo que me pedian es que os enseñara a cambiar las fuentes de una aplicación, y como es tan fácil, pues os lo digo en un momento:

1º. Ponemos a punto un Palib Template.

2º. Para cambiar de fuente, primero hay que prepararla. Para ello, hay un programa llamado dsFont que viene con el kit. Eso es lo único que necesitamos para prepararnos nuestra fuente preferida.

3º. Ahora hay que ejecutar el programa y asustarse de todas las opciones que tiene (no es broma).

Ya sé que en la captura solo está la mitad, pero es todo lo que necesitamos. Lo que hay que hacer básicamente aquí es seleccionar la fuente que quieras y darle a "Save Bitmap". Entonces la guardais y ya está lista. En realidad lo mejor es no tocar nada, enseguida salen errores...

4º. Yo, que he elegido la Pristina como fuente, me ha quedado así.

Ahora hay que crear una carpeta llamada "font" dentro de "source", y pegar la imágen de la fuente dentro junto con los archivos de PAGC Frontend para convertirla. Para ello la pondremos en la pestaña "Backgrounds" y mantendremos las transparencias en magenta. El formato que queremos es TileBg. (Yo he llamado a la imágen pristina antes de convertirla, para luego llamarla así en el código. Lo digo por si no sabeis luego de donde sale el nombre.)

5º. Una vez que tenemos la fuente convertida, vamos al código. Simplemente hay que usar un par de comandos:

Fácil, ¿no? Solo habia que incluir la fuente con los #include de toda la vida y ejecutar la orden PA_InitCustomText.

6º. Construimos y comprobamos el resultado. La frase aparece con la fuente deseada.

Bueno, con esto espero haber satisfecho una petición pendiente. Ya sabeis que podeis hacerlas mediante comentarios. Aqui se os escucha.

¡Nos vemos mañana!

Efectos - Dificultad 2.

Hoy vamos a seguir con los efectos gráficos para no aburriros con tanto texto, ¿os parece bien? Lo que vamos a hacer son movimientos de fondos de manera que queden a distintas velocidades. Es un efecto muy útil. Vamos a ver como se hace:

1º. Preparamos un nuevo Palib Template.

2º. Como vamos a volver a trabajar con imágenes, aquí os las dejo, suponiendo que ya sabeis convertirlas en una carpeta "gfx" dentro de "source":

 

¡Atención!, debeis aseguraros de que la transparencia esta puesta en magenta, pues ya lo veis en las imágenes, y además las teneis que llamar BG1, BG2 Y BG3, respectivamente en el orden en que están colocadas arriba.

3º. Una vez os habeis asegurado de que todo está en su sitio, toca ir a por el código. Por supuesto ya sabéis que os teneis que LEER y COMPRENDER lo que está en verde. Lo podeis descargar aquí.

Una vez finalizado tras usar el "build", tendreis esto. ¿Qué tal, lo habeis conseguido hacer funcionar? ¡Ojalá si, y si no, dejadme un comentario con la duda!

Nos vemos mañana con algo nuevo, ¡adiós!

 

Trabajando con texto.

¿Qué tal? Hoy vengo con ánimo de hacer algo bueno... Haremos aparecer un teclado virtual cuyo color podremos cambiar para introducir texto y poder trabajar con él. Esto podría ser útil, por ejemplo, al empezar cualquier juego, para introducir un nombre de usuario o algo parecido. Veamos:

1º. Una vez más, preparamos el Palib Template como toca.

2º. Como hoy tampoco nos hacen falta imágenes, iremos al código directamente. Los comandos necesarios para "jugar" con los teclados son estos:

- PA_InitKeyboard (3): esto iniciaria el modo teclado en el fondo 3. (suponiendo que siempre estamos en la pantalla tactil, claro, porque en la otra no se puede escribir con el puntero...).

- PA_KeyboardIn (20, 95): esto haria aparcer un teclado desde abajo de la pantalla, y se quedaría fijo.

- PA_ScrollKeyboardXY (30, 100): esto haria que el teclado se desplazase hasta esas coordenadas.

-PA_KeyboardOut ( ): esto haria desaparecer el teclado.

3º. Bueno, dando por supuesto que ya habeis aprendido lo anterior, ya podriais haceros una pequeña aplicación, pero por supuesto aquí teneis mi ejemplo. En él, como he dicho cada botón (A, B, X, Y), hace cambiar el color del teclado. Aquí teneis su descarga, y una foto:

Espero que os sirva de algo, ¡hasta la próxima!

Texto. Dificultad 2.

Hoy voy a enseñaros como se hace algo completamente inútil aunque muy curioso.

Seguro que todos conoceis la famosa saga Star Wars. Pues bien, vamos a hacer un texto como el suyo en la DS. Sí, el que va hacia el fondo poco a poco y que nunca te da tiempo a leer... Allá vamos:

1º. Un clásico. Cogemos el Palib Template y le quitamos el "include", poniendo la carpeta en C:.

2º. Visto el éxito, volveré a poner el "main" para descargar, porque eso es lo único que necesitamos, ni imágenes ni nada.

3º. Sustituid mi "main" por vuestro, previamente leido, comprendido y estudiado (no es broma...), y compilais con el "build".

¿El resultado? Vedlo vosotros mismos, yo solo os voy a poner una foto.

Ya sé que es una tontería, pero me llamó la atención y quería enseñároslo. ¡Adiós!

Aviso: encuesta.

¡Hola! No se si lo habeis  notado, supongo que no, pero he puesto una pequeña encuesta al final del blog, en la parte de abajo, para que me la relleneis en un momento. Tan sólo es para poder mejorar, para saber lo que quereis, e intentar daroslo. Por favor, se hace en medio minuto, necesito saber que pensais...

Espero que participeis todos y, ¡gracias por adelantado!

Efectos.

Esta vez vamos a crear un efecto grafico sobre un escenario. Haremos una especie de ondas que quedaran perfectas para los juegos RPG (va por ti, Slipin_32).

Veamos los pasos:

1º. Cogeremos un nuevo Palib Template, como siempre para trabajar con el, y le volveremos a quitar el "include".

2º. Vamos a volver a crear la "gfx" poniendole todas sus cosas (consultad entregas anteriores si no sabeis a que me refiero). Usaremos este escenario sacado de un popular juego de Zelda, ya que había dicho que va genial para RPGs:

3º. Ahora transformadla con el PAGC Frontend, llamandola "zelda", a EasyBg.

4º. Veamos ahora el código de "main". Esta vez lo pongo para descargar porque es muy largo, no quiero que esteis horas copiando... De todas formas, atencion a las explicaciones en verde: Descargar "main".

5º. Construimos con "build" y ¡listo! Aquí está el resultado:

Video del ejemplo.

Daos cuenta de que una vez en las ondas os podies desplazar por el escenario con las flechas.

¡Fin! ¿Os gustó este?

Reproducir sonido.

Reproducir sonido en la DS es muy fácil si sabes cómo. Vamos a ver como se hace:

1º. Cogemos el minijuego de la nave que hicimos en el post anterior.

2º. La DS, para sonido, trabaja con archivos .raw y .mod, pero nosotros vamos a usar los .mod porque son mucho más sencillos. Antes de nada, descargad la música con la que trabajaremos desde aquí.

3º. Como veis, pesa muy poco. Tan sólo hay que ponerla en la carpeta "data" del Palib Template, y modificar ligeramente el código.

Para ejecutar el comando del sonido, usaremos en el "main" esta instrucción: PA_PlayMod (nombre_del_archivo). Por lo tanto, deberemos poner esto: PA_PlayMod (musica); , antes de cargar el fondo, justo aquí:

Además, hay que incluir una lína al principio para indicar donde esta el archivo "musica":

4º. Por último, lo construimos con el "build", y lo ejecutamos con el No$Gba. Vereis como suena la música.

En la próxima entrega aprenderemos a crear efectos en un escenario. ¡Adiós!

Sprites y movimiento.

¡Hola! Esta vez toca algo difícil, pero más útil que lo anterior porque, ¿qué es un juego sin movimiento?

Los pasos son los siguientes:

1º. Primero, haced una copia de el Palib Template - copia, que reservamos hace un tiempo, y pegadlo directamente en C: (Disco Local), renombrándola como Palib Template de nuevo.

2º. Eliminamos de esta carpeta el "include", y creamos el "gfx" dentro de "source", como hicimos para cargar los fondos. En "gfx", hay que pegar los archivos del programa conversor PAGC Frontend, también igual que en la entrega anterior (si no recordais como, consultad dicha entrega). Bien, ahora vamos a colocar en esta carpeta un fondo y nuestro "sprite", que es lo que se moverá. Yo voy a utilizar los siguientes, y recomiendo que los useis:

 Esto es el sprite, una pequeña nave que recorrera nuestro fondo:

3º. Ahora toca convertir estas imágenes al lenguaje de la DS con el conversor. Antes de nada, llamad a la nave "vaisseau", y al fondo "BG3". Abrid el conversor, tocais "Load INI" como siempre y, en la pestaña "Sprites" cargais la navecilla pero poniendo el cuadro magenta de la transparencia en color negro haciendo click en él. Tocais "Save and Convert" y lo cerrais. Despues el mismo proceso para el fondo, pero poniendolo en la pestaña "Backgrounds", y con la transparencia en magenta.

4º. Una vez que ya tenemos esto listo, vamos con el código del "main". Esta vez es más largo, pero por favor, pararos a leer lo que pone en verde, la explicación, porque si no, no estais comprendiendo nada. En "main" debe poner todo esto:

 5º. Guardad esto y activad el "build". Si no funcionara, aseguraos de que habeis renombrado la carpeta a Palib Template, y las imágenes (antes de ser convertidas) a los nombres que dije. Si todo ha ido bien, cargad con el emulador No$Gba, y tendreis esto:

¿Os gusta? Se puede mover con las flechas del teclado o de la DS, por supuesto. La próxima vez vamos a empezar con el sonido, poniendole una musiquilla a este juego de la nave. ¡Hasta la próxima!

Cargando fondos.

¡Aquí estoy de nuevo! Hoy vamos a cargar fondos en las pantallas de la DS jugando con las cuatro capas de las que dispone cada una de ellas.

Como siempre, aquí están los pasos:

1º. Retomamos el proyecto del texto, del artículo anterior, el Palib Template.

2º. La DS, para cargar imágenes, necesita de unos archivos especiales que le indican con que color debe rellenar cada cuadrito o "tile" de sus pantallas. Estos archivos se crean usando una herramienta que viene con el DevKitPro, y que necesita imágenes de mapa de bits, como ya dije. (Para transformarloas podeis usar el Paint, así se hace muy simple).

Pues bien, la herramienta se llama PAGfx y está aquí:

Una vez en esta carpeta hay que copiar los archivos seleccionados en la imagen (en realidad, son todos menos el .zip):

Vale, una vez hecho eso, volvemos a nuestro Palib Template, y entramos en la carpeta "source". Allí hay que crear una carpeta que se llame "gfx" y pegar los archivos que teníamos copiados dentro de ella.

3º. Ahora es el momento de seleccionar la imagen. Debe ser de 256x191 para que quepa justa en la pantalla, para arreglarlas puedes utilizar cualquier programa de diseño gráfico. Bueno, yo voy a usar esta, pero vosotros podeis coger la que querais, siempre que cumpla con los requisitos mencionados.

4º. Hay que copiar la imagen a la carpeta "gfx". Después, poneis en marcha la aplicación "PAGC Frontend", y le dais  a "Load INI" (esto lo teneis que hecer cada vez que la useis)y, en la pestaña "Backgrounds" (fondos), le dais a "Add Files" y seleccionais la imagen. Luego, se escoge EasyBg y presionamos el botón "Save and Convert". Una vez que haya aparecido la pantallita negra de MS-DOS y se haya quitado sola, podeis salir del programa.

5º. No os preocupeis ahora si os ha llenado la carpeta de cosas nuevas, son lo que necesitamos. Bien, vayamos a "source" de nuevo y abrimos el "main" para hacer estos cambios. Como siempre, las instrucciones van en verde para que veais lo que he hecho:

Fijaos que solo he añadido un par de cosas arriba, y una línea en medio.

6º. Como hicimos en el anterior, volvemos a Palib Template y le damos al "build" (construir). Ahora cargamos el archivo ds.gba con el emulador No$Gba, y el resultado será este:

¡Y ya hemos acabado! Fácil, ¿no? En la próxima entrega, pondremos un "sprite" (duendecillo) en otro fondo, y haremos que se mueva, algo mucho más difícil que lo de hoy. ¡Nos vemos!