Mini-curso: Desenvolvimento de Games no Adobe Flash

3.775 visualizações

Publicada em

O pacote com todo o material discutido no curso pode ser baixado no link abaixo:
https://dl.dropbox.com/u/4792386/AdobeFlash-MiniCourse-UNESP.zip

Publicada em: Tecnologia

Mini-curso: Desenvolvimento de Games no Adobe Flash

  1. 1. Copyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  2. 2. Hello World! Começando pela Lógica de ProgramaçãoCopyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  3. 3. Copyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  4. 4. Copyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  5. 5. Copyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  6. 6. Copyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  7. 7. Copyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  8. 8. Copyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  9. 9. Copyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  10. 10. Comentários no código • São notas que um programador deixa no código para que ele ou outros programadores entendam o que está sendo feito ali, ou para documentar o que uma determinada função deve fazer • Os comentários não interferem na execução do programa, e são ignorados pelo compilador/interpretadorCopyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  11. 11. Operadores • Semelhantes aos operadores matemáticos • Representam operações entre variáveis e dados • Já vimos um operador importante, que é o de atribuição. Ele calcula o valor de seu lado direito, e o guarda na variável do lado esquerdo • Temos todos os operadores comums matemáticos para lidar com números (+, -, * e /) • Usamos alguns deles naquela função de calcular a média.Copyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  12. 12. Vamos começar a brincar! • Abra o Flash • No primeiro “frame”, pressione F9 para abrir a aba de código • Escrever uma função que receba 3 números e calcule a média entre eles • Use a função trace() para imprimir as seguintes médias – 2.5, 4.3, 5.0 – 1.2, 5.5, 9.9 – 0.0, 0.0, 0.0Copyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  13. 13. Operadores comparativos • Temos também os chamados “operadores comparativos”, que fazem comparações entre dois valores • Uma expressão com um operador comparativo vai retornar um valor Boolean (verdadeiro ou falso) • Depois, podemos utilizar esse valor para realizar condicionais (executar um trecho de código apenas quando o resultado da comparação for verdadeiro ou falso) • Exemplos de operadores comparativos: – == (equalidade) – > (maior que) – < (menor que)Copyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  14. 14. Condicionais: o laço “if” • O laço if permite a execução de um bloco de código apenas quando o resultado da expressão for verdadeiro • Pode ser pareado com o “else”, que significa o “senão”: se a condição for verdadeira, executa o bloco após o if; senão, executa o bloco após o else.Copyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  15. 15. Vamos praticar! • Escrever uma outra função que recebe 3 notas de entrada, calcula a média usando a função que escrevemos anteriormente e lhe diga se o “aluno” passou ou não (ou seja, a média é maior ou igual a 6) • Testar essas funções no primeiro frame, usando os valores que quiser. • Bonus: Faça essa função lhe cumprimentar pelo nome antes de dizer se passou ou não.Copyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  16. 16. Sh*t just got serious! Vamos ver um pouco de Orientação a Objetos
  17. 17. Objetos • No AS3, todos os valores armazenados dentro de variáveis são objetos. • Um pedaço de texto, um número, um elemento visual na tela, até mesmo uma função: tudo isso são objetos • Esses objetos tem um TIPO (String, Number, MovieClip, etc), e o comportamento de todos os objetos do mesmo tipo é representado por uma CLASSECopyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  18. 18. Classes • Uma classe é como se fosse um blueprint de um objeto, descrevendo o que esse objeto tem e o que ele faz • Aplicando o conceito à um jogo: os vários monstros na tela são objetos, enquanto o código que define o comportamento de um monstro é a classe (classe Monstro, por exemplo).Copyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  19. 19. Classes: atributos e métodos • Uma classe possui atributos, que nada mais são do que variáveis, e métodos, que nada mais são do que funções. • Atributos representam as características do objeto; para um monstro, seriam coisas como cor, posição, pontos de vida, velocidade, etc. • Métodos representam ações que esse objeto pode fazer; para um monstro, seriam coisas como andar, atirar, morrer, etc.Copyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  20. 20. Classes e objetos • O mais interessante é que, embora os atributos sejam definidos na classe para todos os objetos do mesmo tipo, CADA objeto tem atributos “separados” • Ou seja, se eu modificar o valor dos pontos de vida de um dos montros, os outros monstros não serão afetados • Os métodos também só modificam os valores do objeto no qual o método está sendo executadoCopyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  21. 21. Copyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  22. 22. Objetos e classes no Flash• Vamos transformar um objeto no Flash em uma classe• Vamos programar o comportamento dessa classe• Vamos instanciar a classe na timeline, executar os métodos e observar o código
  23. 23. • Você pode ter percebido que, em muitas casos, duas classes teriam diversos atributos e métodos iguais. Afinal, tanto monstros quando jogadores possuem Herança posição, pontos de vida e velocidade, não?• O conceito de herança permite que uma classe “extenda” a outra, copiando seus métodos e atributos• No exercício anterior, nossa classe extendeu a classe MovieClip, que é interna do Flash, e passou a ter uma série de atributos e métodos novos para posicionamento e colocação do objeto na tela. extends
  24. 24. Let’s game!Vamos aplicar tudo isso aonde realmente interessa! Jogos no Flash
  25. 25. O princípio básico dos jogos eletrônicos Início • Início: define os elementos e variáveis do jogo • Enquanto o jogo estiver rodando, processar um “frame” (quadro): Simular / processar o Receber input gameplay – Receber o input (entradas) do jogador – Processar o gameplay Exibir o estado (regras) do jogo atual do jogo – Renderizar (mostrar na tela) o estado atual do jogo EncerrarCopyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  26. 26. No Flash é mais fácil! • Com a orientação à objetos, o comportamento de cada tipo de entidade no jogo pode ser descrita separadamente • No Flash, temos eventos que são disparados quando o usuário interage com o jogo, e a cada “frame” do jogoCopyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  27. 27. Eventos • Eventos são ações que são disparadas cada vez que algo ocorre. • A classe MovieClip, da qual as nossas classes de entidades de jogo vão estender, possui uma série de métodos para lidar com eventos. • Podemos adicionar à um MovieClip um “event listener”. Basicamente dizemos ao MovieClip que quando um determinado evento acontecer, ele deve executar uma determinada função. • Assim, podemos escutar por eventos como KEY_DOWN (tecla pressionada), KEY_UP (tecla solta) e ENTER_FRAME (novo frame) para aplicar aquele princípio básico que vimos de receber input, processar gameplay e renderizar o estado.Copyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  28. 28. Eventos: “enterFrame” • Esse evento é repetido constantemente enquanto o objeto estiver ativo. • É útil para fazer o processamento da lógica de jogo, como movimentação • Exercício! Alterar nossa classe monster para que ela ande para frente a cada frame!Copyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  29. 29. Colocando elementos na tela: o stage (“palco”) • Quando arrastamos um objeto para o stage (“palco”), o Flash irá automáticamente chamar o construtor do objeto, e disparar um evento chamado “addedToStage” • Quando criamos esse objeto pelo AS3 na timeline, precisamos colocar manualmente o objeto no stage. Usamos, para isso, a função “addChild()”, que recebe como parâmetro o objeto a ser adicionadoCopyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  30. 30. Eventos: keyUp / keyDown • “keyDown” é chamada no momento que uma tecla é pressionada, e “keyUp” quando ela é solta. • Quem dispara o evento não é o próprio MovieClip, e sim o “stage”, o “palco” do jogo. Esse palco só está disponível para ser acessado depois que o MovieClip é colocado na tela, então registramos esses eventos apenas após o evento “addedToStage” ser disparado • Para podemos usar o estado do teclado na função que processa o frame, podemos criar alguns atributos que receberam o estado das teclas nesse evento, e serão usados na função para sabermos se naquele determinado momento elas estão pressionadas ou nãoCopyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  31. 31. Eventos: keyUp / keyDown
  32. 32. Exercício final • Programar um jogo clássico: Pong! • Criar uma (ou duas) classes para os jogadores, que controlam as raquetes com o teclado • Criar uma classe para a bola • A bola se move com uma velocidade constante no eixo X e outra no eixo Y • Quando a bola bater na raquete do jogador, inverter o ângulo em X • Quando a bola bater na parede superior, inverter o ângulo em YCopyright © Aryel Tupinambá – 2012 – Todos os direitos reservados
  33. 33. Muito obrigado!aryel.tupinamba@lqdi.net ou aryel@tupinamba.me dfkimera.com a3studios.com.br facebook.com/aryel.tupinamba twitter.com/DfKimera

×