cursos:z88dk:sprites4

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

Ambos lados, revisión anterior Revisión previa
Próxima revisión
Revisión previa
cursos:z88dk:sprites4 [10-08-2007 08:41] sromerocursos:z88dk:sprites4 [24-02-2020 19:25] (actual) falvarez
Línea 1: Línea 1:
  
-> ÍNDICE DE REVISTAS < +Publicado originalmente en [[https://magazinezx.speccy.org/14/z88dk.html|MagazineZX número 14]] (diciembre 2006)
- Número 14 - Diciembre 2006 ZX Certified webmaster speccy.org +
- +
  
-LA LIBRERIA SPRITE PACK (II)+====== Sprites en Z88DK (IV======
  
-INTRODUCCIÓN 
  
-En la entrega anterior de la revista comenzamos a examinar la librería Sprite Pack y aprendimos a dibujar elementos gráficos sobre la pantalla. También aprendimos que la pantalla estaba dividida en 32x24 "celdas", cada una de las cuales podía contener un tile (cada uno de los elementos que forman parte del fondo) y/o uno o más sprites (gráficos que representaban los diferentes personajes o elementos de nuestro juego). Incluso llegamos a crear un sprite que se movía al azar por la pantalla.+===== La librería Sprite Pack (II) ===== 
 + 
 + 
 +En la entrega anterior de la revista comenzamos a examinar la librería Sprite Pack y aprendimos a dibujar elementos gráficos sobre la pantalla. También aprendimos que la pantalla estaba dividida en 32x24 "celdas", cada una de las cuales podía contener un //tile// (cada uno de los elementos que forman parte del fondo) y/o uno o más sprites (gráficos que representaban los diferentes personajes o elementos de nuestro juego). Incluso llegamos a crear un sprite que se movía al azar por la pantalla.
  
 En esta ocasión vamos a añadir un par de sencillos detalles más antes de comenzar a escribir nuestro propio juego; un código que luego podrá formar parte de un producto más elaborado. En concreto veremos cómo hacer reaccionar nuestro programa ante la pulsación de teclas por parte del usuario, y cómo mover un sprite utilizando este dispositivo de entrada. También aprenderemos como añadir color a los sprites. Para nuestras explicaciones haremos uso como base del código sprite2.c que se creó en la anterior entrega, y en el que se definía un sprite de tamaño 2x1 que se desplazaba al azar. En esta ocasión vamos a añadir un par de sencillos detalles más antes de comenzar a escribir nuestro propio juego; un código que luego podrá formar parte de un producto más elaborado. En concreto veremos cómo hacer reaccionar nuestro programa ante la pulsación de teclas por parte del usuario, y cómo mover un sprite utilizando este dispositivo de entrada. También aprenderemos como añadir color a los sprites. Para nuestras explicaciones haremos uso como base del código sprite2.c que se creó en la anterior entrega, y en el que se definía un sprite de tamaño 2x1 que se desplazaba al azar.
  
-MOVIENDO LOS SPRITES CON EL TECLADO+ 
 +===== Moviendo los sprites con el teclado =====
  
 Si queremos mover un sprite por la pantalla utilizando el teclado, lo primero que deberemos hacer en nuestro programa es declarar una estructura del siguiente tipo: Si queremos mover un sprite por la pantalla utilizando el teclado, lo primero que deberemos hacer en nuestro programa es declarar una estructura del siguiente tipo:
  
 +<code c>
 struct sp_UDK keys; struct sp_UDK keys;
 +</code>
  
-La variable keys nos permitirá asociar teclas de nuestro teclado con los diferentes controles de un joystick virtual haciendo uso de la función sp_Lookup_Key, tal como se puede observar a continuación:+La variable keys nos permitirá asociar teclas de nuestro teclado con los diferentes controles de un joystick virtual haciendo uso de la función //sp_Lookup_Key//, tal como se puede observar a continuación:
  
-           keys.up = sp_LookupKey('q');  +<code c> 
-           keys.down = sp_LookupKey('a');  +keys.up = sp_LookupKey('q');  
-           keys.right = sp_LookupKey('p');  +keys.down = sp_LookupKey('a');  
-           keys.left = sp_LookupKey('o');  +keys.right = sp_LookupKey('p');  
-           keys.fire = sp_LookupKey(' '); +keys.left = sp_LookupKey('o');  
 +keys.fire = sp_LookupKey(' ');  
 +</code>
  
 Según este ejemplo, cada vez que pulsáramos 'q' en el teclado es como si estuviéramos moviendo el joystick hacia arriba, al pulsar 'a' simulamos la dirección de abajo del joystick, y así sucesivamente. Varias de estas teclas podrían ser pulsadas simultáneamente sin ningún problema. Según este ejemplo, cada vez que pulsáramos 'q' en el teclado es como si estuviéramos moviendo el joystick hacia arriba, al pulsar 'a' simulamos la dirección de abajo del joystick, y así sucesivamente. Varias de estas teclas podrían ser pulsadas simultáneamente sin ningún problema.
  
-La función sp_JoyKeyboard devuelve una máscara de bits indicándonos qué controles del joystick están accionados en ese momento debido a que sus correspondientes teclas están pulsadas. La forma de interpretar el valor devuelto por esta función es igual que con cualquier máscara de bits en C, y se puede contemplar en el siguiente ejemplo, que consiste en el archivo sprite2.c de la anterior entrega modificado de tal forma que movamos el sprite precisamente con la combinación de teclas indicada anteriormente. Para ello realizamos movimientos relativos del sprite, cambiando cómo desplazamos el sprite en x y en y (dx y dy respectivamente) según los controles de nuestro joystick virtual que estén siendo accionados. El código nuevo respecto a la versión anterior del archivo se muestra en rojo:+La función **sp_JoyKeyboard** devuelve una máscara de bits indicándonos qué controles del joystick están accionados en ese momento debido a que sus correspondientes teclas están pulsadas. La forma de interpretar el valor devuelto por esta función es igual que con cualquier máscara de bits en C, y se puede contemplar en el siguiente ejemplo, que consiste en el archivo //sprite2.c// de la anterior entrega modificado de tal forma que movamos el sprite precisamente con la combinación de teclas indicada anteriormente. Para ello realizamos movimientos relativos del sprite, cambiando cómo desplazamos el sprite en x y en y (dx y dy respectivamente) según los controles de nuestro joystick virtual que estén siendo accionados. El código nuevo respecto a la versión anterior del archivo se muestra marcado como nuevo:
  
 +<code c>
 #include <spritepack.h> #include <spritepack.h>
 #include <stdlib.h> #include <stdlib.h>
Línea 43: Línea 49:
 extern uchar bicho2[]; extern uchar bicho2[];
 extern uchar bicho3[]; extern uchar bicho3[];
-struct sp_UDK keys;+struct sp_UDK keys;        // nuevo
  
 uchar hash[] = {0x55,0xaa,0x55,0xaa,0x55,0xaa,0x55,0xaa}; uchar hash[] = {0x55,0xaa,0x55,0xaa,0x55,0xaa,0x55,0xaa};
Línea 75: Línea 81:
     sp_AddMemory(0, 255, 14, 0xb000);     sp_AddMemory(0, 255, 14, 0xb000);
                        
 +           // nuevo (principio)
            keys.up = sp_LookupKey('q');             keys.up = sp_LookupKey('q'); 
     keys.down = sp_LookupKey('a');      keys.down = sp_LookupKey('a'); 
Línea 80: Línea 87:
     keys.left = sp_LookupKey('o');      keys.left = sp_LookupKey('o'); 
     keys.fire = sp_LookupKey(' ');      keys.fire = sp_LookupKey(' '); 
 +           // nuevo (fin)
          
            spriteBicho = sp_CreateSpr(sp_MASK_SPRITE, 3, bicho1, 1, TRANSPARENT);            spriteBicho = sp_CreateSpr(sp_MASK_SPRITE, 3, bicho1, 1, TRANSPARENT);
Línea 88: Línea 96:
            while(1) {            while(1) {
            sp_UpdateNow();            sp_UpdateNow();
- + 
 +                 // nuevo (principio) 
                   = sp_JoyKeyboard(&keys);                    = sp_JoyKeyboard(&keys); 
                  if ((i & sp_FIRE) == 0) {                   if ((i & sp_FIRE) == 0) { 
Línea 103: Línea 112:
                  else if ((i & sp_DOWN) != 0)                   else if ((i & sp_DOWN) != 0) 
                       dy = 0;                        dy = 0; 
-          +                 // nuevo (fin)           
                  sp_MoveSprRel(spriteBicho, sp_ClipStruct, 0, 0, 0, dx, dy);                         sp_MoveSprRel(spriteBicho, sp_ClipStruct, 0, 0, 0, dx, dy);       
     }     }
Línea 203: Línea 213:
  
 #endasm #endasm
 +</code>
  
-Al probar el ejemplo nos habremos encontrado con un problema bastante grave: al no controlar cuándo el sprite sobrepasa los límites de la pantalla, es posible desplazar nuestro "bicho" al exterior y perder totalmente su control. Una forma de solucionarlo sería añadir un nuevo control de tal forma que al accionarlo volviéramos a colocar a nuestro bicho en el centro de la pantalla. Esto se puede conseguir realizando mapeados adicionales de teclado a los del joystick virtual. Mediante sp_LookupKey se puede asociar una tecla a una variable uint, de tal forma que más adelante, mediante el uso de otra función adicional llamada sp_KeyPressed podremos saber si dicha tecla está siendo pulsada en este momento. +Al probar el ejemplo nos habremos encontrado con un problema bastante grave: al no controlar cuándo el sprite sobrepasa los límites de la pantalla, es posible desplazar nuestro "bicho" al exterior y perder totalmente su control. Una forma de solucionarlo sería añadir un nuevo control de tal forma que al accionarlo volviéramos a colocar a nuestro bicho en el centro de la pantalla. Esto se puede conseguir realizando mapeados adicionales de teclado a los del joystick virtual. Mediante **sp_LookupKey** se puede asociar una tecla a una variable uint, de tal forma que más adelante, mediante el uso de otra función adicional llamada **sp_KeyPressed** podremos saber si dicha tecla está siendo pulsada en este momento.
-¡Ya podemos mover a nuestro bicho con el teclado! +
-¡Ya podemos mover a nuestro bicho con el teclado!+
  
-El código anterior se ha modificado para añadir dos nuevas funcionalidadesAl pulsar la tecla r, nuestro "bicho" volverá al centro de la pantalla. Por otra parte, la tecla b va a permitir que cambiemos el color del borde. Las modificaciones se muestran en rojo:+{{ cursos:z88dk:z88dk9_1.png |¡Ya podemos mover a nuestro bicho con el teclado!}}
  
 +El código anterior se ha modificado para añadir dos nuevas funcionalidades. Al pulsar la tecla r, nuestro "bicho" volverá al centro de la pantalla. Por otra parte, la tecla b va a permitir que cambiemos el color del borde.
 +
 +<code c>
 #include <spritepack.h> #include <spritepack.h>
 #include <stdlib.h> #include <stdlib.h>
Línea 239: Línea 251:
     char dx,dy,i     char dx,dy,i
     struct sp_SS *spriteBicho;     struct sp_SS *spriteBicho;
-    uint reset,cambioBorde;  +    uint reset,cambioBorde;          // nuevo 
-    int borde = 1;+    int borde = 1;                   // nuevo
          
  
Línea 262: Línea 274:
     keys.left = sp_LookupKey('o');      keys.left = sp_LookupKey('o'); 
     keys.fire = sp_LookupKey(' ');     keys.fire = sp_LookupKey(' ');
-    reset = sp_LookupKey('r');  +    reset = sp_LookupKey('r');              // nuevo 
-    cambioBorde = sp_LookupKey('b'); +    cambioBorde = sp_LookupKey('b');        // nuevo
          
            spriteBicho = sp_CreateSpr(sp_MASK_SPRITE, 3, bicho1, 1, TRANSPARENT);            spriteBicho = sp_CreateSpr(sp_MASK_SPRITE, 3, bicho1, 1, TRANSPARENT);
Línea 288: Línea 300:
                  else if ((i & sp_DOWN) != 0)                   else if ((i & sp_DOWN) != 0) 
                       dy = 0;                        dy = 0; 
 +                 // nuevo (principio)
                  if (sp_KeyPressed(reset))                   if (sp_KeyPressed(reset)) 
               sp_MoveSprAbs(spriteBicho, sp_ClipStruct, 0, 10, 15, 0, 0);                sp_MoveSprAbs(spriteBicho, sp_ClipStruct, 0, 10, 15, 0, 0); 
Línea 303: Línea 316:
       sp_Border(BLUE);       sp_Border(BLUE);
       }       }
 +                 // nuevo (fin)
     }     }
 } }
