3

Adicionando interatividade em suas animações com Lua

by Luiz Jr 30. maio 2011 21:20

No post anterior eu passei algumas dicas e códigos de como desenvolver uma animação simples usando Lua e Corona SDK. A animação era o Cormano do game Sunset Riders (pois é, estou ficando velho), correndo à cavalo à beira dos trilhos de trem. Nada muito rebuscado, o fundo move-se para dar a sensação de que Cormanoe stá saindo do lugar e o mesmo fica galopando sem parar no meio da tela. Hoje daremos um pouco mais de interatividade, iniciando a animação com Cormano parado, permitindo que ele corra quando o usuário tocar nele. Além disso, incluíremos uma nova animação, de Cormano saltando, quando o usuário chacoalhar o dispositivo (desde que ele tenha um acelerômetro) nosso cowboy dará um salto. E por fim, se o usuário tocar na tela do lado esquerdo, Cormano aumentará a velocidade do galope, enquanto que se os toques forem à direita da tela, ele diminuirá o galope. Ufa, mãos à obra!

O que vamos precisar

Estou começando a cansar de repetir, mas aqui vai: necessitaremos das bibliotecas da linguagem Lua e do Corona SDK. Baixe-os nos respectivos links e para quem não baixou meu último zip com os fontes do último post, pegue-os neste link. Com os dois primeiros instalados e com o zip extraído em uma pasta, abra o Corona Simulator, que por sua vez deve abrir o arquivo main.lua dentro da pasta do seu projeto extraído. Verifique se o mesmo continua funcionando (nunca se sabe né) e continue a leitura.

Cormano parado

Iniciando a aplicação

Adicione o código abaixo para que Cormano inicie a aplicação parado. Isso mesmo, você usará a imagem parado.png para simular nuestro mexicano aguardando por algo ou alguma coisa. Somente quando o usuário tocar sobre a imagem é que ela iniciará a corrida frenética rumo a lugar nenhum. Este código deve ser adicionado logo depois do bloco de código que declara instance1 (a animação de Cormano correndo). Note que ele define que a animação do Cormano correndo ficará invisível, para que somente a imagem de Cormano parado fique na tela.

instance1.isVisible = false;

--cormano parado
local parado = display.newImage( "parado.png" )
parado:setReferencePoint( display.CenterLeftReferencePoint )
parado.x = display.contentWidth / 4
parado.y = 225--distância do cavalo ao chão
parado.xScale = 1.2
parado.yScale = 1.2

Agora vamos ao código para que Cormano inicie a corrida a um simples toque do usuário:

--função de início
local function start(event)
	parado.isVisible = false;
	instance1.isVisible = true;
	instance1:prepare("cormano")
	instance1:play()
end

parado:addEventListener("touch", start);

Note que criamos uma função start que troca a visibilidade das imagens e dá um play na animação. Esta função responderá pelo evento touch sobre a animação instance1. Com estes códigos já é possível testare notar que Cormano começa a aplicação parado e somente inicia o trote quando tocam nele.

Cormano pulando

Festa de Rodeio

A próxima etapa é fazer com que Cormano salte com seu alazão caso o usuário chacoalhe seu iCoisa. O Corona Simulator permite que você teste a chacoalhada com o atalho Ctrl + Up Arrow ou no menu Hardware -> Shake. O código do salto é um pouquinho mais complicado pois ele exige algumas coisas diferentes: 1ª - a animação deve ser executada somente uma vez, 2º - depois que a animação terminar, o galope deve continuar. Tendo isso em vista, vamos ao código:

--cormano pulando
local sheet2 = sprite.newSpriteSheet( "jump.png", 94, 99 )

local spriteSet2 = sprite.newSpriteSet(sheet2, 1, 3)
sprite.add( spriteSet2, "jumping", 1, 3, 500, 1 ) -- play 6 frames every 500 ms

local instance2 = sprite.newSprite( spriteSet2 )
instance2.x = display.contentWidth / 4 + 40
instance2.y = 225--distância do cavalo ao chão
instance2.xScale = 1.2
instance2.yScale = 1.2
instance2.isVisible = false;

Note que agora carregamos a imagem jump.png, onde temos os frames do pulo de Cormano. Esta sprite sheet eu encontrei junto à anterior na Internet mesmo. O restante da configuração não tem nada de diferente da animação de Cormano galopando vista no último post, e na última linha nota-se que a animação ficará invisível até que seja necessário, ou seja, até que o usuário chacoalhe o iCoisa Coloque este código depois do bloco da animação de Cormano correndo. Depois de criar o objeto da animação, devemos seguir codificando:

local function pulo(event)
	if (event.isShake == true) then
		parado.isVisible = false;
		instance1.isVisible = false;
		instance2.isVisible = true;
		instance2:prepare("jumping")
		instance2:play()
	end
end

local function fimPulo(event)
	if (event.phase == "end") then
		parado.isVisible = false;
		instance1.isVisible = true;
		instance2:pause();
		instance2.isVisible = false;
	end
end

Runtime:addEventListener("accelerometer", pulo);
instance2:addEventListener("sprite", fimPulo);

