METODOLOGIA PARA LA APLICACIÓN DEL VHDL

EN EL DISEÑO DE VIDEOJUEGOS 2D E IMPLEMENTACION SOIC

John M. Espinosa D, Andrés F. Montaño S, Mario E. Vera L

Grupo de Bioelectrónica y Nanoelectrónica, EIEE, Universidad del Valle
A.A. 25360 Cali, Colombia
cyberjhon@hotmail.com, anfemosa@hotmail.com, mario@univalle.edu.co

SUMMARY

This article presents a methodology to apply the VHDL description language for designing 2D videogames. The
methodology allows the hardware design of the videogames using FPGA devices. The methodology proposed here is
the result of several years of work in the labs projects of the Digital Design with VHDL course. The methodology
allows to the students realize VHDL models, which do not need to be totally simulated, saving time in the simulation
process, because the hardware behavior results are visualized immediately. The interaction between VHDL and the
results is possible because the design is implemented on a FPGA and the videogame operation results are visualized
on a VGA monitor. In order to validate this methodology the design and implementation of four videogames are
presented.

RESUMEN

Este artículo presenta una metodología desarrollada para aplicar el lenguaje de descripción VHDL en el diseño de
videojuegos 2D. La metodología permite el diseño totalmente en hardware y la implementación en una única FPGA
de la UP1. La metodología propuesta es un resultado del trabajo de varios años de los proyectos de fin de curso
desarrollados en la asignatura diseño digital con VHDL. Con esta metodología se logra que los estudiantes realicen
modelos en VHDL los cuales no necesitan ser simulados en su totalidad, ahorrando tiempo en el proceso de
simulación, debido a que los resultados del comportamiento del hardware son visualizados inmediatamente. La
interacción entre el VHDL y los resultados es posible debido a que el diseño se implementa en una FPGA y se
visualizan los resultados de la operación del videojuego en un monitor VGA. Para validar la metodología se presenta
el diseño e implementación de cuatro videojuegos.
 METODOLOGIA PARA LA APLICACIÓN DEL VHDL
EN EL DISEÑO DE VIDEOJUEGOS 2D E IMPLEMENTACION SOIC

John M. Espinosa D, Andrés F. Montaño S, Mario E. Vera L

Grupo de Bioelectrónica y Nanoelectrónica, EIEE, Universidad del Valle
A.A. 25360 Cali, Colombia
cyberjhon@hotmail.com, anfemosa@hotmail.com, mario@univalle.edu.co

ABSTRACT 2. RECURSOS HARDWARE PARA LOS

VIDEOJUEGOS
This article presents a methodology to apply the VHDL
description language for designing 2D videogames. The Los elementos de hardware utilizados para la
methodology allows the hardware design of the implementación de los videojuegos se presenta en la figura
videogames using FPGA devices. The methodology 1. Los tres elementos utilizados son una tarjeta de
proposed here is the result of several years of work in the desarrollo UP1 de Altera, un terminal VGA y un teclado.
labs projects of the Digital Design with VHDL course. Los recursos utilizados de la tarjeta UP1 son la FPGA
The methodology allows to the students realize VHDL FLEX10K70, el oscilador, la interface VGA y la interface
models, which do not need to be totally simulated, saving PS-2.
time in the simulation process, because The hardware
behavior results are visualized immediately. The
interaction between VHDL and the results is possible
because the design is implemented on a FPGA and the
videogame operation results are visualized on a VGA
monitor. In order to validate this methodology the design
and implementation of four videogames are presented.

1. INTRODUCCIÓN

Para diseñar un sistema digital el lenguaje de descripción

