Animated Graphics for Games using Clip Studio Paint

Animated Graphics for Games using Clip Studio Paint | 3 of 3

12,399

Dadotronic

To conclude this three part series, I’ll show you how to take advantage of the File Object feature to speed up the animation process of multiple assets for your game, and how to export your graphics for use in a game engine.

In this prototype, all of the pieces of the puzzle share the same animation.

In the following steps, I’ll demonstrate an efficient way to accomplish this task.

Animating a Proxy object

First, let’s start by creating a proxy/template graphic that will later be replaced by the colorful graphics. I simply made a copy of the Red piece and converted it to Grey. The pieces of this puzzle are made of 2 parts: the cat and the block.

Export the graphics as a transparent PNG.

Now create a NEW DOCUMENT and use FILE - IMPORT - CREATE FILE OBJECT to place the exported graphics as File Objects.

Enable the Timeline panel and Create a NEW TIMELINE. As with the character, you can have different sequences of animation for the pieces. I’ll start with the IDLE animation loop.

Do not forget - to enable INTERPOLATION you have to select the Layer and and click on ENABLE KEYFRAMES ON THIS LAYER.

Using the same method I used earlier, I animated this loop that is played when the Player needs a hint. It’s basically a Squash and Stretch of the parts but on two slightly different speeds.

I’ll create a new TIMELINE to add another sequence of animation, this time a movement for when the Piece ‘explodes’ (or leaves the stage).

Below you can see the key progress of this animation:

I was able to animate the inner piece disappears using the Opacity property. When Opacity is animated, a half-diamond is shown below the keyframe.

I felt something was missing, so I add an extra layer and drew this ‘twist’ shape to be rotated with the cat graphic. Don’t forget to convert any new drawing to a FILE OBJECT before trying to animate with the Interpolation mode.

Below you can see the progress of this animation; the spinning graphic was changed to white and the outer piece had the opacity animated so the whole piece vanishes from the game scene.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Replacing the Graphics of the Animation

Ok. So if that’s our animation for this asset, how can we propagate it to all other graphics of the game?

Let me show you a simple method.

Let’s start by Exporting the remaining pieces that you’re going to replace the grey proxy object with. Those will be the different colors of the pieces (Red, Blue, Green and Yellow) I’ll have on the main stage of this puzzle, as seen below.

Now back to the file you create the animations in, SELECT the Layer of the piece you want to replace and choose FILE OBJECT - CHANGE FILE OF FILE OBJECT.

Locate the colored graphics for the inner part (cat) and the outer part (frame) - the graphics will be replaced AND the animations still works.

You just have to repeat the process for each colored piece.

Here’s all pieces replaced and ready for our game:

That’s it. As long you DON’T SAVE your source file (the one with the Grey graphics animated) you can use this as a template and replace the content with other graphics or variations you need while preserving the animation.

This technique can be used on games with multiple characters, eg.: you first create a template(proxy) figure, complete with each piece and animation you want in the game, and later you can add ‘skins’ to these graphics, applying the same animated loops.

Exporting the Animations

This is not mandatory, but I suggest that optimizing the images you’re going to export. A very important thing to do is to make sure the subject of the animation is confined on a ‘bounding box’, with no extra transparency (empty space) around.

A nice trick you can do is: create a SELECTION BOX around your graphic and move your animation timeline to check if there are any pixels outside the selection.

In the example below: the left image shows how the top of the head is outside the selection area; the right image shows how the sprite is within the selection area through the entire animation.

With the Selection still active, go to FILE - EXPORT ANIMATION and choose IMAGE SEQUENCE.

In the following Dialog Box, locate the folder to export the images and make sure to pay attention to these options:

Naming of the File: add a prefix for the name of your files;

-Select the PNG format to keep the transparency;

-In SIZE SETTINGS choose SELECTION AREA to export the images within the bounding box you created; (see note below about this option)

If needed, you can also resize your sprites from this screen;

//NOTE: the Size Settings - Selection Area option is only available on Clip Studio Paint EX version; if you have the Pro version you can just CROP the image to the right size before exporting. //

Done! Now you can load those images in your game engine.

Almost all game creation tool kits use image sequences as a way to display an animated character on the screen. This is the most common technique, but it’s nice to remember that optimization (this word again) is always preferred when it comes to game development.

In the next step I’ll show you how to use a Free standalone tool to create Sprite Sheets and Atlas Images.

Creating Atlas Images and SpriteSheets

In a Game Development scenario, Sprite Sheets and Atlas Images help reduce the processing power used to load an image in the system’s memory.

Instead of loading different PNGs to display the animation, you can provide a single image containing all the frames of the animation AND a data file with coordinates and information so the engine can ‘read’ the spritesheet and locate the specific images at the specific time.

The Atlas images are the same, but instead of frames of animation you’re just packing various graphics of a game on a single image.

Unfortunately there’s no easy (automatic) way to create a spritesheet or Atlas image using Clip Studio Paint.

For this example I’ll be using a tool called ‘Free Texture Packer’. It’s a free tool and there’s even an online version that can be used (link in the footnotes of this article).

Here’s a step by step in how to use it:

[ STEP 1.]

Open the program and load your images; you can also drag and drop to this (blue) area.

[ STEP 2.]

Once the images are loaded you can start adjusting the properties of your Sprite Sheet. YOU HAVE to talk with your Programmer or Lead Artist to get the details about how the assets are imported into the engine.

The most important options here are:

Width/Height are the size of your spritesheet/atlas; game engines usually work with maps of 256,512,1024,2048… the POWER OF TWO option needs to be checked most of the times, also FIXED SIZE if you need to force your textures to have the same size.

ALLOW ROTATION, ALLOW TRIM and TRIM MODE can be changed so you can fit more images inside the spritesheet. Trim and Rotation modes enabled is preferred with static images (atlas); for animations you are safer with those turned off so the sprites are aligned and have the same transparent space around it.

In my example below I choose to pack the Girl idle animation in a squared 2048x2048 texture.

To preview your animation inside the tool, select all the images on the right panel and click on the ANIMATIONS button. Use the slider to control the speed.

To finish the process, select the FORMAT of your data/coordinates file (this will be informed by your programmer and the engine you’re using), locate the Folder to save to, and click EXPORT.

The end result will be a texture map image and a data file (that can be opened on any text editor) - those need to have the same time.

Conclusion

Through the years I’ve been using Flash, Animate and most recently Spine to create those simple animations for prototypes and indie games but when Celsys added Interpolation as an Animation feature I finally saw a chance to simplify more of my workflow.

I hope this series was informative and that you can use any of these techniques to start your first game project.

It’s worth remembering that this type of animation workflow can be used to create assets for other types of projects: animated graphics for your Stream or Youtube channel, fun little gifs and memes for social media or even animation shorts using the cut-out style.

Please, if you create something after you read this article - let me know so I can promote your work on my feed.

Thanks for reading.

See you in the next Tip.