Global Moderators

Please keep your posts appropriate and directly related to coding, otherwise your accounts may be deleted.

@sherry-hall-esc15

Please discuss this by directly replying to that tutorial.

Thanks

In the previous tutorial, you learned how to search AI-generated backdrops or generate your own. In this tutorial, you can follow some simple steps to learn a similar but more powerful tool for generating sprite costumes.

Note that strong moderation is applied to ensure all the images are appropriate for K-12 students. If any user tries to generate an inappropriate image, the request will be rejected. Please use this powerful tool responsibly. In addition, CreatiCode has the right to remove any inappropriate image from the library without the creator’s approval.

 

Step 1 - Open the AI Image Library Window

 
To get started, hover the mouse pointer over the circular button at the bottom right of the playground for adding sprites, and then select the “AI” option:

 
 

Step 2 - Search for a backdrop image from the community

 

Before generating a new sprite costume, you should first search among the existing sprite images generated by the community. This is much faster than generating new images by yourself.

Note that there are 2 different models for generating sprites:

• Human: this option should be selected when searching or generating human-like characters, or any character with hands/legs/eys/mouth etc.
• Non-Human: this option should be selected for all other types of objects, such as chairs, cars, animals, etc.

For example, you can input “a boy in blue shirt” into the text box, select the “Human” option, then click the “Search” button. The system will display some existing sprite images that are most related to “a boy in blue shirt”. You can then click on any one of them to add it to your project:

 
For another example, you can search for “a red car”, and make sure to select “Non-Human”:

 
You might notice that some of the images are not for cars, such as the “red fox”. This is because the “Search” button will search images by their descriptions, so the red fox is treated as somewhat related to the red car, as they are both red. Of course, the true red cars are ranked higher in the result list.

 
 

Step 3 - Refine Your Query

 

When there are many related images, you can refine your query to narrow down the list. For example, when we search for “a boy in blue shirt”, several images are for boys with golden hair. If we add “black hair” to our query, then the top results are all for boys with blue shirt and black hair:

 
 

Step 4 - Search by Name

 

As explained above, the “Search” button searches by the description of the images. For example, when we search for “a boy in blue shirt” earlier, the result images may have different names.

Another way to search is to try to match the image name with keywords directly. This is especially useful if you already know the name of the image you are looking for. For example, if you only want images with names that contain “captain hook”, you can do so using the “Search by Name” button:

 
 

Step 5 - Generate Your Own Sprite

 

If you can’t find the sprite you need, you can use the “Generate” button to create a new sprite. Note that it is critical that you give a more detailed description of the sprite, and don’t just use one or two words.

For example, suppose you need a boy in blue shirt that’s waving a hand, you may not find it in the existing library. You can set the description as “a boy, blue shirt, waving hand to viewer”, then click the “Generate” button. You won’t need to specify “Human” or “Non-human”, as our model will determine its type based on your description. After some waiting, the new sprite will be displayed:

 
For another example, suppose we need a red car for a new game project, but none of the existing red cars are horizontal, then we can generate a new one using this description: “a red car, facing right, game icon”:

 
Note that you can provide more details in your description, and our AI model will try to incorporate all of them into the image. For example, here is a more detailed description for the boy: a boy in blue shirt, yellow jeans, black shoes, short hair, south asian, dark skin. Here is the result:

 
 

Step 6 - Search for Images Generated by You

 

Since all your generations are shared with the community, you can search for images generated by you in the same way:

 
However, if you are only looking for images generated by you, you can select the “Created by me” option, and only your images will be searched:

 
 

Step 7 - Regenerate Your Images

 

If you are not happy with an image you have generated, you can generate another image using a different description, or you can simply “regenerate” this image: the same description will be used, but a different random “seed” will be used, so the new image will be different. This is most useful when you believe your description is fine but the AI model is not working well.

For example, an image is generated for “a small school bus”, but the result is not great. As shown below, when you click “regenerate” and confirm, the existing image will be deleted. After some time, you can search for your images again, and you will find the newly generated image:

 
 

