Skip to main content

Proyecto JPacman #5: Gráficos y Controles

Juan Pablo Lastra Destacados, JPacman
spanish You can also read this article in English at papagamedev.com.

Después de que JPacman había dado las primeras señales de vida usando Cocos2d-x, era hora de hacer que por fin se pudiera volver a jugar. ¿Qué faltaba para esto? Dos cosas: que se vieran los gráficos en pantalla y que se pudiera usar el teclado para controlar menús y personaje.

Gráficos en Pantalla

Para poder mostrar los gráficos en pantalla y mantener la lógica que ya tenía implementada en la versión original de JPacman, tuve que revisar primero cómo era que funcionaba y en qué consistían los archivos de imágenes que el proyecto ya contenía.

Descubrí que JPacman cargaba sólo una gran imagen por escena. En la parte superior de cada imagen estaba el fondo de la escena, del tamaño de la pantalla completa a una resolución de 640 por 480 pixeles. Había cuatro escenas diferentes en el juego y por tanto había cuatro archivos de imagen: introducción, menú principal, pantalla de mejores puntajes y la escena del juego.

Fondos de JPacman
Los fondos de las cuatro escenas de JPacman: la escena para jugar tiene el laberinto pintado en el fondo, la introducción tiene un fondo negro, los menús tienen un fondo (horrible) de ladrillos verdes, y el menú principal tiene el nombre del juego superpuesto.

Cada una de los cuatro archivos tenía repetido en la parte inferior una serie de imágenes con todos los dibujos de las animaciones de los personajes y objetos dinámicos del juego. Me llamó mucho la atención que hace casi veinte años ya hubiera usado lo que se conoce en la industria como un atlas de texturas, pues es una de las maneras más eficientes de manejar archivos de imágenes en un videojuego de este tipo.

Atlas de Texturas de JPacman
Los dibujos y las animaciones de personajes y objetos dinámicos de JPacman, utilizando la técnica conocida como atlas de texturas.

Tuve que convertir los archivos de imagen a PNG, pues la versión original de JPacman usaba archivos de imágenes en formato BMP, y Cocos2d-x no soporta ese formato. Además, separé el atlas de los fondos de las imágenes pues me pareció que sería mejor para manejar la carga y descarga de las imágenes.

Ya enfocado en el código, hacer funcionar los gráficos no fue difícil. Debí trabajar el archivo Gfx.cpp, en especial la función DrawSprite para poder registrar en el sistema de escena de Cocos2d-x a las imágenes que debían ser mostradas. También tuve que tener precaución con los sistemas de coordenadas pues descubrí, por las malas, que la coordenada Y estaba invertida entre Direct X y Cocos2d-x.

Por último, arreglé un fallo grosero que tenía en el código respecto a la variable GFXFile, con la que estaba haciendo lo que se conoce como «pisar memoria». Eso seguramente explica caídas inesperadas que había en la versión original y que nunca entendí por qué ocurrían. Para más detalles, pueden ver el código en Bitbucket y el cambio que hice.

Controles y Teclado

El siguiente paso era conseguir controlar los menús y personaje con el teclado. Inspeccionando el código, descubrí que también había programado (o copiado de alguna parte) la funcionalidad para poder utilizar controles con el juego, pero al parecer estaba incompleta. Desafío para más adelante, me dije.

Para que funcionara el teclado, primero tuve que modificar varios archivos porque las constantes que usaba para identificar las teclas entraban en conflicto con constantes de Cocos2d-x. A todas las constantes del juego les tuve que agregar el prefijo JPACMAN_, y con eso pude conseguir usarlas correctamente.

Luego, agregué el código para registrar un receptor de eventos (event listener) de Cocos2d-x y agregué el manejo de los eventos OnKeyPressed y OnKeyReleased, lo que resultó bastante más fácil de lo que yo esperaba.

¡JPacman ya se podía jugar nuevamente!

Imagen de JPacman
Habiendo conectado los gráficos y el teclado del código original con Cocos2d-x, ¡JPacman se podía jugar nuevamente!
spanish You can also read this article in English at papagamedev.com.
Share Button

Juan Pablo Lastra

