computadores

Jogo de cores simples no Hype Pro

Junho 2022

Jogo de cores simples no Hype Pro


Neste tutorial, criaremos um jogo de colorir simples para o autor do iBooks no Hype Pro. Existem muitos jogos interativos de desenho em HTML5, mas este é muito simples e projetado para os mais jovens.

Como a interatividade para bebês pequenos está basicamente tocando na tela, meu cliente queria que este jogo omitisse a opção de escolher cores. Ela só queria que uma cor fosse exibida quando o bebê tocasse na tela.

Para esse cliente, iniciamos uma imagem simples de um pato de brinquedo. Quando o jogo é carregado, a única cor na tela é o oval azul da água. Existem três áreas interativas, que são o corpo, o bico e a asa do pato. Quando o jogador toca em uma dessas áreas, o desenho da linha é preenchido com cores.

Existem pelo menos duas maneiras de programar isso. Ambos requerem duas imagens, uma arte de linha e um preenchimento de cor, para cada área interativa. Uma opção é usar HTML / CSS para alternar a imagem da arte de linha com a imagem de preenchimento colorido. Isso é muito semelhante ao efeito do botão de rolagem. Uma segunda opção é colocar a imagem da arte de linha em uma camada acima da imagem de preenchimento colorido e programar a imagem da arte de linha para desaparecer quando a área for clicada. Para o meu cliente, usei a segunda opção.

Iniciaremos um novo documento no Hype Pro. Como faremos este jogo para o iBooksR, vamos definir a predefinição de tamanho da tela como paisagem em tela cheia do iBooks.

Hierarquia de Camadas

Nosso jogo tem cinco camadas. A camada inferior contém a imagem finalizada com todas as áreas preenchidas com cores. Pode ser uma imagem .jpg, mas, como as outras imagens têm transparências, serão .pngs. Subindo, a próxima camada contém a linha artística do corpo do pato, incluindo o olho.

Temos duas áreas interativas que se sobrepõem, que são o corpo do pato e a asa. Como não podemos confiar em qual área será clicada primeiro, trataremos a asa como uma camada interativa separada. Na camada acima da linha artística do corpo do pato, precisamos colocar a imagem da asa de preenchimento colorido e, em seguida, colocaremos a imagem da asa da linha artística acima dessa camada. Finalmente, precisamos colocar a imagem do bico do pato na camada superior.

Usando o ícone Elementos na parte superior da área de trabalho, importaremos cada imagem e as colocaremos na tela. Aqui está a ordem da camada resultante na Linha do tempo principal no Hype Pro.

electric love (Junho 2022)



Tag Do Artigo: Jogo de cores simples no Hype Pro, Flash e Animação, Hype para o autor do iBooks, jogo de colorir Hype

Coração e alma

Coração e alma

família

Mensagens De Beleza Populares

Escolhendo um baralho de tarô

Escolhendo um baralho de tarô

religião e espiritualidade

Finalmente chega o amor

Finalmente chega o amor

livros e música

Fatos e Falácias de Anjos

Fatos e Falácias de Anjos

religião e espiritualidade