Bem amigos,

decidi fazer esse 2º tutorial tendo como base um jogo simples meu publicado na loja Ovi, o Super Genius. O jogo consiste em memorizar a sequencia em que as luzes acendem. A cada nova rodada uma nova luz acende e o jogador deve refazer toda a sequencia corretamente.

O objetivo desse tutorial é tornar um desenvolvedor flash convencional capaz de produzir aplicações ou jogos para celulares Nokia da série S60 e vários Symbian^3. Em outra oportunidade irei falar de construção de aplicações para dispositivos móveis usando AIR para android, iphone e blackberry.

Projeto

Existem várias formas de se criar o projeto, uma delas é utilizando o Adobe Device Central, outra é usando o próprio Flash e por ai vai. Vamos criar usando o Flash e setar corretamente as suas configurações. Clique abaixo para baixar o fla do projeto gerado ao final desse tutorial:

Aplicações em Flash Lite - Parte 2 Exemplo
Baixado 110 vezes
Tamanho 405.95 kB

- Crie um novo documento do flash, pra facilitar, escolha Action Script 2.0.

- No menu “Arquivo”  -> “Configurações de publicação” vc vai visualizar as opções na aba flash, em player escolha Flash Lite 3.0 (Action script 2.0).

- Nosso arquivo criado vem com o stage em 550 x 400 px. Vá nas propriedades do stage e mude para 360 x 640 px, que é a resolução padrão dos devices da série S60.

- Clique no 1º frame da timeline e adicione o código abaixo:

//Desabilita o teclado virtual do device
 
fscommand2("DisableKeypadCompatibilityMode");
 
// Habilita a tela cheia
fscommand2("FullScreen", "true");
 
//Não deixa a aplicação se redimensionar
Stage.scaleMode = "noScale";

- Os dispositivos  para os quais nós estamos fazendo esse jogo possuem uma característica da auto-rotação de conteúdo (que as vezes eu considero bem chata por sinal), mudando a visão das aplicações de porta retrato para paisagem e vice-versa de acordo com a orientação do usuário do aparelho. Existem algumas formas de lidar com isso, como por exemplo, adaptar o conteúdo para essas visões, ou simplesmente travar a tela em um dos modos.

Vamos escolher a opção de mostrar sempre nosso conteúdo em porta retrato, portanto, devemos evitar a auto-rotação. A API da nokia possui a função DisableAutoRotation, porém ela tem vários bugs que não farão sua aplicação ser aprovada no processo de análise pela Ovi,  além de tornar a aplicação mais lenta. Devido a isso, vamos usar a metodologia de 10 entre 10 desenvolvedores nokia flash lite, criando um movie clip alvo que encapsula todo o conteúdo e adicionando um ouvinte para evento  onResize.

- Crie o movie clip alvo e mesmo vazio adicione ele ao stage e o posicione no topo esquerdo do palco principal . Dê a ele um nome de instancia (no meu caso “main”).

-Vá ao código do primeiro frame novamente e adicione o seguinte código:

var stageSizeListener:Object = new Object();
stageSizeListener.onResize=function()
{
if(Stage.width > Stage.height) {
_root.main._rotation = -90;
_root.main._x = -140;
_root.main._y = 500;
} else {
_root.main._rotation = 0;
_root.main._x = 0;
_root.main._y = 0;
}
}
Stage.addListener(stageSizeListener);
 
stop();

Bom, acredito que tudo esteja bem claro de entender, menos os valores de x e y para width maior que o height. Esses valores variam um pouco de acordo como vc vai dispor os objetos dentro do movie clip alvo.

- Vamos adicionar conteúdo ao nosso jogo.  Dentro do movie clip alvo crie uma camada para campos de texto, uma para action e outra para os leds que irão acender.

- Na camada para os campos de texto, adicione 2 campos de texto dinâmicos do tipo clássico, utilize Bitmap Text [No anti-alias] e faça o embed de caracteres maiúsculos e números. Nomeie a instancia do primeiro para “txtLevel” e o outro para “txtTurn”. Pelo nome já é possível saber a função de cada um, o 1º irá mostrar em que level o jogador está e o 2º se é oturno do jogador ou do computador.

- Crie 6 movie clips com esquema de cores diferentes para representar os 6 leds do jogo. Esses movie clips precisam ter um estado desligado e ligado, portanto, crie uma camada action e adicione uma ação de stop no frame. Programaticamente nós iremos dar play no movie clip e fazê-lo acender.

Crie outra camada, nomeie de “leds” e faça dentro do flash (ou pegue uma imagem) a versão ‘desligada’ da sua arte. Adicione outro quadro-chave para essa sua camada e faça a versão ‘ligada’ dessa mesma arte. Faça o quadro ‘ligado’ ter duração de 8 frames. Vc pode criar tb uma camada para que toque um som ao acender o led, fica a seu critério.

Seu movie clip ‘led’ deve ficar similar ao da  figura abaixo.

