Creating Animated Assets Using Basic 3D Models and Spritesheets

The world of gaming and interactive media is ever-evolving, and one technique that has stood the test of time is the use of spritesheets.

Creating the Model and Animation Using Blender

Blender, a powerful open-source 3D modeling software, will be our tool of choice for this section. Here's how to get started:

1. Creating a Cylinder in Blender:

   • Open Blender and start a new project.
   • Delete the default cube by selecting it and pressing X.
   • From the top menu, select Add > Mesh > Cylinder.

2. Positioning the Cylinder:

   • Imagine the cylinder as a coin. Position it at the center of the screen.
   • Add a camera and adjust its position so that the cylinder fits perfectly within the frame.

3. Animating the Cylinder:

   • With the cylinder selected, press R to rotate, then Z to lock the rotation to the Z-axis.
   • Press I and choose Rotation to insert a keyframe at frame 0.
   • Move to frame 20, rotate the cylinder 360 degrees on the Z-axis, and insert another keyframe.
   • To ensure smooth animation, select all keyframes in the timeline, right-click, and choose Interpolation Mode > Linear.
   • Add a new keyframe every 5 frames.

4. Rendering the Animation:

   • Since the first and last frames are identical, render only the first 4 keyframes to create your spritesheet images.
     
     

Creating the Spritesheet

With your rendered images:

1. Open your preferred image editor.
2. Align the four images sequentially, as shown in the example image.
3. Ensure there's a clear contrast between the object (coin) and the background.
4. Save this aligned image; this will be your spritesheet.
   
   

Generating the Image in Scenario

Follow these steps to bring your spritesheet to life:

1. Visit app.scenario.com.
2. Click on "Generate Image" and select the "Cozy World Builder" generator.
3. Upload your spritesheet as a reference image.
4. In Composition Control, select Structure Mode
5. Use a prompt like:
   "spritesheet of a coin rotating, an RPG game item" 
   For variations, you can try:
   "spritesheet of a golden coin rotating, an RPG game item, star in the center"

Generating the Image in Scenario's Unity Plugin

Harness the power of Scenario directly within Unity using its dedicated plugin. Here's how to integrate and use your spritesheet within the Unity environment:

1. Setting Up Scenario's Unity Plugin:

   • If you haven't already, download and install the Scenario Unity Plugin from GitHub.
   • Open your Unity project and install the Scenario plugin; see our Installation guide here: Installing the unity plugin
   • Navigate to Window > Scenario to open the plugin's interface.
   

2. Uploading Your Spritesheet:

   • Within the Scenario plugin interface, locate the "Image to Image" section.

   • Click on "Choose Image" or "Drag and Drop" to add your reference image.

     

   • Check “Enable ControlNet” and “Advanced Settings”

   • Select “Canny” on the model 1 and set the slider to 1.

3. Generating the Image:

   • Select “Cozy World Builder” generator.

   • In the "Prompt" section, enter a description like "spritesheet of a coin rotating, an RPG game item."

     

   • For variations, you can input: "spritesheet of a golden coin rotating, an RPG game item, star in the center."

   • Bellow are the Image Settings

     

   • Adjust the Guidance slider, setting it to 9 or higher if you want the prompt to have more influence on the generated image.

4. Preview and Adjust:

   • Click on "Generate Image" to start the image creation process.
   • Once the image is generated, you can preview it directly within Unity.
   • If the result isn't as expected, tweak the prompt or Guidance settings and generate again.

5. Tips for Optimal Results

With Scenario's Unity Plugin, integrating AI-generated images into your game development workflow becomes seamless. This tool not only streamlines the asset creation process but also opens up a world of creative possibilities.

Animating Sprites in Unity

Creating animated sprites in Unity is a straightforward process that brings your 2D assets to life. Here's a step-by-step guide to help you animate your sprites using Unity's Sprite Editor and Animation tools:

1. Preparing the Image:

   • In the Unity editor, locate your image in the "Prompt Images" window.

   • Remove any background from the image to ensure only the sprite is visible. This can be done using image editing software or Unity's built-in tools, depending on the complexity of the background.

     

2. Accessing the Sprite Editor:

   • With the image selected in the Project panel, go to the Inspector window.
   • Ensure the image's Texture Type is set to "Sprite (2D and UI)".
   • Click on the "Sprite Editor" button. This will open the Sprite Editor window.

3. Slicing the Sprite:

   • In the Sprite Editor, click on the "Slice" button in the top left corner.
   • Choose the slicing method that best fits your spritesheet. For most spritesheets, "Automatic" or "Grid by Cell Size" will work well.
   • If using "Grid by Cell Size", specify the pixel size of each sprite.
   • Click "Slice" and Unity will automatically divide your spritesheet into individual sprites.

4. Creating an Animation:

   • Close the Sprite Editor.
   • In the Project panel, select all the sliced sprite images.
   • Drag and drop them into the Scene view. Unity will prompt you to create a new animation.
   • Name your animation and choose a save location.
   • Unity will automatically create an Animator and an Animation Controller for your sprite.

5. Editing the Animation:

   • Open the Animation window by navigating to Window > Animation > Animation.
   • With your sprite selected in the Scene view, you'll see the animation timeline in the Animation window.
   • Here, you can adjust the duration of each frame, reorder frames, or add new frames.
   • Play the animation using the play button in the Animation window to preview it.

6. Tips for Smooth Animation:

With these steps, you've transformed a static spritesheet into a dynamic animation within Unity. This foundational knowledge will serve as a springboard for more complex animations and interactions in your game development journey.

Other Examples

• Animated Chest Spritesheet: A basic model of a chest opening transformed into an animated spritesheet.

Prompt: "spritesheet of a treasure chest opening, intricate"  

Reference Image

• Animated Door Spritesheet: A model of a door opening, perfect for an animated spritesheet.

Prompt: "spritesheet, a door opening animation, several poses of the same object"  

Reference Image

Conclusion