Step 8 - Refine Your Image Description

 

Although the current sprite generation models can already generate beautiful and interesting images, they are still far from perfect. They sometimes fail to understand the request or miss critical details. Therefore, we often have to refine our description and regenerate the image multiple times.

Below are some useful tips on how to make the sprite AI model understand our descriptions better:

• Use a few short phrases: our current image generation models can not understand complex sentences well, and they are mostly trained with requests composed of short keywords. For example, instead of saying “draw a boy wearing a blue shirt, who is waving a hand to us”, a better format is “a boy, blue shirt, waving hand to viewer”.

• Use parentheses to emphasize key phrases: When there are certain requirements that you want to emphasize, you can wrap them using ( ). For example, suppose you are using this description: “a boy, blue shirt, waving a hand to viewer”. However, the generated images often fail to make the boy wave a hand. Then you can add a pair of ( ) like this: “a boy, blue shirt, (waving a hand to viewer)”. You can even add multiple nested ( ) like this to assign more weight to the phrase: “a boy, blue shirt, (((waving a hand to viewer)))”.

• Learn from examples: When you find any image you like from the community library, you can find out what description was used to generate that image when you hover the mouse pointer over the name of that image. Over time, you will find out which keywords can be used to achieve a certain result:

 
 

Step 9 - Delete Your Image

 

If you are not happy with an image you have generated, you can also delete it from the library:

 
 

Step 10 - Check Image Generation Request Status

 

Unlike generating backdrop images, the process of generating sprite images is much slower, and there are also many more requests. Therefore, your request may be queued behind other users’ requests. In addition, sometimes, the image generated may have issues and be removed. For example, it might be inappropriate, or it might be blurry or malformed.

Therefore, to find out the progress of your requests, you can click the “Request Status” button, which will display a list of the most recent requests from you. You can review their description, image name, creation time and current status. In addition, if you want to cancel a queued request, you can click the “cancel” button:

 
 

Subscription vs Free Accounts

 

The AI-based sprite generation tool is freely available to all users. However, for users with a subscription, there are some advantages:

1. The premium users have a much shorter waiting time when there are many requests in the queue.
2. In times of high demand, free users may be subject to a rate limit on how many images they can generate every hour.

 
 

Advanced Topic 1 - Different Generation Styles

 

So far, you have learned the basic operations to work with AI-generated sprites. One additional technique you might want to explore is to specify different styles when you generate an image.

By default, a 2D cartoon-like style will be used to generate the backdrop. However, you can specify any other style in your description. There are tons of interesting styles, and below are some interesting examples you can try:

 

- 2D Flat Drawing

Description: a blue airplane, 2D flat drawing
 

 

Description: a princess in a pink dress, looking at viewer, 2D flat drawing
 

 

- Stylized Cartoon Drawing

Description: a blue airplane, stylized cartoon drawing
 

Description: a princess in a pink dress, looking at viewer, stylized cartoon drawing
 

 

- 3D Cartoon Style

Description: a blue airplane, 3D cartoon style

Description: a princess in a pink dress, looking at viewer, 3D cartoon style
 

 

- Minecraft Style

Description: a blue airplane, Minecraft style
 

Description: a princess in a pink dress, looking at viewer, square head, Minecraft game character
 

 

- Low Poly Style

Description: a blue airplane, low poly style
 

Description: a princess in a pink dress, looking at viewer, low poly style
 

 

- Play-doh Style

Description: a blue airplane, play-doh style
 

Description: a princess in a pink dress, looking at viewer, play-doh style
 

 

- Realistic Photo

Description: a blue airplane, realistic photo
 

Description: a princess in a pink dress, looking at viewer, realistic photo
 

 

- Comic Book Style

Description: a blue airplane, comic book style
 

Description: a princess in a pink dress, looking at viewer, comic book style
 

 

- Retro Game Style

Description: a blue airplane, retro-game style
 

