The game file to import and load for this session is 5961_05_02.stencyl.
Before proceeding with the following steps, we must ensure that we have downloaded the file 5691_05_06_blinking_statue_sheet.png from this book's download page on the Packt Publishing web site at www.packtpub.com, and have saved it into a folder on our hard disk so that we can easily locate it when required:
- Open the Stencyl Book Statue actor in the Animation Editor so that we can see the single animation of the statue.
- Click on the Create Animation button, represented by the + (plus) symbol, at the bottom of the Animations panel.
- In the Animations panel, click on the red warning triangle icon for the new
Animation 1. - In the main panel, in the Properties section, change the animation's name to
Blinking Statue. - Ensure that the Looping? option has a check mark in the box.
- Leave all the other animation settings as they are.
- In the Frames section of the main panel, click on the Click here to add a frame icon to display the Import Frames from Image Strip dialog box.
- Ensure that the Scale option at the upper center of the dialog box is set to Standard (1x).
- Click on the Choose Image… button.
- Locate the image file
5691_05_blinking_statue_sheet.pngthat we downloaded and saved at the start of this session, and double-click on it to open it. - Change the Columns setting to
8, and ensure that Rows is currently set to1. - Click on the Add button to complete the import.
- In the left-hand panel, click on the icon for
Animation 0. - Click on the Remove Animation button at the bottom of the Animations panel.
- Test the game; watch the statues blink!
We have imported a sprite sheet containing a series of frames for our statue's animation, and when we tested the game, we should have seen that our statue repeatedly opened and closed its eyes very quickly.
The animation doesn't look quite right yet, but we'll be making some adjustments to the frame durations in the next section, Time for action – modifying the animation's frame durations.
Our first step was to create a new empty animation in the Animation Editor, but because there were no frames, a default warning triangle was used as the icon for the new animation. Once the new animation had been created, we renamed it, and we also ensured that the Looping? option was checked, so that the animation will repeatedly display all the frames for the statue.
We then moved on to importing the image strip into the Animation Editor — it was important at this point to ensure that we had the Scale option set to Standard (1x), so that Stencyl did not attempt to rescale the image. In the Import Frames from Image Strip dialogue box, we set Columns to 8 and checked that Rows was set to 1. We chose these numbers because our image strip is configured with eight images horizontally, but only one row. It is possible to import image strips that are configured as a grid with multiple rows and columns; we just have to enter the correct information when importing the image strip!
If necessary, we could also have changed the X Spacing, Y Spacing, X Border, and Y Border settings in the dialog box, depending on how the individual images were presented in the graphics file; for example, some image strips include gaps or borders around each frame, which need to be removed prior to use in Stencyl's Animation Editor.
Finally, after confirming the new animation's settings, we removed the old statue animation named Animation 0 because we no longer needed it. Note that our new Blinking Statue animation is now the default animation for the statue actor; when there is only a single animation, it is always the default.
We can now clearly see the eight statue images that have been combined to create the blinking animation of the statue!
Note
The author's Blinking Statue image strip is based on an original image created by Vicki Wenderlich of www.vickiwenderlich.com, made available under the Creative Commons Attribution license.