Línea 401: Línea 415:
  
 #endasm #endasm
 +</code>
  
 Como veremos más adelante, deberemos implementar algún mecanismo para limitar la zona por donde nuestros sprites se van a desplazar. La forma de hacer esto es mediante simples comparaciones, comprobando que el lugar al que vamos a desplazar el sprite no este fuera de la pantalla (o de la zona donde queremos que permanezca). Como veremos más adelante, deberemos implementar algún mecanismo para limitar la zona por donde nuestros sprites se van a desplazar. La forma de hacer esto es mediante simples comparaciones, comprobando que el lugar al que vamos a desplazar el sprite no este fuera de la pantalla (o de la zona donde queremos que permanezca).
  
-AÑADIENDO COLOR+ 
 + 
 + 
 +===== Añadiendo color ===== 
  
 Un paso importante para poder tener como resultado un videojuego vistoso y que entre por los ojos es aprovechar los colores de nuestro Spectrum y disponer de una combinación agradable de cromaticidad en los sprites de nuestro juego. Los colores también permitirán distinguir con mayor facilidad nuestro personaje de los enemigos y el resto de elementos de la pantalla. Ya vimos en entregas anteriores que en el caso de los tiles era bastante sencillo modificar la tonalidad de la tinta y el papel: Un paso importante para poder tener como resultado un videojuego vistoso y que entre por los ojos es aprovechar los colores de nuestro Spectrum y disponer de una combinación agradable de cromaticidad en los sprites de nuestro juego. Los colores también permitirán distinguir con mayor facilidad nuestro personaje de los enemigos y el resto de elementos de la pantalla. Ya vimos en entregas anteriores que en el caso de los tiles era bastante sencillo modificar la tonalidad de la tinta y el papel:
  
 +<code c>
 sp_TileArray(' ', hash); sp_TileArray(' ', hash);
 sp_Initialize(INK_WHITE | PAPER_BLACK, ' '); sp_Initialize(INK_WHITE | PAPER_BLACK, ' ');
 +</code>
  
