Tipo do jogo: Quebra-Cabeças
Objetivo do jogo: Encaixar as peças corretamente antes que o tempo acabe.
Nível do jogo: Fácil
Ferramentas utilizadas: Adobe Flash CS4 e Actionscript 3.0
Iniciando a fase de desenvolvimento:
Primeiramente vamos criar um novo documento no Adobe Flash CS4 usando Actionscript 3.0
Agora vamos conhecer a nova interface do Adobe Flash CS4 e descobrir aonde foram parar tudo.
Esse é o palco(Stage).
Linha de Tempo (timeline)
Painel de Propriedades (properties)
Barra de Ferramentas(tools)
O jogo terá uma interface de 550×400(tamanho padrão).
Primeiramente faremos a tela de carregando e um botão “iniciar o jogo”. O nosso objetivo será já usar o quebra-cabeças montado na “Tela Carregando”.
Na seqüência será preciso criar as peças do jogo, para isso usaremos as ferramentas: Rectangle localizada na barra de ferramentas.
Com a ferramenta Retângulo (Rectangle Tool) desenhe um quadrado, sem contorno com as dimensões de 60×60 (largura x altura), no flash representado por W e H (Width e Height), a cor nesse momento é irrelevante.
Agora duplique o retângulo, para duplicá-lo:
Menu Edit, Duplicate
Menu Edit, Copy e em seguida Menu Edit, Paste
Selecionar e usar o atalho CTRL+D
Logo depois altere a cor do quadrado para outra cor qualquer.
Então o encaixe do lado do primeiro quadrado:
repita o processo até ter uma fileira de quatro quadrados como a imagem abaixo:
E depois faça o mesmo na vertical, ficando com um total de dezesseis quadrados:
É extremamente importante que os quadrados não choquem cores, por isso optei por colocar cada um de uma cor.
Agora vamos criar os encaixes, para isso usaremos a ferramenta Oval (Oval Tool) localizada na barra de ferramentas.
Com a ferramenta Oval (Oval Tool), desenhe um circulo de 25×25(largura x altura):
E então a duplique, ficando com dois círculos iguais.
Selecione o circulo duplicado e então clique no quadro Fill Color (cor de preenchimento, “balde de tinta”).
Você perceberá que seu cursor irá mudar para o Eyedropper Tool (ferramenta conta gotas) e então selecione a cor do primeiro quadro que desenhou, duplique novamente o circulo e então encaixe os dois círculos no primeiro quadrado.
Ao fazer isso você cria a primeira peça do quebra-cabeça e já faz as marcas de encaixe nos outros dois quadrados envolvidos.
Isso acontece porque no flash quando você trabalha com shapes (vetores), ele automaticamente soma um objeto ao outro sem necessidade de soldar, mesclar ou algo do tipo.
Bom, agora basta ir duplicando o circulo e encaixando da forma que você quer que fique o quebra-cabeça como na imagem abaixo.
Agora vamos dar uma imagem para o nosso quebra-cabeça e um contorno para as peças. Primeiro vamos importar uma imagem, a imagem não precisa ter um tamanho especifico, mas para ter um melhor resultado, eu recomendo que a imagem tenha as dimensões de 240×240pixels(tamanho total do quebra-cabeça).
Como não vamos precisar da imagem no palco, vamos importar ela somente para a Biblioteca, para importar uma imagem vá ao Menu File, Import, Import to Library.
Após importar a imagem, selecione todas as peças do quebra-cabeça e duplique uma cópia.
Com as peças ainda selecionadas, vá ao Fill Color (Cor de preenchimento, “balde de tinta”) e mude para uma cor de preenchimento sólido. Em seguida vá ao Menu Windows, Color(Shift + F9) para abrir a paleta Color e com o quadrado selecionado selecione Bitmap e veja o resultado.
Fazendo isso, estamos adicionando preenchimento em um vetor sem acrescentar maior peso ao arquivo final, pois não estamos usando a imagem Bitmap.
Selecione a imagem e clique sobre ela com o botão direto do mouse e escolha a opção: Distribute to Layers, dessa maneira colocaremos a imagem em uma nova layer.
Selecione a imagem novamente e vou convertê-la em um símbolo do tipo gráfico (Graphic), para converter em símbolo do tipo graphic:
Menu Modify, Convert to Simbol… (tecla de atalho F8)
Name: Vou colocar img_fundo
Type: Graphic
Registration: Canto superior esquerdo (que é o ponto inicial da minha imagem, zero no eixo X e zero no eixo Y).
Depois de convertido em gráfico, vou ao painel de propriedades (Properties) e em Color Effect, Style e escolho: Alpha e Alpha amount preencho com o valor de 40 %.
Feito isso, vou colocar contorno em todas as peças. Agora vem a pergunta: “Porque já não ter feito os quadrados com contorno?” Simples: Se eu o fizesse, eu teria mais trabalho, pois ao adicionar o circulo, ele não teria o contorno e se eu adicionasse o circulo com o contorno, mesmo que da mesma cor do quadrado, eu teria o trabalho de tirar parte do contorno, ou seja, eu teria um trabalho a mais.
Para adicionar contorno as peças, selecione a ferramenta Ink Bottle Tool (Frasco de Tinta).
Vou selecionar uma cor que não usei em nenhuma das peças e começarei a clicar em cada uma das peças até a última peça.
Após ter colocado contorno em todas as peças eu vou recortar(Edit, cut ou CTRL + X) o preenchimento, deixando somente o contorno das peças e na seqüência irei renomear a Layer 1 para contorno das peças.
Depois vou criar uma nova Layer(Camada), para criar uma nova camada, clique sobre o ícone: New Layer, localizado no canto inferior esquerdo do painel Timeline e vou renomear como: Peças.
Com a nova layer selecionada vou colar o preenchimento das peças: Edit Paste ou CTRL + V.
E na seguencia irei posicionar os objetos como na imagem abaixo. Como as peças eu ainda não irei usar (lembrando que essa tela ainda é a “Tela Carregando”), vou posicioná-los para fora do palco.
Clico na Layer img_fundo e com a Text Tool (ferramenta de texto) vou escrever a palavra: Carregando…
Configurei o texto com as seguintes especificações:
Static Text
Family: _typewriter
Size: 25 pt
Format: Align Left
Assim finalizo a parte de Design do Jogo: Quebra-Cabeças, no próximo post termino a parte de design e estarei colocando a parte de Programação em Actionscript 3.0.
