Importando e Usando Animações

Com o hyperPad, você pode criar objetos com animações personalizadas. Você tem duas opções quando se trata de animações. Você pode importar animações como quadros individuais ou uma folha de sprite completa.

Quadros Individuais:

Você pode criar um ciclo de animação importando uma sequência de imagens de quadros individuais.

Para começar, você deve importar seu primeiro quadro ou uma imagem para representar seu objeto da "Biblioteca de Recursos" (veja Importando Recursos). Uma vez que você tenha importado seu objeto, toque e segure seu dedo no objeto ao qual você deseja adicionar animações, isso abrirá o Menu de Recursos.

No Menu de Recursos, selecione "Adicionar Animação", isso aparecerá com a opção de importar da Rolagem da Câmera ou do Dropbox. Veja "Importando Recursos" para mais detalhes sobre essas opções.

Uma vez que você tenha selecionado sua fonte de importação desejada, você pode selecionar todos os quadros da animação, então toque em "Pronto" no canto superior direito para continuar importando esses quadros.

Você será solicitado a inserir um nome para o ciclo de animação.

Uma vez que você tenha inserido o nome do ciclo, o hyperPad criará uma folha de sprite com todos os ciclos de animação para aquele recurso (incluindo o gráfico original do recurso). Tenha em mente que o hyperPad só gerará uma folha de sprite com uma resolução máxima de 2048x2048 pixels. Isso significa que o tamanho total de cada quadro importado (incluindo o recurso original) não pode exceder o tamanho máximo da folha de sprite.

Se você está lidando com imagens maiores, muitos quadros de animação, ou ambos, você provavelmente vai encontrar um erro dizendo que você excedeu o tamanho máximo da folha de sprite. Se você está determinado a usar gráficos tão grandes, então existem algumas maneiras de contornar isso.

1. Divida suas sequências de animação entre múltiplos objetos. Cada um acabará tendo sua própria folha de sprite de 2048x2048. Portanto, tenha um objeto "andar", tenha um objeto "pular", etc. Onde cada objeto armazena o ciclo de animação (ou múltiplos ciclos). Dessa forma, você gera múltiplas folhas de sprite de 2048x2048.

2. Não os importe como ciclos de animação. Simplesmente importem cada quadro de animação como sua própria imagem. Então use o comportamento Reproduzir Animação e adicione cada quadro manualmente à linha do tempo da animação nas propriedades do comportamento.

Folhas de Sprite:

Você pode criar folhas de sprite personalizadas e importá-las para o hyperPad vinculando seu projeto ao Dropbox. Para saber mais sobre como vincular seu projeto ao Dropbox, veja "Importando Recursos".

Para criar folhas de sprite personalizadas, você pode usar qualquer ferramenta que seja capaz de criar uma folha de sprite compatível com "Cocos2D". Todas as folhas de sprite devem ter um arquivo PLIST pareado contendo os metadados da folha de sprite. Você pode ver o artigo de ajuda "Tipos de Recursos Suportados" para aprender mais sobre folhas de sprite compatíveis.

Visualizando Animações:

Se seu recurso tem animações, ele será rotulado na "Biblioteca de Recursos" como um recurso "Animado".

Para visualizar as animações de um recurso, abra o "Menu de Recursos" tocando e segurando o dedo no recurso animado e selecione "Visualizar Animações".

A partir daqui, você pode abrir novamente o "Menu de Recursos" e selecionar "Pré-visualizar Animação". A janela pop-up irá reproduzir a animação e também mostrar informações úteis.

Se você tocar e segurar o dedo em um ciclo de animação, isso abrirá o Menu de Recursos permitindo que você veja os quadros individuais para aquele ciclo.

Usando Animações:

Você pode adicionar um recurso animado diretamente na tela, ou usar o comportamento "Reproduzir Animação" para executar uma animação sob demanda.

Para adicionar um recurso animado diretamente na tela, abra a "Biblioteca de Recursos" e visualize as animações do recurso animado. Se você selecionar um ciclo de animação, ele será adicionado ao "Dock", permitindo que você o arraste diretamente para sua cena.

Quando você adiciona um ciclo de animação à tela, ele criará um objeto e automaticamente adicionará o comportamento "Reproduzir Animação" a ele. Se você precisar alterar as configurações de reprodução da animação para esse objeto, você pode fazê-lo a partir dos comportamentos do objeto.

Usando o Comportamento "Reproduzir Animação":

Se você precisar reproduzir uma animação em um evento, como quando um usuário pressiona um botão ou move um joystick, então pode usar o comportamento "Reproduzir Animação".

Comece adicionando um recurso animado à tela. Em seguida, selecione o objeto e abra o "Editor de Comportamento" a partir das "Propriedades do Objeto".

Neste exemplo, faremos o objeto reproduzir uma animação quando for pressionado. Comece adicionando o comportamento "Iniciado ao Tocar".

Em seguida, adicione o comportamento "Reproduzir Animação" da categoria FX, e conecte-o ao comportamento "Iniciado ao Tocar" que você adicionou anteriormente.

Uma vez conectado, toque no comportamento "Reproduzir Animação" para visualizar as "Propriedades do Comportamento". Nas propriedades do comportamento, você pode alterar qual objeto animar, qual animação reproduzir, e outros parâmetros que afetam a reprodução das animações.

Nas propriedades do comportamento, toque na caixa rotulada "Selecionar Animação". Isso abrirá a linha do tempo da animação, permitindo que você adicione quadros ou um ciclo de animação.

Para adicionar animações à linha do tempo, você pode tocar no ícone da "Biblioteca de Recursos" para abrir a biblioteca de recursos. Qualquer ativo gráfico que você tocar será automaticamente selecionado e adicionado à linha do tempo.

Se você quiser adicionar um ciclo de animação, pressione e segure um recurso animado para abrir o "Menu de Recursos". No Menu de Recursos, selecione "Visualizar Animações". A Biblioteca de Recursos agora mostrará todos os ciclos de animação que você adicionou anteriormente ao recurso. Tocar em um ciclo adicionará à linha do tempo.

Uma vez que você tenha terminado de adicionar animações à linha do tempo, pode tocar na tela do comportamento para fechar a linha do tempo e retornar ao editor de comportamento.

Se você pressionar "Reproduzir", o objeto animará apenas quando você tocá-lo.