Publicado por: miwi | julho 15, 2008

[Tutorial] Desenvolvendo para o Nintendo DS – Parte IIb – Saídas Gráficas

Outras partes do tutorial:

Ahá, e vocês achando que eu tinha desistido dessa série, não? ;D Agora que eu *finalmente* estou de férias, espero voltar a desenvolver, especialmente para o DS e para Mobile. Logo, esperem por mais atualizações relacionadas a isso.

Nessa parte do tutorial, nós finalmente iremos aprender como mostrar desenhos coloridos na tela! Então, você finalmente poderá fazer um… um… Pong com gráficos feitos no Paint. Oh yeah.

Com esse conhecimento, nós também poderemos usar fontes diferentes, mas não se esqueça do bom senso! Se você está tendo dificuldade em ler numa determinada fonte, isso é um sinal de que você deveria escolher uma fonte diferente. Sério.

Dito isso, vamos ao tutorial. Na próxima parte, espero criar um pequeno exemplo contendo tudo o que foi aprendido até aqui, mas não confiem muito nos meus planos futuros, já que eu sou uma procrastinadora nata.

Conhecimentos Básicos de Sprites

Vamos ao básico sobre sprites, então. Caso vocês ainda se lembrem, nós já vimos que a PAlib não trabalha diretamente com pixels, mas com tiles, quadradrinhos de 8×8 pixels. Ou seja, nós podemos nos guiar pela imagem abaixo, desta vez roubada do tutorial da PAlib:

Nintendo DS - tela - pixels vs tiles

É importante lembrar disso já que os sprites (isto é, os desenhos de personagens, objetos, etc) serão mostrados na tela através desses tiles, então você deve ter sprites em tamanhos que sejam múltiplos de 8, como 8×8, 16×8, 8×32, até o tamanho de 64×64.

Os tamanhos 8×64 e 16×64 não estão disponíveis, no entanto, talvez pela diferença entre altura e largura. Para ilustrar, aqui está a tabela com os tamanhos possíveis:

DS - tutorial - possible sprites size

Lembre-se disso ao selecionar as imagens que você irá utilizar no seu programa – se ela não for de um desses tamanhos pré-definidos, ela irá aparecer de maneira distorcida na tela. Isso, é claro, pode ser facilmente modificado em um programa qualquer de edição de imagem, mas é algo importante a ser lembrado.

Além disso, você pode escolher dentre três modos de cores para a sua imagem:

  1. 16 cores por tela (1 paleta de 16 cores): esse modo era bastante usado no GBA, mas agora não é mais tão comum, justamente por sua limitação.
  2. 256 cores por tela (16 paletas de 16 cores): é o que é usado mais frequentemente, por mostrar muito mais cores do que o modo anterior e não chegar a usar tanta memória de vídeo quanto o terceiro modo.
  3. 16bit (sem paletas): não é muito usado devido ao consumo excessivo de memória RAM e pouca necessidade de tantas cores.

Caso você esteja confuso a respeito do que são essas paletas, elas são como uma “lista” das cores que são utilizadas na imagem. Podem ser 16 tons de rosa, como podem ser tons de verde, um misto de verde e vermelho… enfim, a escolha é sua.

Bom, esse é o conhecimento básico que você deve ter para começar a lidar com imagens no DS. Agora, se você pensou que bastava colocar tudo numa pasta /img do seu programa e rodar… bom, desculpe-me, mas não funciona assim. É, seria legal se funcionasse assim, mas infelizmente os arquivos precisam ser convertidos antes de serem utilizados.

Convertendo Imagens para O Nintendo DS

A ferramenta para isso você já tem, no entanto. Se você está seguindo o tutorial, já tem a pasta PAlib em seu computador, provavelmente dentro da pasta devKitPro. No caminho PAlib/Tools/PAGfx você irá encontrar o programa necessário para converter as imagens para um formato que o Nintendo DS “compreenda”. É possível fazer essa conversão através do frontend visual (PAGC Frontend.exe) ou através da edição do arquivo PAGfx.ini. Ambas as maneiras são bastante semelhantes e simples, então cabe ao desenvolvedor escolher a maneira pela qual ele se sinta mais confortável.

Ao abrir o editor visual, você irá ver a seguinte tela:

Nintendo DS programming tutorial - PAlib - PAGfx

