El Blog de Manu

Chipper: Diseñando el emulador

Chipper

Hace unos tres años, decidí emprender una serie de proyectos de desarrollo, aunque realmente sólo me tomé en serio uno de ellos: un emulador de Chip-8. El programa estaba prácticamente terminado, y sólo me quedaba por implementar el sonido, pero por pereza lo fui dejando… hasta ahora. El problema es que cuando quise retomarlo, me di cuenta que había perdido el código fuente, así que decidí aprovechar la ocasión para reescribirlo en otro lenguaje.

En el artículo que escribí al respecto hace un par de años, desestimaba los lenguajes interpretados por falta de rendimiento, pero después de los avances que ha habido en temas de navegadores web, y tras haber rediseñado el tema del blog en HTML5, decidí probar suerte con JavaScript…

El resultado me ha sorprendido gratamente, ya que en unos días he podido implementar de nuevo todo el proyecto, y con un navegador decente que soporte HTML5 -especialmente en Google Chrome– corriendo en un ordenador reciente, el emulador llega los 60 frames por segundo sin problema 😀

El código fuente del proyecto lo podéis encontrar en github, y la gracia del asunto está en un fichero JavaScript de 20KB.

Si echáis un vistazo, veréis que hay un objeto definido para gestionar la memoria (Memory), otro para la pantalla (Screen), otro pequeño para el sonido (Sound), otro para los eventos del teclado (Keyboard), otro para emular las instrucciones (CPU), y finalmente otro que tiene la lógica del emulador (Chipper). Creo que el código es relativamente sencillo de seguir, y aunque hay algunas optimizaciones en algunos puntos críticos -sobre todo a la hora de hacer multiplicaciones-, no es demasiado ofuscado.

En cualquier caso, lo importante está el núcleo principal: el método Chipper.frame. Tras inicializar el emulador y cargar un fichero en memoria, se intenta ejecutar un frame de emulación cada 16ms. Aquí se actualizan los registros que dependen del tiempo, se gestiona el teclado, se ejecutan unas cuantas instrucciones, y se actualiza la pantalla. Este bucle es la piedra angular de un emulador -y de un juego-, y es la clave para entender el programa.

Os animo a que trasteéis con el código, y estaré encantado de resolver vuestras dudas y de recibir vuestras mejoras 😉

Comentarios

Mr. Pink

0_o ¡Crack!

ElRoSSo

Una monería Manué. El código es clarito clarito, más quisiera yo tener una capacidad de síntesis tan clara programando, que acabo haciendo más comments que código, y más cuando realizo algo de forma descontinuada. Al final lo mejor es lo que has hecho tú, recomenzarlo desde cero. Eso sí, uno que es un vintage de la programación no se le pasaría por la cabeza haber tirado de JavaScript.

Mis felicitaciones!

Secundo lo que te ha dicho Pedja por Twitter. Tienes bien depurada tu lista de tareas diarias. 🙂

josepzin

Toda mi adminración por el trabajo que has hecho!

Manu

¡Gracias chicos! 😀

Xavier Belanche

Felicidades 😉 Muy buen trabajo 🙂

kanfor

Oh, no tengo palabras.
Felicidades.

Manu_Sbd

En 2 palabras im-prezionante :p

Leandogo

Woow Manuel eres un genio xD
Estupendo emulador desde navegador… (hermosa palabra):D

¿Tienes algo que decir?