{"id":2758,"date":"2023-10-30T01:03:15","date_gmt":"2023-10-30T01:03:15","guid":{"rendered":"http:\/\/www.goncalo.pt\/por\/?p=2758"},"modified":"2024-01-02T03:27:46","modified_gmt":"2024-01-02T03:27:46","slug":"game-development-tutorial-01-sprites-tiles","status":"publish","type":"post","link":"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/","title":{"rendered":"Game Development Tutorial &#8211; 01 &#8211; Sprites &#038; Tiles"},"content":{"rendered":"\n<p>Antes de algu\u00e9m tentar compreender como se criam videojogos, h\u00e1 que saber o que s\u00e3o sprites, e tiles.<\/p>\n\n\n\n<p>Com a excep\u00e7\u00e3o de jogos 3D, em que vemos objectos desenhados em tempo real em 3D, tudo o que \u00e9 jogos usam sprites, e grande parte deles usam tiles, em especial h\u00e1 umas d\u00e9cadas atr\u00e1s, quando era necess\u00e1rio poupar mem\u00f3ria ao m\u00e1ximo.<\/p>\n\n\n\n<p>V\u00e3o ser usadas neste tutorial algumas imagens tiradas de um v\u00eddeo cujo link ser\u00e1 disponibilizado no fim para quem queira ver a explica\u00e7\u00e3o de uma forma mais din\u00e2mica.<\/p>\n\n\n\n<p>Antes da mat\u00e9ria propriamente dita, fica aqui o v\u00eddeo associado a este post:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Cria\u00e7\u00e3o de VideoJogos \u2013 Parte II \u2013 Tiles Vs. Sprites \u2013 2023-12-31\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/mh5qqX5aFtg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>Como exemplo: o jogo Rick Dangerous:<\/strong><\/p>\n\n\n\n<p>Vamos come\u00e7ar com o exemplo do famos\u00edssimo jogo Rick Dangerous, publicado em 1989, desenvolvido pela Core Design, e que foi o percursor da ainda mais famosa s\u00e9rie de videojogos Tomb Raider, criada pela mesma empresa.<\/p>\n\n\n\n<p>Pode dizer-se que foi o Tomb Raider original em 2D:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"873\" height=\"513\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-01-Rick-Dangerous.jpg\" alt=\"Game Development Tutorial - 01 - Sprites &amp; Tiles - Rick Dangerous\" class=\"wp-image-2759\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-01-Rick-Dangerous.jpg 873w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-01-Rick-Dangerous-300x176.jpg 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-01-Rick-Dangerous-768x451.jpg 768w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><figcaption>Game Development Tutorial &#8211; 01 &#8211; Sprites &amp; Tiles &#8211; Rick Dangerous<\/figcaption><\/figure>\n\n\n\n<p>A vers\u00e3o que estudaremos ser\u00e1 a vers\u00e3o para as m\u00e1quinas Amiga (como Commodore Amiga):<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"873\" height=\"513\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-02-Rick-Dangerous-playing.jpg\" alt=\"Game Development Tutorial - 02 - Sprites &amp; Tiles - Rick Dangerous Gameplay\" class=\"wp-image-2760\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-02-Rick-Dangerous-playing.jpg 873w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-02-Rick-Dangerous-playing-300x176.jpg 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-02-Rick-Dangerous-playing-768x451.jpg 768w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><figcaption>Game Development Tutorial &#8211; 02 &#8211; Sprites &amp; Tiles &#8211; Rick Dangerous Gameplay<\/figcaption><\/figure>\n\n\n\n<p>Este jogo, poder\u00e3o reparar que tem gr\u00e1ficos semelhantes do dos n\u00edveis de teste do Game Engine que iremos usar, desenvolvido do zero em C++ por Gon\u00e7alo Ferreira, e se estiverem a ler este texto neste preciso momento, ser\u00e3o muito grandes as probabilidades de estarem a ter forma\u00e7\u00e3o com o autor deste Game Engine (ou em Portugu\u00eas: &#8220;Motor de Jogos&#8221;), que ser\u00e1 designado por mim abaixo como &#8220;o meu Game Engine&#8221;:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2022\/06\/2022-06-13-My-Game-Engine-Platformer-testing-example-with-lightning-effects-in-Cpp-small-animation-killer-nemo.gif\" alt=\"2022-06-13 - Anima\u00e7\u00e3o com pequenos efeitos de rel\u00e2mpagos no meu Game Engine em C++...\" class=\"wp-image-1927\" width=\"871\" height=\"458\"\/><figcaption>2022-06-13 &#8211; Anima\u00e7\u00e3o com pequenos efeitos de rel\u00e2mpagos no meu Game Engine em C++&#8230;<\/figcaption><\/figure>\n\n\n\n<p>Quem conhece o Rick Dangerous original, poder\u00e1 reparar que s\u00e3o usadas imagens e bonecos tirados do jogo Rick Dangerous, e acima podemos identificar tanto as paredes &#8220;douradas&#8221;, o fundo de pedra escuro, e os &#8220;inimigos&#8221; Eg\u00edpcios.<\/p>\n\n\n\n<p>Abaixo temos um mapa do jogo original, e por ele podemos ver que um n\u00edvel apenas, tem perto de 60 ecr\u00e3s, e t\u00ednhamos 4 n\u00edveis no total, no jogo.<\/p>\n\n\n\n<p>E podemos ver abaixo que cada um desses ecr\u00e3s, tinha bastante riqueza de conte\u00fados, tanto em gr\u00e1ficos, como inimigos, armadilhas, etc:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"873\" height=\"513\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-03-Rick-Dangerous-level-directions.jpg\" alt=\"Game Development Tutorial - 03 - Rick Dangerous Level Directions\" class=\"wp-image-2761\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-03-Rick-Dangerous-level-directions.jpg 873w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-03-Rick-Dangerous-level-directions-300x176.jpg 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-03-Rick-Dangerous-level-directions-768x451.jpg 768w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><figcaption>Game Development Tutorial &#8211; 03 &#8211; Rick Dangerous Level Directions<\/figcaption><\/figure>\n\n\n\n<p><strong>O foco do jogo:<\/strong><\/p>\n\n\n\n<p>Neste jogo, h\u00e1 um foco quase absoluto no ecr\u00e3 actual em que o jogador estaria dentro do jogo, a cada momento.<\/p>\n\n\n\n<p>Isto devia-se \u00e0 necessidade de poupar ao m\u00e1ximo o CPU e a mem\u00f3ria usada, em especial a mem\u00f3ria neste caso espec\u00edfico.<\/p>\n\n\n\n<p>D\u00e1-se assim um \u00eanfase grande ao ecr\u00e3 actual em que o jogador est\u00e1 e n\u00e3o tanto ao mapa inteiro:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"873\" height=\"513\" src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-04-Rick-Dangerous-focus.jpg\" alt=\"Game Development Tutorial - Sprites and Tiles - 04 - Level and CPU focus on Rick Dangerous\" class=\"wp-image-2762\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-04-Rick-Dangerous-focus.jpg 873w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-04-Rick-Dangerous-focus-300x176.jpg 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-04-Rick-Dangerous-focus-768x451.jpg 768w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><figcaption>Game Development Tutorial &#8211; Sprites and Tiles &#8211; 04 &#8211; Level and CPU focus on Rick Dangerous<\/figcaption><\/figure>\n\n\n\n<p>Este \u00e9 um sistema diferente do usado por defeito no meu Game Engine que ter\u00e3o a oportunidade de experimentar, que \u00e9 um sistema em que se usa uma c\u00e2mera activa que centra o ecr\u00e3 do jogo sempre no jogador, e n\u00e3o em ecr\u00e3s exibidos por inteiro um de cada vez:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2022\/11\/2022-11-22-Rope-Dynamics-working-better-in-my-Cpp-Game-Engine-doing-like-Tarzan.mp4\"><\/video><figcaption>2022-11-22 &#8211; Melhorias no sistema de cordas, e v\u00eddeo de demonstra\u00e7\u00e3o a imitar o Tarzan ou Homem-Aranha, no meu Game Engine em C++\u2026<\/figcaption><\/figure>\n\n\n\n<p>A t\u00edtulo de curiosidade, no v\u00eddeo acima, podemos ver que a personagem principal \u00e9 representada pela personagem &#8220;Eric the Swift&#8221; do jogo Lost Vikings, e tem um sistema de cordas que em termos de apar\u00eancia \u00e9 igual ao do jogo Batman the Movie, publicado pela Ocean em 1989, pois foram alguns dos jogos que escolhi para criar um remake melhorado dos mesmos um dia.<\/p>\n\n\n\n<p>Podem notar que o n\u00edvel abaixo \u00e9 totalmente diferente, pois foi retirado do tal jogo Batman the Movie, e deixo-vos abaixo um exemplo do mesmo para verem as semelhan\u00e7as:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Batman The Movie No Deaths Perfect LongPlay - Amiga Version - All Levels\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/2O0IoCeMj00?start=1&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Mas antes de prosseguirmos, \u00e9 importante, para entenderem a raz\u00e3o pela qual as t\u00e9cnicas de sprites e tiles s\u00e3o muito usadas, compreenderem o uso da mem\u00f3ria e processador num computador.<\/p>\n\n\n\n<p>Estudemos primeiro a mem\u00f3ria, e como os gr\u00e1ficos a afectam&#8230;<\/p>\n\n\n\n<p><strong>O que \u00e9 um Byte?<\/strong><\/p>\n\n\n\n<p>Antes de prosseguirmos com a explica\u00e7\u00e3o do porqu\u00ea ser importante o uso de tiles e sprites, vamos ter de saber muito bem, o que \u00e9 um byte.<\/p>\n\n\n\n<p>Um byte, \u00e9 um conjunto de 8 d\u00edgitos de 1 ou 0 (representando Verdadeiro ou Falso), que em bin\u00e1rio corresponde a um intervalo de valores entre 0 a 255 no sistema decimal, ou seja, 256 poss\u00edveis valores (calculados por 2 elevado a 8, pois 2^8=256):<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"873\" height=\"513\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-05-What-is-a-byte.jpg\" alt=\"Game Development Tutorial - Sprites and Tiles - 05 - What is a Byte?\" class=\"wp-image-2763\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-05-What-is-a-byte.jpg 873w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-05-What-is-a-byte-300x176.jpg 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-05-What-is-a-byte-768x451.jpg 768w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><figcaption>Game Development Tutorial &#8211; Sprites and Tiles &#8211; 05 &#8211; What is a Byte?<\/figcaption><\/figure>\n\n\n\n<p>Sabemos assim que um byte pode representar 256 valores poss\u00edveis, de 0 a 255 (pois praticamente tudo nos computadores come\u00e7a em 0 e n\u00e3o em 1), e \u00e9 a unidade de mem\u00f3ria mais importante num computador, junto com os bits (um byte \u00e9 composto por 8 bits).<\/p>\n\n\n\n<p><strong>A rela\u00e7\u00e3o entre Bytes e Cores e o RGBA:<\/strong><\/p>\n\n\n\n<p>Agora o que tem um Byte a ver com Cores?<\/p>\n\n\n\n<p>Em primeiro lugar vamos ver que, o sistema de cores RGBA, significa: Red+Green+Blue+Alpha Opacity, ou seja, \u00e9 um sistema onde temos 3 bytes, cada um representando uma cor.<\/p>\n\n\n\n<p>N\u00e3o s\u00e3o as cores prim\u00e1rias mas \u00e9 parecido, s\u00e3o as que melhor podem ser usadas em ecr\u00e3s, em que substitu\u00edmos o Amarelo pelo Verde, das cores prim\u00e1rias originais, por funcionar melhor para misturar cores num ecr\u00e3 electr\u00f3nico do que a cor prim\u00e1ria Amarelo.<\/p>\n\n\n\n<p>Por outro lado, a t\u00edtulo de curiosidade, nas impressoras, n\u00e3o usamos as cores prim\u00e1rias tamb\u00e9m, mas algo ainda mais distinto: usamos as CMYK, que significam Cyan+Magenta+Yellow+Key, onde Key representa a cor negra, mas \u00e9 usada para definir o resultado final da cor na impressora, da\u00ed o nome &#8220;Key&#8221;, de &#8220;Chave&#8221;.<\/p>\n\n\n\n<p>Ou seja, no mundo dos computadores, constru\u00edmos cores n\u00e3o com as cores prim\u00e1rias, mas com variantes, seja nos ecr\u00e3s, nas impressoras, etc.<\/p>\n\n\n\n<p>Cada um dos bytes do RGB representam um n\u00famero entre 0 e 255, e se multiplicarmos 256*256*256 teremos um resultado de 16.777.216 cores poss\u00edveis.<\/p>\n\n\n\n<p>Podemos dizer assim que as cores RGB t\u00eam 16 milh\u00f5es de cores poss\u00edveis para nosso uso, e dado que se estima que a maioria dos humanos s\u00f3 consegue identificar perto de um milh\u00e3o de cores poss\u00edveis, nunca necessitaremos de mais do que RGB no Futuro para os nossos olhos.<\/p>\n\n\n\n<p>Basicamente, se a cor R (Red\/Vermelho) tiver 256 valores poss\u00edveis, cada um deles com 256 valores poss\u00edveis de G (Green\/Verde), e cada uma dessas tiver 256 valores poss\u00edveis de B (Blue\/Azul), temos nesses 3 bytes 256*256*256 cores, ou seja, as tais 16 milh\u00f5es de cores.<\/p>\n\n\n\n<p>Vejamos a combina\u00e7\u00e3o das cores RGB abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"873\" height=\"513\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-06-What-is-RGBA.jpg\" alt=\"Game Development Tutorial - Sprites and Tiles - 06 - What are RGBA colors?\" class=\"wp-image-2764\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-06-What-is-RGBA.jpg 873w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-06-What-is-RGBA-300x176.jpg 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-06-What-is-RGBA-768x451.jpg 768w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><figcaption>Game Development Tutorial &#8211; Sprites and Tiles &#8211; 06 &#8211; What are RGBA colors?<\/figcaption><\/figure>\n\n\n\n<p><strong>O Byte de Alpha Opacity:<\/strong><\/p>\n\n\n\n<p>A estas cores, juntamos o byte A, de Alpha Opacity, e com ele podemos definir 256 poss\u00edveis n\u00edveis de transpar\u00eancia, o que nos permite ter ainda mais cores no ecr\u00e3, ou fazer com que haja certas transpar\u00eancias no jogo, como por exemplo na \u00e1gua abaixo, no n\u00edvel de testes do meu Game Engine:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2022\/06\/2022-06-19-Lightning-And-Rain-With-Sounds-on-my-Game-Engine-Platformer-developed-in-Cpp-small-gif.gif\" alt=\"2022-06-19 - Rel\u00e2mpagos melhorados, e com efeitos sonoros tamb\u00e9m, bem como a Chuva, no meu Game Engine em C++...\" class=\"wp-image-1941\" width=\"875\" height=\"657\"\/><figcaption>2022-06-19 &#8211; Rel\u00e2mpagos melhorados, e com efeitos sonoros tamb\u00e9m, bem como a Chuva, no meu Game Engine em C++&#8230;<\/figcaption><\/figure>\n\n\n\n<p>Como podem ver acima, a \u00e1gua presente neste meu Game Engine, \u00e9 transparente, mas n\u00e3o a 100%, tem um n\u00edvel de opacidade entre 0 (que a faria ser totalmente transparente) e 255 (que a faria ser totalmente opaca e n\u00e3o deixar ver nada atr\u00e1s).<\/p>\n\n\n\n<p>Est\u00e1 obviamente num n\u00edvel interm\u00e9dio, que nos permite espreitar atr\u00e1s da \u00e1gua em si, incluindo o pr\u00f3prio jogador.<\/p>\n\n\n\n<p><strong>Contas com bytes e imagens:<\/strong><\/p>\n\n\n\n<p>Vamos agora fazer algumas contas para compreender a import\u00e2ncia dos bytes e mem\u00f3ria na cria\u00e7\u00e3o de videojogos, e com isso a import\u00e2ncia dos tiles e sprites.<\/p>\n\n\n\n<p>Vamos simular a quantidade de mem\u00f3ria necess\u00e1ria caso quis\u00e9ssemos guardar toda a informa\u00e7\u00e3o visual de cada ecr\u00e3 de cada n\u00edvel, em 4 n\u00edveis diferentes (imaginando que fossem 60*4=240 ecr\u00e3s), usando cores RGBA (4 bytes por cada letra RGBA, ou seja, 4 bytes por p\u00edxel), em ecr\u00e3s de v\u00e1rias resolu\u00e7\u00f5es (256&#215;192 e 1024&#215;768), e numa imagem sem perda de qualidade:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"873\" height=\"513\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-07-Amount-of-Memory-Rick-Dangerous-would-require-if-made-with-RGBA-entire-screens.jpg\" alt=\"Game Development Tutorial - Sprites and Tiles - 07 - The Amount of Memory the Rick Dangerous Videogame would require if made with RGBA colors and without the use of Tiles\" class=\"wp-image-2765\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-07-Amount-of-Memory-Rick-Dangerous-would-require-if-made-with-RGBA-entire-screens.jpg 873w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-07-Amount-of-Memory-Rick-Dangerous-would-require-if-made-with-RGBA-entire-screens-300x176.jpg 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-07-Amount-of-Memory-Rick-Dangerous-would-require-if-made-with-RGBA-entire-screens-768x451.jpg 768w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><figcaption>Game Development Tutorial &#8211; Sprites and Tiles &#8211; 07 &#8211; The Amount of Memory the Rick Dangerous Videogame would require if made with RGBA colors and without the use of Tiles<\/figcaption><\/figure>\n\n\n\n<p>Acima podemos ver que necessitar\u00edamos de 45 MB (MegaBytes), ou mesmo 720 MB, de mem\u00f3ria, s\u00f3 para poder armazenar tanta informa\u00e7\u00e3o, e relembro que 1 MB s\u00e3o 1024 KB (KiloBytes), ou seja, 1024*1024=1.048.576 bytes.<\/p>\n\n\n\n<p>E isto era proibitivo, em especial nos anos 80, em que a m\u00e1quina para a qual a vers\u00e3o do jogo demonstrado, era o Commodore Amiga, uma m\u00e1quina na altura muito \u00e0 frente no seu tempo:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Viva Amiga Teaser Trailer Better Audio\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/nesslF7nzME?start=32&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><figcaption>Viva Amiga Teaser Trailer Better Audio<\/figcaption><\/figure>\n\n\n\n<p>Esta m\u00e1quina acima tinha de mem\u00f3ria apenas meio MB, ou seja, 512 KB, muito longe das mem\u00f3rias acima faladas, ou seja, n\u00e3o uns 16 GB como hoje em dia mas sim uns 0,00005 GB de mem\u00f3ria o tal Commodore Amiga acima, e dez vezes menos para o ZX Spectrum 48K.<\/p>\n\n\n\n<p>E isto era algo do outro mundo, e para que se compreenda isso, vejamos um jogo na \u00e9poca, numa m\u00e1quina ainda mais cara (um PC com sistema operativo MS-DOS), com os seus gr\u00e1ficos CGA:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Lode Runner (1983) DOS PC Game CGA Graphics\" width=\"800\" height=\"600\" src=\"https:\/\/www.youtube.com\/embed\/hkeuplIny28?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Ou o mais barato mas muito famoso ZX Spectrum 48K:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Rick Dangerous Walkthrough, ZX Spectrum\" width=\"800\" height=\"600\" src=\"https:\/\/www.youtube.com\/embed\/VQkiC-EL2FE?start=57&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Agora espreitemos um jogo para o Commodore Amiga, nos anos 80, e poder\u00e3o ver como era uma m\u00e1quina muito \u00e0 frente do seu tempo:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Batman The Movie No Deaths Perfect LongPlay - Amiga Version - All Levels\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/2O0IoCeMj00?start=164&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Como podem ver, o Amiga foi uma m\u00e1quina muito \u00e0 frente do seu tempo, mas mesmo ele, estava limitado a 512 KB de mem\u00f3ria de origem que era partilhada entre v\u00eddeo, processador e som, tal como no ZX Spectrum, algo que falaremos mais adiante.<\/p>\n\n\n\n<p>Mesmo hoje em dia em 2023, seria proibitivo e sem sentido desperdi\u00e7ar centenas de MB (MegaBytes) de mem\u00f3ria com n\u00edveis desenhados assim a desperdi\u00e7ar mem\u00f3ria desnecessariamente, pois todos sabemos que um programa de desenho pode bloquear se tentarmos abrir imagens de 720 MB de tamanho, agora imaginem um jogo ter de lidar com 720 MB de imagens em mem\u00f3ria al\u00e9m de tudo o resto!<\/p>\n\n\n\n<p>Como se resolvia esse enorme problema? Com os Tiles, por exemplo.<\/p>\n\n\n\n<p><strong>Onde entram os tiles?<\/strong><\/p>\n\n\n\n<p>Vejamos esta imagem abaixo tirada do meu Game Engine:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2022\/09\/2022-09-11-Rope-System-And-Climbing-already-working-like-in-Batman-the-Movie-in-my-Cpp-Game-Engine-Thumb.gif\" alt=\"2022-09-11 - Terminada a funcionalidade das cordas e de subir para plataformas superiores do meu game engine em C++...\" class=\"wp-image-2045\" width=\"875\" height=\"490\"\/><figcaption>2022-09-11 &#8211; Terminada a funcionalidade das cordas e de subir para plataformas superiores do meu game engine em C++&#8230;<\/figcaption><\/figure>\n\n\n\n<p>Se repararem acima, todo o fundo \u00e9 composto por v\u00e1rios tiles repetidos, tanto as plataformas como o fundo do ecr\u00e3, sendo que um tile, que significa em Portugu\u00eas &#8220;azulejo&#8221;, \u00e9 mesmo como um azulejo numa parede, ele fica l\u00e1 fixo, e n\u00e3o muda. e neste caso t\u00eam 32 p\u00edxeis de largura por 32 p\u00edxeis de altura, e \u00e9 repetido, tal como os azulejos nas nossas paredes, para preencher o fundo do jogo, com aqueles tiles mais escuros.<\/p>\n\n\n\n<p>Da mesma maneira podem ver os blocos de pedra, todos repetidos, com tamanho igual, j\u00e1 de cor mais dourada, que s\u00e3o usados para construir as plataformas onde o jogador se suporta, e ambos est\u00e3o fixos.<\/p>\n\n\n\n<p>No fundo, usamos tiles para tudo o que \u00e9 fixo, sejam tiles de colis\u00e3o (aqueles onde embatemos, e que servem de paredes ou plataformas), ou os tiles de fundo, que s\u00e3o aqueles que n\u00e3o interferem connosco e que s\u00f3 l\u00e1 est\u00e3o para enfeitar.<\/p>\n\n\n\n<p><strong>Poupando mem\u00f3ria:<\/strong><\/p>\n\n\n\n<p>Faz todo o sentido assim, ao inv\u00e9s de colocarmos tiles inteiros de 32&#215;32 p\u00edxeis, ocupando cada um 4096 bytes (1024 p\u00edxeis de largura por 768 de altura tendo 4 bytes cada um), usarmos um mapa onde cada tile \u00e9 representado por exemplo por um \u00fanico byte que poder\u00e1 conter valores de 0 a 255.<\/p>\n\n\n\n<p>Passar\u00edamos assim de 1024*768*4=3.145.128 bytes, ou seja, 3,1 MB de tamanho, caso us\u00e1ssemos imagens reais, para 32 tiles de largura por 24 de altura, com um total de 768 bytes apenas para um ecr\u00e3 inteiro.<\/p>\n\n\n\n<p>Gastar\u00edamos assim 3.145.128\/768=4.096, perto de quatro mil vezes menos mem\u00f3ria gasta, e com o mesmo resultado no ecr\u00e3! E isto significa um uso de mem\u00f3ria 4.096 vezes menor, sendo que gastar\u00edamos a mesma mem\u00f3ria aqui com 4096 ecr\u00e3s, que usar\u00edamos com imagens inteiras num \u00fanico ecr\u00e3.<\/p>\n\n\n\n<p><strong>Os mapas de tiles:<\/strong><\/p>\n\n\n\n<p>Para criarmos um n\u00edvel de um jogo, bastaria que divid\u00edssemos assim o ecr\u00e3 num determinado n\u00famero de colunas e linhas, com os tais 32*24=768 blocos, e colocar um valor em cada um, armazenados numa matriz\/array espec\u00edfica.<\/p>\n\n\n\n<p>Vejamos um exemplo abaixo de um ecr\u00e3 mais pequeno, com apenas 12 por 8 blocos, e onde ao inv\u00e9s de n\u00fameros vamos usar simplesmente uma letra por cada tipo de tile para facilitar a compreens\u00e3o:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"873\" height=\"513\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-08-The-use-of-tiles-on-a-VideoGame.jpg\" alt=\"\" class=\"wp-image-2766\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-08-The-use-of-tiles-on-a-VideoGame.jpg 873w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-08-The-use-of-tiles-on-a-VideoGame-300x176.jpg 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-08-The-use-of-tiles-on-a-VideoGame-768x451.jpg 768w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><figcaption>Game Development Tutorial &#8211; Sprites and Tiles &#8211; 08 &#8211; The use of Tiles on VideoGames<\/figcaption><\/figure>\n\n\n\n<p>Na imagem acima podemos ver de forma simplificada como representamos o mapa de um jogo atrav\u00e9s de n\u00fameros, ou no exemplo acima, letras, em que o motor do jogo (o meu Game Engine), substituiria as letras &#8220;P&#8221; por paredes com as quais o jogador colidiria, as letras &#8220;C&#8221; por um ch\u00e3o que suportaria o jogador, a letra &#8220;A&#8221; por \u00e1gua, onde o jogador poderia perder a vida, ou mergulhar e poder fazer outras coisas, etc.<\/p>\n\n\n\n<p>O &#8220;S&#8221; pelo desenho do Sol? As letras &#8220;N&#8221; por nuvens? Etc, etc&#8230;<\/p>\n\n\n\n<p>Ter\u00edamos assim um mapa de um jogo desenhado com meia d\u00fazia de letras que indicariam o que cada sec\u00e7\u00e3o do ecr\u00e3 iria conter.<\/p>\n\n\n\n<p><strong>Os programas geradores de mapas de tiles:<\/strong><\/p>\n\n\n\n<p>O uso de tiles faz-se de uma maneira mais gr\u00e1fica hoje em dia.<\/p>\n\n\n\n<p>Na altura pensei em construir um programa espec\u00edfico para gerar mapas, mas decidi usar as poucas horas livres que tinha para adicionar features ao meu Game Engine, ao inv\u00e9s de reinventar a roda, e decidi usar um programa gratuito de nome &#8220;Tiled&#8221;, que pode ser sacado em <a href=\"http:\/\/www.mapeditor.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/www.mapeditor.org\/<\/a>.<\/p>\n\n\n\n<p>Vejamos um exemplo meu a adicionar tiles do jogo Batman the Movie (vers\u00e3o Amiga de 1989) ao seu n\u00edvel de testes:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2022\/12\/2022-12-03-How-to-create-a-game-with-my-Cpp-Game-Engine-without-knowing-how-to-program-1024x576.png\" alt=\"2022-12-03 \u2013 Como qualquer pessoa poder\u00e1 criar jogos com o meu Game Engine um dia, gratuito, sem saber programar\u2026\" class=\"wp-image-2218\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2022\/12\/2022-12-03-How-to-create-a-game-with-my-Cpp-Game-Engine-without-knowing-how-to-program-1024x576.png?v=1670105247 1024w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2022\/12\/2022-12-03-How-to-create-a-game-with-my-Cpp-Game-Engine-without-knowing-how-to-program-300x169.png?v=1670105247 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2022\/12\/2022-12-03-How-to-create-a-game-with-my-Cpp-Game-Engine-without-knowing-how-to-program-768x432.png?v=1670105247 768w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2022\/12\/2022-12-03-How-to-create-a-game-with-my-Cpp-Game-Engine-without-knowing-how-to-program-1536x864.png?v=1670105247 1536w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2022\/12\/2022-12-03-How-to-create-a-game-with-my-Cpp-Game-Engine-without-knowing-how-to-program.png?v=1670105247 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>2022-12-03 \u2013 Como qualquer pessoa poder\u00e1 criar jogos com o meu Game Engine um dia, gratuito, sem saber programar\u2026 <\/figcaption><\/figure>\n\n\n\n<p>Acima podem ver como \u00e9 f\u00e1cil usar o programa Tiled, com ele gravamos um ficheiro de formato XML, com as informa\u00e7\u00f5es do mapa de jogo.<\/p>\n\n\n\n<p>No programa definimos os valores de cada tile, as suas posi\u00e7\u00f5es, e gravamos o ficheiro que cont\u00e9m o mapa.<\/p>\n\n\n\n<p>Cabe ao criador do meu Game Engine, neste caso eu, Gon\u00e7alo Ferreira, conseguir que o mesmo leia tudo o que o mapa tem, e monte o jogo em tempo real sempre que o iniciamos, para podermos jogar ao mesmo.<\/p>\n\n\n\n<p>No fim, at\u00e9 podemos meter o Sonic e o viking de nome &#8220;Eric the Swift&#8221; (do jogo &#8220;Lost Vikings&#8221;), a passear pelos mapas de jogo do Batman the Movie, como nos apetecer, a partir da metade do v\u00eddeo abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls loop src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/09\/2023-09-07-Lights-and-shadows-on-dark-places-on-my-Cpp-Game-Engine.mp4\"><\/video><figcaption>2023-09-07 &#8211; Luzes e Sombras em locais espec\u00edficos como quartos ou \u00e1gua, no meu Game Engine em C++\u2026<\/figcaption><\/figure>\n\n\n\n<p>Se n\u00e3o conhecerem o jogo &#8220;Batman the Movie&#8221;, da Ocean (1989), n\u00e3o reconhecer\u00e3o o mapa abaixo, mas ele veio directamente do jogo Batman the Movie original.<\/p>\n\n\n\n<p>O original, como podem ver abaixo, tinha o Batman e n\u00e3o os nossos personagens acima:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2022\/07\/ezgif.com-gif-maker-8.gif\" alt=\"Din\u00e2mica de cordas no jogo Batman the Movie, vers\u00e3o para Commodore Amiga...\" class=\"wp-image-1964\" width=\"1136\" height=\"855\"\/><figcaption>Din\u00e2mica de cordas no jogo Batman the Movie, vers\u00e3o para Commodore Amiga&#8230;<\/figcaption><\/figure>\n\n\n\n<p>J\u00e1 coloquei este v\u00eddeo acima, mas vou voltar a deix\u00e1-lo caso queiram espreitar o jogo em funcionamento:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Batman The Movie No Deaths Perfect LongPlay - Amiga Version - All Levels\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/2O0IoCeMj00?start=205&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Se repararem, as cordas usadas no meu Game Engine s\u00e3o as mesmas do jogo:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2022\/11\/2022-11-22-Rope-Dynamics-working-better-in-my-Cpp-Game-Engine-doing-like-Tarzan.mp4\"><\/video><figcaption>2022-11-22 &#8211; Melhorias no sistema de cordas, e v\u00eddeo de demonstra\u00e7\u00e3o a imitar o Tarzan ou Homem-Aranha, no meu Game Engine em C++\u2026<\/figcaption><\/figure>\n\n\n\n<p>Poder\u00e3o ver este sistema em funcionamento quando criarem o vosso primeiro jogo com o meu Game Engine.<\/p>\n\n\n\n<p><strong>O uso de blocos de tiles:<\/strong><\/p>\n\n\n\n<p>Nos anos 80 e 90, quando a mem\u00f3ria era muito pouca e at\u00e9 768 bytes faziam muita falta, usava-se outra t\u00e9cnica que deixa saudades: o uso de blocos de tiles.<\/p>\n\n\n\n<p>Se pr\u00e9-construirmos blocos, cada um deles com uma combina\u00e7\u00e3o de 4 tiles, podemos representar 4 blocos de cada vez no lugar de um, e a\u00ed, poupa-se muita mem\u00f3ria.<\/p>\n\n\n\n<p>No exemplo abaixo, do Rick Dangerous, temos um case-study curioso&#8230;<\/p>\n\n\n\n<p>\u00c9 que apesar de o autor poder usar a resolu\u00e7\u00e3o de 320&#215;200 permitida pelo Commodore Amiga, usou apenas 256&#215;192, porque como queriam migrar o jogo tamb\u00e9m para a plataforma ZX Spectrum, que tinha essa resolu\u00e7\u00e3o, para facilitar todo o processo, usou essa resolu\u00e7\u00e3o em todas as vers\u00f5es, inclusive a do Commodore Amiga.<\/p>\n\n\n\n<p>Assim, na vers\u00e3o do ZX Spectrum, em rela\u00e7\u00e3o \u00e0 do Amiga, ficou tudo 100% igual (mas com menos ecr\u00e3s por falta de mem\u00f3ria no ZX Spectrum), mas com a diferen\u00e7a de que tinha umas barras a negro nos lados e topo e fundo do ecr\u00e3, para centrar o mesmo, porque tinha a resolu\u00e7\u00e3o do ZX Spectrum e teve de ser centrada.<\/p>\n\n\n\n<p>Mas tinha a diferen\u00e7a enorme de ter muito mais cores (qualidade gr\u00e1fica), e som, e ecr\u00e3s de jogo.<\/p>\n\n\n\n<p>Abaixo podemos ver algumas vers\u00f5es do jogo para a m\u00e1quina ZX Spectrum, de 8 bits, que possuo na minha colec\u00e7\u00e3o de jogos dos anos 80 e 90:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"988\" height=\"1024\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Rick-Dangerous-versions-owned-by-Gonzalo-Ferreira-988x1024.jpg\" alt=\"Rick Dangerous ZX Spectrum versions owned by Gonzalo Ferreira, author of the C++ Game Engine...\" class=\"wp-image-2784\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Rick-Dangerous-versions-owned-by-Gonzalo-Ferreira-988x1024.jpg 988w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Rick-Dangerous-versions-owned-by-Gonzalo-Ferreira-289x300.jpg 289w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Rick-Dangerous-versions-owned-by-Gonzalo-Ferreira-768x796.jpg 768w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Rick-Dangerous-versions-owned-by-Gonzalo-Ferreira-1481x1536.jpg 1481w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Rick-Dangerous-versions-owned-by-Gonzalo-Ferreira.jpg 1975w\" sizes=\"(max-width: 988px) 100vw, 988px\" \/><figcaption>Rick Dangerous ZX Spectrum versions owned by Gonzalo Ferreira, author of the C++ Game Engine&#8230;<\/figcaption><\/figure>\n\n\n\n<p>Na imagem acima temos v\u00e1rias vers\u00f5es, sendo a mais rara a primeira em vers\u00e3o double jewel, mas podemos ver que todas usavam ecr\u00e3s da vers\u00e3o Amiga, e no canto inferior direito podemos ver um ecr\u00e3 do mesmo jogo na vers\u00e3o ZX Spectrum, que n\u00e3o ficaria muito atr\u00e1s, apesar de ter muito menos cores, isto porque em termos de imagem (sem contar com as cores), eram 100% iguais.<\/p>\n\n\n\n<p>Agora, se dividirmos 256 e 192 por 32, teremos 8 blocos de largura por 6 de altura.<\/p>\n\n\n\n<p>Cada bloco era composto por 16 tiles, 4 de largura, e 4 de altura, ambos com 8 p\u00edxeis de largura e altura cada um:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"873\" height=\"513\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-09-The-use-of-blocks-of-tiles-on-a-game-engine.jpg\" alt=\"Game Development Tutorial - Sprites and Tiles - 09 - The use of Blocks of Tiles on VideoGames\" class=\"wp-image-2767\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-09-The-use-of-blocks-of-tiles-on-a-game-engine.jpg 873w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-09-The-use-of-blocks-of-tiles-on-a-game-engine-300x176.jpg 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-09-The-use-of-blocks-of-tiles-on-a-game-engine-768x451.jpg 768w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><figcaption>Game Development Tutorial &#8211; Sprites and Tiles &#8211; 09 &#8211; The use of Blocks of Tiles on VideoGames<\/figcaption><\/figure>\n\n\n\n<p>Desta maneira gast\u00e1vamos 16 vezes menos mem\u00f3ria por cada ecr\u00e3 no mapa do jogo, e os 180 bytes por ecr\u00e3 que se poupavam ao usarmos 180 e n\u00e3o 192 bytes por bloco, eram muit\u00edssimo importantes na altura.<\/p>\n\n\n\n<p>T\u00ednhamos assim na realidade 16 pequenos tiles por cada bloco, o que parece n\u00e3o servir para poupar muita mem\u00f3ria, mas se virmos bem, como faz\u00edamos o mapa com blocos pr\u00e9-definidos com essas combina\u00e7\u00f5es de tiles e n\u00e3o com tiles em si, a poupan\u00e7a era muito grande:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"873\" height=\"513\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-10-Tiles-made-of-blocks-on-a-game-engine.jpg\" alt=\"Game Development Tutorial - Sprites and Tiles - 10 - Blocks made of Tiles on VideoGames\" class=\"wp-image-2768\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-10-Tiles-made-of-blocks-on-a-game-engine.jpg 873w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-10-Tiles-made-of-blocks-on-a-game-engine-300x176.jpg 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-10-Tiles-made-of-blocks-on-a-game-engine-768x451.jpg 768w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><figcaption>Game Development Tutorial &#8211; Sprites and Tiles &#8211; 10 &#8211; Blocks made of Tiles on VideoGames<\/figcaption><\/figure>\n\n\n\n<p><strong>As tile sheets:<\/strong><\/p>\n\n\n\n<p>Os tile sheets eram (e s\u00e3o) imagens que cont\u00eam todos os tiles de um jogo, e o jogo ao arrancar vai ler esses tiles todos, e construir os blocos e n\u00edveis com base nos mesmos, ao arrancar cada n\u00edvel:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"873\" height=\"513\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-11-The-Tiles-on-Game-Engines.jpg\" alt=\"Game Development Tutorial - Sprites and Tiles - 11 - The Use of Tiles on Videogames and Game Engines\" class=\"wp-image-2769\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-11-The-Tiles-on-Game-Engines.jpg 873w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-11-The-Tiles-on-Game-Engines-300x176.jpg 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-11-The-Tiles-on-Game-Engines-768x451.jpg 768w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><figcaption>Game Development Tutorial &#8211; Sprites and Tiles &#8211; 11 &#8211; The Use of Tiles on Videogames and Game Engines<\/figcaption><\/figure>\n\n\n\n<p>Vou deixar um exemplo real de uma tile sheet, neste caso da vers\u00e3o PC do mesmo jogo, abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Rick-Dangerous-PC-version-tiles.png\" alt=\"Rick Dangerous PC Version Tile Sheet\" class=\"wp-image-2788\" width=\"872\" height=\"570\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Rick-Dangerous-PC-version-tiles.png 315w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Rick-Dangerous-PC-version-tiles-300x196.png 300w\" sizes=\"(max-width: 872px) 100vw, 872px\" \/><figcaption>Rick Dangerous PC Version Tile Sheet<\/figcaption><\/figure>\n\n\n\n<p>E bastava isto, uma tile sheet que na realidade ocupa uns meros 13 KB de tamanho (0,013 MB), para termos todas as imagens necess\u00e1rias para criar os mapas de todos os n\u00edveis, do jogo inteiro.<\/p>\n\n\n\n<p>As imagens ocupavam assim pouco tempo, e com mais algum espa\u00e7o gasto, constru\u00edamos os mapas de jogos, com poucos bytes por ecr\u00e3, al\u00e9m das combina\u00e7\u00f5es de tiles que compunham cada bloco, etc.<\/p>\n\n\n\n<p>Vamos ver quanto gastar\u00edamos ao usar apenas blocos de 16 tiles ao inv\u00e9s de imagens de ecr\u00e3s inteiros em RGBA:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"873\" height=\"513\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-12-Saving-memory-with-the-use-of-tiles-on-a-videogame.jpg\" alt=\"Game Development Tutorial - Sprites and Tiles - 12 - The Use of Tiles on Videogames\" class=\"wp-image-2770\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-12-Saving-memory-with-the-use-of-tiles-on-a-videogame.jpg 873w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-12-Saving-memory-with-the-use-of-tiles-on-a-videogame-300x176.jpg 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-12-Saving-memory-with-the-use-of-tiles-on-a-videogame-768x451.jpg 768w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><figcaption>Game Development Tutorial &#8211; Sprites and Tiles &#8211; 12 &#8211; The Use of Tiles on Videogames<\/figcaption><\/figure>\n\n\n\n<p>Sim, \u00e9 verdade, acabamos assim por gastar 65.526 vezes menos mem\u00f3ria!<\/p>\n\n\n\n<p>Significa que um jogo que poderia ocupar 1 KB de mem\u00f3ria ao inv\u00e9s de 65.526 KB (66 MB), com os mesmos n\u00edveis, mesmas imagens, mas eliminando a redund\u00e2ncia de ter v\u00e1rias imagens iguais a ocupar mem\u00f3ria, tudo gra\u00e7as ao uso de tiles.<\/p>\n\n\n\n<p>Ou ocupar 1 MB de mem\u00f3ria ao inv\u00e9s de 65.526 MB (66 GB, que quase ningu\u00e9m tem hoje em dia).<\/p>\n\n\n\n<p><strong>Os Tiles de Colis\u00f5es e os de BackGround:<\/strong><\/p>\n\n\n\n<p>Agora, j\u00e1 vimos o que s\u00e3o tiles, e como eles nos fazem poupar mem\u00f3ria, e como os usamos para preencher mapas de jogos.<\/p>\n\n\n\n<p>Mas ainda n\u00e3o foi explicado que usamos dois tipos principais de tiles: tiles com e sem colis\u00e3o.<\/p>\n\n\n\n<p>O que quero dizer com isto?<\/p>\n\n\n\n<p>N\u00e3o se devem usar &#8220;objectos&#8221; (em termos de &#8220;Programa\u00e7\u00e3o Orientada a Objectos&#8221; que ser\u00e1 discutida mais tarde), para criar paredes ou plataformas, pois ocupariam mais recursos, como CPU e mem\u00f3ria.<\/p>\n\n\n\n<p>Usam-se em vez disso outras t\u00e9cnicas, que n\u00e3o far\u00e3o parte da cria\u00e7\u00e3o deste mini-curso pois ter\u00e3o mais a ver com Programa\u00e7\u00e3o em si, e usamos os tiles tanto para preencher o fundo do ecr\u00e3 como as colis\u00f5es.<\/p>\n\n\n\n<p>Eu criei a dada altura, para melhor mostrar o funcionamento dos tiles, adicionei uma feature no meu Game Engine que mostra a divis\u00e3o entre os diversos tiles:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-30-Created-a-tile-grid-for-debugging-purposes-on-my-Cpp-Game-Engine-Thumb.gif\" alt=\"2023-12-29 - Cria\u00e7\u00e3o de uma grid de tiles para debugging, no meu Game Engine em C++...\" class=\"wp-image-3266\" width=\"1139\" height=\"642\"\/><figcaption>2023-12-29 &#8211; Cria\u00e7\u00e3o de uma grid de tiles para debugging, no meu Game Engine em C++&#8230;<\/figcaption><\/figure>\n\n\n\n<p>As riscas mais claras, que desenham os quadrados na imagem acima, s\u00e3o as linhas que dividem os tiles do jogo.<\/p>\n\n\n\n<p>Vejamos em v\u00eddeo tudo isto em funcionamento:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-30-Created-a-tile-grid-for-debugging-purposes-on-my-Cpp-Game-Engine.mp4\"><\/video><figcaption>2023-12-29 &#8211; Cria\u00e7\u00e3o de uma grid de tiles para debugging, no meu Game Engine em C++\u2026<\/figcaption><\/figure>\n\n\n\n<p>Se repararem acima, existem tiles que t\u00eam imagens, como os blocos de pedra mais dourados, que servem de plataformas, onde tanto o jogador como os inimigos aterram quando caem (quando \u00e9 ch\u00e3o), ou embatem quando saltam (quando \u00e9 tecto), ou onde param quando colidem com eles (quando s\u00e3o paredes).<\/p>\n\n\n\n<p>S\u00e3o neste caso imagens fixas na mesma, s\u00f3 que ao contr\u00e1rio das que podem ver no fundo, como os das rochas que est\u00e3o por detr\u00e1s dos bonecos Eg\u00edpcios e que n\u00e3o interferem com eles, estes interferem com os inimigos e o jogador, n\u00e3o os deixando passar por eles.<\/p>\n\n\n\n<p>S\u00e3o tiles de colis\u00e3o, e iremos ver mais tarde os mesmos em funcionamento, ou no v\u00eddeo que faz parte deste tutorial onde mostro os mesmos a serem aplicados.<\/p>\n\n\n\n<p><strong>Sprites<\/strong>:<\/p>\n\n\n\n<p>Acab\u00e1mos de saber que us\u00e1vamos imagens com muitos tiles, que o jogo depois poderia organizar em blocos de tiles, e assim poupar muita mem\u00f3ria:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"873\" height=\"513\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-13-Tile-sheets-on-videogames.jpg\" alt=\"Game Development Tutorial - Sprites and Tiles - 13 - Tile Sheet from Rick Dangerous as example\" class=\"wp-image-2771\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-13-Tile-sheets-on-videogames.jpg 873w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-13-Tile-sheets-on-videogames-300x176.jpg 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-13-Tile-sheets-on-videogames-768x451.jpg 768w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><figcaption>Game Development Tutorial &#8211; Sprites and Tiles &#8211; 13 &#8211; Tile Sheet from Rick Dangerous as example<\/figcaption><\/figure>\n\n\n\n<p>Mas um tile, como o jogo mesmo indica (&#8220;Azulejo&#8221;), \u00e9 fixo na &#8220;parede&#8221;, tal como os azulejos.<\/p>\n\n\n\n<p>Ou seja, s\u00e3o as imagens que ficam fixas no ecr\u00e3, como os fundos do jogo.<\/p>\n\n\n\n<p>Ent\u00e3o que nome d\u00e1vamos \u00e0s imagens que se movem pelos nossos ecr\u00e3s quando jogamos algum VideoJogo?<\/p>\n\n\n\n<p>Isso mesmo, s\u00e3o os sprites!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"873\" height=\"513\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-14-What-are-sprites-on-videogames.jpg\" alt=\"Game Development Tutorial - Sprites and Tiles - 14 - What are Sprites on VideoGames...\" class=\"wp-image-2772\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-14-What-are-sprites-on-videogames.jpg 873w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-14-What-are-sprites-on-videogames-300x176.jpg 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-14-What-are-sprites-on-videogames-768x451.jpg 768w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><figcaption>Game Development Tutorial &#8211; Sprites and Tiles &#8211; 14 &#8211; What are Sprites on VideoGames&#8230;<\/figcaption><\/figure>\n\n\n\n<p>Se virem acima, temos em destaque tanto o jogador (na personagem do &#8220;Rick Dangerous&#8221;), como o inimigo &#8220;Goolu&#8221; (o nome dado pelo criador do jogo Simon Phipps aos ind\u00edgenas), que vai ser atingido pela bala (tamb\u00e9m sprite) que se dirige contra ele, bem como o &#8220;Goolu&#8221; acima.<\/p>\n\n\n\n<p>Tudo o que se move no ecr\u00e3 normalmente costumam ser sprites, que acabam por ser imagens que fazemos andar pelo ecr\u00e3, com as devidas anima\u00e7\u00f5es, que d\u00e3o a vida ao jogo, seja atrav\u00e9s dos bonecos inimigos, balas, armas, anima\u00e7\u00f5es por vezes como fogo, ou at\u00e9 o boneco do jogo.<\/p>\n\n\n\n<p><strong>Sprite Sheets:<\/strong><\/p>\n\n\n\n<p>Da mesma maneira que as imagens fixas de um jogo (os tiles), se guardam em &#8220;tile sheets&#8221;, as imagens m\u00f3veis de um jogo, organizam-se em &#8220;sprite sheets&#8221;, que o jogo l\u00ea ao arrancar, para construir cada n\u00edvel, e podem ver abaixo as imagens acima mencionadas destacadas no exemplo abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"873\" height=\"513\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-15-Sprite-sheets-on-videogames-with-Rick-Dangerous-sprites-as-example.jpg\" alt=\"Game Development Tutorial - Sprites and Tiles - 15 - Example of Sprites on Rick Dangerous videogame\" class=\"wp-image-2773\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-15-Sprite-sheets-on-videogames-with-Rick-Dangerous-sprites-as-example.jpg 873w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-15-Sprite-sheets-on-videogames-with-Rick-Dangerous-sprites-as-example-300x176.jpg 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-15-Sprite-sheets-on-videogames-with-Rick-Dangerous-sprites-as-example-768x451.jpg 768w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><figcaption>Game Development Tutorial &#8211; Sprites and Tiles &#8211; 15 &#8211; Example of Sprites on Rick Dangerous videogame<\/figcaption><\/figure>\n\n\n\n<p>Vamos ver a Sprite Sheet real do jogo Rick Dangerous na sua vers\u00e3o para PC (MS-DOS) dos anos 90:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Rick-Dangerous-PC-version-Sprite-Sheet.png\" alt=\"Rick Dangerous PC Version Sprite Sheet\" class=\"wp-image-2789\" width=\"873\" height=\"729\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Rick-Dangerous-PC-version-Sprite-Sheet.png 352w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Rick-Dangerous-PC-version-Sprite-Sheet-300x251.png 300w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><figcaption>Rick Dangerous PC Version Sprite Sheet<\/figcaption><\/figure>\n\n\n\n<p>Com a Sprite Sheet acima, poder\u00edamos popular o jogo com todo o tipo de inimigos, dos diversos n\u00edveis, sejam os ind\u00edgenas do 1\u00ba n\u00edvel do Rick Dangerous, os Eg\u00edpcios do 2\u00ba, e construir as anima\u00e7\u00f5es tanto do jogador como dos inimigos, as anima\u00e7\u00f5es das explos\u00f5es, a anima\u00e7\u00e3o do jogador ao perder, etc&#8230;<\/p>\n\n\n\n<p><strong>Os tipos de imagens usados num videojogo:<\/strong><\/p>\n\n\n\n<p>Podemos resumir assim as imagens principais num videojogo de 2D, em Sprites e Tiles, sendo que podemos ter tamb\u00e9m Blocos compostos por v\u00e1rios Tiles, se quisermos poupar ainda mais mem\u00f3ria:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"873\" height=\"513\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-16-Main-types-of-images-used-on-videogames.jpg\" alt=\"Game Development Tutorial - Sprites and Tiles - 16 - Types of Images used on VideoGames\" class=\"wp-image-2774\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-16-Main-types-of-images-used-on-videogames.jpg 873w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-16-Main-types-of-images-used-on-videogames-300x176.jpg 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/Game-Dev-Tutorial-16-Main-types-of-images-used-on-videogames-768x451.jpg 768w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><figcaption>Game Development Tutorial &#8211; Sprites and Tiles &#8211; 16 &#8211; Types of Images used on VideoGames<\/figcaption><\/figure>\n\n\n\n<p><strong>A edi\u00e7\u00e3o dos Sprites:<\/strong><\/p>\n\n\n\n<p>Estes sprites abaixo s\u00e3o editados num programa de desenho como o The Gimp (estilo do famoso Adobe Photoshop mas Open Source, que uso Linux no dia-a-dia enquanto crio o meu Game Engine), e podemos ver como numa altura de Natal at\u00e9 adicionei os barretes de Pai Natal aos sprites do jogador, que explica porque \u00e9 que os v\u00eddeos de demonstra\u00e7\u00e3o do Game Engine t\u00eam personagens com barretes do Pai Natal:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/2023-10-30-Editing-Player-SpriteSheet-on-my-Game-Engine-1024x794.png\" alt=\"2023-10-30 - Editando a Sprite Sheet do jogador no n\u00edvel de testes de plataformas do meu Game Engine...\" class=\"wp-image-2790\" width=\"870\" height=\"674\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/2023-10-30-Editing-Player-SpriteSheet-on-my-Game-Engine-1024x794.png 1024w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/2023-10-30-Editing-Player-SpriteSheet-on-my-Game-Engine-300x233.png 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/2023-10-30-Editing-Player-SpriteSheet-on-my-Game-Engine-768x595.png 768w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/2023-10-30-Editing-Player-SpriteSheet-on-my-Game-Engine.png 1393w\" sizes=\"(max-width: 870px) 100vw, 870px\" \/><figcaption>2023-10-30 &#8211; Editando a Sprite Sheet do jogador no n\u00edvel de testes de plataformas do meu Game Engine&#8230;<\/figcaption><\/figure>\n\n\n\n<p>Por norma dividimos a Sprite Sheet em colunas e linhas, neste caso em 30 de largura por 50 de altura, que \u00e9 o tamanho dos sprites, e o game engine tratar\u00e1 depois da anima\u00e7\u00e3o dos mesmos.<\/p>\n\n\n\n<p>Temos depois de dizer ao Game Engine que as imagens do jogador se encontram num ficheiro, por exemplo o ficheiro &#8220;player.png&#8221;, e que se divide em linhas de 50 p\u00edxeis de altura e cada uma dividida em colunas de 30 p\u00edxeis de largura (no exemplo acima), e a que linha corresponde cada anima\u00e7\u00e3o.<\/p>\n\n\n\n<p>Na imagem acima podemos ver que na primeira linha vis\u00edvel se encontra o jogador a respirar, parado, enquanto que na segunda linha temos as imagens da anima\u00e7\u00e3o do jogador a correr.<\/p>\n\n\n\n<p>Na imagem acima podemos ver tamb\u00e9m que a anima\u00e7\u00e3o do boneco a respirar tem 3 imagens, e que a do boneco a correr tem 4 imagens.<\/p>\n\n\n\n<p>Ap\u00f3s tudo isso, o Game Engine ao arrancar, ir\u00e1 ler as imagens, para saber que imagens usar em cada anima\u00e7\u00e3o, e assim, se colocarmos o jogador a correr, o Game Engine ir\u00e1 buscar as imagens correctas e criar a anima\u00e7\u00e3o no ecr\u00e3, durante o jogo.<\/p>\n\n\n\n<p><strong>Cores de fundo nas Sprite Sheets<\/strong><\/p>\n\n\n\n<p>\u00c9 importante referir que nem sempre se usa o transparente como cor de fundo nas sprite sheets, essa escolha foi minha no exemplo acima.<\/p>\n\n\n\n<p>Por vezes os programadores usam outras cores:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-30-Searching-for-Sonic-videogame-sprite-sheets-1024x610.png\" alt=\"As cores de fundo das sprite sheets, na cria\u00e7\u00e3o de VideoJogos...\" class=\"wp-image-3275\" width=\"1136\" height=\"677\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-30-Searching-for-Sonic-videogame-sprite-sheets-1024x610.png?v=1704147637 1024w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-30-Searching-for-Sonic-videogame-sprite-sheets-300x179.png?v=1704147637 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-30-Searching-for-Sonic-videogame-sprite-sheets-768x457.png?v=1704147637 768w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-30-Searching-for-Sonic-videogame-sprite-sheets.png?v=1704147637 1300w\" sizes=\"(max-width: 1136px) 100vw, 1136px\" \/><figcaption>As cores de fundo das sprite sheets, na cria\u00e7\u00e3o de VideoJogos&#8230;<\/figcaption><\/figure>\n\n\n\n<p>O que acontece, \u00e9 que basta que escolhamos uma cor espec\u00edfica que saibamos que n\u00e3o coincide com nenhuma cor usada em todas as imagens do jogo, e podemos durante o jogo transform\u00e1-la em p\u00edxeis vazios (invis\u00edveis).<\/p>\n\n\n\n<p>Eu prefiro ter as imagens sempre transparentes \u00e0 partida, mas podem ver que muitos adoptam outras cores, e claro que nessas spritesheets com diferentes cores, temos de escolher a cor com a ferramenta de varinha m\u00e1gica das aplica\u00e7\u00f5es de desenho, e apag\u00e1-la, transformando-as em p\u00edxeis vazios, para que o meu game engine as possa colocar bem no jogo.<\/p>\n\n\n\n<p>Isto \u00e9 demonstrado tamb\u00e9m no v\u00eddeo anexo.<\/p>\n\n\n\n<p><strong>As configura\u00e7\u00f5es dos sprites:<\/strong><\/p>\n\n\n\n<p>Os sprites s\u00e3o depois configurados nos ficheiros de configura\u00e7\u00e3o do jogo, ou no meu caso, do meu Game Engine, para que ele os saiba ler e como usar.<\/p>\n\n\n\n<p>Abaixo podemos ver um ficheiro de configura\u00e7\u00e3o de sprites do meu Game Engine em 2023-12-31 cujos nomes de vari\u00e1veis provavelmente se alter\u00e3o posteriormente pelo que n\u00e3o se devem basear nesta imagem mas sim no v\u00eddeo e instru\u00e7\u00f5es noutra sec\u00e7\u00e3o quando quiserem criar o vosso jogo com o meu Game Engine, mas vejamos a seguinte imagem:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-31-Configuring-sprites-on-my-Cpp-Game-Engine.png\" alt=\"\" class=\"wp-image-3276\" width=\"1135\" height=\"715\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-31-Configuring-sprites-on-my-Cpp-Game-Engine.png?v=1704147631 1020w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-31-Configuring-sprites-on-my-Cpp-Game-Engine-300x189.png?v=1704147631 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-31-Configuring-sprites-on-my-Cpp-Game-Engine-768x484.png?v=1704147631 768w\" sizes=\"(max-width: 1135px) 100vw, 1135px\" \/><figcaption>Configura\u00e7\u00e3o dos sprites no meu Game Engine em 2023-12-31&#8230;<\/figcaption><\/figure>\n\n\n\n<p>A configura\u00e7\u00e3o acima usa a linguagem que escolhi para a configura\u00e7\u00e3o de sprites no meu Game Engine, a XML (de &#8220;eXtensible Markup Language&#8221;), muito semelhante ao HTML e f\u00e1cil de usar, em que envolvemos os valores por tags com os nomes das vari\u00e1veis.<\/p>\n\n\n\n<p>Reparem que nela podemos ver que a anima\u00e7\u00e3o de meu nome interno &#8220;player-quietBreathing&#8221; \u00e9 dita come\u00e7ar no p\u00edxel Y 0 (p\u00edxel vertical 0), indicando ter 3 frames (&#8220;numFrames=3&#8221;), ou seja, tr\u00eas imagens, com 30 p\u00edxeis de largura por 50 de altura, e podem ver que a anima\u00e7\u00e3o correspondente ao jogador a correr (de nome &#8220;player-running&#8221;), \u00e9 indicada come\u00e7ar no p\u00edxel vcertical 50 (&#8220;posY=50&#8221;) e n\u00e3o 0 como a anterior, por estar verticalmente logo a seguir \u00e0 anterior que tinha 50 p\u00edxeis de altura. Ela tem tamb\u00e9m o x como 0 (&#8220;posX=0&#8221;), porque tanto ela como a outra come\u00e7am no primeiro p\u00edxel da imagem.<\/p>\n\n\n\n<p>Esta outra anima\u00e7\u00e3o tem um &#8220;numFrames&#8221; de 4, indicando ter 4 imagens, vamos conferir se \u00e9 verdade:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"794\" src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/2023-10-30-Editing-Player-SpriteSheet-on-my-Game-Engine-1024x794.png\" alt=\"2023-10-30 - Editando a Sprite Sheet do jogador no n\u00edvel de testes de plataformas do meu Game Engine...\" class=\"wp-image-2790\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/2023-10-30-Editing-Player-SpriteSheet-on-my-Game-Engine-1024x794.png 1024w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/2023-10-30-Editing-Player-SpriteSheet-on-my-Game-Engine-300x233.png 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/2023-10-30-Editing-Player-SpriteSheet-on-my-Game-Engine-768x595.png 768w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/2023-10-30-Editing-Player-SpriteSheet-on-my-Game-Engine.png 1393w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>2023-10-30 &#8211; Editando a Sprite Sheet do jogador no n\u00edvel de testes de plataformas do meu Game Engine&#8230;<\/figcaption><\/figure>\n\n\n\n<p>Como podemos ver pela imagem acima, bate tudo certo, n\u00e3o \u00e9 verdade?<\/p>\n\n\n\n<p>A anima\u00e7\u00e3o do respirar acima, come\u00e7ando com X e Y como 0, com 3 imagens, e a de baixo com 4 imagens, come\u00e7ando no Y=50 (por o X terem 50 p\u00edxeis de altura e ser a segunda), e no X=0 tamb\u00e9m.<\/p>\n\n\n\n<p>E podem ver que batem certo com a altura de 50 p\u00edxeis e largura de 30 p\u00edxeis.<\/p>\n\n\n\n<p>E notem que t\u00eam ambas o ficheiro onde se podem encontrar os tais frames (imagens individuais que comp\u00f5em as anima\u00e7\u00f5es), de cada sprite.<\/p>\n\n\n\n<p><strong>Alterando a configura\u00e7\u00e3o dos sprites:<\/strong><\/p>\n\n\n\n<p>Se alterarem o nome da anima\u00e7\u00e3o, dando o nome &#8220;player-running&#8221; \u00e0 anima\u00e7\u00e3o &#8220;player-quietBreathing&#8221;, e vice-versa, ir\u00e3o ver que o jogador passar\u00e1 a ter a anima\u00e7\u00e3o de &#8220;dying&#8221; (morrendo, quando se transforma num esqueleto), quando corre, e a anima\u00e7\u00e3o de correr, quando morre:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-31-My-Cpp-Game-Engine-with-a-misconfiguration-on-its-sprites-making-it-die-when-running-and-vice-versa.mp4\"><\/video><figcaption>2023-12-31 &#8211; Exemplo do meu Game Engine com os sprites mal configurados, a morrer quando corre, e vice-versa\u2026<\/figcaption><\/figure>\n\n\n\n<p>E \u00e9 assim que tudo funciona, ter\u00e3o a oportunidade de experimentar depois com o meu Game Engine.<\/p>\n\n\n\n<p><strong>A dura\u00e7\u00e3o das anima\u00e7\u00f5es, e tempo entre cada imagem:<\/strong><\/p>\n\n\n\n<p>Existem muitas outras configura\u00e7\u00f5es, as quais iremos falar mais tarde.<\/p>\n\n\n\n<p>Mas uma delas \u00e9 a da dura\u00e7\u00e3o em milissegundos de cada frame de um sprite, ou seja, o tempo que cada frame vai ter para estar no ecr\u00e3-<\/p>\n\n\n\n<p>Por exemplo, a anima\u00e7\u00e3o &#8220;player-dying&#8221;, tem na sua configura\u00e7\u00e3o que cada frame\/imagem estaria no ecr\u00e3 por 150 ms, ou seja, praticamente um sexto de segundo, sendo que como tem 9 imagens\/sprites, se alterarmos o tempo para 15 ms, passaremos a ter a anima\u00e7\u00e3o a decorrer num total n\u00e3o de 150*9=1.350ms (ou seja 1,35 segundos), mas sim de 15*9=135 ms, ou seja, a anima\u00e7\u00e3o decorreria em perto de um s\u00e9timo de segundo.<\/p>\n\n\n\n<p>Vejamos como ficaria:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-31-My-Cpp-Game-Engine-with-a-10-times-faster-animation-on-the-player-running-and-dying-sprites.mp4\"><\/video><figcaption>2023-12-31 &#8211; O meu Game Engine com o sprite do jogador configurado com anima\u00e7\u00e3o de &#8220;dying&#8221; 10 vezes mais r\u00e1pida\u2026<\/figcaption><\/figure>\n\n\n\n<p>Por isso \u00e9 f\u00e1cil de configurar, se queremos que uma anima\u00e7\u00e3o, que tenha 10 imagens, leve um total de 1 segundo a acontecer, teremos de atribuir um tempo de 100 ms (milissegundos) a cada uma das imagens que comp\u00f5em essa anima\u00e7\u00e3o, e ela levar\u00e1 os 10 segundos a acontecer.<\/p>\n\n\n\n<p><strong>Existem tiles animados?<\/strong><\/p>\n\n\n\n<p>Sim! Por estranho que pare\u00e7a, apesar de um tile (azulejo), estar fixo no fundo do ecr\u00e3, ele poder\u00e1 conter anima\u00e7\u00f5es.<\/p>\n\n\n\n<p>Recomendo espreitarem o minuto 12:00 do v\u00eddeo que criei abaixo do R-Type, famoso jogo de arcada dos anos 80, para verem que este jogo est\u00e1 todo ele cheio de tiles animados nos ecr\u00e3s, o que d\u00e1 outra vida e realismo a tudo:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"R-Type (Vers\u00e3o Arcada) - Todos os N\u00edveis - Jogabilidade Perfeita (Sem Perder Vidas, e S\u00f3 Uma Arma)\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/cfOBxzeVUqg?start=721&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>Os sprites podem ser rodados?<\/strong><\/p>\n\n\n\n<p>Sim, \u00e9 frequente termos de rodar imagens, pois faz mais sentido hoje em dia termos uma imagem que possamos rodar consoante nos d\u00e1 jeito, do que estar a criar 360 c\u00f3pias da mesma imagem e guardar tudo em mem\u00f3ria, com uma imagem por cada \u00e2ngulo de inclina\u00e7\u00e3o do objecto.<\/p>\n\n\n\n<p>Vejam o exemplo abaixo retirado do meu Gamem Engine e reparem como a nave se inclina para a frente, sempre que acelera (sempre que se v\u00ea a nave a andar para a frente), e como ela faz o inverso ao andar para tr\u00e1s (reduzir velocidade):<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-23-Laser-and-Energy-Bolt-Weapons-already-making-damage-on-my-Cpp-Game-Engine-Shoot-Em-Up.mp4\"><\/video><figcaption>2023-12-23 &#8211; As minhas armas de raios j\u00e1 a criar danos no n\u00edvel de testes de Shoot&#8217;Em Ups do meu Game Engine em C++\u2026<\/figcaption><\/figure>\n\n\n\n<p><strong>Distinguir sprites de anima\u00e7\u00f5es geradas em tempo real:<\/strong><\/p>\n\n\n\n<p>Por exemplo, muitos jogos t\u00eam o fogo desenhado com anima\u00e7\u00f5es, e da\u00ed ficar repetitivo, mas no meu game engine, o fogo \u00e9 desenhado em tempo real, mas d\u00e1 para notar pela forma como se move que \u00e9 algo desenhado em tempo real e n\u00e3o uma anima\u00e7\u00e3o.<\/p>\n\n\n\n<p>Neste tipo de situa\u00e7\u00f5es, primeiro cria-se o algoritmo que gera o fogo em si:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2021\/03\/2021-03-23-Real-Time-Fire-With-Variable-Wind-With-C-Cpp.mp4\"><\/video><figcaption>2021-03-23 &#8211; Fogo desenhado em tempo real, para o meu Game Engine em C++\u2026<\/figcaption><\/figure>\n\n\n\n<p>Depois de termos um algoritmo funcional, podemos aplic\u00e1-lo ao Game Engine, e ele passar\u00e1 a fazer parte do nosso pequeno mundo virtual:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2021\/04\/2021-04-01-Real-time-generated-fire-already-working-in-my-C-Cpp-Game-Engine.gif\" alt=\"2021-04-01 - Terminada a funcionalidade de fogos em tempo real no meu Game Engine em C\/C++...\" class=\"wp-image-667\" width=\"1136\" height=\"710\"\/><figcaption>2021-04-01 &#8211; Terminada a funcionalidade de fogos em tempo real no meu Game Engine em C\/C++&#8230;<\/figcaption><\/figure>\n\n\n\n<p>No jogo talvez n\u00e3o se note muito, mas este tipo de algoritmos s\u00e3o muito realistas:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2021\/04\/2021-04-15 - FIM DO DIA - Velocidade Fixa 0 - ScreenAnimation_2021-04-15_195445.gif\" alt=\"2021-04-15 - Fogo com velocidade fixa, gerado em tempo real para o meu Game Engine em C++...\" class=\"wp-image-897\" width=\"1136\" height=\"355\"\/><figcaption>2021-04-15 &#8211; Fogo com velocidade fixa, gerado em tempo real para o meu Game Engine em C++&#8230;<\/figcaption><\/figure>\n\n\n\n<p>No exemplo acima, sprites poderiam ter sido usados e n\u00e3o foram, porque em tempo real temos algo mais realista e n\u00e3o repetitivo (aten\u00e7\u00e3o que acima estar\u00e1 repetitivo porque \u00e9 uma imagem animada em repeti\u00e7\u00e3o).<\/p>\n\n\n\n<p>Mas h\u00e1 casos em que n\u00e3o compensaria mesmo usar, vejamos o exemplo da corda abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2022\/09\/2022-09-28-Perfect-rope-balancing-and-throwing-with-gravity-included-in-my-Cpp-game-engine-320x200-thumb.gif\" alt=\"2022-09-28 - Sistema de cordas perfeito com Gravidade inclu\u00edda, no meu game engine em C++...\" class=\"wp-image-2063\" width=\"1139\" height=\"637\"\/><figcaption>2022-09-28 &#8211; Sistema de cordas perfeito com Gravidade inclu\u00edda, no meu game engine em C++&#8230;<\/figcaption><\/figure>\n\n\n\n<p>No Gif animado acima, podem ver que a personagem atira uma corda, como um Homem-Aranha ou Tarzan, e essa corda \u00e9 desenhada em tempo real, e n\u00e3o poderia ser com sprites, porque se tent\u00e1ssemos inclinar uma imagem composta por essa corda, a pr\u00f3pria corda ficaria distorcida e nunca teria tamb\u00e9m o efeito de riscos amarelos horizontais que tem agora, que quis que tivesse para ser igual ao Batman the Movie 1989 da Ocean.<\/p>\n\n\n\n<p>Outro exemplo tem a ver com o uso de armas, que t\u00eam de ser desenhadas em tempo real.<\/p>\n\n\n\n<p>Vejamos uma arma estilo &#8220;laser&#8221; (entre aspas pois um laser nunca se comportaria assim), criada no  meu Game Engine em homenagem ao jogo R-Type dos anos 80:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-23-Laser-and-Energy-Bolt-Weapons-already-making-damage-on-my-Cpp-Game-Engine-Platformer.mp4\"><\/video><figcaption>2023-12-23 &#8211; As minhas armas de raios j\u00e1 a criar danos no n\u00edvel de testes de plataformas do meu Game Engine em C++\u2026<\/figcaption><\/figure>\n\n\n\n<p>O exemplo acima \u00e9 muito bom, porque podem ver como o raio pode ter todo o tipo de tamanhos, e pode at\u00e9 curvar numa parede por apenas um p\u00edxel, e seria imposs\u00edvel fazer isto com sprites, ou seja, com imagens de raios desenhados e curvados de 1001 maneiras o tempo todo. N\u00e3o s\u00f3 n\u00e3o ficaria bem, como ocuparia mais CPU do que desenh\u00e1-los no ecr\u00e3 directamente.<\/p>\n\n\n\n<p>Outro exemplo perfeito \u00e9 a armam de raios sinusoidais abaixo, onde podem ver que os raios ao embater nas paredes, andam p\u00edxel a p\u00edxel e at\u00e9 se sobrep\u00f5em aumentando de intensidade:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-13-New-Energy-Bolt-Weapons-giant-version-for-my-Cpp-Game-Engine.gif\" alt=\"2023-12-13 - A nova arma de raio triplo com maior tamanho e mais pot\u00eancia...\" class=\"wp-image-3186\" width=\"1138\" height=\"640\"\/><figcaption>2023-12-13 &#8211; A nova arma de raio triplo com maior tamanho e mais pot\u00eancia&#8230;<\/figcaption><\/figure>\n\n\n\n<p>Ou vejam em v\u00eddeo, pois um v\u00eddeo vale por mil imagens:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-13-New-Energy-Bolt-Weapons-like-Dragon-Ball-Piccolos-Special-Beam-Cannon-on-my-Cpp-Game-Engine.mp4\"><\/video><figcaption>2023-12-13 &#8211; Finalizadas as armas de raios de energia para o meu Game Engine em C++\u2026<\/figcaption><\/figure>\n\n\n\n<p>Concluindo:<\/p>\n\n\n\n<p>N\u00e3o s\u00f3 nem sempre compensa usar sprites ou tiles, como por vezes nem poder\u00edamos us\u00e1-los, e \u00e9 bem mais f\u00e1cil identificar o que poder\u00e1 ser uma imagem do que poder\u00e1 ser algo desenhado em tempo real.<\/p>\n\n\n\n<p><strong>E os jogos 3D?<\/strong><\/p>\n\n\n\n<p>Os sprites s\u00e3o bidimensionais, pelo que n\u00e3o faz tanto sentido usar sprites em jogos 3D, onde os objectos 3D s\u00e3o desenhados e constru\u00eddos pela jun\u00e7\u00e3o de muitos pol\u00edgonos em tempo real, da\u00ed necessitarem de placas aceleradoras poderosas para o efeito.<\/p>\n\n\n\n<p>Contudo, h\u00e1 jogos 3D que usam sprites, em especial quando representam imagens bidimensionais no ecr\u00e3 de jogo, mas a larga maioria n\u00e3o os usa.<\/p>\n\n\n\n<p>Jogos 3D s\u00e3o normalmente desenhados em tempo real por placas aceleradoras criadas para o efeito e que aceleram o processo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2021\/06\/2021-06-15-FIM-DO-DIA-3D-Screenshot_20210615_235954-1024x576.png\" alt=\"2021-06-16 - Game Engine j\u00e1 a renderizar em 3D, \u00e0 pata (sem GPU ou OpenGL), em C\/C++...\" class=\"wp-image-1332\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2021\/06\/2021-06-15-FIM-DO-DIA-3D-Screenshot_20210615_235954-1024x576.png?v=1631287710 1024w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2021\/06\/2021-06-15-FIM-DO-DIA-3D-Screenshot_20210615_235954-300x169.png?v=1631287710 300w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2021\/06\/2021-06-15-FIM-DO-DIA-3D-Screenshot_20210615_235954-768x432.png?v=1631287710 768w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2021\/06\/2021-06-15-FIM-DO-DIA-3D-Screenshot_20210615_235954-1536x864.png?v=1631287710 1536w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2021\/06\/2021-06-15-FIM-DO-DIA-3D-Screenshot_20210615_235954.png?v=1631287710 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>2021-06-16 &#8211; Game Engine j\u00e1 a renderizar em 3D, \u00e0 pata (sem GPU ou OpenGL), em C\/C++&#8230;<\/figcaption><\/figure>\n\n\n\n<p>Acima podem ver como o meu Game Engine j\u00e1 renderizava objectos 3D no ecr\u00e3, com texturas e sombras.<\/p>\n\n\n\n<p>No caso da imagem acima, n\u00e3o existiam sprites no ecr\u00e3, tudo era desenhado em tempo real, o que torna os jogos mais lentos, caso n\u00e3o possuamos placas aceleradoras e o jogo esteja preparado para isso.<\/p>\n\n\n\n<p><strong>E em jogos Isom\u00e9tricos?<\/strong><\/p>\n\n\n\n<p>Em jogos isom\u00e9tricos, conhecidos tamb\u00e9m por &#8220;fake 3D&#8221;, usamos tiles isom\u00e9tricos, que s\u00e3o desenhados de forma a encaixarem na perfei\u00e7\u00e3o num plano isom\u00e9trico, o que d\u00e1 um pequeno look de 3D, apesar de n\u00e3o o ser, j\u00e1 que podem identificar que as imagens l\u00e1 ao longe no mapa, est\u00e3o com o mesmo tamanho das que se encontram perto:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/2023-10-07-Several-effects-on-my-Cpp-Game-Engines-Isometric-view.mp4\"><\/video><figcaption>2023-10-07 &#8211; Efeitos mais giros nas vistas isom\u00e9tricas criadas para o meu Game Engine em C++\u2026<\/figcaption><\/figure>\n\n\n\n<p>Estes jogos d\u00e3o um aspecto muito agrad\u00e1vel aos jogos, e s\u00e3o muito \u00fateis por exemplo em jogos de estrat\u00e9gia, jogos em que nos d\u00ea jeito ver todos os objectos do ecr\u00e3 de jogo do mesmo tamanho.<\/p>\n\n\n\n<p><strong>Existem Tiles Isom\u00e9tricos?<\/strong><\/p>\n\n\n\n<p>Sim, claro. Os jogos isom\u00e9tricos n\u00e3o s\u00e3o desenhados em tempo real atrav\u00e9s de pol\u00edgonos em 3D, como nos jogos 3D, eles t\u00eam imagens em 2D, que d\u00e3o um aspecto de &#8220;3D&#8221; a tudo.<\/p>\n\n\n\n<p>Quando criamos um Game Engine com funcionalidades Isom\u00e9tricas, normalmente criamos tiles isom\u00e9tricos muito b\u00e1sicos, como cubos:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-31-An-example-of-Isometric-test-blocks-to-test-when-creating-an-Isometric-Game-Engine.png\" alt=\"2023-12-31 - Exemplo de blocos b\u00e1sicos isom\u00e9tricos que criei quando adicionei funcionalidades isom\u00e9tricas ao meu Game Engine, para criar superf\u00edcies e estruturas de teste...\" class=\"wp-image-3283\" width=\"1136\" height=\"895\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-31-An-example-of-Isometric-test-blocks-to-test-when-creating-an-Isometric-Game-Engine.png?v=1704147620 462w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-31-An-example-of-Isometric-test-blocks-to-test-when-creating-an-Isometric-Game-Engine-300x236.png?v=1704147620 300w\" sizes=\"(max-width: 1136px) 100vw, 1136px\" \/><figcaption>2023-12-31 &#8211; Exemplo de blocos b\u00e1sicos isom\u00e9tricos que criei quando adicionei funcionalidades isom\u00e9tricas ao meu Game Engine, para criar superf\u00edcies e estruturas de teste&#8230;<\/figcaption><\/figure>\n\n\n\n<p>Aten\u00e7\u00e3o que h\u00e1 outros formados do estilo isom\u00e9trico mas com diferentes medidas, como o dim\u00e9trico, entre outros, mas poder\u00e3o investigar mas n\u00e3o far\u00e1 parte da mat\u00e9ria de momento.<\/p>\n\n\n\n<p>Depois de criados n\u00edveis de teste, foi s\u00f3 testar andando dentro desses mundos com a nossa personagem.<\/p>\n\n\n\n<p>Mas a dada altura temos de criar mundos com alguma complexidade.<\/p>\n\n\n\n<p>No meu caso, n\u00e3o fui desenhar tiles do zero, fiz o que muitos fazem, procurei por Isometric Tile Sheets no Google, e escolhi um dos gratuitos que s\u00e3o fornecidos por pessoas que gostam de contribuir para o mundo dos videojogos, e usei:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-31-3rd-Party-Isometric-tile-sheet-that-I-use-on-my-Cpp-Game-Engine.png\" alt=\"2023-12-31 - Uma tile sheet Isom\u00e9trica gratuita que saquei na Internet para testar com o meu Game Engine...\" class=\"wp-image-3284\" width=\"1135\" height=\"931\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-31-3rd-Party-Isometric-tile-sheet-that-I-use-on-my-Cpp-Game-Engine.png?v=1704147615 712w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-31-3rd-Party-Isometric-tile-sheet-that-I-use-on-my-Cpp-Game-Engine-300x246.png?v=1704147615 300w\" sizes=\"(max-width: 1135px) 100vw, 1135px\" \/><figcaption>2023-12-31 &#8211; Uma tile sheet Isom\u00e9trica gratuita que saquei na Internet para testar com o meu Game Engine&#8230;<\/figcaption><\/figure>\n\n\n\n<p>Se virem bem, s\u00e3o os tiles usados no v\u00eddeo que partilhei antes.<\/p>\n\n\n\n<p><strong>Sprites Isom\u00e9tricos:<\/strong><\/p>\n\n\n\n<p>Da mesma maneira que usamos Tiles Isom\u00e9tricos, usamos tamb\u00e9m Sprites Isom\u00e9tricos para os objectos que se movem no ecr\u00e3, como o nosso jogador, ou inimigos.<\/p>\n\n\n\n<p>Abaixo podem ver um dos que saquei gratuitos para testar, sendo a sprite sheet de um logo, nas suas v\u00e1rias posi\u00e7\u00f5es e anima\u00e7\u00f5es, pronto a funcionar num mundo isom\u00e9trico:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"755\" height=\"627\" src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-31-3rd-Party-Isometric-sprite-sheet-that-I-use-on-my-Cpp-Game-Engine.png\" alt=\"2023-12-31 - Uma sprite sheet de um lobo Isom\u00e9trica gratuita que saquei na Internet para testar com o meu Game Engine...\" class=\"wp-image-3285\" srcset=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-31-3rd-Party-Isometric-sprite-sheet-that-I-use-on-my-Cpp-Game-Engine.png?v=1704147563 755w, https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/12\/2023-12-31-3rd-Party-Isometric-sprite-sheet-that-I-use-on-my-Cpp-Game-Engine-300x249.png?v=1704147563 300w\" sizes=\"(max-width: 755px) 100vw, 755px\" \/><figcaption>2023-12-31 &#8211; Uma sprite sheet de um lobo Isom\u00e9trica gratuita que saquei na Internet para testar com o meu Game Engine&#8230;<\/figcaption><\/figure>\n\n\n\n<p><strong>Como distinguir um jogo Isom\u00e9trico de um jogo 3D?<\/strong><\/p>\n\n\n\n<p>A maneira mais simples \u00e9 reparar que as imagens que est\u00e3o mais longe estar\u00e3o sempre do mesmo tamanho das que est\u00e3o mais pr\u00f3ximas, espreitem as imagens no topo e no fundo do mapa abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/2023-10-06-Two-isometric-views-and-waved-distortion-in-my-Isometric-Cpp-Game-Engine.mp4\"><\/video><figcaption>2023-10-06 &#8211; Vistas diferentes Isom\u00e9tricas, e efeitos v\u00e1rios como ondas, no meu Game Engine em C++\u2026<\/figcaption><\/figure>\n\n\n\n<p>Escolhi o exemplo que criei acima mesmo de prop\u00f3sito, pois foi o primeiro mapa que criei na altura para testar, mas vejam como por muito distantes que estejam os tiles, s\u00e3o sempre do mesmo tamanho, da\u00ed serem t\u00e3o \u00fateis em jogos de estrat\u00e9gia.<\/p>\n\n\n\n<p>Outra maneira de ver, \u00e9 a de que estar\u00e3o tamb\u00e9m sempre com o mesmo ponto de vista, porque como n\u00e3o s\u00e3o tiles em 3D, n\u00e3o os podemos rodar, pois ir\u00edamos ver que n\u00e3o teriam nada atr\u00e1s, e por isso abaixo podem-me ver a rodar um mundo isom\u00e9trico e ver que os tiles t\u00eam de estar na mesma posi\u00e7\u00e3o, para que n\u00e3o desapare\u00e7am:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/10\/2023-10-10-Isometric-perspective-rotation-and-resizing-on-my-Cpp-game-engine.mp4\"><\/video><figcaption>2023-10-10 &#8211; Funcionalidade de rota\u00e7\u00e3o do mapa, resizing e inclina\u00e7\u00e3o no estilo Isom\u00e9trico do meu Game Engine em C++\u2026<\/figcaption><\/figure>\n\n\n\n<p>O meu Game Engine tem apenas um n\u00edvel de testes Isom\u00e9trico criado com imagens gratuitas, e estar\u00e1 assim longe de vos mostrar o seu potencial, pelo que deixo aqui um exemplo de como pode ser maravilhoso visualmente um jogo isom\u00e9trico.<\/p>\n\n\n\n<p>Deixo-vos o remake do antigo jogo Isom\u00e9trico Espanhol &#8220;La Abadia del Crimen&#8221;, de 1987 (mas com o remake criado uns 30 anos depois), baseado no filme &#8220;O Nome da Rosa&#8221;:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"La Abadia del Crimen Extensum - Gameplay Full Game\" width=\"800\" height=\"600\" src=\"https:\/\/www.youtube.com\/embed\/ebPbqNnwkJA?start=2836&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><figcaption>O Remake de um dos mais famosos jogos Espanh\u00f3is da Hist\u00f3ria, baseado no filme &#8220;O Nome da Rosa&#8221;<\/figcaption><\/figure>\n\n\n\n<p>Deixo um exemplo em jogos de estrat\u00e9gia, reparem como os bonecos est\u00e3o sempre do mesmo tamanho, quer estejam perto ou longe:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"WarCraft 3 Reforged - Gameplay (PC\/UHD)\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/tHPtlJjiuXU?start=546&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><figcaption>Warcraft 3 Reforged como exemplo das vantagens de vistas isom\u00e9tricas\u2026<\/figcaption><\/figure>\n\n\n\n<p><strong>Conclus\u00e3o:<\/strong><\/p>\n\n\n\n<p>Nesta sec\u00e7\u00e3o, aprendemos a identificar tiles, sejam eles animados ou n\u00e3o, sejam eles de colis\u00e3o ou de fundo, e distingui-los de sprites, bem como ver as diferen\u00e7as entre tiles em jogos 2D e jogos Isom\u00e9tricos (ou dim\u00e9tricos ou outros), e aprender que em jogos 3D n\u00e3o costumam ser usados.<\/p>\n\n\n\n<p>Aprendemos tamb\u00e9m que podemos ir buscar alguns gratuitos \u00e0 Internet para testar, ou usar tiles de jogos antigos como uso para experimentar se for o caso, ou desenh\u00e1-los n\u00f3s mesmos, e que ter\u00e3o de ser bem configurados se queremos que o jogo corra na perfei\u00e7\u00e3o, pois aprendemos que temos de definir qual o conjunto de imagens certo para cada anima\u00e7\u00e3o, quanto tempo cada imagem dever\u00e1 estar no ecr\u00e3 para a anima\u00e7\u00e3o ser perfeita, etc.<\/p>\n\n\n\n<p><strong>V\u00eddeo associado a este post:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Cria\u00e7\u00e3o de VideoJogos \u2013 Parte II \u2013 Tiles Vs. Sprites \u2013 2023-12-31\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/mh5qqX5aFtg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Antes de algu\u00e9m tentar compreender como se criam videojogos, h\u00e1 que saber o que s\u00e3o sprites, e tiles. Com a<\/p>\n","protected":false},"author":1,"featured_media":3313,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[333,198,238,325],"tags":[118,207,8,24,23,283,117,120,158,324,26,25],"class_list":["post-2758","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-curso-de-design-de-videojogos","category-formacao","category-top-formacao","category-tutoriais","tag-desenvolvimento-de-jogos","tag-dev","tag-formacao","tag-game-dev","tag-game-engine","tag-labirintos","tag-motor-de-jogos","tag-programacao","tag-top-game-engine","tag-tutoriais","tag-videogames","tag-videojogos"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Game Development Tutorial - 01 - Sprites &amp; Tiles - Gon\u00e7alo Ferreira<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Game Development Tutorial - 01 - Sprites &amp; Tiles - Gon\u00e7alo Ferreira\" \/>\n<meta property=\"og:description\" content=\"Antes de algu\u00e9m tentar compreender como se criam videojogos, h\u00e1 que saber o que s\u00e3o sprites, e tiles. Com a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/\" \/>\n<meta property=\"og:site_name\" content=\"Gon\u00e7alo Ferreira\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-30T01:03:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-02T03:27:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2024\/01\/2023-12-31-Sprites-Vs-Tiles-Thumbnail.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"gnmf\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"gnmf\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"38 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/\"},\"author\":{\"name\":\"gnmf\",\"@id\":\"https:\/\/www.goncalo.pt\/por\/#\/schema\/person\/28a9f845c4de91a7c067707279b1d8dd\"},\"headline\":\"Game Development Tutorial &#8211; 01 &#8211; Sprites &#038; Tiles\",\"datePublished\":\"2023-10-30T01:03:15+00:00\",\"dateModified\":\"2024-01-02T03:27:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/\"},\"wordCount\":7326,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.goncalo.pt\/por\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2024\/01\/2023-12-31-Sprites-Vs-Tiles-Thumbnail.png\",\"keywords\":[\"Desenvolvimento de Jogos\",\"Dev\",\"Forma\u00e7\u00e3o\",\"Game Dev\",\"Game Engine\",\"Labirintos\",\"Motor de Jogos\",\"Programa\u00e7\u00e3o\",\"Top Game Engine\",\"Tutoriais\",\"VideoGames\",\"VideoJogos\"],\"articleSection\":[\"Curso de Design de VideoJogos\",\"Forma\u00e7\u00e3o\",\"Top Forma\u00e7\u00e3o\",\"Tutoriais\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/\",\"url\":\"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/\",\"name\":\"Game Development Tutorial - 01 - Sprites & Tiles - Gon\u00e7alo Ferreira\",\"isPartOf\":{\"@id\":\"https:\/\/www.goncalo.pt\/por\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2024\/01\/2023-12-31-Sprites-Vs-Tiles-Thumbnail.png\",\"datePublished\":\"2023-10-30T01:03:15+00:00\",\"dateModified\":\"2024-01-02T03:27:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/#primaryimage\",\"url\":\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2024\/01\/2023-12-31-Sprites-Vs-Tiles-Thumbnail.png\",\"contentUrl\":\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2024\/01\/2023-12-31-Sprites-Vs-Tiles-Thumbnail.png\",\"width\":1920,\"height\":1080,\"caption\":\"Cria\u00e7\u00e3o de VideoJogos \u2013 Parte II \u2013 Tiles Vs. Sprites \u2013 2023-12-31\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.goncalo.pt\/por\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Game Development Tutorial &#8211; 01 &#8211; Sprites &#038; Tiles\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.goncalo.pt\/por\/#website\",\"url\":\"https:\/\/www.goncalo.pt\/por\/\",\"name\":\"Gon\u00e7alo Ferreira\",\"description\":\"[Game Engine\/Software\/Simulation\/Trading Systems\/Full Stack] Developer, Musician, Composer, Painter, Writer, IT Trainer, Sys Admin, Ex-Trader, Skater, Strongman, Vegan, Self-Taught Neuro-Divergent Polymath, and 1001 things more. Welcome to my world!\",\"publisher\":{\"@id\":\"https:\/\/www.goncalo.pt\/por\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.goncalo.pt\/por\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.goncalo.pt\/por\/#organization\",\"name\":\"Gon\u00e7alo Ferreira\",\"url\":\"https:\/\/www.goncalo.pt\/por\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.goncalo.pt\/por\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/08\/cropped-Goncalo-Ferreira-Logo-With-Face.png\",\"contentUrl\":\"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/08\/cropped-Goncalo-Ferreira-Logo-With-Face.png\",\"width\":389,\"height\":90,\"caption\":\"Gon\u00e7alo Ferreira\"},\"image\":{\"@id\":\"https:\/\/www.goncalo.pt\/por\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"http:\/\/www.linkedin.com\/in\/GoncaloPT\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.goncalo.pt\/por\/#\/schema\/person\/28a9f845c4de91a7c067707279b1d8dd\",\"name\":\"gnmf\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.goncalo.pt\/por\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/78a295ef7300b60da1d67d4ce84359da?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/78a295ef7300b60da1d67d4ce84359da?s=96&d=mm&r=g\",\"caption\":\"gnmf\"},\"sameAs\":[\"http:\/\/www.goncalo.pt\/por\"],\"url\":\"https:\/\/www.goncalo.pt\/por\/author\/gnmf\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Game Development Tutorial - 01 - Sprites & Tiles - Gon\u00e7alo Ferreira","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/","og_locale":"en_US","og_type":"article","og_title":"Game Development Tutorial - 01 - Sprites & Tiles - Gon\u00e7alo Ferreira","og_description":"Antes de algu\u00e9m tentar compreender como se criam videojogos, h\u00e1 que saber o que s\u00e3o sprites, e tiles. Com a","og_url":"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/","og_site_name":"Gon\u00e7alo Ferreira","article_published_time":"2023-10-30T01:03:15+00:00","article_modified_time":"2024-01-02T03:27:46+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2024\/01\/2023-12-31-Sprites-Vs-Tiles-Thumbnail.png","type":"image\/png"}],"author":"gnmf","twitter_card":"summary_large_image","twitter_misc":{"Written by":"gnmf","Est. reading time":"38 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/#article","isPartOf":{"@id":"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/"},"author":{"name":"gnmf","@id":"https:\/\/www.goncalo.pt\/por\/#\/schema\/person\/28a9f845c4de91a7c067707279b1d8dd"},"headline":"Game Development Tutorial &#8211; 01 &#8211; Sprites &#038; Tiles","datePublished":"2023-10-30T01:03:15+00:00","dateModified":"2024-01-02T03:27:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/"},"wordCount":7326,"commentCount":0,"publisher":{"@id":"https:\/\/www.goncalo.pt\/por\/#organization"},"image":{"@id":"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/#primaryimage"},"thumbnailUrl":"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2024\/01\/2023-12-31-Sprites-Vs-Tiles-Thumbnail.png","keywords":["Desenvolvimento de Jogos","Dev","Forma\u00e7\u00e3o","Game Dev","Game Engine","Labirintos","Motor de Jogos","Programa\u00e7\u00e3o","Top Game Engine","Tutoriais","VideoGames","VideoJogos"],"articleSection":["Curso de Design de VideoJogos","Forma\u00e7\u00e3o","Top Forma\u00e7\u00e3o","Tutoriais"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/","url":"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/","name":"Game Development Tutorial - 01 - Sprites & Tiles - Gon\u00e7alo Ferreira","isPartOf":{"@id":"https:\/\/www.goncalo.pt\/por\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/#primaryimage"},"image":{"@id":"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/#primaryimage"},"thumbnailUrl":"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2024\/01\/2023-12-31-Sprites-Vs-Tiles-Thumbnail.png","datePublished":"2023-10-30T01:03:15+00:00","dateModified":"2024-01-02T03:27:46+00:00","breadcrumb":{"@id":"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/#primaryimage","url":"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2024\/01\/2023-12-31-Sprites-Vs-Tiles-Thumbnail.png","contentUrl":"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2024\/01\/2023-12-31-Sprites-Vs-Tiles-Thumbnail.png","width":1920,"height":1080,"caption":"Cria\u00e7\u00e3o de VideoJogos \u2013 Parte II \u2013 Tiles Vs. Sprites \u2013 2023-12-31"},{"@type":"BreadcrumbList","@id":"https:\/\/www.goncalo.pt\/por\/2023\/10\/30\/game-development-tutorial-01-sprites-tiles\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.goncalo.pt\/por\/"},{"@type":"ListItem","position":2,"name":"Game Development Tutorial &#8211; 01 &#8211; Sprites &#038; Tiles"}]},{"@type":"WebSite","@id":"https:\/\/www.goncalo.pt\/por\/#website","url":"https:\/\/www.goncalo.pt\/por\/","name":"Gon\u00e7alo Ferreira","description":"[Game Engine\/Software\/Simulation\/Trading Systems\/Full Stack] Developer, Musician, Composer, Painter, Writer, IT Trainer, Sys Admin, Ex-Trader, Skater, Strongman, Vegan, Self-Taught Neuro-Divergent Polymath, and 1001 things more. Welcome to my world!","publisher":{"@id":"https:\/\/www.goncalo.pt\/por\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.goncalo.pt\/por\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.goncalo.pt\/por\/#organization","name":"Gon\u00e7alo Ferreira","url":"https:\/\/www.goncalo.pt\/por\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.goncalo.pt\/por\/#\/schema\/logo\/image\/","url":"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/08\/cropped-Goncalo-Ferreira-Logo-With-Face.png","contentUrl":"https:\/\/www.goncalo.pt\/por\/wp-content\/uploads\/2023\/08\/cropped-Goncalo-Ferreira-Logo-With-Face.png","width":389,"height":90,"caption":"Gon\u00e7alo Ferreira"},"image":{"@id":"https:\/\/www.goncalo.pt\/por\/#\/schema\/logo\/image\/"},"sameAs":["http:\/\/www.linkedin.com\/in\/GoncaloPT\/"]},{"@type":"Person","@id":"https:\/\/www.goncalo.pt\/por\/#\/schema\/person\/28a9f845c4de91a7c067707279b1d8dd","name":"gnmf","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.goncalo.pt\/por\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/78a295ef7300b60da1d67d4ce84359da?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/78a295ef7300b60da1d67d4ce84359da?s=96&d=mm&r=g","caption":"gnmf"},"sameAs":["http:\/\/www.goncalo.pt\/por"],"url":"https:\/\/www.goncalo.pt\/por\/author\/gnmf\/"}]}},"_links":{"self":[{"href":"https:\/\/www.goncalo.pt\/por\/wp-json\/wp\/v2\/posts\/2758"}],"collection":[{"href":"https:\/\/www.goncalo.pt\/por\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.goncalo.pt\/por\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.goncalo.pt\/por\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.goncalo.pt\/por\/wp-json\/wp\/v2\/comments?post=2758"}],"version-history":[{"count":23,"href":"https:\/\/www.goncalo.pt\/por\/wp-json\/wp\/v2\/posts\/2758\/revisions"}],"predecessor-version":[{"id":3330,"href":"https:\/\/www.goncalo.pt\/por\/wp-json\/wp\/v2\/posts\/2758\/revisions\/3330"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.goncalo.pt\/por\/wp-json\/wp\/v2\/media\/3313"}],"wp:attachment":[{"href":"https:\/\/www.goncalo.pt\/por\/wp-json\/wp\/v2\/media?parent=2758"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.goncalo.pt\/por\/wp-json\/wp\/v2\/categories?post=2758"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.goncalo.pt\/por\/wp-json\/wp\/v2\/tags?post=2758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}