-pero en el caso de los sprites la cosa se complica un poco más y vamos a tener que dar unas cuantas "vueltas" para llegar a nuestro objetivo. En concreto, deberemos hacer uso de una función llamada sp_IterateSprChar, que recibe como parámetro una variable de tipo struct sp_SS, que representa el sprite que queremos modificar, y el nombre de una función que habremos definido anteriormente. Dicha función, al ser llamada, obtendrá como parámetro una variable de tipo struct sp_CS, una estructura muy interesante que nos va a permitir modificar diversas características del sprite, entre ellas el color.+pero en el caso de los sprites la cosa se complica un poco más y vamos a tener que dar unas cuantas "vueltas" para llegar a nuestro objetivo. En concreto, deberemos hacer uso de una función llamada **sp_IterateSprChar**, que recibe como parámetro una variable de tipo struct sp_SS, que representa el sprite que queremos modificar, y el nombre de una función que habremos definido anteriormente. Dicha función, al ser llamada, obtendrá como parámetro una variable de tipo **struct sp_CS**, una estructura muy interesante que nos va a permitir modificar diversas características del sprite, entre ellas el color.
  
-El siguiente código muestra, en color rojo, las modificaciones realizadas al programa anterior para poder añadirle color al sprite de nuestro bicho, y que pasaremos a explicar a continuación:+El siguiente código muestra las modificaciones realizadas al programa anterior para poder añadirle color al sprite de nuestro bicho, y que pasaremos a explicar a continuación:
  
 +<code c>
 #include <spritepack.h> #include <spritepack.h>
 #include <stdlib.h> #include <stdlib.h>