VHDL permite realizar modelamiento del tipo estructural,
Figura 1. Recursos hardware para la implementación
flujo de datos y comportamental [1][3]. El modelamiento
comportamental permite abordar el diseño de sistemas
Los elementos de la figura 1 permiten un prototipado
hardware abstrayéndose de la estructura y concentrándose
rápido del videojuego, debido a que los conectores de los
en la descripción del algoritmo del funcionamiento del
puertos VGA y PS-2 están construidos y conectados a la
sistema.
FPGA, faltando únicamente la implementación del
hardware digital para realizar el control de la interface de
La metodología de diseño planteada en este artículo va
estos puertos.
encaminada para aplicarla en la formación de estudiantes
que se inician en el modelamiento con VHDL, ya que
En la FPGA se construye además del control de las
permite gran interacción entre las descripciones VHDL y
interfaces, todo el hardware correspondiente a la
los resultados de operación del hardware modelado.
implementación del algoritmo de funcionamiento del
videojuego.
Inicialmente el artículo presenta una arquitectura general
para el diseño de videojuegos, posteriormente propone una
estrategia para abordar el diseño de las imágenes
3. ESTRUCTURA DEL VIDEOJUEGO
analizando de forma general los tipos de imágenes que se
presentan al diseñar videojuegos 2D y finalmente presenta La estructura del diseño digital del videojuego se presenta
varios videojuegos desarrollados con esta metodología. en la figura 2. Los cuatro bloques son: controlador de
interfaces (VGA, PS-2), generador de capas, selector de Adicionalmente, el VGA_SYNC genera las coordenadas
capas a desplegar y el controlador del videojuego. del píxel activo en el monitor en cada instante de tiempo
(píxel_row[9..0], píxel_column[9..0]). Estas coordenadas
no son necesarias para realizar el barrido del monitor, pero
son muy importantes para crear y sincronizar las múltiples
descripciones de las imágenes a desplegar.

3.2. Control de interface PS-2

Esta entidad VHDL convierte los datos seriales que se

envían desde un teclado tipo PS-2, a un formato paralelo
para que puedan ser utilizados en el diseño.

Las señales de entrada son: keyboard_clk, keyboard_data,

Figura 2. Estructura del diseño digital del videojuego estas se conectan al teclado; la señal clock_25Mhz; la
señal read se utiliza para realizar el control del PS-2,
3.1. Control de interface VGA donde un flanco ascendente en esta señal pone en cero la
señal de salida scan_ready; la señal reset limpia los
Para realizar el control de las interfaces VGA y PS-2 se registros internos que se utilizan en la conversión serie-
utilizan de la referencia [2] los módulos VGA_SYNC y paralelo.
KEYBOARD respectivamente, los cuales han sido
descritos para ser sintetizados sobre la UP1. Las señales de salidas son scan_code[7..0] que genera el
código de la tecla presionada después de hacer la
El VGA_SYNC es una entidad VHDL declaración- conversión y la señal scan_ready que indica (se pone en
arquitectura que realiza el control de las señales de barrido uno) cuando se envía un nuevo código desde el teclado.
de un monitor tipo VGA con una resolución de 640x480
píxeles. El VGA_SYNC tiene como entradas las señales
clock_25Mhz, que va conectada al oscilador de la UP1 y 4. GENERADOR DE CAPAS
las señales red, green y blue (RGB), que son señales
internas para el videojuego, por medio de estas se provee Una vez se tiene en operación la interface VGA, la imagen
la información de los colores. en el monitor VGA depende exclusivamente de los valores
lógicos que se asignen a las tres señales RGB en cada
Para controlar el barrido el VGA_SYNC genera las tres instante de tiempo.
señales del sistema RGB: red_out, green_out, blue_out y
las señales de sincronización del barrido horizontal Para concebir el diseño de las imágenes, en este artículo se
horiz_sync_out y el barrido vertical vert_sync_out. Estas aplican dos estrategias de diseño de los sistemas digitales,
cinco señales se conectan al monitor VGA generando la como son particionamiento y localidad; la primera
secuencia de barrido indicada en la figura 3. propone dividir el problema para abordar subproblemas
disminuyendo la complejidad de los mismos y la segunda
plantea desarrollar elementos que funcionen muy bien
independiente del comportamiento del entorno.

4.1. Diseño de capas

Para aplicar las dos estrategias de diseño se deben

construir las imágenes a partir de capas. Una capa es un
algoritmo que genera una imagen estática y cíclica de
60hz, la cual se construye identificando el conjunto de
coordenadas determinantes dentro de la imagen estática
que se desea visualizar.

Las coordenadas determinantes de una imagen son el

