Todo jogo é dividido em várias cenas. Pode começar a reparar de hoje em diante. Um jogo comum de video game sempre começava mostrando um monte de letrinhas na tela, depois geralmente mostrava algumas imagens que era os logos da empresas que participaram do desenvolvimento do jogo e logo em seguida vinha a tela de inicio, onde iniciávamos o jogo ou configurávamos ele. Pois bem, vou mostrar como manipular as cenas de um um jogo com o Crafty.
O que é uma Cena?
Eu admito que não sei explicar muito bem o que é uma cena. Porém posso mostrar na prática que você já viu várias cenas. Você já jogou aqueles clássicos pokemon de game boy? Provavelmente sim. No jogo, uma hora você está andando tranquilamente no mundo pokemon e derrepente, quando passa por uma graminha, a tela pisca e o jogo muda completamente, um pokemon selvagem surge para te matar.
À esquerda o jogo no modo navegação. À direita o jogo no modo batalha. Imagens do jogo Pokemon Leaf Green.
Isso é um exemplo de mudança de cena. Trocar de cena não significa que o jogo também mudará. Em pokemon mesmo podemos notar que trocamos de mapa constantemente. Cada mapas com seus npcs e pokemons diferentes. Isso também é trocar de cena. Separar seu jogo por cenas ajuda a organiza-lo muito.
Crafty.scene
Crafty.scene é o método que trata as cenas no Crafty. Ele serve para declarar e chamar a cena. Vamos primeiro aprender como declarar uma cena. Crafty.scene quando está sendo chamado para declarar uma cena, deve receber 2 argumentos. O primeiro é o nome da cena e o segundo é uma função que será executada quando a cena for iniciada. Veja um exemplo:
Crafty.scene("FundoVermelho", function() {
Crafty.background("red");
});
No código acima foi criada uma cena chamada FundoVermelho que ao ser iniciada troca o background do jogo para a cor vermelha usando Crafty.background. Porém como eu disse, isso é apenas a declaração da cena. Para usa-la você ainda vai precisar chamar ela. Para chama-la você usa o Crafty.scene também, mas agora você chama ele apenas com 1 argumento, no caso o nome da cena. Veja:
Crafty.scene("FundoVermelho");
Quando uma cena é chamada todas as entidades com o componente "2D" que existirem no jogo serão destruídas. Geralmente quando trocamos de cena é para ir para uma outra parte do jogo, seja um menu ou algum outro mapa. E precisamos reorganizar as entidades do jogo novamente. Por isso destruímos elas. Para evitar que nós precisemos lembrar de destruir todas as entidades que não precisamos na nova cena, o Crafty faz isso para nós. Mas existem ocasiões que não precisamos destruir certas entidades. Então apenas adicione o component "Persist" (Persista, em português) nessas entidades expecíficas que queremos que não sejão destruídas.
Exemplo de Cenas: http://www.craftybuilder.com/?version=0&id=CFY5HTXZNZA0HVGY
No exemplo acima, eu crio duas cenas. Uma que troca o fundo para vermelho e outra que troca pra verde. Toda vez que a cena é mudada, novas entidades são criadas e as antigas são destruídas. Os dois botões que são usados para trocar a cena são entidades do jogo também, porém eles não são destituídos pois possuem o componente "Persist".
Obrigado por ler mais esse tutorial sobre Crafty em meu blog. Por favor, qualquer dúvida ou talvez você queira apenas comentar, venha em nosso fórum:
Até mais!
