AI - Journey of a Waterdrop (Difficulty: 1)

[info-creaticode]

Introduction

 
With the AI image generation tools in the CreatiCode playground, it is much easier now to create stories using customized costumes and backdrops. In this tutorial, you will learn how to build a simple animation about the life of a waterdrop:

 
 

Step 1 - Create a new project

 

Go to the CreatiCode playground, and create a new project. Name it “Journey of a waterdrop”, and remove the existing sprites.

 
 

Step 2 - Add the waterdrop sprite

 

Click the AI button for searching or generating sprite images:

 
In the library window that pops up, input a short description of how you want the waterdrop to look like, such as “a waterdrop character facing the viewer, cartoon style”. Then click the “generate” button to generate a new sprite image like this:

 
Feel free to regenerate the image, or improve your description. When you are happy with the image, select it so it is added to your project.

Note that if you want the waterdrop to look perfect, you might need to remove the shadow under it. You can use the eraser tool in the costume editor for that:

 
 

Step 3 - Generate an ocean backdrop

 

The first backdrop will be an ocean. You can open the AI tool for searching or generating the backdrops, then generate a new backdrop with a description like this: surface of a large ocean, cartoon style. You will get a backdrop like this:

 
If you are happy with it, select it to add it as a backdrop of the stage. You can also change its name to “Ocean” to keep it simple:

 
 

Step 4 - Add code to show the ocean backdrop

 

Now switch to the waterdrop sprite, and add the following code, which will show the ocean backdrop when the user clicks the green flag button:

 
 

Step 5 - Say a sentence

 

Next, we will make the waterdrop sprite explain this scene by saying a sentence like this: I’m a waterdrop in a big ocean.

We can use the new “say” block with colorful text and background:

 
Now, this is what we get when we click the green flag button:

 
 

Step 6 - Add a cloud backdrop

 

For the next scene, we will show some clouds. Generate a new backdrop using a description like this: a few clouds in the sky, cartoon style. The backdrop will look like this:

 
Select this new backdrop, and rename it to “Cloud”.

 
 

Step 7 - Add code to show the cloud

 

Now we can add more code to show and explain the second backdrop, with a description like this: When it is warn, I rise into the clouds.

 
Now we get this when we run the project:

 
 

Step 8 - Add “Rain” and “River” backdrops

 

Next, try to generate 2 more backdrops using these descriptions:

• some light rain over a lake, cartoon style
• a river flows into the ocean, cartoon style

Remember to rename these backdrops as “Rain” and “River”.

 
 

Step 9 - Add code to show and explain “Rain” and “River”

 

Similar to earlier steps, we can make the waterdrop explain these 2 scenes like this:

 
That completes this program, with 4 backdrops in total.

 
 

Creative Ideas

 

This tutorial shows you a simple way to utilize the new AI image generation tools to create new stories and illustrations. Please try to create a similar program. Here are some suggestions:

• Story of a tree: show a tree over backdrops of a sunny day, a cloudy day, a rainy day and a snowy day, explain how the weather affects the tree.

• Tour of the Solar System: show a spaceship over a few backdrops of planets, such as Earth, Mars, Saturn, etc. Explains what’s unique about each planet.

• Voyage of Magellan: show a ship sprite over a few backdrops of key locations that Magellan visited, such as a port in Spain, then a tropical Island in Guam, and the philippine shoreline.