conjunto particular de valores (píxel_row[9..0],
Figura 3. Secuencia de Barrido píxel_column[9..0]), donde los píxeles de la imagen
cambia de color siguiendo la secuencia de barrido.
El procedimiento para diseñar una capa se inicia La capa 3 se genera de forma similar a la capa 2, en donde
dibujando en papel la imagen de dicha capa, en este dibujo se cambia los valores de las coordenadas determinantes.
se identifican las coordenadas determinantes,
posteriormente se tabulan los datos asociando las
coordenadas determinantes con los correspondientes
valores RGB, finalmente se escribe un algoritmo en
VHDL que compare el valor actual de las coordenadas del
barrido con los valores tabulados, para que se suceda la
acción de cambio del color.

4.2. Generación de imágenes estáticas

Una imagen estática se puede construir de dos formas, la

primera es a partir de una sola capa, la cual desarrolle
totalmente la imagen estática. La segunda forma es
construir un conjunto capas interrelacionadas y
posteriormente realizar un control estático que relacione
las capas dependiendo de lo que se desea visualizar.

El diseño de una imagen con una sola capa es apropiado

cuando la imagen no es compleja, debido a que las
categorías de las coordenadas determinantes son pocas y el
modelamiento no es complejo; por ejemplo al crear una
imagen de fondo de un solo color, no existen coordenadas Figura 4. Diseño de una imagen estática a partir de capas
determinantes y el barrido se realiza completamente con
un valor RGB constante (para un fondo azul RGB=001); En la capa 2 se generan líneas del grosor de un píxel, para
otro ejemplo es una imagen de franja de colores, en la cual crear líneas más gruesas se repite el procedimiento
las coordenadas determinantes son aquellos píxeles en utilizado para la generación de las líneas, estableciendo en
donde se inicia una nueva franja, variando en este punto el la capa 2 un intervalo ∆Y en el eje Y, dentro del cual el
valor RGB y permaneciendo constante hasta finalizar el barrido grafique la línea. De forma semejante se procede
barrido de dicha franja (franja amarrilla RGB=110, franja para la capa 3. Una vez generadas las tres capas, se deben
azul RGB=001, franja roja RGB=100) superponer de forma adecuada para generar la imagen
deseada.
En términos generales para construir una imagen estática
es recomendable construir un conjunto de capas, donde 4.3. Generación de imágenes dinámicas
cada capa corresponde a una categoría particular de
coordenadas determinantes. Por ejemplo para crear una Una imagen dinámica se puede construir de dos formas:
imagen con un fondo de un solo color y una cuadrícula con una sola capa que describa un algoritmo dinámico con
superpuesta a este fondo, es recomendable crear tres capas un conjunto de capas superpuestas con selección dinámica.
(ver figura 4). La capa 1 corresponde al barrido del fondo
donde el valor RGB es constante (ver figura 4b). La capa El diseño de imágenes dinámicas utilizando una capa
2 corresponde a la generación de las líneas horizontales, corresponde a funciones cuyo barrido se pueda establecer
donde las coordenadas determinantes son establecidas por en términos de una expresión matemática o funciones de
los valores Yk (ver figura 4c) donde se desea visualizar visualización de caracteres. Las funciones se pueden
líneas horizontales y los valores que acotan las líneas son diseñar a nivel de píxeles para lo cual se procede de forma
Xi (inicio de líneas) y Xf (finalización de líneas); en la similar como se generan imágenes estáticas, donde las
figura 4c se obtienen un conjunto de ocho coordenadas coordenadas determinantes ahora corresponde a una
determinantes para la generación de cuatro líneas función variable. Para el caso de diseñar funciones a nivel
horizontales. El algoritmo de barrido en psuedocodigo es: de carácter se debe construir una ROM, donde se
almacenan los valores RGB de los píxeles de los
Si Ybarrido≠(Y0 ó Y1 ó Y2 ó Y3) => RGB=000, para todo Xbarrido caracteres a visualizar. El direccionamiento de la ROM
Si Ybarrido=(Y0 ó Y1 ó Y2 ó Y3) ∧ (Xf <Xbarrido< Xi ) => RGB=000 determina el tipo de carácter a visualizar y el tamaño del
Si Ybarrido=(Y0 ó Y1 ó Y2 ó Y3) ∧ (Xi <Xbarrido< Xf )=> RGB= carácter [2].
color de la línea.
Para el diseño de imágenes dinámicas utilizando múltiples
capas se construye un conjunto de capas que corresponden O en pseudocodigo :
a la totalidad de las imágenes que se desean observar, o se
puede construir un conjunto de capas las cuales al ser Si (R1 ó G1 ó B1) =1 => Ri=R1, Gi=G1, Bi=B1;
combinadas de forma apropiada, generen las imágenes que De lo contrario => Ri=R2, Gi=G2, Bi=B2;
se desean observar. Por ejemplo si se necesita generar una
imagen en la cual aparezca un solo color, donde este varié Este procedimiento se puede realizar de forma repetitiva
de forma dinámica, se crea un conjunto de capas de cada para superponer mas capas.
color y se controla la selección de ellas de manera
adecuada.
6. CONTROLADOR DEL VIDEOJUEGO

