Categoría: Tutorial

Con todo lo aprendido en los post anteriores vamos a realizar una pequeña animación. Para ello definiremos 2 sprites, que serán los frames del famosisimo Space Invaders:

El programa que estoy utilizando aquí es C64 Studio, un IDE de programación que entre otras cosas trae un sencillo editor de sprites que me permite exportar los DATA a lineas de BASIC, y lo pueden descargar desde aquí: https://www.georg-rottensteiner.de/en/index.html

Luego cargaremos estos valores a partir de la memoria 12288, que corresponden a los punteros 192 y 193. Para hacer una animación solamente tenemos que implementar un loop FOR, y alternamos estos valores en cada iteración.
La parte interesante que la podemos ver a continuación:

100 for sx = 24 to 255
110 poke v,sx
120 poke 2040,192 + ((sx and 8) / 8)
130 next 

El loop se encuentra entre las lineas 100-130, en la linea 110 se va actualizando la posición y en la linea 120 se especifica que frame mostrar segun esa posición.
El truco aquí esta en “+ ((sx and 8) / 8)”: este código toma el valor 1 o 0 segun el estado del bit 3 en la variable sx.
De esta forma las primeras 8 posiciones tomaran el valor 0, lo que hará que el puntero quede seteado en la posición 192, en las siguientes 8 posiciones quedará en 1, por lo que el puntero sera 193, en las siguientes 8 volverá a 0 … y así indefinidamente.
Si quisiéramos que la animacion se reproduzca mas rápido podemos checkear el estado de los bits de menor peso y si queremos que se reproduzca mas lento chequeamos los bits de mayor peso.
Aqui podemos ver como se ve nuestro alien animado:

y el listado completo a continuación:

10 v=53248 
20 poke v+21,1
30 poke 2040,192
40 for t=12288 to 12414
50 read n
60 poke t,n
70 next
80 poke v+39,1
90 poke v+1,75

100 for sx = 24 to 255
110 poke v,sx
120 poke 2040,192 + ((sx and 8) / 8)
130 next 

150 for sx = 255 to 24 step -1
160 poke v,sx
170 poke 2040,192 + ((sx and 8) / 8)
180 next 

200 goto 100

1000 data 14,7,0,14,7,0,3,12
1010 data 0,3,12,0,15,255,0,15
1020 data 255,0,60,243,192,60,243,192
1030 data 255,255,240,255,255,240,207,255
1040 data 48,207,255,48,204,3,48,204
1050 data 3,48,7,158,0,7,158,0
1060 data 0,0,0,0,0,0,0,0
1070 data 0,0,0,0,0,0,0,1
1080 data 14,7,0,14,7,0,195,12
1090 data 48,195,12,48,207,255,48,207
1100 data 255,48,252,243,240,252,243,240
1110 data 255,255,240,255,255,240,63,255
1120 data 192,63,255,192,28,3,128,28
1130 data 3,128,48,0,192,48,0,192
1140 data 0,0,0,0,0,0,0,0
1150 data 0,0,0,0,0,0,0,1

Y esto es todo por hoy, nos vemos en la próxima entrega!

En el post anterior vimos como activar un sprite, como seleccionar el area de memoria que dara la forma a nuestro sprite, y lo posicionamos en la pantalla.
Hoy vamos a darle la forma definitiva, para ello tenemos 2 vias:

1. Usar un editor de sprites, que nos genere los numeros necesarios
2. Hacerlo a mano

Hoy vamos a optar por la segunda opción, mas que nada para aprender como se hacía a la antigüa usanza, despues podremos utilizar multitud de programas que nos permiten dibujar comodamente y exportar los datos al formato que deseemos

Los sprites en la C64 poseen un tamaño de 24 x 21 pixels, lo que nos da 3 bytes (24px) por 21 = 63 bytes.
Para definir un sprite “a la antigüa” dibujaremos una cuadricula de 24×21, agrupando en columnas de 8 pixels. Luego pintaremos las casillas con los puntos que componen nuestro gráfico, para finalmente convertir cada grupo de 8 pixels en un byte.
Por ejemplo, aqui tenemos un circulo solido relleno:

Cada grupo de 8 bits los convertimos primero a binario, y luego a decimal (podemos utilizar la calculadora de windows, seteandola en modo programador), de forma que el primer byte es 00000000, que en decimal es “0”, el segundo 01111110 es “126” en decimal, y asi con el resto.
A continuación tenemos el programa completo, con los 63 bytes que definen nuestra “pelota”.

10 v=53248
20 pokev+21,1: rem activamos sprite numero 1
30 poke2040,192: rem direccion de inicio 12288
40 fort=12288to12350 : rem leemos los 63 valores
45 read n
50 poke t,n
60 next
70 pokev+39,1: rem elegimos color blanco
80 pokev,100: rem posicion horizontal 100
90 pokev+1,110: rem posicion vertical 110
100 data 0, 126, 0
110 data 3,255,192
120 data 7,255,224
130 data 31,255,248
140 data 31,255,248
150 data 63,255,252
160 data 127,255,254
170 data 127,255,254
180 data 255,255,255
190 data 255,255,255
210 data 255,255,255
220 data 255,255,255
230 data 255,255,255
240 data 127,255,254
250 data 127,255,254
260 data 63,255,252
270 data 31,255,248
280 data 31,255,248
290 data 7,255,224
300 data 3,255,192
310 data 0, 126, 0

Ademas de poder posicionar nuestro sprite en cualquier parte de la pantalla, tambien podemos elegirle un color, expandirlo al doble a lo ancho, o alto, o ambos.
Para darle un color utilizaremo el registro 39 (v + 39 seria) y un número entre 0 y 15 para especificar que color queremos asignarle

Los sprites en la C64 son objetos que podemos definir como nosotros deseemos, y que se pueden posicionar en cualquier parte de la pantalla. Al ser manejados por hardware no tenemos que preocuparnos por preservar el fondo de pantalla, ni mover bytes, pintarlos ni nada que en otras computadoras es tarea corriente.
La C64 puede manejar hasta 8 sprites, y cada uno de ellos se les puede asignar un color independiente, expandirlos en el eje X o Y, posicionarlos en cualquier parte de la pantalla, y un monton de cosas mas.
Cada sprite tiene un tamaño de 24×21 pixels, y ocupa 63 bytes en memoria

En este pequeño ejemplo vamos a definir un sprite cuadrado (todo con el valor 255, que en binario es 11111111), y vamos a ver como lo podemos mover, expandir y cambiar el color.
Primero vamos a ingresar este programa en la c64, con el que vamos a poder ejemplificar varios conceptos 😀

10 v=53248 
20 poke v+21,1
30 poke 2040,16
40 for t=1024 to 1087
50 poke t,255
60 next
70 poke v,100
80 poke v+1,110

En la primera linea seteamos la variable v con el valor 53248. Este valor corresponde al primer registro de los 46 que posee el chip de video de la C64 (el VIC2). De esta manera solamente tenemos que recordar una posición de memoria, y ciertos registros claves.
El primer registro aparece en la linea 20, el número 21, y corresponde al numero de sprite activo, en este caso el número 1. Luego aparece una dirección de memoria (2040) con el que podemos especificar que segmento de la memoria del VIC2 queremos utilizar para definir la forma de nuestro sprite.

NOTA acerca del direccionamiento de memoria del VIC2:
Si bien el 6510 (el microprocesador de la C64) puede direccionar hasta 64kb de memoria, el VIC2 solo puede direccionar 16kb. Por razones que escapan a esta introducción, el VIC2 se puede configurar para que utilize cualquiera de los 4 bancos de 16Kb, y por defecto cuando encendemos la C64 esta configurado para trabajar en el banco 0 (el bloque de memoria que va de 0 a 16384)

