Importing and Using Animations

With hyperPad you can create objects with custom animations. You have two choices when it comes to animations. You can import animations as individual frames, or a complete sprite sheet.

Individual Frames:

You can create an animation cycle by importing  a sequence of individual frame images.

To start, you must import your first frame or an image to represent your object  from the "Asset Library" (See Importing Assets). Once you have imported your object, tap and hold your finger on the object you ant to add animations to, this will bring up the Asset Menu. 

From the Asset Menu select "Add Animation", this pops up with the option of importing from Camera Roll, or Dropbox. See "Importing Assets" for more details on these options.



Once you have selected your desired import source, you can select all the frames of the animation, then tap "Done" in the top right corner to continue importing these frames. 


You will then be asked to enter a name of the animation cycle.



Once you have entered the name of the cycle, hyperPad will create a sprite sheet with all of the animation cycles for that asset (including the original asset graphic). Keep in mind, that hyperPad will only generate a sprite sheet with a max resolution of 2048x2048 pixels. This means that the total size for every frame imported (including the original asset) can not exceed the max sprite sheet size.


If you're dealing with larger images, lots of animation frames, or both. You're probably going to run into an error saying you've exceeded the maximum sprite sheet size. If you're adamant on using such large graphics then there are a couple of ways around this.

1) Break up your animation sequences across multiple objects. Each will end up having their own 2048x2048 sprite sheet. So have a "walk" object, have a "Jump" object, etc. Where each object stores the animation cycle (or multiple cycles). This way you generate multiple 2048x2048 sprite sheets.

2) Don't import them as animation cycles. Simply import each animation frame as their own image. Then use the Play Animation behaviour and add each frame manually to the animation timeline in the behaviour properties.


Sprite Sheets:

You can create custom sprite sheets and import them into hyperPad by linking your project with Dropbox. To learn more about linking your project with Dropbox, see "Importing Assets".

To create custom sprite sheets, you can use any tool that is capable of creating a "Cocos2D" compatible sprite sheet. All sprite sheets must have a paired PLIST file containing the sprite sheet metadata. You can see the help article "Supported Asset Types" to learn more compatible sprite sheets.


Viewing Animations:

If your asset has animations, it will be labeled in the "Asset Library" as an "Animated" asset.


To preview an asset's animations, open the "Asset Menu" by tapping and holding your finger on the animated asset then select "View Animations".


 From here, you can bring up the "Asset Menu" again, and select "Preview Animation". The popup window will play the animation, and also show you useful information.



If you tap and hold your finger on an animation cycle, it will open the Asset Menu allowing you to view the individual frames for that cycle.


Using Animations:

You can add an animated asset right to the canvas, or use the "Play Animation" behavior to run an animation on demand. 

To add an animated asset directly on the canvas, launch the "Asset Library" and view the animated asset's animations. If you select an animation cycle, it will be added to the "Dock" allowing you to drag it right into your scene.

When you add an animation cycle to the canvas, it will create an object and automatically add the "Play Animation" behavior to it. If you need to change the animation playback settings for that object, you can do so from the Behaviors' of the object.


Using the "Play Animation" Behavior:

If you need to play an animation on an event, like when a user presses a button or moves a joystick, then you can use the "Play Animation" behavior.

Start by adding an animated asset to the canvas. Then select the object and launch the "Behavior Editor" from the "Object Properties".

In this example, we'll make the object play an animation when it is pressed. Start by adding the "Started Touching" behavior.

Next Add the "Play Animation" behavior from the FX category, and connect it to the "Started Touching" behavior you previously added.


Once it is connected, tap the "Play Animation" behavior to view the "Behavior Properties". From the behavior properties you can change which object to animate, what animation to play, and other various parameters that effect the animations playback.


In the behavior properties, tap on the box labeled "Select Animation". This will bring up the animation timeline, allowing you to add frames or an animation cycle.


To add animations to the timeline you can tap the "Asset Library" icon, to open the asset library. Any graphic asset you tap will automatically be selected and added to the timeline. 

If you want to add an animation cycle, press and hold on an animated asset to open the "Asset Menu". From the Asset Menu, select "View Animations". The Asset Library will now show you all the animation cycles you have previously added to the asset. Tapping a cycle will add it to the timeline.

Once you're finished adding animations to the timeline you can tap on the behaviour screen to close the timeline and return to the behaviour editor.

If you press "Play", the object will only animate once you touch it.




Article is closed for comments.