Navigation

    CreatiCode Scratch Forum

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • CreatiCode

    Search or Generate Sprite Images Using AI

    Tutorials
    2
    2
    25215
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • info-creaticode
      CreatiCode last edited by admin

      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.

      Note that you can use AI to generate a backdrop or a 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 sprites. For generating backdrops, please read this article.

       

      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:

      s1.gif

       
       

      Step 2 - Search for a sprite 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:

      s2.gif

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

      s4.gif

       
      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 shirts and black hair:

      s6.gif

       
       

      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:

      s7.gif

       
       

      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 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:

       
      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 sprite you are looking for.

       
       

      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:

      s92.gif

       
      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:

      s9.gif

       
       

      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:

      p3.gif

       
       

      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”.

      • 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:

      p3.gif

       
       

      Step 9 - Delete Your Image

       

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

      p3.gif

       
       

      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.

      You can specify any other style in your description. There are tons of interesting styles, and below are some interesting examples you can try:

       

      - Game Asset

       
      When you include the keyword “game asset” in your request, a special model will be used to generate cartoon-style sprites that can be used for game assets. This style is ideal for developing game projects.

      Description: a blue airplane, game asset
       
      airplane

       

      Description: a princess in a pink dress, looking at viewer, game asset
       
      pinkdress

       

      Description: a bomb, game asset
       

       
       

      - Ghibli Style

      Description: a blue airplane, Ghibli style
       

       

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

       
       

      - 2D Flat Drawing

      Description: a blue airplane, 2D flat drawing
       

       

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

       

      - Vector Art

      Description: a blue airplane, vector art
       

       

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

       

      - Anime Style

      Description: a blue airplane, anime style
       

       

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

       

      - Stylized Cartoon Drawing

      Description: a blue airplane, stylized cartoon drawing
       

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

       

      - Kawaii Style

      Description: a blue airplane, Kawaii style
       

       

      Description: a princess in a pink dress, looking at viewer, Kawaii Style
       

       

      - 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
       

       

      - Film Photography

      Description: a blue airplane, Kodak Portra 400, film photography
       

      Description: a princess in a pink dress, looking at viewer, Kodak Portra 400, film photography
       

       

      - Comic Book Style

      Description: a blue airplane, comic book style
       

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

       

      - Pixel Art Style

      Description: a blue airplane, pixel art style
       

      Description: a princess in a pink dress, looking at viewer, pixel art 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 - 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:
       
      11e2cac6-80ec-4c87-90be-43fa82fbfbb7-image.png

       

      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:

       

      63cf147a-d3e6-4d30-8b7d-3f8450c7a57a-image.png

       

      1 Reply Last reply Reply Quote 0
      • Pinned by  info-creaticode info-creaticode 
      • ThatsJustSix
        ThatsJustSix | Ham | last edited by

        This was helpful, thank you.

        1 Reply Last reply Reply Quote 0
        • Referenced by  F Forum Helper 
        • First post
          Last post