Este código é um pouco mais xarope que os anteriores, então preste bastante atenção. Temos uma função pulo que testa o valor do evento para ver se é um Shake ou não. Existe uma diferença grande de um Shake para os outros movimentos sentidos pelo acelerômetro, então este teste é necessário para garantir que Cormano somente pulará se o usuário chacoalhar rapidamente seu iCoisa. O restante da função é simples, basta esconder as animações que não queremos e botamos o pulo a rodar. Já na função fimPulo, devemos colocar a animação do galope rodando novamente quando o evento anterior terminar, senão Cormano ficará eternamente no ar!!! E por fim, adicionamos dois listeners, um relacionado ao acelerômetro para o Runtime mesmo (o dispositivo) e outro relacionado à animação de pulo, para que ela avise o sistema quando terminar.

Pé na Tábua!

E por último, vamos por Cormano a correr pra valer incluindo toques de usuário à direita ou esquerda, desacelerando ou acelerando Cormano. Obviamente a aceleração é apenas visual, visto que nossa animação não leva a lugar nenhum e é apenas para exercitar os conhecimentos em Lua. O código é bem simples e dispensa grandes comentários. Caso o usuário toque no lado direito do iCoisa, Cormano aumentará sua velocidade em 10% (diminuindo o tempo do loop) e caso o toque seja no lado esquerdo, a velocidade diminuirá em 10% (aumentando o tempo do loop). Obviamente múltiplos toques produzirão efeitos engraçados e não condizentes com a realidade, mas não me preocupei com tais validações. Note que o valor em milisegundos que antes era uma constante agora se tornou uma variável local, para que mantenha seu valor entre as animações (ou seja, a cada toque, Cormano manterá a velocidade anterior e modificará proporcionamente ao lado do toque).

local velocidade = 500;

local function acelera(event)
	if(event.x > (display.contentWidth / 2)) then
		velocidade = velocidade * 0.9;
	else
		velocidade = velocidade * 1.1;
	end
	sprite.add( spriteSet1, "cormano", 1, 6, velocidade, 0 )
	instance1:prepare("cormano");
	instance1:play();
end

Runtime:addEventListener( "touch", acelera );

Este código deve ser adicionado ao fim do arquivo. Teste e brinque um pouco com a velocidade do galope do vaqueiro. Nos fontes que disponibilizo abaixo, incluí o código para parar Cormano caso o usuário toque nele novamente (tocamos nele para iniciar o galope, lembra?). Sem olhar nos fontes, tente programar este evento, para ver se realmente está entendendo como funcionam os scripts em Lua.

Concluindo

Melzinho na chupeta! A programação em Lua com Corona SDK para games possui uma curva de aprendizado semelhante à do XNA da Microsoft, embora com um nível de organização, arquitetura e IDE, muito mais baixo. Mas fazer o quê se o XNA só rola com Windows Phone! Para quem ainda não tem certeza de que é uma boa aprender a programar para iCoisas, lembre-se que 24h após a estréia do iPad em solo tupiniquim ele já havia se esgotado das prateleiras de todas as lojas de varejo nacionais. Até quando você vai esperar pra começar a programar para as plataformas mobile?

Quer saber tudo sobre Corona SDK? Compre já o meu livro!

SunsetRiders-2.zip (168,46 kb)

Tags: , , ,

Corona SDK | Experiências | Lua | Mobile

Comentários

trackback
Luiz Tools
1/6/2011 00:12:48 #

Adicionando audio e timers em seu game no Corona SDK

Adicionando audio e timers em seu game no Corona SDK

Ícaro Pereira
Ícaro Pereira Brasil
25/11/2012 02:34:23 #

Boa noite Luiz! Gostaria muito de saber se você poderia me ajudar tirando umas dúvidas sobre um app que querem que eu crie. Gostaria de saber, mostrando as especificações, se é possível fazer o app no Corona. Um programador experiente me disse que sim mas eu gostaria de ter a sua opinião. Outra coisa, quero comprar o livro "Criando Aplicações Móveis com Corona" e gostaria de saber: o valor ali é em dolares ou reais? Como faço para comprar o livro? Esse livro é uma compilação ou complementação dos outros dois que o mesmo autor escreveu em inglês? Aprecio muito a sua ajuda, muito obrigado!

luizfduartejr
luizfduartejr Brasil
25/11/2012 09:10:43 #

Bom dia Ícaro, pode mandar as dúvidas que eu te respondo, sem problemas. Sobre o livro, ele possui 411 páginas e é super completo, abordando todos os tópicos necessários para criar apps e games com Corona, sem a necessidade dos outros livros escritos pelo autor. Como é vendido no site do autor (que é americano) o valor é em dólares.

Quaisquer dúvidas ou problemas que tiver, pode mandar por aqui ou pelo formulário de contato do site. Um abraço!

Comentar


(Vai mostrar seu Gravatar)

  Country flag

biuquote
  • Comentário
  • Pré-visualização
Loading



Powered by BlogEngine.NET 1.6.1.0
Design por Laptop Geek, adaptado por onesoft e personalizado por mim.