05 - Tileset e cenários

Assim como em muitos dos games de 8 e 16 Bit, o ARGS monta os cenários com tiles: pequenos blocos de 16 X 16 pixels. Por isto você deve desenhar seu cenário obedecendo este "tabuleiro" de 16X16 pixels. Desenhe a mão, em pixel art no computador, ou da forma que desejar, mas sempre encaixe o arquivo final no tabuleiro de 16X16 pixels.

Utilize o programa que for mais confortável para você, seja o Gimp, pait.net, ou qualque outro. Existem programas de desenho próprios para se criar tilesets, pesquise a respeito. Mas se tiver pouco tempo, use aquele que você tem mais familiaridade.

Se o programa que você usa tiver opção de "gradear" a tela em quadrados de 16X16 pixels, use essa função. Se não, desenhe um "tabuleiro de xadrez" com quadrados de 16X16 pixels no fundo para trabalhar em cima. Algo como o exemplo abaixo (pode baixar este PNG e usar também):

Só para constar, eu uso Paint Shop Pro 5, do Windows 98. Isso mesmo, um programa antigo, mas estou acostumado com os atalhos de teclado dele e com a simplicidade também. M basta que nele posso trabalhar com layers (multiplas camadas) na imagem e salvar em PNG.

Importante: a resolução de tela dos games no ARGS é de 256X256 pixels. É uma resolução "quadrada" bem comum nos arcades dos ano 80. Tenha também isto em mente.

Eu fiz um "tileset", ou um mapa de tiles, para este game de exemplo. Novamente, como os demais arquivos de imagem que importamos para o ARGS, este tem de ser em PNG.

Dica1: você não precisa repetir tiles. Para economia de espaços, pode desenhar um único quadrado, depois você vai repetir esse quadrado no cenário lá no ARGS. Compare na imagem acima o primeiro cenário, fiz ele em duas versões: pré-montado e em "quebra cabeças".

Dica2: Por outro lado, como espaço em bytes não é um problema hoje em dia, você pode ter porções de cenário já montadas, como seções ou telas, o que vai agilizar seu trabalho de montagem no ARGS.

Dica3: deixe sempre espaços (tiles) vazios no seu tileset. Você pode querer adicionar algum detalhe que esqueceu ou quer acrescentar no cenário.

Particularmente eu prefiro fazer meus tilesets no estilo "quebra-cabeça", sem repetir tiles. Não é por preciosismo ou nostalgia (um pouco, vai), mas por que mais a frente no processo teremos de criar o level design, e não gosto de ficar preso a segmentos pré-montados de cenário. Mas isso vai do gosto e forma de criação de cada um.

Com seu tileset em mãos, o negócio agora é trabalhar no ARGS. Abra seu projeto, vá para a tela 3, clique em "Tiles" e em "load new tiles" e carregue seu novo tileset

Agora você já tem um tileset para trabalhar no game. Navegue pelo tileset com as teclas A S D W (esquerda, baixo, direita, cima, respectivamente). Clique com o botão esquerdo do mouse para selecionar um tile, ou selecione uma área com vários tiles

Vamos para a tela 2. Clique em "stages", e em "new game stage 50X1 H". Já explico: O Args tem 3 tipos de estágios jogáveis para games de plataforma:

a) 1X50 V - é um cenário vertical, de 1 tela por 50 no máximo (a tela de 256X256 pixels.) O cenário pode ser apenas em uma direção, ou em ambas (só subir, só descer, ou livre para cima ou para baixo). É a diferença entre games como Alex Kidd in Miracle World, onde a tela só avança para frente, travando e não retornando ao segmento anterior do cenário, ou como em outros games de plataformas, onde você pode retornar ao segmento do cenário que já havia saído da tela.

b) Mapa de 16X8 - Como diz o nome, é um cenário que se move tanto na horizontal quanto na vertical, e pode ter o tamanho de 16 telas de largura por 8 telas de altura. É um cenário como a primeira fase do game Super mario 3 de Nes, ou muitos outros.

c) 50X1 h - é o cenário na horizontal, como no primeiro Super Mario. Novamente ele pode ser livre ou ter apenas um sentido de avanço.

Bom criado nossa primeira fase, que será horizontal, é preciso fazer uma pausa para planejamento (caso ainda não tenha feito). O ARGS é muito prático, e você pode, na verdade, partir para o "free style" e criar os cenários na tentativa e erro, modificando e testando.

