3a. Creating Custom Animations in Unity

This section will focus on importing already-made custom animations and sprites for the program. This is for those who haven't really used Unity before.

Before you start this section you will need:

• Sprites for your animation (they have to be 348x227 (518x389 if using the dark stream UI) or a size using that same ratio)
• Unity 2021.2.1f1 or Unity 2022.3.15f1 currently installed, depending on if the game is updated to or past the April 2024 patch or not.
• Knowing how to click buttons
• Knowing how to drag things using the mouse cursor

Opening Unity

First, open up a new project in Unity using the 2D Core on version 2021.2.1f1 (or open a pre-existing one if you have it already).

Your starting window should be this:

Creating The Animation Clip

After creating the project, go to the Game Object section on the Menu Strip, and click on UI > Image. A white square with a Canvas should now spawn on the hierarchy and in the scene. The game uses Images for its Animation Clips, so that's why we have to use an Image object rather than with something like Sprites.

(Note: The Image object would appear bigger than the screen, so either use the middle-wheel scroll or hold Alt & Right-click drag the mouse to zoom out the scene, or edit the Image object's width and height in the Properties menu.)

Next, right-click on the Assets area and click Create > Animation. An animation clip should now be included in your Assets. Turn on "Loop Time" if your animation is meant to be looped over and over.

Then, drag the Animation Clip asset to either the Image object on the scene or in the hierarchy, now when this happens, an Animation Controller will also spawn into your Assets, and the Animator property is added to your Image under Properties.

When double-clicking on the Animation Clip asset, it won't be editable until the Image object is also selected. Then, add a new property to the Animation: Image > Image.Sprite. You can add keyframes by inputting the frame number and pressing "Add Keyframe" (the diamond with the plus sign)

You now have a proper Animation Clip attached to the Image. Though, it's pretty useless without any Sprites attached to it.

Importing Sprites

Place the new Animation Clip (and the Controller if you want) in a new Folder, named the same as the name of your animation. Then rename the animation clip to the name of your animation. You can then drag your individual Sprite images (pngs, jpgs, etc) from the File Explorer into the Assets area, right into your newly created folder.

The properties of each sprite should match this:

Important

Make sure your Sprites contain the name of the Animation Clip, and does not contain the name of any existing animations in the game. This is important since the program searches for previews based on the Sprite's name in relation to the Animation Clip name. (i.e. Clip name: "stream_ame_dance", Sprite name: "stream_ame_dance1" or "stream_ame_dance_1").

Using Sprites In The Clip

You can now either edit existing keyframes or add new ones by dragging the selected sprite into the Keyframe Timeline. Now, when moving the timeline around, you might notice the image stretching the sprite. You can fix this by enabling "Preserve Aspect" in the Image's properties.

To preview your animation, press the Play button in the Animation window. Make sure to save when you feel like your animation is done!

Conclusion

This section only offers how to create animation clips in Unity for the purpose of using them to make custom streams in the Custom Stream Maker.

You can click here to know how to export them out of Unity.