<\/p>\n
El personaje<\/h1>\n
Para este tutorial vamos a mostrar un personaje de 16×16 pixels en pantalla, que haremos que camine alternando 4 frames. Como mis habilidades de dibujo son nulas, he comprado en Itch.io un pack de gr\u00e1ficos creado por Vryell, llamado \u201cTiny Village Pack\u201d, y he seleccionado un personaje.<\/p>\n
![\"\"](\"https:\/\/specnext.dev\/es\/wp-content\/uploads\/sites\/2\/2022\/07\/Sprite101.Original-4x.png\"){kind=icon}
<\/p>\n
<\/p>\n
Creando los sprites<\/h1>\n
Vamos a crear 4 sprites a partir de la imagen original. Para ello utilizaremos las herramientas de Remmy Sharp: https:\/\/zx.remysharp.com\/sprites\/<\/a><\/p>\n Seleccionamos la pesta\u00f1a \u201cImport\u201d y arrastramos el fichero con las im\u00e1genes sobre la pantalla del navegador.<\/p>\n En el \u00e1rea de sprites de la izquierda, seleccionamos el primer cuadro y pulsamos el bot\u00f3n \u201cCopy in\u201d. SI ahora seleccionamos la pesta\u00f1a \u201cSprite editor, veremos que el Sprite se puede haber copia cortado o incompleto.<\/p>\n Para solucionar esto, volvemos a la pesta\u00f1a \u201cImport\u201d y movemos la imagen con el rat\u00f3n o con las teclas \u201cMay\u00fasculas + Flecha\u201d o \u201cControl + May\u00fasculas + Flecha\u201d. Volvemos a pulsar \u201cCopy in\u201d y repetimos la operaci\u00f3n hasta que tenemos el Sprite deseado.<\/p>\n En este ejemplo las im\u00e1genes ocupan 16×16, pero podemos crear sprites m\u00e1s grandes juntando varios, para ello podemos ir jugando con las opciones \u201cDimension\u201d y \u201cAuto repeat impot\u201d.<\/p>\n Repetimos la operaci\u00f3n con las tres im\u00e1genes restantes, eso s\u00ed, seleccionamos el segundo, tercer y cuarto caj\u00f3n de la izquierda para ir definiendo cada uno de los 4 sprites.<\/p>\n Al tratarse de un personaje animado, podemos previsualizar la animaci\u00f3n pulsando sobre el icono \u201cShow animation options\u201d.<\/p>\n Ahora, pulsamos sobre el bot\u00f3n \u201cDownload spritesheet\u201d y le damos el nombre \u201cChica.spr\u201d<\/p>\n <\/p>\n Abriremos la carpeta \u201cC:\\ZXNext\\NextBuildv7\\Sources\\\u201d desde Visual Studio Code, tal como vimos en el post: https:\/\/specnext.dev\/es\/2022\/07\/28\/preparando-el-ambiente-para-programar-para-next-con-boriel-zx-basic-y-nextbuild\/<\/a><\/p>\n Vamos a crear una carpeta que llamaremos \u201cSprites101\u201d dentro de \u201cC:\\ZXNext\\NextBuildv7\\Sources\\\u201d. Dentro de esta carpeta vamos a crear el fichero \u201cSpriteTest1.bas\u201d, que es con el que vamos a trabajar.<\/p>\n Tambi\u00e9n vamos a crear una carpeta que llamaremos \u201cdata\u201d dentro de \u201cC:\\ZXNext\\NextBuildv7\\Sources\\Sprites101\u201d, y copiaremos el fichero \u201cChica.spr\u201d dentro.<\/p>\n <\/p>\n Abrimos el fichero \u201cSpriteTest1.bas\u201d y tecleamos el c\u00f3digo siguiente (sugiero teclearlo en vez de copiarlo y pegarlo, con el fin de analizar que hace cada l\u00ednea).<\/p>\n <\/p>\n Lo primero que nos encontramos es un \u201cinclude\u201d para a\u00f1adir la librer\u00eda NextLib. Esta librer\u00eda es necesaria para poder utilizar las caracter\u00edsticas avanzadas del Next.<\/p>\n <\/p>\n Acto seguido definimos tres variables:<\/p>\n Despu\u00e9s se llama al SUB Main, que es la funci\u00f3n principal del programa.<\/p>\n Justo despu\u00e9s nos encontramos una sentencia \u201cSTOP\u201d, que lo que hace es detener el programa. Es una buena pr\u00e1ctica colocar este comando al final de nuestro programa para que este se detenga, ya que el emulador puede entrar en bucle al terminar.<\/p>\n <\/p>\n El SUB Main, llama al m\u00e9todo \u201cInicializar\u201d, que inicializa el sistema.<\/p>\n Lo primero que hacemos es fijar la velocidad de la CPU a 28MHz:<\/p>\n![\"\"](\"https:\/\/specnext.dev\/es\/wp-content\/uploads\/sites\/2\/2022\/07\/Sprite101.Import-1024x738.png\"){kind=icon}
<\/p>\n![\"\"](\"https:\/\/specnext.dev\/es\/wp-content\/uploads\/sites\/2\/2022\/07\/Sprite101.Editor1-1024x751.png\"){kind=icon}
<\/p>\n![\"\"](\"https:\/\/specnext.dev\/es\/wp-content\/uploads\/sites\/2\/2022\/07\/Sprite101.Editor2-1024x739.png\"){kind=icon}
<\/p>\n![\"\"](\"https:\/\/specnext.dev\/es\/wp-content\/uploads\/sites\/2\/2022\/07\/Sprite101.Editor.Animacion-1024x621.png\"){kind=icon}
<\/p>\nCreando las carpetas del programa<\/h1>\n
![\"\"](\"https:\/\/specnext.dev\/es\/wp-content\/uploads\/sites\/2\/2022\/07\/Sprite102.Carpetas.png\"){kind=icon}
<\/p>\nEl c\u00f3digo<\/h1>\n
' -----------------------------------------------------------------------------<\/code>
\n' - Sprites101 ----------------------------------------------------------------<\/code>
\n' - Licencia MIT (Haz lo que quieras con el c\u00f3digo) ---------------------------<\/code>
\n' -----------------------------------------------------------------------------<\/code><\/p>\n' - Includes ------------------------------------------------------------------<\/code>
\n#include <NextLib.bas><\/code><\/p>\n' - Variables globales --------------------------------------------------------<\/code>
\ndim x as uinteger\u00a0\u00a0 ' Coordenada X del sprite<\/code>
\ndim paso as ubyte\u00a0\u00a0 ' Paso de la animaci\u00f3n<\/code>
\ndim animacion(5) as ubyte => { 0,1,2,3,2,1 }\u00a0 ' Secuencia de frames de la animaci\u00f3n<\/code><\/p>\n' - Inicio --------------------------------------------------------------------<\/code>
\nMain()<\/code>
\nstop<\/code><\/p>\n' - Sub principal -------------------------------------------------------------<\/code>
\nsub Main()<\/code>
\n\u00a0\u00a0\u00a0 ' Inicializamos el sistema<\/code>
\n\u00a0\u00a0\u00a0 Inicializar()<\/code><\/p>\n\u00a0\u00a0\u00a0 ' Inicializamos las variables del sprite<\/code>
\n\u00a0\u00a0\u00a0 x=0<\/code>
\n\u00a0\u00a0\u00a0 paso=0<\/code><\/p>\n\u00a0\u00a0\u00a0 ' Bucle principal<\/code>
\n\u00a0\u00a0\u00a0 while inkey$=\"\"<\/code>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ' Mostramos el sprite en pantalla<\/code>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 UpdateSprite(x,50,0,animacion(paso),0,0)<\/code><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ' Mover la coordenada x<\/code>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if x<320 then<\/code>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 x=x+1<\/code>
\n\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0else<\/code>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 x=0<\/code>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 end if<\/code><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ' Cambiamos el frame de la animaci\u00f3n<\/code>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if paso<5 then<\/code>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 paso=paso+1<\/code>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 else<\/code>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 paso=0<\/code>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 end if<\/code><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ' Pausa para ralentizar la animaci\u00f3n<\/code>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 asm<\/code>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 halt<\/code>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 end asm<\/code>
\n\u00a0\u00a0\u00a0 wend<\/code>
\nend sub<\/code><\/p>\n' - Inicializa el sistema -----------------------------------------------------<\/code>
\nsub Inicializar()<\/code>
\n\u00a0\u00a0\u00a0 NextReg($07,3)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ' Velocidad del procesador a 28MHz<\/code>
\n\u00a0\u00a0\u00a0 ' Inicializamos Layer2<\/code>
\n\u00a0\u00a0\u00a0 NextReg($15,%00001001)\u00a0 ' Activamos Sprites y layers como SUL<\/code>
\n\u00a0\u00a0\u00a0 ShowLayer2(1)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ' Mostramos la layer 2<\/code><\/p>\n\u00a0\u00a0\u00a0 ' Creamos los sprites<\/code>
\n\u00a0\u00a0\u00a0 LoadSD(\"Chica.spr\",$c000,$4000,0)\u00a0\u00a0 ' Cargamos los sprites en $c000<\/code>
\n\u00a0\u00a0\u00a0 InitSprites(4,$c000)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ' Inicializamos 4 sprites<\/code>
\nend sub<\/code><\/p>\nIncludes<\/h2>\n
Las variables globales<\/h2>\n
\n
Inicializando el sistema<\/h2>\n