Games

30 mai, 2014

Procurando Nemo: crie animações 3D com o ambiente de desenvolvimento Alice

Publicidade

No ambiente de desenvolvimento Alice, não precisamos digitar um único comando ou aprender uma linguagem diferente. Em vez disso, podemos criar aplicativos e compilar todas as ações e processos necessários apenas usando o mouse. Começamos arrastando itens prontos para um mundo 3D. Cada item oferece diversas ações que alteram sua aparência, localização, ou comportamento. Depois, podemos simplesmente arrastar e soltar as ações desejadas em um plano sequencial, que o Alice executa sob demanda.

Figura 1 Após a inicialização, o Alice oferece diversos substratos para o mundo 3D. Se não tiver certeza, escolha qualquer um deles; podemos substituí-lo mais tarde com um fundo colorido, por exemplo.
Figura 1 Após a inicialização, o Alice oferece diversos substratos para o mundo 3D. Se não tiver certeza, escolha qualquer um deles; podemos substituí-lo mais tarde com um fundo colorido, por exemplo.

Controles simples certamente têm seus limites. Por exemplo, os aplicativos criados aqui são sempre rooteados no mundo 3D. O Alice é, portanto, adequado principalmente para animações 3D ou jogos. O requisito quase obrigatório para o mundo 3D é que o Linux suporte aceleração 3D da placa de vídeo; caso contrário, o programa que o usuário criar será executado no ritmo de uma lesma.

Versões

O Alice1 atualmente existe em duas versões. De acordo com os fabricantes, os iniciantes devem usar a versão 2, mais antiga. Esta versão ensina o raciocínio lógico e os conceitos básicos de programação. A nova versão 3, no entanto, concentra-se na programação orientada a objetos e tem usado de forma crescente a terminologia padrão encontrada na área, permitindo assim uma transição posterior mais suave para o Java.

Figura 2 A janela principal de Alice que aparece depois de selecionarmos o fundo tem uma boa quantidade de espaço por conta dos muitos elementos.
Figura 2 A janela principal de Alice que aparece depois de selecionarmos o fundo tem uma boa quantidade de espaço por conta dos muitos elementos.

A abordagem básica é a mesma em ambas as versões, sendo a principal diferença a interface de usuário e terminologia um pouco diferentes. Neste artigo, nos concentraremos na versão 3.1, mas a maioria das explicações também se aplicam ao Alice 2.3. O ambiente de programação, desenvolvido na Universidade Carnegie Mellon, em Pittsburgh, Pensilvânia, EUA, não é software livre. Apesar de o Alice ser publicado sob uma licença livre, não está disponível em código aberto. A instalação do IDE é descrita no quadro 1.

Configuração

Depois de iniciar o ambiente de programação, será exibida a janela mostrada na figura 1. Primeiro precisamos selecionar o plano de fundo para o mundo 3D. No exemplo a seguir, queremos um peixe nadando em um mundo subaquático, por isso escolhemos SEA_FLOOR. licar em “OK” abrirá a janela principal mostrada na figura 2. Como a janela consome uma grande quantidade de espaço, o usuário desejará que ela preencha toda a tela. O painel superior esquerdo é a exibição da cena, o canto inferior esquerdo é o painel de métodos, a grande janela da direita é o editor de código e a margem na parte inferior direita responde pelas tiles de controle.

Figura 3 Nesta visualização, podemos preencher o mundo 3D com os objetos.
Figura 3 Nesta visualização, podemos preencher o mundo 3D com os objetos.

Por enquanto, analisaremos o painel da cena, onde observaremos o mundo subaquático 3D atualmente vazio. Pressione o botão Setup scene para preenchê-lo com um peixe, ou selecione Window/Perspectives/Setup Scene, a partir do menu. O Alice agora muda para a visualização exibida na figura 3, onde o mundo 3D ocupa a maior parte da janela principal.