Description: a princess in a pink dress, looking at viewer, retro-game style
 

 

- Steampunk Style

Description: a blue airplane, steampunk style
 

Description: a princess in a pink dress, looking at viewer, steampunk style
 

 
 

Advanced Topic 2 - Animation Using Variations

 

In Scratch, the same sprite may have multiple costumes, which allows us to create animations. This can be achieved by creating “variations” of an existing image. The idea is to select an existing image as a “reference”, and then ask the AI tool to generate a new image by modifying this reference image.

To use this feature, search for an image you would like to modify, and check the checkbox under it that says “use as reference”. After this, a new button for “Generate Variation” will appear:

 
After that, describe how you would like to modify this image, such as “make the boy do thumb up”, and then press the “Generate Variation” button:

 
After a while, the newly generated image will appear, with the requested change:

 
For another example, here is a bottle of green potion that can serve as the reference:

 
We can describe the change as “change the potion color to purple”, then click “Generate Variation”. The result image looks like this:

 
Note that the new person or object may not look exactly the same as the original one, but they should be very similar. Also, the AI tool may not be able to make the change exactly the way you request. You may need to try multiple times or change how you describe the change.

 
 

Advanced Topic 3 - Weapons as Game Assets

 

By default, you can not create any image that is related to violence. For example, if you try to generate an image of a tank, you will get an error message like this:
 

 

However, we often need weapon sprites in games, such as tanks or swords. Therefore, one exception is made if you include the keyword game asset in your request. For example, if your request is “a tank, game asset”, then it will not be rejected by the reviewing process:

 

In the standard MIT Scratch playground, there are only about 85 backdrops you can choose from, which significantly limits the kinds of projects you can create, especially for story-telling projects.

To fully unleash your creativity, the CreatiCode playground features an AI-based image generator. You can describe the backdrop you need and then use AI to generate it. You can also search among a huge number of backdrops generated by other users in the community.

Note that strong moderation is applied to ensure all the images are appropriate for K-12 students. If any user tries to generate an inappropriate image, the request will be rejected. Please use this powerful tool responsibly. In addition, CreatiCode has the right to remove any inappropriate image from the library without the creator’s approval.

In this tutorial, please follow a few simple steps to learn how to use AI for backdrop images.

 

Step 1 - Open the AI Image Library Window

 
To get started, hover the mouse pointer over the circular button at the bottom right of the playground, and then select the “AI” option:

 

 
 

Step 2 - Search for a backdrop image from the community

 

Before generating a new backdrop, you should first search among the existing backdrops generated by the community. This is much faster than generating new images yourself.

For example, you can input “parking lot” into the text box, then click the “Search” button, then the system will display some existing backdrops that are most related to “parking lot” based on their descriptions. You can then click on any one of them to add it to your project:

 
 

Step 3 - Refine Your Query

 

When there are many related images, you can refine your query to narrow down the list. For example, suppose we need a parking lot backdrop as a dark background, we can change our query to “parking lot dark”, and we will get images that are mostly showing a dark parking lot:

 
 

Step 4 - Search by Name

 

As explained above, the “Search” button searches by the description of the images. For example, when we search for “parking lot” earlier, one of the result images is named “neon cinema street life”. Althought this name doesn’t say “parking lot” at all, it contains a parking lot.

 
Sometimes, if you already know the exact name of the backdrop you are looking for, you can use the “Search by Name” button instead. For example, if we still search for “parking lot”, but use the “Search by Name” button, then all the result images will contain “parking lot” in their names:

 
 

Step 5 - Generate Your Own Backdrop

 

In case you can’t find the backdrop you need, then you can use the “Generate” button to create a new backdrop. Note that it is critical that you give a more detailed description of the backdrop you need, and don’t just use one or two words.