- Volte ao movie clip alvo, selecione a camada de leds e disponha os movie clips de leds criados anteriormente da forma que achar mais conveniente.

- Nomeie cada instancia de led com um nome significativo e sequencial para ajudar no setup programático ( ex: led0, led1…, led5 ).

- Vamos preparar a camada de actions. Crie 3 quadros chave nela. No 1º vamos incluir o código para manipular o shared object que irão gravar os recordes do jogador, portanto, selecione o primeiro frame dessa camada e adicione o código:

/* records */
 
//Inicialização do vetor de recordes
var records:Array = [0, 0, 0, 0, 0,0, 0, 0, 0, 0];
 
var soRecords:SharedObject;
//Função de inicialização
soInitHandler = function(sob:SharedObject){
 
//Se o shared object contiver algum dado, coloque esses dados no vetor records.
if(soRecords.getSize() > 0){
records = soRecords.data.records;
}
}
//Confirma a escrita dos dados
function writeSharedObject(){
soRecords.data.records = records; //Passa o que tiver populado no vetor de recordes para dentro do shared object
soRecords.flush();//Descarrega os dados
}
//Associa o ouvinte
SharedObject.addListener("recordsLeds", soInitHandler);
//busca a referencia local do shared object
 
soRecords = SharedObject.getLocal("recordsLeds");

- No segundo frame de actions, vamos p/ a lógica do jogo em si. Adicione o seguinte código:

var turn:Number = 0; // 0 é o computador, 1 é o jogador
var stack:Array = []; // Estrutura de dados para armazenar os leds que acenderam
var index:Number = 0;//Indice para o led atual
var level:Number = 1;//Indica o level atual em que o jogador está
 
txtLevel.text = "LEVEL 1";
txtTurn.text  = "COMPUTER TURN";
 
var fps:Number = 0; //auxiliar na contagem de quadros
 
stack.push(random(6)); //Empilha um primeiro valor para começar o jogo
 
this.onEnterFrame = mainLoop; //Game loop
 
function mainLoop(){
fps++;
if(fps >= 20){ // nosso filme tem 24 frames por segundo, setado para 20 para dar tempo de tocar o som, passar o turno para o computador e dar tempo entre os leds
if(turn == 0){ //computer's turn
this["led"+stack[index]].play(); //acende o led atual
index++; //vai para o proximo led
if(index > stack.length - 1){ //ultrapassou o ultimo led, reinicialize e passe o turno para o jogador
index = 0;
turn = 1; // player's turn
txtTurn.text = "PLAYER TURN";
}
}
fps = 0;
}
}
//setup dos leds
 
for(var i=0; i<6; i++){
this["led"+i].idx = i;
this["led"+i].onPress = function(){
if(turn == 1){ //soh deixa pressionar se for o turno do jogador
this.play(); //Acende o led
if(stack[index] != this.idx){ //o jogador apertou um led diferente da sequencia?
//game over
turn = -1; //Nem player, nem computador
records.push(level); //Coloca no vetor de recordes o level alcançado
records.sort(Array.NUMERIC); //Ordena os records usando a função pelos maiores níveis alcançados
records.reverse();// Inverte o vetor para mostrar os maiores primeiro
if(records.length > 10){ //Evita problemas de inicialização
records.pop(); //saca fora o menor valor
}
 
writeSharedObject(); //confirma a escrita dos valores
delete mainLoop; //Deleta o game loop, é sempre bom evitar funções enterframe rodando sem necessidade
this._parent.gotoAndStop(3); // leva o movieclip alvo para o frame 3 que é responsavel por mostrar a lista de recordes (ainda irá ser criado)
}else{
if(++index >= stack.length){
turn = 0; // volta o turno para o computador
txtTurn.text = "COMPUTER TURN";
index = 0;
stack.push(random(6)); //empilha um novo valor de led a acender
level++;
txtLevel.text = "LEVEL " + level;
fps = 0;
}
}
}
}
}
 
stop();

- No 3º frame de actions, insira o seguinte código que será responsável por mostrar os recordes em uma lista

stop();
 
for(var i=0; i < 10; i++){
if(records[i] == 0){
this["txtRecord"+(i+1)].text = "EMPTY"; //Mostra vazio se nao tiver recorde
}else{
this["txtRecord"+(i+1)].text = "LEVEL " + records[i];
}
}
 
btnBack.onPress = function(){
 
_parent.main.gotoAndStop(2); //Volta para o inicio do jogo
 
}

- Crie uma nova camada e chame de “records”. Ela irá conter conteúdo apenas no 3º frame. Coloque 10 campos de texto dinâmicos que irão guardar os 10 melhores records. Nomeie as instancias txtRecord1 até txtRecord10. Crie um botão “Back” e dê o nome de instancia de btnBack para ele.

- Nesse momento, seu movieclip alvo deve ficar similiar a imagem abaixo

- Teste o filme e confira se tudo está certo no jogo.

Na próxima parte irei mostrar como empacotar o jogo e distribuir na loja Ovi.

Até lá!