Na linha de fundo, a paleta contém todos os itens disponíveis. Para ajudar a manter o controle dos objetos, o Alice classifica-os em categorias. Flyer Classes, por exemplo, são todos os objetos que podem “voar” – atualmente, apenas pássaros. Pressionar All Classes retorna para a visão geral. Um agrupamento alternativo está disponível na guia Browse Gallery By Theme. Se olhar para o oceano, por exemplo, todos os objetos serão adequados para um cenário subaquático. Finalmente, podemos clicar na guia Search Gallery para buscar um objeto específico.

Para o cenário subaquático desejado, altere para a guia Browse Gallery By Theme e selecione o tema Ocean. Em seguida, mantenha pressionado o botão esquerdo do mouse sobre o pequeno peixe-palhaço amarelo e arraste-o para o mundo subaquático; contudo, não solte o botão do mouse ainda. Um cubo amarelo aparece no mundo (figura 3). Arraste o peixe-palhaço até o local onde deseja que ele permaneça.

Figura 4 Nesta janela, digite um novo nome para o objeto recém-criado. No exemplo, o peixe é chamado de Nemo.
Figura 4 Nesta janela, digite um novo nome para o objeto recém-criado. No exemplo, o peixe é chamado de Nemo.

No exemplo, o transferimos para o lado esquerdo da janela. O usuário irá notar que o Alice sempre localiza o objeto um pouco acima do chão – o que não é exatamente perfeito para um peixe flutuante, mas não é algo que possamos mudar neste momento. Depois de ter encontrado uma posição adequada, solte o botão do mouse. Será exibida a janela ilustrada na figura 4, que mostra que criamos um novo objeto do tipo ClownFish no mundo 3D. Para reutilizar o objeto facilmente mais tarde, crie um nome para o peixe na caixa de nome (por exemplo, “Nemo”) e pressione “OK” para fechar a janela.

Mecanismo de elevação

O pequeno Nemo aparece agora no mundo subaquático. Um círculo verde indica que está selecionado (figura 5). Podemos arrastar e soltar para mover o peixe por aí livremente; clicar em uma das setas curvas na parte inferior do mundo 3D permite alterar a perspectiva. Para este exemplo, no entanto, podemos ficar com o ângulo de visualização atual.

Na borda direita da janela, o usuário encontrará uma paleta com todas as propriedades do objeto (no Alice 2, eles estão localizados na guia Properties, na parte inferior esquerda). Podemos usar a lista drop-down Paint para especificar uma cor diferente para o Nemo. O valor de opacidade define o quão transparente o peixe será. Um valor de 1.0 torna Nemo completamente visível, e 0,5 o torna semi-invisível.

Figura 5 Com as novas propriedades, o objeto passa por algum lugar perto do centro do mundo.
Figura 5 Com as novas propriedades, o objeto passa por algum lugar perto do centro do mundo.

Podemos usar o campo Vehicle para encadear Nemo a outro objeto. Em seguida, ele passará a seguir automaticamente cada movimento do objeto escolhido. Particularmente interessantes são os valores para Position e Size do elemento Nemo. Primeiro, devemos levantar o peixe do chão um pouco, para que ele possa nadar livremente. Para fazer isso, digite o valor 0,5 em y e pressione a tecla [Enter]. O Alice agora levanta o peixe (figura 5). Introduzir um valor em x moveria Nemo para um plano horizontal, e um valor z o moveria para frente ou para trás. O tamanho padrão de Nemo é perfeito para o exemplo.

Perdidos no espaço

Assim como o peixe, mais alguns objetos estão na cena: além do fundo, temos uma câmera através da qual podemos olhar diretamente para o oceano. No canto superior esquerdo da janela, o Alice lista todos os objetos, com destaque para o objeto atualmente selecionado em amarelo.

A câmera e o solo também têm propriedades que podem ser modificadas. Para fazer isso, clique sobre o nome do objeto correspondente no canto superior esquerdo ou selecione-o na borda direita do menu de seleção, atualmente rotulado como this.Nemo. Essa ação permite que modificar retroativamente o fundo. O mundo 3D também é um objeto em si mesmo, com o nome “this” pouco intuitivo. No entanto, isso permite mudar a iluminação de todo o ambiente ou envolvê-lo em um nevoeiro: na lista drop-down, clique uma vez sobre ele e examine as propriedades. Os nomes dos outros objetos começam assim porque se encontram no ambiente.

