Simple Color Game in Hype Pro
In this tutorial, we will build a simple coloring game for iBooks Author in Hype Pro. There are many HTML5 drawing interactive games but this one is very simple and designed for the very young.
As the interactivity for small babies is basically touching the screen, my client wanted this game to omit the option to choose colors. She just wanted a color to display when the baby touched the screen.
For this client, we started a simple image of a toy duck. When the game loads, the only color on the screen is the blue oval for the water. There are three interactive areas, which are the duck's body, beak and wing. When the player touches one of these areas the line drawing is filled with color.
There are at least two ways to program this. Both require two images, one line art and one color fill, for each interactive area. One option is to use HTML/CSS to switch the line art image with the color fill image. This is very similar to the rollover button effect. A second option is to place the line art image on a layer above the color fill image and program the line art image to disappear when the area is clicked. For my client, I used the second option.
We will start a new document in Hype Pro. As we will be making this game for iBooks AuthorR, let's set the Screen Size Preset to iBooks Fullscreen Landscape.
Layer Hierarchy
Our game has five layers. The bottom layer contains the finished image with all areas filled with color. This can be a .jpg image but, as the other images have transparencies, they will be .pngs. Moving upward, the next layer contains the line art for the duck's body, including the eye.
We have two interactive areas that overlay, which are the duck's body and the wing. Because we can't rely on which area will be clicked first, we will treat the wing as a separate interactive layer. On the layer above the line art of the duck's body, we need to place the color fill wing image and then we will place the line art wing image above that layer. Finally, we need to place the line art image of the duck's beak on the top layer.
Using the Elements icon at the top of the workspace, we will import each image and place them on the screen. Here is the resulting layer order in the Main Timeline in Hype Pro.
As the interactivity for small babies is basically touching the screen, my client wanted this game to omit the option to choose colors. She just wanted a color to display when the baby touched the screen.
For this client, we started a simple image of a toy duck. When the game loads, the only color on the screen is the blue oval for the water. There are three interactive areas, which are the duck's body, beak and wing. When the player touches one of these areas the line drawing is filled with color.
There are at least two ways to program this. Both require two images, one line art and one color fill, for each interactive area. One option is to use HTML/CSS to switch the line art image with the color fill image. This is very similar to the rollover button effect. A second option is to place the line art image on a layer above the color fill image and program the line art image to disappear when the area is clicked. For my client, I used the second option.
We will start a new document in Hype Pro. As we will be making this game for iBooks AuthorR, let's set the Screen Size Preset to iBooks Fullscreen Landscape.
Layer Hierarchy
Our game has five layers. The bottom layer contains the finished image with all areas filled with color. This can be a .jpg image but, as the other images have transparencies, they will be .pngs. Moving upward, the next layer contains the line art for the duck's body, including the eye.
We have two interactive areas that overlay, which are the duck's body and the wing. Because we can't rely on which area will be clicked first, we will treat the wing as a separate interactive layer. On the layer above the line art of the duck's body, we need to place the color fill wing image and then we will place the line art wing image above that layer. Finally, we need to place the line art image of the duck's beak on the top layer.
Using the Elements icon at the top of the workspace, we will import each image and place them on the screen. Here is the resulting layer order in the Main Timeline in Hype Pro.
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Follow @ArtAnimationTut
Tweet
Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.