En la dirección de memoria 2040, entonces, podemos especificar el lugar donde se almacenarán los valores que daran forma a nuestro Sprite, en segmentos de 64 bytes. Para nuestro ejemplo utilizamos el valor 16, que multiplicado por 64 nos da … 1024… mhmmm..
Eso lo vimos en un post anterior, en el que imprimíamos en pantalla utilizando POKEs directamente en la dirección de video del VIC2.
La idea de utilizar la memoria de video es mostrar como se va llenando la memoria con los valores que necesita el sprite (lineas 40 – 60), y como podemos modificarlos y ver como se reflejan esas modificaciones en la figura del sprite. Por supuesto que en un juego real no vamos a utilizar esa direccion, porque donde borramos la pantalla o actualizamos cualquier valor se nos rompe el sprite.
Finalmente en las lineas 70 y 80 posicionamos el sprite en pantalla.
Si ejecutamos el programa obtendremos el siguiente resultado (observen como se modifica el sprite cuando altero las 2 primeras lineas de texto en pantalla)

Observese tambien que se ve un puntito que representa el cursor.
En la siguiente entrega ya vamos a darle una forma mejor, y vamos a mostrar el uso de los diferentes registros.

En el post anterior vimos como mover un caracter por la pantalla, pero habia algunas limitaciones, como por ejemplo que no podiamos realizar diagonales, y que cada vez que queríamos avanzar debíamos pulsar repetidamente las teclas.

Hoy vamos a hacer el mismo programa, pero controlando la pelota con el joystick conectado en el port 2, pero primero… un poco de teoria.

Para leer las posiciones del joystick tenemos las posiciones de memoria 56321 (port 1) y 56320 (port 2).
los bits 0,1,2,3 corresponden a las direcciones (arriba, abajo, izquierda, derecha) y el bit 4 corresponde al boton de disparo.
Estando el joystick en posicion central, sin pulsar disparo estas direcciones nos devuelven el valor 127, que corresponde a %01111111, y a medida que vamos moviendo el joystick y pulsando el disparo se ponen en 0 los bits correspondientes.
Podemos ver rapidamente como se comportan los valores con un sencillo programita de 3 lineas

20 j=peek(56320)
30 print j
40 goto 20

Copia este programa y cuando lo ejecutes comenzara a imprimir el valor 127. Conecta un joystick al port 2 y veras como varia este valor segun las direcciones que muevas.

Vamos ahora si con el programa de la bola modificado para joystick

10 x = 10: y = 10
20 poke 1024 + (40 * y)+ x, 81
30 j = not(peek(56320)) and 127
40 if j = 0 then 30
50 poke 1024 + (40 * y)+ x, 32
60 dx = -((j and 4) / 4) + ((j and 8) / 8)
70 dy = -(j and 1) + ((j and 2) / 2)
80 x = x + dx: y = y + dy
90 poke 1024 + (40 * y)+ x, 81
100 goto 30

Como es usual, primero definimos en la linea 10 la posicion inicial en pantalla, y a continuacion imprimimos la bola. A continuacion leemos el valor del port 2 y, para poder hacer unas operaciones despues, vamos a invertir los bits, y poner el bit 7 en 0 (con esto lo que logramos es que cuando pulsemos el bit se ponga en 1, en vez de 0)

Las otras lineas interesantes son la 60 / 70, que obtienen el valor dx / dy haciendo unos calculos. La ventaja de hacerlo de esta manera sobre el tradicional chequeo de IFs es que ocupa menos lugar (importantisimo) y que ya nos resuelve la deteccion de diagonales (con estas 2 lineas evitamos 8 lineas de IFs)

En la linea 80 actualizamos las posiciones, luego imprimimos la bola, y vuelta a chequear el valor del port 2.
A continuacion podemos ver la diferencia con el programa anterior

El proximo post vamos a comenzar a utilizar sprites. Hasta la próxima!

El BASIC de la C64 nos provee 2 instrucciones para ingresar información desde el teclado:

1. INPUT : Para casos en los que queremos ingresar un nombre o un valor numérico
2. GET : para cuando necesitamos detectar solo la pulsación de una tecla