Se quiser que o Nemo nade para frente e para trás, precisará de uma sequência correspondente. Pressione o botão Edit Code ou selecione Window/Perspectives/Edit Code para retornar à visualização anterior, onde se visualiza Nemo no canto superior esquerdo. Logo abaixo, encontraremos uma lista de todas as ações e truques que Nemo tem na manga. Poderíamos falar com ele, por exemplo, ou movê-lo. Alice refere-se a todas essas ações como procedimentos.

Girando a roda

Em seguida, desejamos que o Nemo nade toda a tela para a direita. No momento, ele está olhando para a frente, de modo que o primeiro passo é apontá-lo para a direita. Na lista, encontre o procedimento para girar (na seção de orientação) e, em seguida, arraste esta ação a um ponto da página ainda vazio no lado direito aonde se lê “drop statement here” (no Alice 2: “Do nothing”).

Figura 6 Se um procedimento requer um ajuste, basta selecioná-lo a partir de uma lista de especificações.
Figura 6 Se um procedimento requer um ajuste, basta selecioná-lo a partir de uma lista de especificações.

O Alice agora quer saber em qual direção deve rotacionar o Nemo. Para o peixe olhar para a direita, ele precisa rotacionar para a esquerda. Em outras palavras, digamos Left. Depois, preenchemos o valor para rotacionar o Nemo. Neste caso, o valor é de 0,25 (figura 6), que é um quarto de rotação em torno do próprio eixo de Nemo. Para verificar, clique no botão Run. Isso abrirá uma nova janela na qual Nemo olha para a direita (figura 7). Feche a janela novamente. Note que poderíamos ter rotacionado Nemo para a direita na visualização Sceneclicando em Rotation no canto superior direito e, em seguida, arrastando um dos aros em torno de Nemo para a direita com o mouse.

Em seguida, queremos que Nemo nade para a direita. Podemos fazer isso com o processo Move. Arraste o recurso para fora da lista no lado esquerdo para a direita abaixo da ação Turn. Se quiser que Nemo nade para a frente, selecione Forward a partir da lista. Um valor de 2,0 faria com que Nemo flutuasse no meio da tela, enquanto que 10,0 o faria desaparecer de vista. Assim, é preciso pressionar Custom DecimalNumber, digitar um valor de 3,5 na calculadora pop-up e, em seguida, pressionar OK.

Agora, ao pressionar Run, o Nemo nada para a direita. No entanto, a coisa toda ainda funciona de forma relativamente rápida. Para mudar isso, clique em Add detail na ação Move. Para influenciar a duração da natação, podemos selecionar duração e depois 2.0. Isto irá retardar a animação pela metade.

Para todo o sempre

No final das contas, o Nemo precisa aprender a se virar. Para que isso aconteça, arraste a curva de rotação para uma posição abaixo das outras duas no editor. Nemo precisa girar no sentido horário (direita) por um valor de 0,5. Ele, então, olha para a esquerda novamente. Com mais uma ação de movimento, Nemo flutua direto à sua posição inicial (para frente) com um valor de 3,5. Mais uma vez, digite isso como um Custom DecimalNumber. Para simplificar, podemos manter o valor padrão para a velocidade.

Figura 7 Nemo gira em seu mundo. Podemos pausar e reiniciar o fluxo do programa usando os botões correspondentes na borda superior.
Figura 7 Nemo gira em seu mundo. Podemos pausar e reiniciar o fluxo do programa usando os botões correspondentes na borda superior.

Finalmente, o Nemo deve olhar para a frente novamente. Para isso, arraste o processo Turn para o editor mais uma vez e rotacione por 0,25. O programa deve aparecer agora como mostrado na figura 8. Depois de iniciar o código pressionando Run, o Nemo nada para a direita, se vira, nada de volta, e olha diretamente atrás do usuário.