Línea 425: Línea 447:
 #endasm #endasm
  
 +// nuevo (principio)
 extern uchar *sp_NullSprPtr;  extern uchar *sp_NullSprPtr; 
 #asm  #asm 
Línea 430: Línea 453:
 ._sp_NullSprPtr         defw SPNullSprPtr   ._sp_NullSprPtr         defw SPNullSprPtr  
 #endasm  #endasm 
 +// nuevo (fin)
  
 extern uchar bicho1[]; extern uchar bicho1[];
Línea 447: Línea 471:
  
  
 +// nuevo (principio)
 uchar n;  uchar n; 
 void addColour(struct sp_CS *cs)   void addColour(struct sp_CS *cs)  
Línea 468: Línea 493:
     return;      return; 
 } }
 +// nuevo (fin)
  
  
Línea 503: Línea 529:
            sp_AddColSpr(spriteBicho, bicho2, TRANSPARENT);            sp_AddColSpr(spriteBicho, bicho2, TRANSPARENT);
     sp_AddColSpr(spriteBicho, bicho3, TRANSPARENT);     sp_AddColSpr(spriteBicho, bicho3, TRANSPARENT);
-    sp_IterateSprChar(spriteBicho, addColour); +    sp_IterateSprChar(spriteBicho, addColour);         // nuevo
            sp_MoveSprAbs(spriteBicho, sp_ClipStruct, 0, 10, 15, 0, 0);            sp_MoveSprAbs(spriteBicho, sp_ClipStruct, 0, 10, 15, 0, 0);
  