Para lo que queremos hacer ahora vamos a utilizar el comando GET. El modo de uso es muy simple, solo toma como parámetro la variable en la que queremos que coloque el valor de la tecla pulsada.
Con este pequeño ejemplo vemos como funciona:

10 get a$
20 print a$;
30 goto 10

Si ejecutamos aparentemente no realiza nada, pero si pulsamos una tecla aparecera su correspondiente letra en la pantalla. Lo que esta haciendo aqui es un loop infinito en el que lee el valor de la tecla pulsada, lo imprime, y vuelve a leer, asi indefinidamente.
Con todo esto podemos hacer nuestro programita en el que controlamos una bola

10 px% = 10: py% = 10
20 a$ = ""
30 get a$ : if a$="" then 100
40 poke 1024+(py%*40)+px%,32
50 if a$="d" then px%=px%+1
60 if a$="a" then px%=px%-1
70 if a$="s" then py%=py%+1
80 if a$="w" then py%=py%-1
90 poke 1024+(py%*40)+px%,81
100 goto 30

Nuevamente definimos nuestras variables de posición, luego leemos el valor de la tecla pulsada, y si no se detecto ninguna salteamos la parte de código que mueve nuestro personaje.
Esto tal vez no tenga demasiado sentido en este ejemplo, pero en juegos mas complejos esta bueno que si no se pulsa ninguna tecla se puedan hacer otras cosas (no tiene sentido volver a imprimir el personaje en la misma posición)

En las siguientes lineas borramos la bola de la posición anterior (el caracter 32 es el Espacio), comprobamos si se pulsó alguna de las teclas W, A, S, D, e imprimimos la bola en la posición actualizada.
NOTA: se podria optimizar mucho más este ejemplo, pero a efectos didácticos vamos a mantenerlo simple.

Y así es como queda:

Vimos en el post anterior que tenemos 2 formas de imprimir en pantalla: con el comando PRINT tradicional o directamente cargando valores en la memoria de video.

La memoria de video de la C64 se compone (simplificando mucho, para lo que queremos explicar) de una matriz de 40 columnas por 25 filas de caracteres, lo que nos da un total de 1000 caracteres. En cualquiera de estas posiciones podemos imprimir lo que deseemos, simplemente colocando el valor correcto.

La posición de memoria 1024 es el inicio de nuestra memoria de video. En ella se encuentra el caracter que corresponde a la esquina superior izquierda de la pantalla, y a medida que vamos incrementando esta posición los caracteres van llenando la pantalla.

Para muestra, vale este pequeño ejemplo:

10 for x = 0 to 1000
20 poke 1024 + x, 81
30 next

Aqui podemos ver como se va llenando la pantalla, de izquierda a derecha, las 1000 posiciones de la misma.

¿Y si queremos posicionar algo? Es muy sencillo, simplemente con esta formula:

m = 1024 + (40 * py) + px

Donde m es la posición de memoria, px es la columna y py es la fila donde queremos posicionar nuestro gráfico. Con toda esta información podemos escribir un pequeño programita que nos dibuja una pelota rebotando por la pantalla:

10 px% = 10: py% = 10: dx% = 1: dy% = 1
20 poke 1024+(py%*40)+px%,32
30 px% = px% + dx%
40 py% = py% + dy%
50 if px%=39 then dx% = -dx%
60 if px%=0 then dx% = -dx%
70 if py%=24 then dy% = -dy%
80 if py%=0 then dy% = -dy%
90 poke 1024+(py%*40)+px%,81
100 goto 20

px y py son la posición de la pelota; dx y dy su dirección.

Inmediatamente pintamos un espacio, porque si no lo hacemos la pelota nos dejará una estela de pelotas, luego incrementamos la posicion según la dirección en la que está yendo, hacemos las comprobaciones para que no salga de la pantalla, y finalmente imprimimos la pelota… y reinicia el ciclo.

Y el resultado es el siguiente… bueno, mas o menos, la captura de pantallas esta hecha a 15 cuadros (frames) por segundo, lo que hace que la pelota desaparezca un poco.

En el próximo post vamos a ver como leer el teclado, ycontrolar con WASD nuestra bola