Merge pull request 'Revisión del día 2 del tutorial de Uxn' (#7) from Roboe/compudanzas:revisión/día-2 into main
Reviewed-on: https://codeberg.org/sejo/compudanzas/pulls/7
This commit is contained in:
sejo
commit
af5cf7060a
|
|
@ -101,7 +101,7 @@ instrucciones nuevas: LIT, DEO, ADD, SUB
|
|||
|
||||
* modo corto
|
||||
* colores del sistema
|
||||
* dibujar pixeles
|
||||
* dibujar píxeles
|
||||
* sprites: formato chr, nasu
|
||||
* dibujar sprites sprites
|
||||
* operaciones en la pila
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ comencemos con el siguiente programa como plantilla. incluye los datos para un s
|
|||
|
||||
( dispositivos )
|
||||
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &auto $1 &pad $1 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &auto $1 &pad $1 &x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
|
||||
( macros )
|
||||
%RTN { JMP2r }
|
||||
|
|
@ -167,7 +167,7 @@ lo siguiente muestra nuestro programa en contexto, llenando completamente la pri
|
|||
|
||||
( dispositivos )
|
||||
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &auto $1 &pad $1 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &auto $1 &pad $1 &x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
|
||||
( macros )
|
||||
%RTN { JMP2r }
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ también discutiremos el trabajo con el modo corto o "short" (2 bytes) junto a l
|
|||
|
||||
si todavía no lo has hecho te recomiendo que leas las sección anterior en el {tutorial de uxn día 1}
|
||||
|
||||
# donde están tus cortos?
|
||||
# ¿dónde están tus cortos?
|
||||
|
||||
antes de pasar a dibujar en la pantalla, tenemos que hablar de bytes y cortos :)
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ para estos y otros casos, usar cortos en lugar de bytes será el camino a seguir
|
|||
|
||||
## el modo corto
|
||||
|
||||
contando de derecha a izquierda, el 6to bit de un byte que codifica una instrucción para el ordenador uxn es una bandera binaria que indica si el modo corto está activado o no.
|
||||
contando de derecha a izquierda, el 6º bit de un byte que codifica una instrucción para el ordenador uxn es una bandera binaria que indica si el modo corto está activado o no.
|
||||
|
||||
siempre que el modo corto esté activado, es decir, cuando ese bit sea 1 en lugar de 0, la cpu uxn realizará la instrucción dada por los 5 primeros bits (el opcode) pero utilizando pares de bytes en lugar de bytes individuales.
|
||||
|
||||
|
|
@ -86,7 +86,7 @@ ahora veamos que pasa con la instrucción ADD cuando usamos el modo corto.
|
|||
#0004 #0008 ADD
|
||||
```
|
||||
|
||||
así es! la pila tendrá los siguientes valores, porque estamos empujando 4 bytes hacia abajo en la pila, sumando (ADD) los dos más cercanos a la parte superior y empujando el resultado hacia abajo en la pila.
|
||||
¡así es! la pila tendrá los siguientes valores, porque estamos empujando 4 bytes hacia abajo en la pila, sumando (ADD) los dos más cercanos a la parte superior y empujando el resultado hacia abajo en la pila.
|
||||
|
||||
```
|
||||
00 04 08 <- arriba
|
||||
|
|
@ -194,10 +194,10 @@ podemos escribirlo de la siguiente manera:
|
|||
|
||||
podemos leer cada uno de los colores verticalmente, de izquierda a derecha:
|
||||
|
||||
* el color 0 sería el rojo: 2, verde: 0, azul: 2 ( #220022 en notación de color hexadecimal, púrpura oscuro )
|
||||
* el color 1 sería rojo: c, verde: 1, azul: c ( #cc11cc en notación de color hexadecimal, magenta )
|
||||
* el color 2 sería rojo: e, verde: c, azul: e ( #eeccee en notación de color hexadecimal, rosa claro )
|
||||
* el color 3 sería rojo 9, verde: 0, azul: 5 ( #990055 en notación de color hexadecimal, rojo oscuro )
|
||||
* el color 0 sería rojo: 2, verde: 0, azul: 2 (#220022 en notación de color hexadecimal, púrpura oscuro)
|
||||
* el color 1 sería rojo: c, verde: 1, azul: c (#cc11cc en notación de color hexadecimal, magenta)
|
||||
* el color 2 sería rojo: e, verde: c, azul: e (#eeccee en notación de color hexadecimal, rosa claro)
|
||||
* el color 3 sería rojo: 9, verde: 0, azul: 5 (#990055 en notación de color hexadecimal, rojo oscuro)
|
||||
|
||||
si ejecutamos el programa ahora veremos una pantalla de color púrpura oscuro, en lugar de negro como lo que teníamos antes.
|
||||
|
||||
|
|
@ -214,7 +214,7 @@ como recapitulación: mencionamos que el dispositivo de pantalla solo puede most
|
|||
en los programas uxntal para el ordenador varvara puedes encontrar las etiquetas correspondientes a este dispositivo de la siguiente manera:
|
||||
|
||||
```
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
```
|
||||
|
||||
las entradas que podemos leer de este dispositivo son:
|
||||
|
|
@ -243,7 +243,7 @@ al principio, la capa del primer plano es completamente transparente: un proceso
|
|||
|
||||
la primera y más sencilla forma de dibujar en la pantalla es dibujando un solo píxel.
|
||||
|
||||
para hacer esto necesitamos establecer un par de coordenadas x,y donde queremos que se dibuje el pixel y necesitamos establecer el byte 'pixel' a un valor específico para realizar realmente el dibujo.
|
||||
para hacer esto necesitamos establecer un par de coordenadas x,y donde queremos que se dibuje el píxel y necesitamos establecer el byte 'píxel' a un valor específico para realizar realmente el dibujo.
|
||||
|
||||
## estableciendo las coordenadas
|
||||
|
||||
|
|
@ -252,7 +252,7 @@ las coordenadas x,y siguen las convenciones comunes a otros programas de gráfic
|
|||
* x comienza en 0 a la izquierda y aumenta hacia la derecha de la pantalla
|
||||
* y comienza en 0 en la parte superior y aumenta hacia la parte inferior de la pantalla
|
||||
|
||||
si quisiéramos dibujar un píxel en coordenadas ( 8, 8 ), estableceríamos sus coordenadas de esta manera:
|
||||
si quisiéramos dibujar un píxel en coordenadas (8, 8), estableceríamos sus coordenadas de esta manera:
|
||||
|
||||
```
|
||||
#0008 .Pantalla/x DEO2
|
||||
|
|
@ -265,11 +265,11 @@ alternativamente, podríamos empujar primero los valores de las coordenadas haci
|
|||
#0008 #0008 .Pantalla/x DEO2 .Pantalla/y DEO2
|
||||
```
|
||||
|
||||
una pregunta para ti: si quisiéramos establecer las coordenadas como ( x: 4, y: 8 ), ¿cuál de los cortos en el código anterior deberías cambiar por 0004?
|
||||
una pregunta para ti: si quisiéramos establecer las coordenadas como (x: 4, y: 8), ¿cuál de los cortos en el código anterior deberías cambiar por 0004?
|
||||
|
||||
## estableciendo el color
|
||||
|
||||
el envío de un único byte a .Pantalla/pixel realizará el dibujo en la pantalla.
|
||||
el envío de un único byte a .Pantalla/píxel realizará el dibujo en la pantalla.
|
||||
|
||||
el nibble alto de ese byte, es decir, el dígito hexadecimal de la izquierda, determinará la capa en la que dibujaremos:
|
||||
|
||||
|
|
@ -278,7 +278,7 @@ el nibble alto de ese byte, es decir, el dígito hexadecimal de la izquierda, de
|
|||
|
||||
el nibble inferior del byte, es decir, el dígito hexadecimal de la derecha, determinará su color.
|
||||
|
||||
las 8 posibles combinaciones del byte 'pixel' que tenemos para dibujar un pixel son:
|
||||
las 8 posibles combinaciones del byte 'píxel' que tenemos para dibujar un píxel son:
|
||||
|
||||
+ <table>
|
||||
+ <tr><th>byte de píxel</th><th>capa</th><th>color</th></tr>
|
||||
|
|
@ -308,17 +308,17 @@ las 8 posibles combinaciones del byte 'pixel' que tenemos para dibujar un pixel
|
|||
```
|
||||
#0008 .Pantalla/x DEO2
|
||||
#0008 .Pantalla/y DEO2
|
||||
#41 .Pantalla/pixel DEO
|
||||
#41 .Pantalla/píxel DEO
|
||||
```
|
||||
|
||||
el programa completo se vería de la siguiente manera:
|
||||
|
||||
```
|
||||
( hola-pixel.tal )
|
||||
( hola-píxel.tal )
|
||||
|
||||
( dispositivos )
|
||||
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
|
||||
( programa principal )
|
||||
|0100
|
||||
|
|
@ -327,10 +327,10 @@ el programa completo se vería de la siguiente manera:
|
|||
#01c0 .Sistema/g DEO2
|
||||
#2ce5 .Sistema/b DEO2
|
||||
|
||||
( dibujar un pixel en la pantalla )
|
||||
( dibujar un píxel en la pantalla )
|
||||
#0008 .Pantalla/x DEO2
|
||||
#0008 .Pantalla/y DEO2
|
||||
#41 .Pantalla/pixel DEO ( capa de primer plano, color 1 )
|
||||
#41 .Pantalla/píxel DEO ( capa de primer plano, color 1 )
|
||||
```
|
||||
|
||||
¡wuju!
|
||||
|
|
@ -349,22 +349,22 @@ Por ejemplo, podemos dibujar múltiples píxeles en una línea horizontal, estab
|
|||
|
||||
( dibujar 6 píxeles en una línea horizontal )
|
||||
#0008 .Pantalla/x DEO2
|
||||
#41 .Pantalla/pixel DEO
|
||||
#41 .Pantalla/píxel DEO
|
||||
|
||||
#0009 .Pantalla/x DEO2
|
||||
#41 .Pantalla/pixel DEO
|
||||
#41 .Pantalla/píxel DEO
|
||||
|
||||
#000a .Pantalla/x DEO2
|
||||
#41 .Pantalla/pixel DEO
|
||||
#41 .Pantalla/píxel DEO
|
||||
|
||||
#000b .Pantalla/x DEO2
|
||||
#41 .Pantalla/pixel DEO
|
||||
#41 .Pantalla/píxel DEO
|
||||
|
||||
#000c .Pantalla/x DEO2
|
||||
#41 .Pantalla/pixel DEO
|
||||
#41 .Pantalla/píxel DEO
|
||||
|
||||
#000d .Pantalla/x DEO2
|
||||
#11 .Pantalla/pixel DEO
|
||||
#11 .Pantalla/píxel DEO
|
||||
```
|
||||
|
||||
nótese que tenemos que establecer el color para cada píxel que dibujamos; esa operación señala el dibujo y tiene que repetirse.
|
||||
|
|
@ -372,7 +372,7 @@ nótese que tenemos que establecer el color para cada píxel que dibujamos; esa
|
|||
podemos definir una macro para que este proceso sea más fácil de escribir:
|
||||
|
||||
```
|
||||
%DIBUJAR-PIXEL { #41 .Pantalla/pixel DEO } ( -- )
|
||||
%DIBUJAR-PÍXEL { #41 .Pantalla/píxel DEO } ( -- )
|
||||
```
|
||||
|
||||
## leyendo y manipulando coordenadas
|
||||
|
|
@ -438,14 +438,14 @@ nuestra macro para incrementar la coordenada x podría entonces escribirse como
|
|||
usando estas macros que definimos arriba, nuestro código puede terminar viéndose de la siguiente forma:
|
||||
|
||||
```
|
||||
( hola-pixeles.tal )
|
||||
( hola-píxeles.tal )
|
||||
|
||||
( dispositivos )
|
||||
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
|
||||
( macros )
|
||||
%DIBUJAR-PIXEL { #41 .Pantalla/pixel DEO } ( -- )
|
||||
%DIBUJAR-PÍXEL { #41 .Pantalla/píxel DEO } ( -- )
|
||||
%INC-X { .Pantalla/x DEI2 INC2 .Pantalla/x DEO2 } ( -- )
|
||||
|
||||
( programa princpal )
|
||||
|
|
@ -459,12 +459,12 @@ usando estas macros que definimos arriba, nuestro código puede terminar viéndo
|
|||
#0008 .Pantalla/y DEO2
|
||||
|
||||
( dibujar 6 píxeles en una línea horizontal )
|
||||
DIBUJAR-PIXEL INC-X
|
||||
DIBUJAR-PIXEL INC-X
|
||||
DIBUJAR-PIXEL INC-X
|
||||
DIBUJAR-PIXEL INC-X
|
||||
DIBUJAR-PIXEL INC-X
|
||||
DIBUJAR-PIXEL
|
||||
DIBUJAR-PÍXEL INC-X
|
||||
DIBUJAR-PÍXEL INC-X
|
||||
DIBUJAR-PÍXEL INC-X
|
||||
DIBUJAR-PÍXEL INC-X
|
||||
DIBUJAR-PÍXEL INC-X
|
||||
DIBUJAR-PÍXEL
|
||||
```
|
||||
|
||||
agradable, ¿no? ¡las operaciones ahora se ven más claras! y si quisiéramos tener esta línea disponible para usarla en otras posiciones, podríamos definir una macro para ella:
|
||||
|
|
@ -527,7 +527,7 @@ basándonos en eso, podríamos codificar nuestro cuadrado de la siguiente manera
|
|||
11111111: ff
|
||||
```
|
||||
|
||||
## almacenando el sprite:
|
||||
## almacenando el sprite
|
||||
|
||||
en uxntal, necesitamos etiquetar y escribir en la memoria principal los datos correspondientes al sprite. escribimos los bytes que van de arriba a abajo del sprite:
|
||||
|
||||
|
|
@ -549,7 +549,7 @@ para lograr esto, escribimos lo siguiente:
|
|||
;cuadrado .Pantalla/direc DEO2
|
||||
```
|
||||
|
||||
una nueva runa está aquí! la runa de dirección absoluta literal (;) nos permite empujar hacia abajo en la pila la dirección absoluta de la etiqueta dada en la memoria principal.
|
||||
¡una nueva runa está aquí! la runa de dirección absoluta literal (;) nos permite empujar hacia abajo en la pila la dirección absoluta de la etiqueta dada en la memoria principal.
|
||||
|
||||
una dirección absoluta tendría 2 bytes de longitud y se introduce en la pila con LIT2, incluida por el ensamblador cuando se utiliza esta runa.
|
||||
|
||||
|
|
@ -657,7 +657,7 @@ además, 5, 'a' y 'f' en el nibble bajo dibujarán los píxeles que están "ence
|
|||
|
||||
( dispositivos )
|
||||
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
|
||||
( programa principal )
|
||||
|0100
|
||||
|
|
@ -693,7 +693,7 @@ el siguiente código dibujará nuestro sprite cuadrado con las 16 combinaciones
|
|||
|
||||
( dispositivos )
|
||||
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
|
||||
( macros )
|
||||
%INIT-X { #0008 .Pantalla/x DEO2 } ( -- )
|
||||
|
|
@ -843,7 +843,7 @@ el dispositivo de pantalla tratará esta dirección como un sprite 2bpp cuando u
|
|||
|
||||
## configurando el color
|
||||
|
||||
¡veamos cómo utilizar el sprite byte para dibujar tildes de 2bpp!
|
||||
¡veamos cómo utilizar el sprite byte para dibujar tiles de 2bpp!
|
||||
|
||||
### sprite de nibble alto para 2bpp
|
||||
|
||||
|
|
@ -924,7 +924,7 @@ el siguiente código mostrará nuestro sprite en las 16 diferentes combinaciones
|
|||
|
||||
( dispositivos )
|
||||
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
|
||||
( macros )
|
||||
%INIT-X { #0008 .Pantalla/x DEO2 } ( -- )
|
||||
|
|
@ -1038,7 +1038,7 @@ esos dos números, 64 y 40 (ancho y alto), son el tamaño de pantalla por defect
|
|||
|
||||
puedes cambiarlos, guardar el archivo y volver a ejecutar el script build.sh para que uxnemu funcione con esta nueva resolución.
|
||||
|
||||
## leeyendo y adaptando el tamaño de la pantalla (lo básico)
|
||||
## leyendo y adaptando el tamaño de la pantalla (lo básico)
|
||||
|
||||
como recordarás de los puertos de dispositivos de pantalla mencionados anteriormente, la pantalla nos permite leer su anchura y altura como cortos.
|
||||
|
||||
|
|
@ -1145,7 +1145,7 @@ además de cubrir los fundamentos del dispositivo de pantalla hoy, discutimos es
|
|||
* BRK: rompe el flujo del programa, para cerrar subrutinas
|
||||
* MUL: toma los dos primeros elementos de la pila, los multiplica y empuja el resultado ( a b -- a*b )
|
||||
* DIV: toma los dos primeros elementos de la pila, los divide y empuja el resultado ( a b -- a/b )
|
||||
* SFT: toma un valor de desplazamiento y un número a desplazar con ese valor y lo desplaza. el nibble inferior del valor de desplazamiento indica el desplazamiento a la derecha y el nibble superior el desplazamiento a la izquierda ( número desplazo -- númerodesplazado )
|
||||
* SFT: toma un número a desplazar y un valor de desplazamiento y empuja el número desplazado las posiciones que indica el valor. el nibble inferior del valor de desplazamiento indica el desplazamiento a la derecha y el nibble superior, el desplazamiento a la izquierda ( número valordesplazamiento -- númerodesplazado )
|
||||
|
||||
también cubrimos el modo corto, que le indica a la cpu que debe operar con palabras de 2 bytes de longitud.
|
||||
|
||||
|
|
@ -1153,7 +1153,7 @@ también cubrimos el modo corto, que le indica a la cpu que debe operar con pala
|
|||
|
||||
¡en el {tutorial de uxn día 3} empezamos a trabajar con la interactividad usando el teclado y cubrimos en profundidad varias instrucciones uxntales!
|
||||
|
||||
sin embargo, te invito a que te tomes un descanso y a que sigas explorando el dibujo en la pantalla de uxn a través del código antes de continuar!
|
||||
sin embargo, ¡te invito a que te tomes un descanso y a que sigas explorando el dibujo en la pantalla de uxn a través del código antes de continuar!
|
||||
|
||||
# apoyo
|
||||
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ este utiliza el procedimiento de dibujo de sprites que probamos el día anterior
|
|||
|
||||
( dispositivos )
|
||||
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
|80 @Controlador [ &vector $2 &boton $1 &tecla $1 ]
|
||||
|
||||
( programa principal )
|
||||
|
|
@ -635,7 +635,7 @@ observa el uso de las máscaras AND, los saltos condicionales y algunas operacio
|
|||
( dibujar-con-teclado.tal )
|
||||
( dispositivos )
|
||||
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &pixel $1 &sprite ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &píxel $1 &sprite ]
|
||||
|80 @Controlador [ &vector $2 &boton $1 &tecla $1 ]
|
||||
|
||||
( programa principal )
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ también hablamos del uso de la memoria del programa como un espacio para datos
|
|||
discutimos el dispositivo de pantalla de varvara en el día 2, pero nos saltamos su puerto vectorial para centrarnos en cómo dibujar con él:
|
||||
|
||||
```
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
```
|
||||
|
||||
ahora que ya tenemos el concepto de vectores de dispositivos en el {tutorial de uxn día 3}, ¡vamos a entrar de lleno en cómo usar el de la pantalla!
|
||||
|
|
@ -35,7 +35,7 @@ el siguiente programa demuestra un uso básico pero potente del vector pantalla:
|
|||
|
||||
( dispositivos )
|
||||
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
|
||||
( init )
|
||||
|0100
|
||||
|
|
@ -53,8 +53,8 @@ el siguiente programa demuestra un uso básico pero potente del vector pantalla:
|
|||
BRK
|
||||
|
||||
@en-cuadro ( -> )
|
||||
( dibujar un pixel en el fondo con el color 1 )
|
||||
#01 .Pantalla/pixel DEO
|
||||
( dibujar un píxel en el fondo con el color 1 )
|
||||
#01 .Pantalla/píxel DEO
|
||||
|
||||
( incrementar Pantalla/x )
|
||||
.Pantalla/x DEI2 INC2 .Pantalla/x DEO2
|
||||
|
|
@ -83,7 +83,7 @@ estos son algunos cambios para que los pruebes y practiques:
|
|||
|
||||
merece señalar que muchas de estas posibilidades requieren formas de almacenar y recuperar datos entre fotogramas.
|
||||
|
||||
en el ejemplo anterior, estamos usando los puertos de pantalla para las coordenadas x e `y` como una forma de almacenar las coordenadas del pixel.
|
||||
en el ejemplo anterior, estamos usando los puertos de pantalla para las coordenadas x e `y` como una forma de almacenar las coordenadas del píxel.
|
||||
|
||||
pero, ¿qué sucede cuando queremos dibujar diferentes objetos, cada uno con su propio conjunto de coordenadas y otras características que pueden cambiar con el tiempo?
|
||||
|
||||
|
|
@ -106,23 +106,23 @@ sin embargo, no hemos utilizado los datos directamente; hemos enviado su direcci
|
|||
podríamos utilizar un sistema similar para almacenar, por ejemplo, las coordenadas x e `y` en lugar de los datos del sprite:
|
||||
|
||||
```
|
||||
@pixel-x 0008
|
||||
@pixel-y 0008
|
||||
@píxel-x 0008
|
||||
@píxel-y 0008
|
||||
```
|
||||
|
||||
o si no quisiéramos iniciarlas aquí, podríamos definirlas de la siguiente manera:
|
||||
|
||||
```
|
||||
@pixel-x $2
|
||||
@pixel-y $2
|
||||
@píxel-x $2
|
||||
@píxel-y $2
|
||||
```
|
||||
|
||||
recuerda que $2 crea un pad relativo de dos bytes: esto hace que píxel-y sea una etiqueta para una dirección en memoria dos bytes después de pixel-x. y cualquier código posterior ocurrirá dos bytes después de píxel-y.
|
||||
recuerda que $2 crea un pad relativo de dos bytes: esto hace que píxel-y sea una etiqueta para una dirección en memoria dos bytes después de píxel-x. y cualquier código posterior ocurrirá dos bytes después de píxel-y.
|
||||
|
||||
también podríamos usar etiquetas y sub-etiquetas, de manera muy similar a como definimos los dispositivos y sus puertos:
|
||||
|
||||
```
|
||||
@pixel [ &x $2 &y $2 ]
|
||||
@píxel [ &x $2 &y $2 ]
|
||||
```
|
||||
|
||||
### instrucciones: LDA y STA
|
||||
|
|
@ -140,32 +140,32 @@ en el modo corto, LDA2 cargará un corto desde la dirección dada y STA2 almacen
|
|||
|
||||
### ejemplos
|
||||
|
||||
como ejemplo, el siguiente código leería los dos bytes de pixel/x, los incrementaría en uno y los almacenaría de nuevo en pixel/x:
|
||||
como ejemplo, el siguiente código leería los dos bytes de píxel/x, los incrementaría en uno y los almacenaría de nuevo en píxel/x:
|
||||
|
||||
```
|
||||
;pixel/x LDA2 ( cargar pixel/x en la pila )
|
||||
;píxel/x LDA2 ( cargar píxel/x en la pila )
|
||||
INC2 ( incrementar )
|
||||
;pixel/x STA2 ( almacenar el resultado en pixel/x )
|
||||
;píxel/x STA2 ( almacenar el resultado en píxel/x )
|
||||
|
||||
BRK
|
||||
|
||||
@pixel [ &x $2 &y $2 ]
|
||||
@píxel [ &x $2 &y $2 ]
|
||||
```
|
||||
|
||||
nótese el uso de BRK antes de la etiqueta del píxel para que uxn se detenga antes de leer los datos como instrucciones.
|
||||
|
||||
lo siguiente es una variación que también duplica el nuevo valor de pixel/x para enviarlo a Pantalla/x:
|
||||
lo siguiente es una variación que también duplica el nuevo valor de píxel/x para enviarlo a Pantalla/x:
|
||||
|
||||
```
|
||||
;pixel/x LDA2 ( cargar pixel/x en la pila )
|
||||
;píxel/x LDA2 ( cargar píxel/x en la pila )
|
||||
INC2 ( incrementar )
|
||||
DUP2 ( duplicar el resultado )
|
||||
;pantalla/x DEO2 ( establecer como pantalla/x )
|
||||
;pixel/x STA2 ( y guardar el resultado en pixel/x )
|
||||
;píxel/x STA2 ( y guardar el resultado en píxel/x )
|
||||
|
||||
BRK
|
||||
|
||||
@pixel [ &x $2 &y $2 ]
|
||||
@píxel [ &x $2 &y $2 ]
|
||||
```
|
||||
|
||||
nótese que podríamos haber conseguido el mismo resultado almacenando el resultado y luego recargándolo y enviándolo como salida.
|
||||
|
|
@ -177,7 +177,7 @@ aquí podemos ver cómo un DUP2 puede facilitar esa operación, siempre y cuando
|
|||
una posible ventaja de utilizar direcciones absolutas es que podemos iniciar el contenido de nuestras variables en el momento de ensamblaje, por ejemplo:
|
||||
|
||||
```
|
||||
@pixel [ &x 0008 &y 0008 ]
|
||||
@píxel [ &x 0008 &y 0008 ]
|
||||
```
|
||||
|
||||
estos contenidos iniciales cambiarán cada vez que usemos una instrucción STA allí :)
|
||||
|
|
@ -202,7 +202,7 @@ las etiquetas para la página cero funcionarían igual que antes; solo tenemos q
|
|||
|
||||
```
|
||||
|0000 ( página cero )
|
||||
@pixel [ &x $2 &y $2 ]
|
||||
@píxel [ &x $2 &y $2 ]
|
||||
```
|
||||
|
||||
para referirnos a ellas, utilizaríamos la runa punto (.) para las direcciones literales de página cero, en lugar de la runa dos puntos (;) para las direcciones literales absolutas.
|
||||
|
|
@ -229,11 +229,11 @@ en este caso el programa es más largo, pero puede ser visto como una buena plan
|
|||
|
||||
( dispositivos )
|
||||
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
|
||||
( página cero )
|
||||
|0000
|
||||
@pixel [ &x $2 &y $2 ]
|
||||
@píxel [ &x $2 &y $2 ]
|
||||
|
||||
( init )
|
||||
|0100
|
||||
|
|
@ -243,8 +243,8 @@ en este caso el programa es más largo, pero puede ser visto como una buena plan
|
|||
#2ce5 .Sistema/b DEO2
|
||||
|
||||
( establecer coordenadas iniciales x,y )
|
||||
#0008 .pixel/x STZ2
|
||||
#0008 .pixel/y STZ2
|
||||
#0008 .píxel/x STZ2
|
||||
#0008 .píxel/y STZ2
|
||||
|
||||
( establecer el vector de pantalla )
|
||||
;en-cuadro .Pantalla/vector DEO2
|
||||
|
|
@ -252,27 +252,27 @@ BRK
|
|||
|
||||
@en-cuadro ( -> )
|
||||
( cargar las coordenadas x,y de la página cero y enviarlas a la pantalla )
|
||||
.pixel/x LDZ2 .Pantalla/x DEO2
|
||||
.pixel/y LDZ2 .Pantalla/y DEO2
|
||||
.píxel/x LDZ2 .Pantalla/x DEO2
|
||||
.píxel/y LDZ2 .Pantalla/y DEO2
|
||||
|
||||
( dibujar un pixel en el fondo con color 1 )
|
||||
#01 .Pantalla/pixel DEO
|
||||
( dibujar un píxel en el fondo con color 1 )
|
||||
#01 .Pantalla/píxel DEO
|
||||
|
||||
( incrementar el pixel/x )
|
||||
.pixel/x LDZ2 INC2 .pixel/x STZ2
|
||||
( incrementar el píxel/x )
|
||||
.píxel/x LDZ2 INC2 .píxel/x STZ2
|
||||
BRK
|
||||
```
|
||||
|
||||
notemos el uso de la runa literal de dirección de página cero (.) para referirse a la etiqueta .pixel.
|
||||
notemos el uso de la runa literal de dirección de página cero (.) para referirse a la etiqueta .píxel.
|
||||
|
||||
además, observe que en el caso de .pixel la dirección se refiere a la página cero, a la que se accede con LDZ/STZ, y en el caso de .Pantalla la dirección se refiere al espacio de direcciones entrada/salida (i/o), al que se accede con DEI/DEO.
|
||||
además, observe que en el caso de .píxel la dirección se refiere a la página cero, a la que se accede con LDZ/STZ, y en el caso de .Pantalla la dirección se refiere al espacio de direcciones entrada/salida (i/o), al que se accede con DEI/DEO.
|
||||
|
||||
### un poco de práctica de manipulación en la pila
|
||||
|
||||
nota que las siguientes instrucciones también incrementarían .pixel/x, pero estableciendo su dirección solo una vez:
|
||||
nota que las siguientes instrucciones también incrementarían .píxel/x, pero estableciendo su dirección solo una vez:
|
||||
|
||||
```
|
||||
.pixel/x DUP LDZ2 INC2 ROT STZ2
|
||||
.píxel/x DUP LDZ2 INC2 ROT STZ2
|
||||
```
|
||||
|
||||
te recomiendo que sigas cómo cambia el contenido de la pila en cada uno de los siguientes pasos: ten en cuenta que algunas de las instrucciones están en modo corto :)
|
||||
|
|
@ -312,17 +312,17 @@ lo siguiente es la subrutina en-cuadro que dibuja la línea creciente, pero alma
|
|||
```
|
||||
@en-cuadro ( -> )
|
||||
( carga las coordenadas x,y desde la página cero y las envía a la pantalla )
|
||||
,pixel/x LDR2 .Pantalla/x DEO2
|
||||
,pixel/y LDR2 .Pantalla/y DEO2
|
||||
,píxel/x LDR2 .Pantalla/x DEO2
|
||||
,píxel/y LDR2 .Pantalla/y DEO2
|
||||
|
||||
( dibujar un pixel en el fondo con el color 1 )
|
||||
#01 .Pantalla/pixel DEO
|
||||
( dibujar un píxel en el fondo con el color 1 )
|
||||
#01 .Pantalla/píxel DEO
|
||||
|
||||
( incrementa pixel/x )
|
||||
,pixel/x LDR2 INC2 ,pixel/x STR2
|
||||
( incrementa píxel/x )
|
||||
,píxel/x LDR2 INC2 ,píxel/x STR2
|
||||
BRK
|
||||
|
||||
@pixel [ &x $2 &y $2 ]
|
||||
@píxel [ &x $2 &y $2 ]
|
||||
```
|
||||
|
||||
nótese el uso de la runa coma (,) para indicar que es una dirección relativa; uxnasm calcula el desfase requerido asumiendo que será utilizado en la siguiente instrucción.
|
||||
|
|
@ -334,17 +334,17 @@ si declaráramos estas variables como sub-etiquetas de en-cuadro, el código que
|
|||
```
|
||||
@en-cuadro ( -> )
|
||||
( carga las coordenadas x,y de la página cero y las envía a la pantalla )
|
||||
,&pixel-x LDR2 .Pantalla/x DEO2
|
||||
,&pixel-y LDR2 .Pantalla/y DEO2
|
||||
,&píxel-x LDR2 .Pantalla/x DEO2
|
||||
,&píxel-y LDR2 .Pantalla/y DEO2
|
||||
|
||||
( dibujar un píxel en el fondo con el color 1 )
|
||||
#01 .Pantalla/pixel DEO
|
||||
#01 .Pantalla/píxel DEO
|
||||
|
||||
( incrementa píxel/x )
|
||||
,&pixel-x LDR2 INC2 ,&pixel-x STR2
|
||||
,&píxel-x LDR2 INC2 ,&píxel-x STR2
|
||||
BRK
|
||||
( variables locales de en-cuadro )
|
||||
&pixel-x $2 &pixel-y $2
|
||||
&píxel-x $2 &píxel-y $2
|
||||
```
|
||||
|
||||
observe que en este caso, la runa de la coma (,) va acompañada de la runa de la sub-etiqueta (&).
|
||||
|
|
@ -367,9 +367,9 @@ te recomiendo que revises y experimentes con uno a la vez, pacientemente :)
|
|||
|
||||
## cambio de posición autónomo
|
||||
|
||||
ya discutimos como hacer que uxn cambie la posición de un pixel en la pantalla, dejando un rastro.
|
||||
ya discutimos como hacer que uxn cambie la posición de un píxel en la pantalla, dejando un rastro.
|
||||
|
||||
cambiar ese programa para dibujar un sprite de 8x8 en su lugar sería relativamente sencillo y puede que ya lo hayas probado: tendríamos que usar Pantalla/sprite en lugar de Pantalla/pixel, con un byte apropiado para definir su color y orientación, y tendríamos que establecer la dirección de los datos de nuestro sprite en Pantalla/direc.
|
||||
cambiar ese programa para dibujar un sprite de 8x8 en su lugar sería relativamente sencillo y puede que ya lo hayas probado: tendríamos que usar Pantalla/sprite en lugar de Pantalla/píxel, con un byte apropiado para definir su color y orientación, y tendríamos que establecer la dirección de los datos de nuestro sprite en Pantalla/direc.
|
||||
|
||||
eso daría como resultado un sprite que se mueve y que además deja un rastro: ¡te invito a que lo pruebes primero!
|
||||
|
||||
|
|
@ -396,7 +396,7 @@ el siguiente programa ilustra los puntos anteriores, haciendo que nuestro cuadra
|
|||
|
||||
( dispositivos )
|
||||
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
|
||||
( macros/constantes )
|
||||
%MITAD2 { #01 SFT2 } ( desplazar un bit a la derecha ) ( corto -- corto/2 )
|
||||
|
|
@ -494,7 +494,7 @@ el siguiente programa nos permite controlar la posición horizontal de nuestro c
|
|||
( hola-sprite-en-movimiento.tal )
|
||||
( dispositivos )
|
||||
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
|80 @Controlador [ &vector $2 &boton $1 &tecla $1 ]
|
||||
|
||||
( macros/constantes )
|
||||
|
|
@ -817,7 +817,7 @@ la sección "borrar el sprite" no es realmente necesaria en este caso debido a l
|
|||
|
||||
( dispositivos )
|
||||
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
|
||||
( macros/constantes )
|
||||
%MITAD2 { #01 SFT2 } ( desplazar un bit a la derecha ) ( corto -- corto/2 )
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ dibuja nuestro cuadrado en la posición del ratón, cambiando su color cuando se
|
|||
|
||||
( dispositivos )
|
||||
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
|90 @Raton [ &vector $2 &x $2 &y $2 &estado $1 &pad $3 &despx $2 &despy $2 ]
|
||||
|
||||
( init )
|
||||
|
|
@ -156,7 +156,7 @@ este es un programa que logra dibujar el puntero en la pantalla
|
|||
|
||||
( dispositivos )
|
||||
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
|90 @Raton [ &vector $2 &x $2 &y $2 &estado $1 &pad $3 &despx $2 &despy $2 ]
|
||||
|
||||
( página cero )
|
||||
|
|
@ -201,7 +201,7 @@ BRK
|
|||
@puntero_icn [ 80c0 e0f0 f8e0 1000 ]
|
||||
```
|
||||
|
||||
nótese que dibuja el puntero en primer plano y que utiliza 'a' en el nibble bajo del byte del sprite: esto implica que utilizará el color 2 para dibujar la forma del puntero y dibujará con transparencia el resto del tile. ( ver dibujar sprites de 1bpp en el {tutorial de uxn día 2} )
|
||||
nótese que dibuja el puntero en primer plano y que utiliza 'a' en el nibble bajo del byte del sprite: esto implica que utilizará el color 2 para dibujar la forma del puntero y dibujará con transparencia el resto del tile. (ver dibujar sprites de 1bpp en el {tutorial de uxn día 2})
|
||||
|
||||
este modo de mezcla te permitiría dibujar cosas en el plano de fondo y que el puntero las cubra solo con su forma, y no con todo el cuadrado del tile.
|
||||
|
||||
|
|
@ -397,7 +397,7 @@ adicionalmente, como las direcciones empujadas por JSR son cortos, necesitamos a
|
|||
JMP2r ( saltar a la dirección absoluta en la parte superior de la pila de retorno )
|
||||
```
|
||||
|
||||
en muchos programas uxntal verás esta instrucción escrita como una macro, RTN ( retornar o "return" ):
|
||||
en muchos programas uxntal verás esta instrucción escrita como una macro, RTN (retornar o "return"):
|
||||
|
||||
```
|
||||
%RTN { JMP2r }
|
||||
|
|
@ -414,7 +414,7 @@ este es el programa hola-puntero.tal, pero utilizando dibuja-puntero como subrut
|
|||
|
||||
( dispositivos )
|
||||
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
|90 @Raton [ &vector $2 &x $2 &y $2 &estado $1 &pad $3 &despx $2 &despy $2 ]
|
||||
|
||||
( macros )
|
||||
|
|
@ -536,8 +536,8 @@ un signo de intercalación (^) después de un nombre de valor indica que corresp
|
|||
( almacenar la longitud y el conteo )
|
||||
STH2 ( pt: / pr: longitud conteo )
|
||||
|
||||
( dibujar pixel con color 2 )
|
||||
#02 .Pantalla/pixel DEO
|
||||
( dibujar píxel con color 2 )
|
||||
#02 .Pantalla/píxel DEO
|
||||
|
||||
( incrementar x )
|
||||
.Pantalla/x DEI2 INC2 .Pantalla/x DEO2
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ empecemos con el siguiente programa como plantilla. incluye los datos para un sp
|
|||
|
||||
( dispositivos )
|
||||
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &auto $1 &pad $1 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &auto $1 &pad $1 &x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
|80 @Controlador [ &vector $2 &boton $1 &tecla $1 ]
|
||||
|
||||
( macros )
|
||||
|
|
@ -175,7 +175,7 @@ lo siguiente muestra nuestro programa en contexto, llenando completamente la pri
|
|||
|
||||
( dispositivos )
|
||||
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &auto $1 &pad $1 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &auto $1 &pad $1 &x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
|80 @Controlador [ &vector $2 &boton $1 &tecla $1 ]
|
||||
|
||||
( macros )
|
||||
|
|
@ -571,7 +571,7 @@ omitiendo la definición de las subrutinas dibuja-fondo y dibuja-pala y como for
|
|||
|
||||
( dispositivos )
|
||||
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &auto $1 &pad $1 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &auto $1 &pad $1 &x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
|80 @Controlador [ &vector $2 &boton $1 &tecla $1 ]
|
||||
|
||||
( macros )
|
||||
|
|
@ -1302,7 +1302,7 @@ aquí está todo el código que hemos escrito hoy:
|
|||
( dispositivos )
|
||||
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|
||||
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &auto $1 &pad $1
|
||||
&x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
|
||||
&x $2 &y $2 &direc $2 &píxel $1 &sprite $1 ]
|
||||
|80 @Controlador [ &vector $2 &boton $1 &tecla $1 ]
|
||||
|
||||
( macros )
|
||||
|
|
|
|||
Loading…
Reference in New Issue