Línea 637: Línea 663:
  
 #endasm #endasm
 +</code>
  
 Como se puede comprobar, tras crear el sprite del bicho, hacemos uso de la siguiente instrucción: Como se puede comprobar, tras crear el sprite del bicho, hacemos uso de la siguiente instrucción:
  
 +<code c>
 sp_IterateSprChar(spriteBicho, addColour); sp_IterateSprChar(spriteBicho, addColour);
 +</code>
  
-Esto significa que vamos a usar una función llamada addColour, y que deberemos haber definido anteriormente dentro del archivo con el código, para modificar las propiedades de spriteBicho. Aunque la instrucción sólo aparece una vez, es como si estuviéramos llamando a la función addColour una vez por cada bloque de 8x8 que forma el sprite del bicho (recordemos que el sprite de nuestro bicho está formado por 3 columnas de 3 bloques de 8x8, por lo que la función addColour será llamada un total de 9 veces). La forma que tiene está función es la siguiente:+Esto significa que vamos a usar una función llamada **addColour**, y que deberemos haber definido anteriormente dentro del archivo con el código, para modificar las propiedades de //spriteBicho//. Aunque la instrucción sólo aparece una vez, es como si estuviéramos llamando a la función addColour una vez por cada bloque de 8x8 que forma el sprite del bicho (recordemos que el sprite de nuestro bicho está formado por 3 columnas de 3 bloques de 8x8, por lo que la función addColour será llamada un total de 9 veces). La forma que tiene está función es la siguiente:
  
 +<code c>
 uchar n; uchar n;
 void addColour(struct sp_CS *cs) void addColour(struct sp_CS *cs)
Línea 665: Línea 695:
            return;            return;
 } }
 +</code>
  
-Justo antes se define una variable global llamada n, y que no será más que un contador que nos permitirá saber en cuál de las nueve llamadas a la función addColour nos encontramos. Ya dentro de dicho método se observa como su valor se incrementa de uno en uno en cada llamada.+Justo antes se define una variable global llamada n, y que no será más que un contador que nos permitirá saber en cuál de las nueve llamadas a la función **addColour** nos encontramos. Ya dentro de dicho método se observa como su valor se incrementa de uno en uno en cada llamada.
  
-Como hemos repetido varias veces, la función addColour será llamada una vez por cada bloque 8x8 que forme nuestro sprite, recibiendo como parámetro un struct de tipo sp_CS que nos va a permitir modificar diversas características de dicho bloque del sprite. Uno de los campos de ese struct es colour, que como su propio nombre indica, es el indicado para añadir color. Gracias al valor de n, podremos conocer en cuál de todos los bloques del sprite nos encontramos (empezando por el 0, los bloques están ordenados de arriba a abajo y de izquierda a derecha, por lo que en el caso de nuestro bicho, aun estando compuesto por 3x3 bloques, sólo nos interesará colorear aquellos para los que n vale 0,1,3 y 4, que son los que no están vacíos) y asignarle un color de tinta y papel modificando el valor del campo colour del struct sp_CS, tal como se puede observar en el código anterior.+Como hemos repetido varias veces, //la función **addColour** será llamada una vez por cada bloque 8x8 que forme nuestro sprite//, recibiendo como parámetro un struct de tipo //sp_CS// que nos va a permitir modificar diversas características de dicho bloque del sprite. Uno de los campos de ese struct es colour, que como su propio nombre indica, es el indicado para añadir color. Gracias al valor de n, podremos conocer en cuál de todos los bloques del sprite nos encontramos (empezando por el 0, los bloques están ordenados de arriba a abajo y de izquierda a derecha, por lo que en el caso de nuestro bicho, aun estando compuesto por 3x3 bloques, sólo nos interesará colorear aquellos para los que n vale 0,1,3 y 4, que son los que no están vacíos) y asignarle un color de tinta y papel modificando el valor del campo colour del //struct sp_CS//, tal como se puede observar en el código anterior.
  
