{"id":253,"date":"2022-09-11T18:31:46","date_gmt":"2022-09-11T17:31:46","guid":{"rendered":"https:\/\/specnext.dev\/es\/?p=253"},"modified":"2022-09-11T18:33:25","modified_gmt":"2022-09-11T17:33:25","slug":"sprites-magnificus","status":"publish","type":"post","link":"https:\/\/specnext.dev\/es\/2022\/09\/11\/sprites-magnificus\/","title":{"rendered":"Sprites Magnificus"},"content":{"rendered":"<p>En este art\u00edculo seguiremos jugando con los sprites, viendo como ampliarlos (magnify)<\/p>\n<p>\u00a0<\/p>\n<h1>Antes de empezar<\/h1>\n<p>Si es la primera vez que llegas aqu\u00ed, te recomiendo que consultes antes estos art\u00edculos:<\/p>\n<ul>\n<li><a href=\"https:\/\/specnext.dev\/es\/2022\/07\/28\/preparando-el-ambiente-para-programar-para-next-con-boriel-zx-basic-y-nextbuild\/\" target=\"_blank\" rel=\"noopener\">Preparando el ambiente para programar para Next con Boriel ZX Basic y NextBuild<\/a><\/li>\n<li><a href=\"https:\/\/specnext.dev\/es\/2022\/07\/31\/sprites-101\/\" target=\"_blank\" rel=\"noopener\">Sprites 101<\/a> <a href=\"https:\/\/specnext.dev\/es\/2022\/07\/31\/sprites-101\/\">https:\/\/specnext.dev\/es\/2022\/07\/31\/sprites-101\/<\/a><\/li>\n<li><a href=\"https:\/\/specnext.dev\/es\/2022\/08\/31\/sprites-2-rotando-voy\/\" target=\"_blank\" rel=\"noopener\">Sprites 2, rotando voy\u2026<\/a><\/li>\n<\/ul>\n<p>Y para este art\u00edculo, <strong>F3M0<\/strong> (@Bit_fans en Twitter <a href=\"https:\/\/twitter.com\/bit_fans\">https:\/\/twitter.com\/bit_fans<\/a>) nos ha prestado los sprites que hizo para el <strong>Dungeon 16K<\/strong>, programado por <strong>MrRancio<\/strong> (@MrRancio1 en twitter <a href=\"https:\/\/twitter.com\/MrRancio1\">https:\/\/twitter.com\/MrRancio1<\/a>), que se puede descargar gratuitamente desde itch.io <a href=\"https:\/\/mrrancio.itch.io\/dungeon16k-for-next\">https:\/\/mrrancio.itch.io\/dungeon16k-for-next<\/a>, aunque como digo siempre, no me se\u00e1is ratas y apoyad a los desarrolladores! ?<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-254 size-large\" src=\"https:\/\/specnext.dev\/es\/wp-content\/uploads\/sites\/2\/2022\/09\/11-Sprites-1024x820.png\" alt=\"\" width=\"800\" height=\"641\" srcset=\"https:\/\/specnext.dev\/es\/wp-content\/uploads\/sites\/2\/2022\/09\/11-Sprites-1024x820.png 1024w, https:\/\/specnext.dev\/es\/wp-content\/uploads\/sites\/2\/2022\/09\/11-Sprites-300x240.png 300w, https:\/\/specnext.dev\/es\/wp-content\/uploads\/sites\/2\/2022\/09\/11-Sprites-768x615.png 768w, https:\/\/specnext.dev\/es\/wp-content\/uploads\/sites\/2\/2022\/09\/11-Sprites.png 1049w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>En el .zip del proyecto ver\u00e9is que el archivo \u201cdata\\Sprites3.spr\u201d contiene un set de varios sprites extraidos del set original, que hemos retocado cambiando el color transparente por el 127, que es el color transparente por defecto.<\/p>\n<p>\u00a0<\/p>\n<h1>El objetivo<\/h1>\n<p>En este art\u00edculo utilizaremos el \u00faltimo par\u00e1metro de UpdateSprite para ampliar el Sprite en el eje X (horizontal), el eje Y (vertical), y ambos al mismo tiempo.<\/p>\n<p>\u00a0<\/p>\n<h1>El proyecto<\/h1>\n<p>Crearemos una carpeta \u201cSprites3\u201d dentro de \u201cC:\\ZXNext\\NextBuildv7\\Sources\\\u201d y descomprimiremos el <a href=\"https:\/\/1drv.ms\/u\/s!ArCJF44YRdJrl7ZpDYdj32xORNYebA?e=aYOYnf\" target=\"_blank\" rel=\"noopener\">.zip<\/a> del final del art\u00edculo dentro de \u00e9l\u2026 Aunque yo os recomiendo que copi\u00e9is a mano el c\u00f3digo para entenderlo mejor.<\/p>\n<p>\u00a0<\/p>\n<h1>El par\u00e1metro \u201canchor\u201d<\/h1>\n<p>Como vimos en el art\u00edculo <a href=\"https:\/\/specnext.dev\/es\/2022\/08\/31\/sprites-2-rotando-voy\/\" target=\"_blank\" rel=\"noopener\">Sprites 2, rotando voy\u2026<\/a> el \u00faltimo par\u00e1metro de UpdateSprite est\u00e1 nombrado como \u201canchor\u201d, y est\u00e1 mapeado hacia el atributo 4 del sprite. Este atributo, entre otras cosas, controla el zoom horizontal y vertical. En cada caso, los valores posibles son 0, 1, 2 y 3, en binario 00, 01, 10 y 11.<\/p>\n<p>El atributo 4 cambia en funci\u00f3n de otros atributos, as\u00ed que solo nos centraremos en los 4 bytes que controlan el zoom:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-255\" src=\"https:\/\/specnext.dev\/es\/wp-content\/uploads\/sites\/2\/2022\/09\/11-Atributo4-300x59.png\" alt=\"\" width=\"300\" height=\"59\" srcset=\"https:\/\/specnext.dev\/es\/wp-content\/uploads\/sites\/2\/2022\/09\/11-Atributo4-300x59.png 300w, https:\/\/specnext.dev\/es\/wp-content\/uploads\/sites\/2\/2022\/09\/11-Atributo4.png 393w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Como vemos, el zoom horizontal lo controlan los bits 3 y 4, mientras que el horizontal los bits 1 y 2.<\/p>\n<p>Para el tama\u00f1o original usamos el valor 0. Para ampliar horizontalmente un Sprite al doble de su tama\u00f1o podemos usar el valor 1 en los bits 3 y 4, que en forma de n\u00famero binario ser\u00eda %00001000. Si quedemos ampliarlo a cuatro veces su tama\u00f1o usamos el 2 (10 en binario), por lo que el n\u00famero resultante en binario ser\u00eda %00010000. Y si queremos ampliar a 8 veces el tama\u00f1o original usamos el n\u00famero 3 (11 en binario), que en binario nos quedar\u00eda como %00011000.<\/p>\n<p>Lo mismo para el eje Y (vertical), cuyos valores ser\u00edan %00000010 para el doble, %00000100 para cuatro veces su tama\u00f1o, y %00000110 para ocho veces su tama\u00f1o.<\/p>\n<p>Al mismo tiempo, podemos ampliar horizontal y verticalmente un sprite, simplemente combinando los dos valores ZX y ZY. Por ejemplo, el doble horizontal (01) y cuatro veces el vertical (10) queda como %00001100.<\/p>\n<p>\u00a0<\/p>\n<h1>Desplazando bits<\/h1>\n<p>Todo esto funciona bien si queremos valores est\u00e1ticos, pero que pasa si queremos controlar el zoom a partir de una variable, por ejemplo un contador que vaya de 0 a 3 almacenado en la variable \u201cn\u201d.<\/p>\n<p>El valor de n, siempre que vaya de 0 a 3, quedar\u00e1 representado en los bits 0 y 1 de un byte, pero realmente los necesitamos en los bits 3 y 4, tal como se muestra en la imagen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-256\" src=\"https:\/\/specnext.dev\/es\/wp-content\/uploads\/sites\/2\/2022\/09\/11-Rotacion-300x108.png\" alt=\"\" width=\"300\" height=\"108\" srcset=\"https:\/\/specnext.dev\/es\/wp-content\/uploads\/sites\/2\/2022\/09\/11-Rotacion-300x108.png 300w, https:\/\/specnext.dev\/es\/wp-content\/uploads\/sites\/2\/2022\/09\/11-Rotacion.png 337w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Por lo tanto, es necesario desplazar a la izquierda 3 bits el valor de n. Esto se consigue utilizando el operador \u201c<<\u201d de la siguiente forma:<\/p>\n<p><code>dim n, zx as ubyte<\/code><br \/>\n<code>n=1<\/code><br \/>\n<code>zx=n << 3<\/code><\/p>\n<p>En el caso de querer ajustar el valor del zoom vertical, solo tenemos que desplazar el valor de n, 1 bit a la izquierda:<\/p>\n<p><code>dim n, zy as ubyte<\/code><br \/>\n<code>n=1<\/code><br \/>\n<code>zy=n << 1<\/code><\/p>\n<p>\u00a0<\/p>\n<h1>OReando<\/h1>\n<p>Y si queremos ajustar el zoom horizontal y el vertical al mismo tiempo, primero desplazamos los bits y despu\u00e9s mezclamos los dos valores con el operador \u201cbOR\u201d, que realiza la operaci\u00f3n l\u00f3gica por bits denominada \u201cOR\u201d. Esta operaci\u00f3n \u201cmezcla\u201d todos los bits, uno a uno, de cada n\u00famero en el que, si uno de los dos bits es 1, el resultado es 1, tal como muestra la siguiente tabla:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-257\" src=\"https:\/\/specnext.dev\/es\/wp-content\/uploads\/sites\/2\/2022\/09\/11-OR.png\" alt=\"\" width=\"127\" height=\"151\" \/><\/p>\n<p>Y el siguiente c\u00f3digo, ampliamos el sprite horizontalmente a dos veces su tama\u00f1o (1) y verticalmente cuatro veces su tama\u00f1o (2)<\/p>\n<p><code>dim zx, zy, atr4 as ubyte<\/code><br \/>\n<code>zx = 1 << 3<\/code><br \/>\n<code>zy = 2 << 1<\/code><br \/>\n<code>atr4 = zx bOR zy<\/code><\/p>\n<p>\u00a0<\/p>\n<h1>El C\u00f3digo<\/h1>\n<p><code>' -----------------------------------------------------------------------------<\/code><br \/>\n<code>' - Sprites3 ------------------------------------------------------------------<\/code><br \/>\n<code>' - Licencia MIT (Haz lo que quieras con el c\u00f3digo) ---------------------------<\/code><br \/>\n<code>' - Gr\u00e1ficos por F3M0 (@Bit_fans -> https:\/\/twitter.com\/bit_fans) -------------<\/code><br \/>\n<code>' -----------------------------------------------------------------------------<\/code><\/p>\n<p><code>' - Includes ------------------------------------------------------------------<\/code><br \/>\n<code>#include <NextLib.bas><\/code><\/p>\n<p><code>' - Inicio --------------------------------------------------------------------<\/code><br \/>\n<code>Main()<\/code><br \/>\n<code>stop<\/code><\/p>\n<p><code>' - Sub principal -------------------------------------------------------------<\/code><br \/>\n<code>sub Main()<\/code><br \/>\n<code>\u00a0\u00a0\u00a0 dim n, zx, zy, at4 as ubyte<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0 ' Inicializamos el sistema<\/code><br \/>\n<code>\u00a0\u00a0\u00a0 Inicializar()<\/code><br \/>\n<code>\u00a0\u00a0\u00a0<\/code><br \/>\n<code>\u00a0\u00a0\u00a0 while inkey$=\"\"\u00a0\u00a0\u00a0\u00a0 ' Repetimos hasta que se pulse una tecla<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ' Para el zoom usamos el patr\u00f3n 2<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ' Haremos un bucle desde zoom 0 a zoom x3<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 for n=0 to 3<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ' Zoom sobre el eje X (ancho)<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 print at 0,0;\"Zoom X: \";n<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 zx=n << 3<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 UpdateSprite( 32,40,0,2,0,zx)<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ' Zoom sobre el eje Y (alto)<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 print at 5,0;\"Zoom Y: \";n<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 zy=n << 1<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 UpdateSprite( 32,80,1,2,0,zy)<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ' Zoom sobre los dos ejes<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 print at 0,16;\"Zoom XY: \";n<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 at4=zx bOR zy<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 UpdateSprite(164,40,2,2,0,at4)<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ' Pausa para ralentizar la animaci\u00f3n<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 pause 50<\/code><br \/>\n<code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 next n<\/code><br \/>\n<code>\u00a0\u00a0\u00a0 wend<\/code><br \/>\n<code>end sub<\/code><\/p>\n<p><code>' - Inicializa el sistema -----------------------------------------------------<\/code><br \/>\n<code>sub Inicializar()<\/code><br \/>\n<code>\u00a0\u00a0\u00a0 NextReg($07,3)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ' Velocidad del procesador a 28MHz<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0 ' Inicializamos ULA<\/code><br \/>\n<code>\u00a0\u00a0\u00a0 border 0: paper 0: ink 7: cls<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0 ' Inicializamos Layer2<\/code><br \/>\n<code>\u00a0\u00a0\u00a0 NextReg($15,%00001001)\u00a0 ' Activamos Sprites y layers como SUL<\/code><br \/>\n<code>\u00a0\u00a0\u00a0 ShowLayer2(1)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ' Mostramos la layer 2<\/code><\/p>\n<p><code>\u00a0\u00a0\u00a0 ' Creamos los sprites<\/code><br \/>\n<code>\u00a0\u00a0\u00a0 LoadSD(\"Sprite3.spr\",$c000,$4000,0)\u00a0\u00a0 ' Cargamos los sprites en $c000<\/code><br \/>\n<code>\u00a0\u00a0\u00a0 InitSprites(64,$c000)\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ' Inicializamos 64 sprites, aunque no los usamos todos<\/code><br \/>\n<code>end sub<\/code><\/p>\n<h1>Recursos<\/h1>\n<ul>\n<li>Proyecto completo: <a href=\"https:\/\/1drv.ms\/u\/s!ArCJF44YRdJrl7ZpDYdj32xORNYebA?e=aYOYnf\" target=\"_blank\" rel=\"noopener\">NextSprites3.zip<\/a><\/li>\n<\/ul>\n<p>\u00a0<\/p>\n<h1>Agradecimientos<\/h1>\n<p>Gracias, como siempre a Boriel por su excelente compilador, a em00k por su impresionante NextBuild y NextLib.<\/p>\n<p>Y gracias a F3M0 (@Bit_fans en Twitter <a href=\"https:\/\/twitter.com\/bit_fans\">https:\/\/twitter.com\/bit_fans<\/a>) por prestarnos sus sprites para esta serie de art\u00edculos.<\/p>\n<p>\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo seguiremos jugando con los sprites, viendo como ampliarlos (magnify) \u00a0 Antes de empezar Si es la primera vez que llegas aqu\u00ed, te recomiendo que consultes antes estos art\u00edculos: Preparando el ambiente para programar para Next con Boriel ZX Basic y NextBuild Sprites 101 https:\/\/specnext.dev\/es\/2022\/07\/31\/sprites-101\/ Sprites 2, rotando voy\u2026 Y para este art\u00edculo, [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":259,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[13,3],"tags":[7,9,8,16],"class_list":["post-253","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-boriel-zx-basic","category-desarrollo","tag-boriel-zx-basic","tag-nextbuild","tag-nextlib","tag-sprites"],"jetpack_featured_media_url":"https:\/\/specnext.dev\/es\/wp-content\/uploads\/sites\/2\/2022\/09\/11-zoom.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/posts\/253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/comments?post=253"}],"version-history":[{"count":1,"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/posts\/253\/revisions"}],"predecessor-version":[{"id":258,"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/posts\/253\/revisions\/258"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/media\/259"}],"wp:attachment":[{"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/media?parent=253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/categories?post=253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/specnext.dev\/es\/wp-json\/wp\/v2\/tags?post=253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}