Particularmente, aconselho você pegar uma folha de papel, se puder já quadriculada, e fazer rascunhos de seu cenário. Não vou entrar em detalhes sobre level design, até por que ainda não fizemos os inimigos do game, mas preste atenção nos buracos sem fundo, plataformas, vá colocando um desafio de cada vez.

Estágio planejado: um primeiro estágio curto para introduzir as regras básicas do jogo, dos controles, ao jogador (é a fase tutorial, mas não precisa conter textos). Agora voltamos para o ARGS

Dica: vá colocando os desafios aos poucos, por exemplo: primeiro o jogador pula um buraco, depois enfrenta um inimigo parado, depois sim você pode colocar o inimigo ao lado do buraco, e assim por diante. Um desafio ou obstáculo por vez, e depois você vai complexificando e criando combinações destes desafios e obstáculos.

Agora estamos com nosso estágio horizontal ainda vazio. Configure as propriedades:

Stage Properties

- H dir: é a direção em que acontece o scroll (a rolagem) do cenário, se da esquerda para a direita, o inverso, ou livre em ambos os sentidos.

- Tune: é a música da fase, por enquanto deixamos em branco

- Ready on start: se antes da fase começar aparece a frse "Ready", para preparar o jogador para a ação (comum em games como Ghost and Goblins, Megaman, etc)

HERO

- start: aqui você escolhe se tem um herói específico para esta fase ou se usa o mesmo das demais fases (em determinada fase você quer um personagem diferente, ou com um upgrade diferente, ou o ator que terminou a fase anterior, isso é possível)

- death: de depois de morrer que ator herói que recomeça fase (pode ser o ator do herói sem nenhum upgrade, por exemplo)

- countdwn: se há limite de tempo para terminar a fase, quantos segundos.

Ending: se há animação quando o aotr hero termina a fase, mais pra frente faremos uma hero automatico para isso

Background: O ARGS tem dois planos de cenário: o plano dos tiles, que serve para fazer o cenário do chão e o fundo imediatamente atrás dos sprites, e uma camada de background ou cenário de fundo (vamos chamar de BG daqui pra frente). O primeiro cenário que faremos não vai ter BG, vamos manter as cosias simples por enquanto.

- color: é a cor de fundo, você define ela com o espectro de RGB (vermelho, verde, azul) como em qualquer programa gráfico nos computadores.

- Tileset: aqui que você define um arquivo PNG para ser o BG do estágio. Vamos deixar em branco por enquanto.

Ok, agora mude para a tela 3, selecione o tile que deseja, volte para a tela 2, e vá colando o tile no cenário. Novamente, com as telcas A S D W você vai navegando pelo cenário na tela 2.

Já temos um pedaço de cenário desenhado, mas ainda falta definir o que é sólido, plataforma, espinho, etc. Duas teclas importantes: as teclas "Q" e "E" servem para udar o cursor de edição do cenário, na sequência: tiles, wall (paredes), atores, textos, e sons. Tecle "E" e mude para o ícone "Wall".

Com o icone "Wall" você tem de usar as teclas "Z" e "X" para alternar entre os tipos de paredes (sólida, plataforma transponível, parede, e outros a ver mais pra frente). Agora com o botão esquerdo do mouse, coloque parede sólida no chão e nas paredes como na imagem abaixo:

Tecle "E" novamente e mude o cursor para "Actors", e novamente com as teclas "Z" e "X" navegue entre os atores, encontre nosso ator controlável (hero) e posicione ele em algum lugar da fase com o botão esquerdo do mouse.

Já podemos testar o pedaço de cenário que nós montamos:

Importante: na tela de testes você visualiza e esconde as caixas de colisão com a tecla TAB

Importante 2: Para deletar um tile que você tenha colado no lugar errado do esta´gio, basta segurar a tecla "shift" do teclado e clicar no tile com o botão direito do mouse.

Importante 3, limites do estágio: O ARGS define automaticamente o limite da fase de acordo com os tiles que você posicionou no cenário. A tela irá até o ponto onde você colocar tiels sem interrupção. Veja na imagem que eu coloquei uns tiles roxos na parte de cima da fase. A tela vai se mover até aquele ponto, e vai travar ali na direita.

               Na imagem acima, o scroll (movimento horizontal da tela) vai travar ali naquele ponto,

               dois tiles à direita do limite entre a tela 2 com a 3.