-Sólo deberemos colorear los bloques 0,1,3 y 4 de nuestro bicho, pues el bloque 2 se corresponde con el último de la primera columna (que está vacío), el bloque 5 con el último de la segunda columna (que también está vacío) y los bloques 6,7 y 8 con la última columna de todas, también vacía, y que se añadió para que no hubiera problemas al desplazar el sprite. En el caso de los bloques 2 y 5 lo más correcto hubiera sido utilizar el valor TRANSPARENT para el campo colour (aunque en nuestro ejemplo hemos sido un poco transgresores y el bloque 2 no lo hemos hecho transparente). Para la última columna (bloques para los que n vale más que 5), sin embargo, asignamos el valor sp_NullSprPtr al campo colour. Este valor, que ha sido definido anteriormente en el programa de la siguiente forma:+Sólo deberemos colorear los bloques 0, 1, 3 y 4 de nuestro bicho, pues el bloque 2 se corresponde con el último de la primera columna (que está vacío), el bloque 5 con el último de la segunda columna (que también está vacío) y los bloques 6,7 y 8 con la última columna de todas, también vacía, y que se añadió para que no hubiera problemas al desplazar el sprite. En el caso de los bloques 2 y 5 lo más correcto hubiera sido utilizar el valor //TRANSPARENT// para el campo colour (aunque en nuestro ejemplo hemos sido un poco transgresores y el bloque 2 no lo hemos hecho transparente). Para la última columna (bloques para los que n vale más que 5), sin embargo, asignamos el valor //sp_NullSprPtr// al campo colour. Este valor, que ha sido definido anteriormente en el programa de la siguiente forma:
  
 +<code c>
 extern uchar *sp_NullSprPtr; extern uchar *sp_NullSprPtr;
 #asm #asm
Línea 677: Línea 709:
 ._sp_NullSprPtr         defw SPNullSprPtr ._sp_NullSprPtr         defw SPNullSprPtr
 #endasm #endasm
 +</code>
  
 evitará que esa columna vacía "moleste" al resto de los sprites con los que nuestro bicho entre en contacto. evitará que esa columna vacía "moleste" al resto de los sprites con los que nuestro bicho entre en contacto.
  
 Y ya está, ya le hemos dado color a nuestro bicho (eso sí, una combinación bastante psicodélica). Cada vez que queramos hacer lo mismo con cualquier otro sprite, tan solo deberemos seguir la receta anterior, pues es algo mecánico. Y ya está, ya le hemos dado color a nuestro bicho (eso sí, una combinación bastante psicodélica). Cada vez que queramos hacer lo mismo con cualquier otro sprite, tan solo deberemos seguir la receta anterior, pues es algo mecánico.
-Nuestro sprite a colorEvidentemente, la combinación de colores puede ser mejorada + 
-Nuestro sprite a color. Evidentemente, la combinación de colores puede ser mejorada+{{ cursos:z88dk:z88dk9_2.png |Nuestro sprite a color. Evidentemente, la combinación de colores puede ser mejorada}}
  
  
Línea 1209: Línea 1242:
  
  
-    * [[http://www.speccy.org/magazinezx/revistas/14/src/z88dk9_codigo.tar.gz|Código fuente]]+    * [[https://magazinezx.speccy.org/14/src/z88dk9_codigo.tar.gz|Código fuente]]
  
  
  
  • cursos/z88dk/sprites4.1186735285.txt.gz
  • Última modificación: 10-08-2007 08:41
  • por sromero