Para comunicar ao Nemo que deve nadar para a direita novamente, normalmente seria necessário reiniciar o programa. Felizmente, o Alice também pode executar procedimentos em um loop. Para fazer isso, feche a janela de pré-visualização e siga até os Control tiles no canto inferior direito, onde Alice oculta alguns movimentos especiais. No editor, arraste para uma posição acima de todos os procedimentos anteriores. O Alice indica isso com uma linha verde, onde insere a ação, se o usuário mover o cursor com o botão do mouse.

Figura 8 Esta cadeia de comandos vira o peixe, o deixa nadar para a direita, depois para a esquerda, e depois em direção ao usuário.
Figura 8 Esta cadeia de comandos vira o peixe, o deixa nadar para a direita, depois para a esquerda, e depois em direção ao usuário.

A partir do menu drop-down, selecione True (examinaremos isso mais adiante). Mova todos os procedimentos existentes para uma posição entre while e loop. O resultado deve ser como o exibido na figura 9. Definimos um loop infinito: enquanto o valor true é igual a true (ou seja, sempre) Alice irá realizar todos os procedimentos até o loop. Dessa maneira, o Nemo nadará indefinidamente para frente e para trás. Podemos verificar isso pressionando Run. Para interromper o programa, basta fechar a janela.

Futuro

A condição de teste próxima ao while é obviamente trivial. Em vez disso, podemos definir uma condição mais complexa para comunicar ao Nemo que deve começar a nadar somente se outro peixe colidir com ele. As funções são especialmente úteis na elaboração de uma condição de teste; os encontraremos em uma guia no painel esquerdo. As funções retornam valores como a localização do Nemo, tamanho ou cor.

 

Figura 9 O loop while permite que os peixes nadem para frente e para trás em um padrão infinito e predeterminado de movimento.
Figura 9 O loop while permite que os peixes nadem para frente e para trás em um padrão infinito e predeterminado de movimento.

Quando passamos o mouse sobre uma das funções, Alice marca locais no editor onde podemos usá-los. Assim como o Nemo, os outros objetos no mundo 3D também têm procedimentos e funções. Alice enumera-os se clicarmos sobre eles na cena, ou se os selecionarmos na lista drop-down de grandes dimensões abaixo da pré-visualização. Finalmente, observe que Nemo é composto por várias partes que podemos mover ou manipular independentemente uma da outra. Se quiser que o peixe agite a cauda, selecione this.Nemo na grande lista drop-down, e depois passe para o pequeno triângulo e selecione this.Nemo.getTail. Todos os procedimentos e funções exibidos na lista referem-se apenas à cauda. Desta forma, podemos animar a cauda durante o mergulho.

Conclusão

Programação não é tão difícil. Com Alice, alguns cliques do mouse são o suficiente para deixar um peixe nadar no mar. Esta animação simples apenas arranha a superfície das possibilidades do ambiente de desenvolvimento. Se o usuário gostou de trabalhar com Alice até agora, pode simplesmente experimentar outros procedimentos e funções. Pode aguardar por um fim de semana chuvoso, ou de folga para a experimentação: o Alice é viciante e o tempo voa quando estamos nos divertindo com ele. Uma visão geral da interface do usuário é fornecida pela ajuda online2, os guias detalhados, screencasts do “Alice 3.1 curriculum resources”3, e vários livros que fazem referência ao Alice 24.

Mais informações

  1. Alice: http://www.alice.org
  2. Alice online help: http://help.alice.org/w/page/57584293/Getting%20Started%20with%20Alice%203_1
  3. Alice 3.1 Curriculum Resources: http://www.alice.org/index.php?page=3.1/download_materials
  4. Livros sobre Alice 2: http://www.alice.org/index.php?page=documentation

***

Artigo publicado originalmente na Lixuz Magazine: http://www.linuxmag.com.br/lm/article_online/procurando_nemo