Unidade 9: Desenvolvendo um Game no App Inventor
Indice 1. Introdução...3 2. Começando........ 3 3. Configure os Componentes........3 4. Adicionar comportamento aos Componentes...5 5. Criando Variáveis...6 6. Iniciando o Aplicativo...6 7. Movendo o Personagem...8 8. Registrando os toques (touches)...10 9. O Programa Final...11
Unidade 9. Desenvolvendo um Game no App Inventor 1. Introdução Este tutorial mostra como construir um jogo semelhante ao jogo de arcade Whac-A- MoleTM. Especificamente, seu objetivo é bater (tocar) uma toupeira que aparece aleatoriamente de um dos cinco buracos fixos. Toda vez que você tiver sucesso, a sua pontuação é aumentada de um ponto. Este tutorial inclui: 1. Criando uma lista de componentes; 2. Usando a funcionalidade da seção avançada do editor de blocos para obter e definir propriedades de componentes arbitrários; 3. Tendo acontecimentos de jogo controlado pelo componente Relógio; 4. Usando Sprite Z-camadas para garantir que um duende (ImageSprite ou bola) aparece na frente de outro. 2. Começando Ligue para Inventor site do App e iniciar um novo projeto. Defina a propriedade da tela de título para um nome apropriado, como "Mole Mash". Abra o Editor de Blocos e conectá-lo ao telefone. Faça o download destes arquivos de imagem (criada por Yun Miao) clicando com o botão direito sobre eles, em seguida, adicioná-los ao projeto, premindo o botão "Adicionar..." no painel de mídia. 3. Configure os Componentes A interface de utilizador irá conter um total de 6 ImageSprites: 5 furos unmoving e 1 mole, o que irá mover-se por cima dos furos. Use o designer de componente para criar a interface do usuário. Quando estiver pronto, ele deve ser algo como a imagem abaixo. Não se preocupe com alinhando os orifícios uniformemente. Você vai especificar as respectivas localizações através de suas propriedades X e Y. Outras instruções estão abaixo da imagem.
Criar os seguintes componentes arrastando-os a partir da Paleta para o Viewer. Tipo de componente Paleta Grupo O que você vai nomeá-lo Objetivo do Componente Lona Básico GameCanvas O campo de jogo ImageSprite (5) Animação Hole1... Hole5 Buracos de que a toupeira pode aparecer ImageSprite Animação Toupeira A toupeira HorizontalArrangement Arranjo de Tela ScoreArrangement Para exibir a pontuação Etiqueta Básico ScoreTextLabel Para segurar "Score:" Etiqueta Básico ScoreValueLabel Para manter a pontuação (número de vezes que a toupeira foi atingido) Relógio Básico MoleClock Para controlar o movimento da toupeira Som Mídia Cigarra Para vibrar quando a toupeira é tocado
Para carregar o personagem principal no seguinte endereço (no capítulo 3): (http://examples.oreilly.com/0636920016632/), renomeando-o para mole.png Entenda-se Hits como Acertos e Misses como Erros do jogador Faça as seguintes alterações nas propriedades dos componentes: Componente Ação Canvas1 Definir BackgroundColor para Green. Definir largura para 320 pixels. Altura do aparelho para 320 pixels. Hole1 Definir X e Y de 20 a 60 (superior esquerdo). Hole2 Situado a 130 X e Y a 60 (centro superior). Hole3 Situado a 240 X e Y a 60 (canto superior direito) Hole4 Definir X e Y de 75 a 140 (inferior esquerdo). Hole5 Situado a 185 X e Y para 140 (inferior direito). Toupeira Ajuste de imagem para "mole.png". Definir Z a 2, de modo a toupeira aparece em frente da outra s ImageSprite, que têm o valor padrão de Z 1. ScoreTextLabel Definir o texto de "Score". ScoreTextValue Definir texto para "0". Não se preocupe agora sobre a definição da propriedade de imagem para os buracos; vamos definir a propriedade no editor de blocos. 4. Adicionar Comportamentos aos Componentes Aqui está um resumo do que precisamos para criar blocos que fazer: 1. Criar variáveis: a. furos: uma lista de buracos b. currenthole: o buraco a toupeira está saindo de 2. Quando o aplicativo é iniciado: a. Preencher a lista de buracos. b. Defina a propriedade de cada buraco de imagem para "hole.png". c. Procedure Call MoveMole (abaixo). 3. Criar um procedimento MoveMole para: a. Definir currenthole para um buraco aleatório dos buracos da lista. b. Mova a toupeira para o local do currenthole.
4. Faça MoleClock chamar MoveMole sempre que o seu temporizador vai desligar (a cada segundo). 5. Implementar um manipulador que faz o seguinte quando a toupeira é tocado: a. Adicionar uma para a pontuação. b. Fazer o telefone vibrar brevemente. c. Chame MoveMole. Para continuar, abra o Editor Blocks. 5. Criando Variáveis Criar as variáveis de buracos e currenthole. Por agora, vamos dar-lhes valores iniciais "dummy"; vamos definir seus valores iniciais reais no manipulador de eventos Screen1.Initialize, que é executado quando o aplicativo é iniciado. (. Por razões técnicas, os componentes não podem ser referidos em blocos def, que são executados antes que o aplicativo foi iniciado) Aqui está uma foto e lista dos blocos que você vai precisar: Tipo de bloco Gaveta Propósito variável como def (buracos) Definição Mantenha uma lista de buracos. faça uma lista Listas Criar uma lista vazia, a ser preenchido quando o programa é iniciado. variável como def (currenthole) Definição Segure buraco atual da toupeira. número (0) Números Forneça um valor inicial necessário para currenthole. Como sempre, comentários (criados pelo botão direito do mouse em um bloco) são incentivados, mas não é obrigatório. 6. Iniciando o aplicativo O primeiro evento a ocorrer em qualquer programa em Screen1.Initialize, por isso vamos colocar o código start-up em que manipulador. Especificamente, vamos adicionar os componentes do furo para os furos da lista, definir Imagem propriedade de cada buraco para "hole.png", e chame MoveMole. Uma vez que ainda não escreveu MoveMole, vamos criar um procedimento vazio com esse nome, que irá preencher mais tarde.
Abaixo está uma imagem ea tabela dos blocos que você precisa para criar. Note-se que a gaveta "Qualquer ImageSprite" é encontrado sob a aba "Avançado" para o direito de "Built-In" e "My Blocks" no Editor de Blocos. Tipo de bloco Gaveta Propósito Screen1.Initialize Screen1 Especifique o que deve acontecer quando o aplicativo é iniciado. adicionar itens à lista Listas Adicione os seguintes valores para... furos Minhas Definições... A lista de buracos: componente Hole1 Hole1 -o furo superior esquerdo componente Hole2 Hole2 -o furo central superior componente Hole3 Hole3 -o buraco superior direito componente Hole4 Hole4 -o furo inferior esquerdo componente Hole5 Hole5 -o buraco inferior direito
foreach Controle Especifique que gostaríamos... Nome (orifício) Definições... Uma variável chamada "buraco"... furos Minhas Definições... A tomar em cada um dos valores nos furos da lista. ImageSprite.Picture Qualquer Sprite Imagem Defina a propriedade Imagem de... buraco valor Minhas Definições... O ImageSprite referido pelo buraco variável... texto (hole.png) Texto... Para a imagem do buraco vazio. ao procedimento (MoveMole) Definição Criar um procedimento que deverá ser preenchido mais tarde, para mover a toupeira. MoveMole Minhas Definições Chame MoveMole para fazer a primeira colocação da toupeira. Compare o bloco foreach para os blocos equivalentes que seria necessário sem ele: Não é só a esquerda de blocos menores, é menos repetitivo, poupando o programador de semiirracional copiar-e-colar e torná-lo mais fácil de modificar, por exemplo, se o nome da imagem é alterada. 7. Movendo o Personagem (Mole) Agora vamos preencher o corpo do procedimento MoveMole, que chamaremos quando o programa é iniciado, quando a toupeira fica tocado, e quando o nosso temporizador vai desligar a cada segundo. O que quer que ele faça é pegar um buraco aleatório e mover a toupeira em cima dela. Aqui estão uma imagem e lista dos novos blocos:
Tipo de bloco Gaveta Propósito definir a currenthole Minhas Definições Salve o... chamar escolher item aleatório Listas... Selecionados aleatoriamente... furos As minhas definições... Buraco. chamar Mole.MoveTo Toupeira Mova a toupeira para o... ImageSprite.X Avançado / ImageSprite..x coordenada de... currenthole Minhas Definições... O buraco escolhido... ImageSprite.Y Avançado / ImageSprite... E a coordenada y de... Buraco actual Minhas Definições... O buraco escolhido. Agora precisamos especificar que MoveMole deve ser chamado sempre que temporizador de MoleClock apaga. Nós só precisamos de dois quarteirões para conseguir isso: Tipo de bloco Gaveta Propósito MoleClock.Timer MoleClock Quando o temporizador se apaga... chamar MoveMole Minhas Definições... Mover a toupeira.
8. Registrando Toques (Touches) Finalmente, é preciso especificar o que acontece quando a toupeira é tocado. Especificamente, queremos: 1. Incrementar o placar. 2. Fazer o telefone vibrar brevemente. 3. Mova a toupeira. Podemos facilmente traduzir estes para blocos: Tipo de bloco Gaveta Propósito Mole.Touched Toupeira Quando a toupeira é tocado... definir a ScoreValueLabel.Text ScoreValueLabel... Atualizar a pontuação visível para... bloco Matemática... O resultado da adição de... número (1) Matemática... 1 [e]... ScoreValueLabel.Text ScoreValueLabel... A pontuação anterior. chamar Buzzer.Vibrate Cigarra Faça o telefone vibrar por... número (100) Matemática... 100 milissegundos. chamar MoveMole Minhas Definições Mova a toupeira para um novo local.
9. Programa Final Variações Aqui estão algumas variações que você pode querer implementar: Adicionando um botão Redefinir para definir o marcador a 0. Tendo a pontuação não depende apenas do número de acertos, mas também o número de acidentes e escapou moles. Aumentar a velocidade do jogo do movimento toupeira se o jogador está bem e diminuindo-se o jogador está fazendo mal. A adição de um segundo molar em um timer diferente. Você pode ver como implementar as duas primeiras variações na origem tutorial Mole Mash. Revisão Aqui estão algumas das ideias abordadas neste tutorial: Colocar os componentes em uma lista. Execução de uma operação de todos os componentes em uma lista usando o bloco foreach e funcionalidades avançadas. Colocar um ImageSprite em cima da outra, usando as suas propriedades Z para controlar o que vai na frente. Usando o componente do relógio para controlar o jogo. A criação de um procedimento e chamando-o de vários lugares.