Search or Generate Backdrop Images Using AI

CreatiCode

Introduction

The standard MIT Scratch playground only has about 85 backdrops, which can make it hard to create different kinds of projects, especially games and stories. Picking a picture that looks nice and matches the theme or idea of your story or game can make it much more fun and interesting for others to enjoy.

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:

Note that you can use AI to generate backdrop or sprite. The key difference is that a backdrop is always a rectangle image of the same size as the entire stage, while a sprite is a single character or object over a transparent background.

For this tutorial we will focus on backdrops. For generating sprites, please refer to this article.

You must consider whether you should generate a backdrop or a sprite first. For example, if it is a place like a room or a swimming pool, it is better to generate it as a backdrop; but if it is a single entity like a ball or a person, then you should use the sprite generation tool.

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

If you can’t find the backdrop you need, you can use the “Generate” button to create a new backdrop. Note that it is critical that you give a detailed description of the backdrop you need, and don’t just use one or two words. In general, it is strongly recommended to use at least 10 words in your description. This will force you to provide information on what kind of backdrop you are looking for.

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:

alt text

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:

alt text

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.

Hint: If you are having difficulty coming up with long descriptions, you can try to follow a simple 3-part prompt format: a PLACE that is DESCRIPTION, in STYLE

PLACE: this is the name of the place for the backdrop, since the backdrop is often a scene, such as a room, a street.
DESCRIPTION: gives as much as description as possible for this scene, such as whether it is empty, what’s its color theme, how big it is, what/who is in the scene, etc. For example, “a room with a big empty space and lots of books on the floor”.
STYLE: see the advanced topic below.

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:

Not just backgrounds

In MIT Scratch, all the backdrops are empty scenes that will only serve as the background, and we add additional sprites on top of them. However, we can also generate images with both the main character/object and the background using the AI tool in CreatiCode.

For example, you can try this prompt: a silver UFO with shining lights landing on a crowded street at evening

It gives us the following image:

alt text

Subscription vs Free Accounts

The AI-based backdrop generation tool is freely available to all users. However, in times of high demand, free users may be subject to a rate limit on how many images they can generate every hour.

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

alt text

Illustration

Sometimes cartoon style can be childish or overly simplistic, and you can try the “illustration” style for something more mature, artistic, or stylized.

Description: a large and empty parking lot, illustration style

alt text