Juan Pablo crea videojuegos desde los ocho años y fue padre por primera vez el año 2004. Hoy ya tiene tres hijos y ha trabajado en más de veinte videojuegos. Desde hace un tiempo se interesó en cómo se relacionan la paternidad y su profesión, y decidió a escribir al respecto fundando "Papá Game Dev".

146 comentarios en “Proyecto JPacman #5: Gráficos y Controles”

  1. Hola! estaba mirando con mucha atención por el proceso que has pasado para re-vivir tu JPacman, me imagino que para esta altura ha sido una grata experiencia, sobretodo por la oportunidad que te ha dado de mirar un poco a nuevas herramientas que hay disponibles.

    Bueno, no está demás decir que es muy interesante todo el proceso y opciones que se tienen hoy para crear juegos. En mi caso, siento que es un proceso de nunca acabar y las opciones son interminables.

    Muy entretenido!
    Saludos!

    Responder

  2. Perfect update of captchas solution software «XEvil 5.0»:

    Captchas solving of Google (ReCaptcha-2 and ReCaptcha-3), Facebook, BitFinex, Microsoft, MailRu, SolveMedia, Hydra,
    and more than 12000 another categories of captcha,
    with highest precision (80..100%) and highest speed (100 img per second).
    You can use XEvil 5.0 with any most popular SEO/SMM programms: iMacros, XRumer, SERP Parser, GSA SER, RankerX, ZennoPoster, Scrapebox, Senuke, FaucetCollector and more than 100 of other software.

    Interested? There are a lot of demo videos about XEvil in YouTube.

    FREE DEMO AVAILABLE!

    Good luck 😉
    P.S. A Huge Discount -30% for XEvil full version until 15 Jan is AVAILABLE! 🙂

    XEvil.Net

    Responder

  3. Perfect update of captcha solving package «XEvil 5.0»:

    Captchas solution of Google (ReCaptcha-2 and ReCaptcha-3), Facebook, BitFinex, Bing, MailRu, SolveMedia, Hydra,
    and more than 12000 another categories of captcha,
    with highest precision (80..100%) and highest speed (100 img per second).
    You can use XEvil 5.0 with any most popular SEO/SMM software: iMacros, XRumer, SERP Parser, GSA SER, RankerX, ZennoPoster, Scrapebox, Senuke, FaucetCollector and more than 100 of other programms.

    Interested? There are a lot of impessive videos about XEvil in YouTube.

    Free XEvil Demo available.

    Good luck!
    P.S. A Huge Discount -30% for XEvil full version until 15 Jan is AVAILABLE! 🙂

    XEvil.Net

    Responder
  25. Pingback: does sildenafil work as good as viagra
  29. Pingback: viagra milking femdom

  54. I was wⲟndеring if you evеr cоnsidered changing thе page lɑyout of your site?
    Its νery well writtеn; I loge what yⲟyve ցot to say.
    But maybe you coulⅾ a little more in the ԝay of
    content so people coᥙjld connect with it betteг. Youѵe goot an awful lot of text forr only һаving one or 2 images.
    Maybe you ϲould spaсe it ߋut Ьetter?

    Heree iѕ my weƄ page payday loans amarillo tx

    Responder

  60. Ꮋey I know this is off t᧐pic but I was wonderring if you knew of
    anyy widgets I ϲould аdd to my blog that automatiｃally tweet my newest twitter updates.
    I’ve been looking for a ⲣlug-in lioe this for quitе
    some time and wass hopіng maybe you would havе some experіence with something like
    this. Please let me know if you run into
    anything. I truly enjoy reading yoᥙr blog and I look forward to yojг new updates.

    Here is my web-ѕite: payday loans md

    Responder

  64. Excellent goods from уou, man. I’ｖe understand yoսr stuff
    prevіious to and үou aree just too great. I reallү like what yyoᥙ have acquired here,
    certainly liқe what you are stating and the way in whicһ
    you ѕay it. Уοu make it entertaining and you stіll care for to keep
    iit smart. I can not wait to read far more from you. This iѕ аctսally a terrіfiⅽ web free adult personals site.

    Responder
  71. Pingback: can i buy cialis online
  74. Pingback: monthly cost of cialis without insurance
  136. Pingback: buy cialis without perscription

Deja un comentario

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