Um erro comum é você fazer um cenário, fazer um buraco no meio da fase, e continuar o cenário. Depois quando vai testar percebe que o cenário trava antes do buraco. Se isto acontecer é porque você deixou aquele ponto do cenário sem nenhum tile, e o programa entende que ali acaba a fase. Preencha os buracos do cenário com algum tile, nem que seja um tile transparente (com a cor RGB 80 80 80).

Dica: Eu senti falta de alguns tiles ao montar o cenário. Mesmo depois do arquivo inserido no ARGS você pode modificar ele. Primeiro feche seu projeto e o programa ARGS. Vá na pasta do projeto do seu game, e entre no subdiretório "tiles". Lá vai estar seu arquivo png com uma numeração na frente. Abra ele no seu editor preferido e adicione os tiles que precisa (por isso é bom deixar espaços em branco). Abra novamente o ARGS, seu projeto, que ele vai atualizar o tileset com suas modificações.

Vamos terminar o estágio, monte tudo até onde planejou, vá testando e corrigindo a altura e distância das plataformas. No limite final do cenário, você vai colocar um tipo de parede especial chamado "END", que quando o ator do jogador tocar vai encerrar a fase. na tela de edição do estágio (2) você vai mudar o tipo de ícone do mouse com as teclas Q e E, e depois de selecionar o tipo WALL vai mudar com Z e X até achar uma "bandeirinha quadriculada" em branco e preto, que é a caixa de colisão pra terminar a fase. Coloque ela como na imagem abaixo:

Quando nosso ator HERO tocar na "linha de chegada" a fase vai terminar e o ARGS vai automaticamente carregar a fase que estiver na sequência. Não havendo mais estágios na sequência, o ARGS vai mostrar a mensagem de "Game Over" para o jogador e voltar para a tela título do game.

E por enquanto é isto. No próximo tutorial vamos criar um inimigo para nosso game.

Se quiser baixe o projeto ARGS do tutorial até aqui: http://www.bwass.org/bucket/DevWill005.zip

COMPLEMENTO - BACKGROUND (BG)

Agora para a segunda fase do meu game de exemplo quero adicionar um pano de fundo, o Background. O ARGS tem opção de carregar apenas uma camada de BG, que é um arquivo PNG completo (você não monta o BG tile por tile como faz com o foreground)

Background 1:

Então vamos lá, primeiro você precisa ter seu arquivo de imagem PNG do background pronto. Então você vai na tela 3 do ARGS, e carrega um novo tileset (seu arquivo PNG).

Agora, na tela 2, meu estágio 2.1 eu montei e deixei algumas áreas transparentes, não preenchidas (esses quadradinhos brancos). Ali na parte mais em baixo do "STAGE PROPERTIES" você tem o BACKGROUND.

 No campo TILESET você vai escolher o tile set correspondente ao seu background (no meu caso é uma imagem azul com umas nuvens na parte superior)

DICA: lembre-se que a tela tem 256 X 256 pixels, então se eu quero fazer um fundo para um cenário horizontal, por exemplo, eu posso ter meu background com esse tamanho, ou em 512 X 256, e assim por diante, até um limite (não recordo, algo perto de 1024 X 1024).


Você deve definir algumas coisas além do arquivo PNG. São elas:
MODE:
    0 FIXED - a imagem fica fixa no fundo
    1 BOXED - a imagem fica trancada e irá se mover devagar de acordo com o tamanho do cenário
    2 MOVE - o background vai se mover
    3 MOSAIC: para ele repetir infinitamente.
SPEED: a velocidade que o BG vai se mover
DIRECTION: a direção que vai de 0 a 16, sendo 0 = a direita, 4 = cima, 8 = a esquerda, e 12 = a baixo.

Eu defini meu Background como do tipo "1 BOXED", pra ele passar a sensação de que se move mais devagar em um plano atrás (o famoso parallax).

Background 2:
 
É possível usar a camada de BG para fazer efeitos de animação de agua, lava, entre outros. A fase 2.2 vai ser em um cenário de cachoeiras, então eu preparei um BG de 256X256 pixels com os gráficos da agua caindo, e montei os gráficos de meu cenário deixando vazios os tiles em que eu quero que apareça a água.

Assim como no exemplo anterior, coloquei nas propriedades do cenário meu BG com as seguintes características:

MODE: 3 Mosaic (pra ele ficar repetindo infinitamente)
SPEED: 0.60
DIRECTTION: 12 (para ele se mover para baixo).

Pronto, gora é só testar, já tenho meu cenário com o efeito de cachoeira.