Caso você veja uma mensagem de erro ao invés dessa tela, você precisa instalar o .NET framework.

Aqui, você pode converter sprites (de maneira simplificada, são os objetos “móveis” do seu programa, que provavelmente possuem algum transparência, já que você não vai ter apenas objetos quadrados), background (cenários) e texturas, como pode ser visto nas três abas do programa.

O funcionamento do programa é bastante simples: adicione os sprites/background/textures que você deseja no primeiro botão, “add files”, faça as devidas configurações:

Em filename e Path estão, respectivamente, o nome do arquivo e o endereço dele. Nisso você não irá mexer, já que ele está apenas informando com qual arquivo você está lidando. As outras duas opções, no entanto, são importantes:

  • Color mode diz respeito ao modo de cor que será utilizado. Nós acabamos de falar sobre ele, lembra? Geralmente será utilizado o modo de 256 cores, mas você pode querer mostrar uma imagem com muitas cores ou com apenas três cores, digamos, então é importante saber onde modificar essa opção.
  • Pallete contém o nome da paleta de cores da imagem. Usualmente o programa irá criar uma paleta com o nome do arquivo, mas você pode criar várias imagens que compartilhem a mesma paleta. Por exemplo, se você fizer várias árvores, você pode fazer com que todas elas tenham a mesma paleta ao criá-las. Se elas usarem as mesmas cores, você pode nomear a paleta delas como “arvore” no programa e apenas uma paleta será criada, por exemplo. Isso é importante devido ao fato do DS poder exibir apenas 16 paletas diferentes em cada tela.

Você também deve definir qual será a cor transparente dos sprites. Isso pode ser feito clicando naquele grande retângulo cor de rosa sob a inscrição “Transparent Color”. Ao fazer isso, ele irá mostrar as opções com as cores mais comuns de transparência: branco, preto, verde e magenta.

Definidas essas opções, você já pode escolher entre salvar essas opções no PAGfx.ini para rodar mais tarde, ou salvar essas opções no PAGfx.ini e já rodar o PAGfx.exe para realizar a conversão. Se você tiver o mesmo problema que eu e ver uma mensagem como essa ao tentar converter:

Nintendo DS - Programming Tutorial - PAGfx error

Não se desespere! Apesar do frontend ter falhado, ainda é possível realizar a conversão. Apenas salve o INI e saia do programa. Então, rode o PAGfx.exe que ele irá realizar a conversão corretamente.

Ao realizar a conversão, será criada a imagem convertida na pasta bin, com um nome como nomedoarquivo_tipodoaquivo(sprite/background/texture).bin, e a sua respectiva paleta. com um nome como nomedoarquivo_Pal.bin. Além disso, serão criados alguns arquivos na mesma pasta do PAGfx:

  • nomedoarquivo.c : contém as informações a respeito da imagem para carregá-las no programa.
  • nomedapaleta.pal.c : contém as informações a respeito da paleta para carregá-las no programa.
  • all_gfx.c e all_gfx.h : contém as informações a respeito de todas as imagens e paletas, para que você precise adcionar apenas esses arquivos ao seu programa e não cada imagem separada. Útil para quando você precisar trabalhar com várias imagens.

Você pode abrir o PAGfx.ini para ver como ele funciona. Ele é bastante simples, portanto você não terá dificuldades se resolver utilizá-lo ao invés do frontend visual:

#TranspColor Magenta

#Sprites :
C:\devkitPro\PAlib\logo.bmp 16colors logo

#Backgrounds :

#Textures :

TranspColor é a cor transparente selecionada e pode ser, como já visto no frontend, White, Black, Green ou Magenta. Em Sprites, cada linha representa uma imagem, onde primeiro vai o caminho do arquivo (que pode ser relativo; você pode colocar algo como teste.png se o PAGfx.exe estiver na mesma pasta desse arquivo), em seguida vai o modo de cores (16colors, 256 colors ou 16bit) e por último vai o nome da paleta (no caso acima, logo). Simples, não?

Pois bem, você já descobriu como converter as imagens, quais cuidados deve ter na hora de criar seus gráficos, como o tamanho das imagens e a cor usada para a transparência, mas e agora, como colocar isso em um programa/jogo? Calma, pequeno gafanhoto, estamos chegando lá!

Mostrando um Sprite na Tela

Agora você pode abrir o exemplo que se encontra em PAlibExamples/Sprites/Basics/CreateSprite, que contém o seguinte código:

#include

// PAGfx Include
#include "gfx/all_gfx.c"
#include "gfx/all_gfx.h"

int main(void){

	PA_Init(); //PAlib inits
	PA_InitVBL();

	PA_LoadSpritePal(0, // Tela
			 0, // Número da Paleta
			 (void*)sprite0_Pal);	// Nome da Paleta

	PA_CreateSprite(0, // Tela
			0, // Número do Sprite
			(void*)vaisseau_Sprite, // Nome do Sprite
			OBJ_SIZE_32X32, // Tamanho do Sprite
			1, // 256 color mode
			0, // Número da Paleta do Sprite
			50, 50); // Coordenadas X e Y na tela

	while(1) // Infinite loops
	{

	}

return 0;
}

Do código acima, é possível observar que os passos para mostrar uma imagem na tela são, na realidade, bastante simples:

  1. Incluir os arquivos .c e .h da imagem (no caso foram inclusos os all_gfx.c e all_gfx.h)
  2. Carregar a paleta de cores na memória de vídeo
  3. Carregar e mostrar a imagem desejada na tela.

Eu não vou comentar cada linha da código aqui, ele já está suficientemente claro e bastante parecido com o que já foi visto na parte anterior do tutorial. Mas, isso apenas mostra a imagem na tela, o que não é exatamente muito emocionante, não é mesmo? Então vamos ver como movimentar o sprite pela tela…

Movimentando Sprites pela Tela

Existem essencialmente dois métodos para movimentar um sprite pela tela: através da stylus ou através de coordenadas fixas.

O código que movimento o sprite que está sob a Stylus é o seguinte:

while(1)
{
	PA_MoveSprite(0); //onde 0 é o número do Sprite que você deseja movimentar
	PA_WaitForVBL();
}

Só isso, chapéuzinho vermelho? É, só isso. A função PA_MoveSprite verifica se a Stylus está sobre o Sprite de número X, onde X é o argumento da função. Se estiver, o sprite fica “atrelado” à Stylus, movimentando-se para a posição na qual se encontra a Stylus. Neat, uh? Você poderia testar essa função juntando-a ao exemplo mais acima que apenas mostra o Sprite na tela.

O outro método consiste na utilização da função PA_SetSpriteXY. Sua sintaxe é a seguinte:

PA_SetSpriteXY(tela, sprite, x, y);

Novamente, acho que ela dispensa maiores explicações, não é mesmo?

Uma função útil para verificar se o jogador está com a stylus sobre um determinado Sprite (por exemplo, para ver se ele tocou alguma opção) é esta:

PA_SpriteTouched(i)

Onde i é o número da Sprite desejada.

E acho que por hoje é só, pessoal. Se vocês quiserem, podem praticar fazendo coisas simples no DS… já dá para fazer um menu bonito acionado pela touch, movimentar um objeto para lá e para cá… eu até gostaria de ter falado mais algumas coisas nessa parte do tutorial, mas eu estou um pouco cansada, so…. fica para a próxima. Mas vocês pelo menos sabem que eu não abandonei o projeto!

Beijos da chapéuzinho vermelho! =*

Anúncios

Responses

  1. Já disse que eu me amarro nos seus tutorais?
    Lendo me parece tudo tão simples… hehehe
    Mas entre eu e a tal programação acho que existe uma incompatibilidade xD
    Problema de BIOS como diria meu pai…

    Eu ainda vou testar isso tudo!! Ou pelo menos tentar xD

  2. Poxa, que simples! 😀
    Sabe dizer se a ROM produzida é compatível com algum emulador, chapéuzinho vermelho MiWi?

  3. Olá Red Hat =p Blz?
    Eu to programando pra DS faz um tempo (6 Meses) e achar um brasileiro programando com afinco é muito gratificante =] Já fiz um programa matemático para ele (Simplex Tableau DS) e agora to fazendo um joguinho muito legal =] Tem como passar seu e-mail ou msn pra trocar idéias de programação? (dmztheone@gmail.com).

    Bjs e Grato!!

  4. Little Red Hat, mnha linda…esse seu tuto tapa muito buraco explicativo de outros q jah li, como programador iniciante; estou aprendendo muito bem com isso.
    OBRIGADOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO! [:P]


Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Categorias

%d blogueiros gostam disto: