Criando um jogo Adobe Flash + Actionscript 3.0 (Prog) Part II

O palco deve estar assim agora somente com os contorno e as peças apenas coloridas na parte de fora do palco.

Agora vou posicionar todas as peças sobre os contornos como a imagem abaixo:

Isso será necessário para criarmos uma “rota de colisão”. Como a camada das peças está acima do contorno não será possível mais ver os contornos, isso não será um problema. Em seguida irei selecionar todas as peças e criar uma nova Camada abaixo da Cama Peças, chamando de Peças_invisiveis.

Logo depois crio um novo Keyframe no quadro 2 da camada Peças_invisiveis, pois não é necessário que coloquemos conteúdo no quadro 1. Para inserir um novo quadro, clico sobre o quadro 2 da camada Peças_invisiveis e:

Menu Insert, Timeline Keyframe ou uso o atalho F6.

Na seqüência seleciono todas as peças e copio:
Menu Edit, Copy ou o atalho CTRL + C.

Depois seleciono a layer: Peças_invisiveis (isso é necessário, pois as peças estão em outra layer e ao selecioná-las, ele perde a seleção da layer Peças_invisiveis) e colo as peças no mesmo lugar:
Menu Edit, Paste in Place ou CTRL + SHIFT + V.

Isso será necessário pelo seguinte motivo:

Lógica = Quando a Peça final sobrepuser à peça invisível, o código entenderá que aquela peça foi encaixada sobre a outra.

Bom agora vou transformar todas as peças da camada Peças_invisiveis em Symbol do tipo MovieClip, como também tenho a camada das Peças que são identifica, preciso fazer com que a camada das Peças não me atrapalhe e para isso eu irei torna-a invisível, para fazer isso basta clicar na coluna que tem um Olho da camada Peças. Irá aparecer um X, indicando que a camada Peças está oculta.

E depois vou convertendo peça por peça da camada Peças_invisiveis em Sumbol do tipo MovieClip, para converter(com a peça selecionada):

Menu Modify, Convert to Symbol ou uso o atalho F8.

Vou fazer isso em todas as peças, começando da esquerda para direita e de cima para baixo, com os seguintes nomes:

Name: espaco1, espaco2, espaco3, espaco4 e assim por diante
Registration: Canto superior esquerdo.

Aproveito também para colocar os menos nomes na Instance name(espaco1, espaco2, espaco3, espaco4…) de cada peça e mudar o Alpha para 0% em Color Effect.

Ao terminar as 16 peças do quebra-cabeça, vou agora devolver visibilidade a camada Peças, já que o trabalho foi finalizado em Peças_invisiveis. Para devolver visibilidade, basta clicar no X que apareceu na coluna do olho para devolver visibilidade a camada Peças.

Agora eu vou fazer um trabalho similar com as Peças da camada Peças, com alguns diferenciais, seleciono e irei converter em símbolo do tipo MovieClip, para converter:

Menu Modify, Convert to Symbol ou uso o atalho F8
Name: peca1
Registration: canto superior esquerdo

Também aproveito para colocar o mesmo nome na Instance Name de cada peça.

O diferencial além do nome será colocar a imagem correspondente aquela peça usando mascara.

Para fazer esse trabalho agora, após converter a peça em MovieClip e adicionar a instance name, eu irei editar esse símbolo MovieClip, para editar um símbolo, seleciono a peça já convertida:

Menu Edit, Edit Symbol ou uso o atalho CTRL + E
Essa opção faz com que eu edite o símbolo em uma nova área sem ver as outras peças em volta. Posso editar mais de um símbolo por vez (basta selecionar dois ou mais símbolos).

Menu Edit, Edit Select
O mesmo processo que o Edit Symbol, porém só é possível editar um símbolo por vez.
Menu Edit, Edit in Place
O mesmo processo do Edit Select, porém ele mantém os outros objetos em volta a vista com opacidade.
Essas mesmas opções também se encontram clicando com o botão direito do mouse sobre o símbolo, com um diferencial:
Edit = Edit Select
Edit in Place = Edit in Place do menu Edit
Edit in new Windows = Abre o símbolo em uma nova janela para editar

Para editar um símbolo também posso selecionar ao lado do Zoom(caixa que tem padrão 100% localizado no canto superior direito do palco) tem um botão Edit Symbol(são três figuras, um meio triangulo, um quadrado e um circulo) que tem a mesma propriedade do Edit Symbol do menu Edit. E por último e não menos importante também pode dar um duplo clique sobre o símbolo que ele aciona o: Edit in place.

Ao se editar um símbolo do tipo MovieClip, ele abre uma nova Timeline e também é possível saber que simbolo estou editando vendo na barra de navegação.

Vou criar uma nova layer, ficando com duas layers:

Depois será necessário posicionar a Layer 1 sobre a Layer 2, para fazer isso, basta clicar na Layer 1 e arrastá-la para cima da Layer 2

Agora irei renomear a Layer 1 para Mascara e a Layer 2 para Img_mascarada.

Seleciono a Camada Img_mascarada e pego o gráfico: img_fundo na Library(Biblioteca).

e arrasto até o palco, e encaixo a peça corretamente como abaixo(eu até poderia colocar no eixo x = 0 e eixo y = 0, porém isso só irá funcionar nessa primeira peça, nas demais não irá dar certo):

E para finalizar, irei até a camada Mascara e converto-a em Mask. Para converter em mascara, clico com o botão direito sobre a camada Mascara e escolho Mask.

Feito isso eu consigo o efeito que precisava que essa peça fique com apenas uma parte da imagem.

Bem agora eu volto para a Scene 1 e repito o processo com todas as peças.

Vou repetindo os processos com todas as peças até conseguir esse resultado final:

Para finalizarmos, crio uma nova camada acima da camada de Peças e chamo ela de Informações:

Em seguida adiciono um novo Keyframe no quadro 2 da Layer Informações, para criar um novo Keyframe, clico no quadro 2 da layer Informações:

Menu Insert, Timeline Keyframe ou uso o atalho F6.

Por ultimo, seleciono a ferramenta de texto(no quadro 2 da camada Informações).

Com os seguintes parâmetros:

Static Text

Character
Family: _typewriter
Size: 25.0pt
Cor: Preta (#000000)
Essas são uma sugestão de parâmetros para o texto, pode ser usado quaisquer outros tipos de fonte, cor e tamanho. Escrevo as palavras Tempo: e Pontos: e as posiciono acima das peças.

Ainda com a ferramenta de texto, entretanto dessa vez utilizarei do tipo Dynamic, criarei duas caixas de texto.

Por ultimo adiciono e posiciono uma caixa de texto a frente de Tempo: e a outro a frente de Pontos: e adiciono uma instance name em cada uma das caixas referente aos seus respectivos itens:

Instance name tempo para a caixa de texto que está na frente do texto Tempo:

e Instance name pontos para a caixa de texto que está na frente do texto Pontos:

Assim concluo a parte III do jogo Quebra-Cabeças, no próximo e último post, falarei mais sobre Actionscript e finalizarei o jogo.

Criando um jogo Adobe Flash + Actionscript 3.0 (Prog) Part II

Complementando o post anterior, esse post será mais voltado à parte da programação Actionscript 3.0, embora ainda tenha alguns itens de design para terminar o jogo de quebra-cabeças.

A primeira coisa a fazer é criar uma nova Layer e mudar o nome para Actionscript, lembrando que essa layer deve ficar acima de todas as demais Layers, esse processo é necessário, pois o Adobe Flash carrega as layer de baixo para cima, ou seja, para que ele carregue os objetos primeiros e somente depois acione as ações sobre eles.

Após criar a nova layer, seleciono o quadro um da layer actionscript e abro o painel de Actions:
Menu Window, Action (Atalho F9).

Vou criar agora o “Carregando” do jogo. Para isso vou criar duas novas camadas:

Uma irá chamar Mascara e a outra de Img_mascarada, ambas devem ficar acima da img_fundo apenas.
Em seguida vou selecionar a camada Img_mascarada e colar a imagem nas mesmas posições(x e y)da imagem fundo. Para copiá-la nas mesmas posições:
Menu Edit, Paste in Place ou use o atalho CTRL + Shift + V.


A imagem vai parecer que ganhou mais cor, mas na verdade é porque temos duas imagens uma sobrepondo à outra. Agora sim é que vou fazer com que a imagem da Img_mascarada vai ganhar literalmente cor, mudando o Alpha de 40% para 100%.
No painel de Propriedades em Color Effect mudo o alpha de 40% para 100%.

Depois disso vou selecionar a camada Mascara e criar um quadrado de 240×240 (tamanho do nosso quebra-cabeça e consequentemente da nossa imagem) sem contorno (a cor do preenchimento é irrelevante nesse momento, então pode ser selecionado qualquer cor) e irei posicionar exatamente sobre a imagem.

Agora vou selecionar o quadrado que acabei de criar e converte-lo em simbolo do tipo MovieClip, para converter seleciono e:
Menu Modify, Convert to Symbol ou use o atalho F8 (com o quadrado selecionado).

Name: Mascara_quadrado
Type: MovieClip
Registration: Centro inferior
Obs: Para o efeito funcionar corretamente é extremamente importante colocar o registration exatamente igual ao da foto.

Após converter, com o quadrado ainda selecionado, vou no painel de Propriedades(Properties) e dou o nome na Instance Name de barra.

Agora por último converto a Layer (camada) Mascara em Mask (mascara). Para converter em mascara, clico sobre a Layer (camada) Mascara com o botão direito do mouse e seleciono Mask.

Bom, agora é hora de voltar as Actions e fazer o “Carregando” funcionar. Para isso seleciono novamente a Layer Actionscript e abro novamente o painel de Action(Menu Window, Action ou F9) e adiciono as seguintes linhas de código:

addEventListener(Event.ENTER_FRAME, carregando);
function carregando(Obj:Event) {
var total = stage.loaderInfo.bytesTotal;
var carregado = stage.loaderInfo.bytesLoaded;
var porcentagem = Math.round(carregado*100/total);
barra.scaleY = porcentagem/100;

if (carregado >= total) {
gotoAndStop(2);
removeEventListener(Event.ENTER_FRAME, carregando);
}
}

Agora vamos entender o código:
A partir do Actionscript 3.0, você deve adicionar toda função em um ouvinte de evento:

addEventListener(Event.ENTER_FRAME, carregando);
Em seguida eu crio a função carregando e adiciono um parâmetro do tipo Event(Obj:Event):
function carregando(Obj:Event) {
Aqui eu cri uma variável e chamo de total e dentro de total eu gravo as informações da quantidade total de bytes que tem o arquivo final, no caso o SWF.
var total = stage.loaderInfo.bytesTotal;
Em seguida crio uma outra variável e gravo dentro dele a quantidade de bytes que já foram descarregados ou seja, já baixaram e gravaram nos temporários da máquina do usuário.
var carregado = stage.loaderInfo.bytesLoaded;
Por último crio uma terceira variável chamada de porcentagem para fazer o calculo em porcentagem da quantidade já descarregada. A função Math.round arredonda o número para que eu não tenha porcentagem fracionada, exemplo: 10,3% passa a ser 10%.
var porcentagem = Math.round(carregado*100/total);
Depois eu pego essa informação e divido por 100 e adiciono a escala Y do quadrado desenhado, fazendo com que ela vá aumentando conforme a quantidade de itens já descarregados, pois a idéia será fazer as peças ganharem cor com a mascara no exemplo.
barra.scaleY = porcentagem/100;
Aqui faço uma condição, onde verifico se a quantidade já descarregada é igual ou maior do que o total, se for, ele irá para o quadro 2 do nosso jogo e irá remover o ouvinte de evento, descarregando assim a função da memória e liberando mais espaço.
if (carregado >= total) {
gotoAndStop(2);
removeEventListener(Event.ENTER_FRAME, carregando);
}
}
Fecho as duas chaves e está pronto o “Carregando” do jogo. Agora vou criar o quadro dois no jogo para eventualmente fazer a tela de jogo, pontuação e colocar as peças com as devidas “partes” do quebra-cabeça. Primeiro fecho a tela de actions(Menu Windows, Action ou atalho F9) e depois clico sobre a layer action e para criar um novo quadro:
Menu Insert, Timeline, Keyframe ou uso o atalho F6.

Depois vou clicar na camada da Action e no quadro 2, abro o painel de action(Menu Window, Action ou F9) e adiciono a seguinte Action:

Para que a cena fique parada no quadro 2.

Como não precisamos das peças no quadro 1, vou selecionar o quadro 1 e arrastá-lo para o quadro 2. Para isso eu seleciono o quadro 1, clico novamente, mantenho o botão do mouse apertado e arrasto para o quadro 2.

As layers: Mascara, Img_mascarada e img_fundo não serão necessárias no quadro 2, então irei selecioná-las e removerei os quadro dois, para selecionar o quadro 2 das 3 layers, seguro o SHIFT e vou clicando nos quadros 2 das três layers.

Depois de selecionado, clico com o botão direito sobre qualquer uma das três layer e escolho Remove Frames (remover quadros).

Assim concluo a parte II do Jogo Quebra-Cabeças, no próximo posto devemos voltar mais a parte de design para estruturar as peças, demarcar as partes onde irão a pontuação, o tempo para montar e os outros itens.