5. SELECTOR DE CAPAS El controlador recibe las señales del PS-2 y a partir del
algoritmo correspondiente para el videojuego genera las
Cada capa genera un valor RGB particular, pero un único señales de entrada en el selector de capas.
valor RGB debe ser ingresado al controlador de la interfaz
VGA. Por lo tanto a partir de los múltiples valores RGB se 6.1 Control desde el PS-2
debe generar un solo valor RGB, para lo cual se utiliza
una función boleana de resolución que calcula dicho valor Las señales de entrada del PS-2 generan dos tipos de
RGB para la interfaz VGA. Dependiendo de la función de acción la imagen a visualizar, una acción directa que
resolución utilizada se obtendrán diferentes resultados en ordena la visualización de elementos independientes del
la visualización. estado del videojuego (acción combinacional), un ejemplo
es la visualización de caracteres. El otro tipo de acción es
5.1 Combinación de capas la comparación de la señal de entrada con el estado actual
del videojuego (acción secuencial) y genera una acción
Al usar una función de resolución OR entre capa 1 (R1 G1 sobre el selector de capas; esta opción depende del
B1) y capa 2 (R2 G2 B2) se obtiene la combinación de los algoritmo que se este desarrollando. Por ejemplo un
diferentes colores de las dos capas (Ri Gi Bi), donde : videojuego donde el elemento controlado por el PS-2
colapse o concuerde con el elemento de la imagen, en ese
Ri =R1 OR R2 momento se estable la coincidencia y se establece una
Gi =G1 OR G2 acción sobre la imagen o sobre el avance del videojuego
Bi =B1 OR B2
6.2 Control programado
Por ejemplo en el diseño de la cuadricula si el fondo es
azul (RGB=001) y las líneas de la cuadricula son blancas Otro tipo de control sobre el videojuego puede ser
(RGB=111), entonces se visualizara una cuadricula blanca programado en función del tiempo e independiente del
sobre un fondo azul; esto es un caso particular donde la control que ejerce el PS-2 sobre el videojuego. Por
capa 2 se superpone a la capa 1 y esto es posible ya que ejemplo la visualización de fondos dinámicos, el
los valores binarios RGB de la cuadricula son todos 1. En incremento de la complejidad del videojuego, el reinicio
términos generales al aplicar la función de resolución OR del videojuego, etc.
no se obtiene superposición, en lugar de esto se obtiene es
la mezcla de los colores de las capas, por ejemplo si se
modifica la línea de la cuadricula a un color rojo 7. DESCRIPCIONES VHDL RECOMENDADAS
(RGB=100) se obtendrá una cuadricula violeta sobre un
fondo azul. En el diseño del videojuego se utilizan varias entidades
VHDL de la referencia [2], las cuales han sido descritas
5.2 Superposición de capas para ser sintetizada sobre la UP1, estas son: VGA_SYNC
y KEYBOARD (interfaces VGA y PS-2), CHAR_ROM,
Para visualizar la superposición (Ri Gi Bi), de la capa 1 CLK_DIV y DEBOUNCE (generador de caracteres
(R1 G1 B1) sobre la capa 2 (R2 G2 B2), se aplica la alfabéticos, divisor de frecuencia y antirrebote).
siguiente función de resolución:
Para el diseño de las capas se debe utilizar un proceso
Ri = R1 (R1 + G1 + B1) + R2 (R1 + G1 + B1)’ VHDL por cada capa, donde los datos locales son
Gi = G1 (R1 + G1 + B1) + G2 (R1 + G1 + B1)’ variables y los datos globales son señales; la descripción
Bi = B1 (R1 + G1 + B1) + B2 (R1 + G1 + B1)’ de este proceso debe realizarse lo más independientemente
posible de otros procesos. La comunicación entre procesos Figura 6. Ejemplo de videojuego Pong
se realiza por medio de las señales; los RGB de cada
proceso (capas) deben ir al proceso de selección de capas.
El controlador del videojuego es un proceso que recibe las 8.3 Batalla Naval
señales del PS-2, e implementa un algoritmo secuencial
que corresponde al funcionamiento del videojuego y El mismo juego que todos han disfrutado en papel o en un
genera una acción sobre el selector de capas. tablero ahora se puede disfrutar en video (ver figura 7), la
misión: destruir la flota enemiga y evitar que la flotilla
propia sea destruida, lo cual se logra implementando una
8. VIDEOJUEGOS DISEÑADOS correcta estrategia de posicionamiento de los barcos
propios y haciendo los disparos sobre el campo enemigo
A continuación se presenta una selección de videojuegos como lo haría el mejor general del ejército.
diseñados con VHDL [4], el diseño de estos videojuegos
ha seguido la metodología planteada en este artículo. La
selección se realizó entre el conjunto de videojuegos
propuestos como proyectos finales de la asignatura Diseño
Digital con VHDL.