For example, suppose you need a large and empty parking lot, but none of the existing backdrops from the community fits this description. You can type in the description “a large and empty parking lot”, then click the “Generate” button. After a short waiting time, the new backdrop will be displayed:

 
Note that all backdrop images you generate are shared with the community. Anyone using the CreatiCode platform can use them. However, they can NOT be used outside the CreatiCode platform.

 
In addition, your description should be for a background image. It will not work well if you try to generate images of objects or people. You can use the AI generator for sprites instead.

 
 

Step 6 - Search for Backdrops Generated by You

 

Since all your generations are shared with the community, you can search for images generated by you in the same way:

 
However, if you are only looking for images generated by you, you can select the “Created by me” option, and only your images will be searched:

 
 

Step 7 - Regenerate Your Image

 

If you are not happy with an image you have generated, you can generate a new image with a different description, or you can simply “regenerate” this image: the same description will be used, but a different random “seed” will be used, so the new image will be different.

As shown below, when you click “regenerate”, the existing image will be deleted. After some time, you can search for your images again, and you will find the newly generated image:

 
 

Step 8 - Refine Your Description

 

Image generation is a random process, and it often takes a few iterations to refine your description. Usually, the image generation model can “understand” what you need, so you should include important details in your description.

For example, suppose you need an icecream truck in the parking lot, you can modify the description to this: “a large and empty parking lot, with an icecream truck at the center”. Here is what you will get:

 
Now, suppose we want to add some kids waiting to buy the ice cream, and we change the description to this: “a large and empty parking lot, with an icecream truck at the center, with a few kids waiting”. The updated image will look like this:

 
As you can see, when we add more details, the image generator will try to include them in the image, but it might fail, so we need to regenerate the image or change the description repeatedly.

Although the current backdrop generation model can already generate beautiful and interesting images, it is still far from perfect. It sometimes fails to understand the request or misses critical details. Therefore, we must refine our description and regenerate the image multiple times patiently.

 
 

Step 9 - Delete Your Image

 

If you are not happy with an image you have generated, you can also delete it from the library:

 
 

Subscription vs Free Accounts

 

The AI-based backdrop generation tool is freely available to all users. However, for users with a subscription, there are some advantages:

1. The premium users have a shorter waiting time when generating each backdrop.
2. The images generated by premium users have more details and more accurately follow the description.
3. In times of high demand, free users may be subject to a rate limit on how many images they can generate every hour.

 
 

Advanced Topic - Different Generation Styles

 

So far, you have learned the basic operations to work with AI-generated backdrops. One additional technique you might want to explore is to specify different styles when you generate an image.

By default, a 2D cartoon-like style will be used to generate the backdrop. However, you can specify any other style in your description. There are tons of interesting styles, and below are some interesting examples you can try:

 

3D Cartoon

Description: a large and empty parking lot, 3D cartoon style

 

3D Isometric

Description: a large and empty parking lot, 3D isometric

 

Minecraft Style

Description: a large and empty parking lot, Minecraft Style

 

Comic Book Style

Description: a large and empty parking lot, comic book style

 

Retro-futuristic

Description: a large and empty parking lot, retro-futuristic

 

Play-doh Style

Description: a large and empty parking lot, play-doh style

 

Van Gogh Style (or any other artist you like)

Description: a large and empty parking lot, Van Gogh style

 

Line drawing, no color

Description: a large and empty parking lot, line drawing, no color

 

Fantasy Art

Description: a large and empty parking lot, fantasy art

 

Realistic Photo

Description: a large and empty parking lot, realistic photo

 

Advertising Poster Style

Description: a large and empty parking lot, advertising poster style

 

Watercolor

Description: a large and empty parking lot, watercolor

@thebrickmaster626-f522560b

We can see the issue. Will post a fix soon. Thanks for the feedback.

@thebrickmaster626-f522560b

Can you explain what kind of joystick? Do you have an example or a picture?

@golligav000-5c0727bb

Noted. Thank you for the feedback and suggestions. As you know, our main target users are K-12 students learning coding and AI, so we will prioritize features that support this objective.

@henry-davey-9669d534

which block are you referring to?