8.1 Asteroides

El juego que revolucionó en las primeras épocas de los

videojuegos (ver figura 5), la misión: no permitir ser Figura 7. Ejemplo de un videojuego: Batalla Naval
atrapado de ninguno de los asteroides que van cayendo por
la pantalla, para lo cual se pueden esquivar o destruir con 8.4 Dance Trance Revolution
el misil que a compaña la nave en esta odisea por el
espacio. La música no podía quedarse por fuera de esta
experiencia, Dance Trance Revolution es el juego que la
vincula a este proyecto (ver figura 8), al ritmo del trance
van apareciendo las flechas en la pantalla, las cuales debe
seguir el participante con sus manos desde el teclado, una
buena experiencia para los amantes de los ritmos
modernos.

Figura 5. Ejemplo de videojuego Asteroides

8.2 Pong

El popular juego de tenis, dos oponentes y una pelota (ver

figura 6). El objetivo lanzar la pelota en el terreno del
contrincante y que este no pueda responder, para lo cual Figura 8. Ejemplo de un videojuego: Dance Trance
basta con deslizar las barras que hacen de raquetas hasta Revolution
donde va a caer la pelota, y esta rebota en ellas tomando
como dirección el campo del contrario. 9. CONCLUSIONES Y TRABAJO FUTURO

El tipo de modelamiento VHDL a utilizar en el diseño de

un sistema digital, determina la metodología más
apropiada para abordar y desarrollar el diseño del sistema.

El tipo de modelamiento mas apropiado para realizar

descripciones VHDL de videojuegos es el
comportamental, esto se debe a que es mas difícil pensar
resolver el problema de diseñar un videojuego a partir de
estructuras hardware simples o flujos de datos.

El diseño de videojuegos motiva la creatividad en el

estudiante, lo cual le permite realizar descripciones VHDL
de manera mas ágil.

Como trabajo futuro se plantea el diseño VHDL de un

conjunto de capas a partir de funciones parametrizables,
las cuales sirvan como base para crear funciones mas
complejas y de esta manera abordar de forma mas ágil el
diseño de videojuegos mas complejos.

10. AGRADECIMIENTOS

Los autores agradecen a Altera Corp. por posibilitar el uso

de la herramienta EDA MAX+plus II. También agradecen
a los estudiantes Jorge Eduardo Guerrero Ramírez, Jaime
Andrés Arteaga Molina por permitir publicar imágenes de
sus juegos Asteroides y Pong respectivamente.

11. REFERENCIAS

[1] BHASKER Jayaram, “A VHDL Primer”, Prentice

Hall, USA 1992.
[2] HAMBLEN James O. y FURMAN Michael D., “Rapid
Prototyping of Digital Systems”, Kluwer Academics
Publishers, USA 2000.
[3] TERES Lluis y otros, “VHDL LENGUAJE
ESTANDAR DE DISEÑO ELECTRONICO” Mc Graw
Hill, España 1998.
[4] Informes de los trabajos de finales de la asignatura
Diseño Digital con VHDL del Segundo semestre de 2003.