Workflow: pixel art sprites with Scenario.com, Photoshop, and pixelicious.xyz — by @Vladerosh

Goal:

Workflow: produce pixel art sprites in one art style

Tools:

■ Character: scenario.com
■ Slice & animation: Photoshop
■ Pixel art stylization: pixelicious.xyz
■ Slice & animation: Photoshop

Step 1: Go to ChatGPT

Write what you want to get as an output. For example: Describe in details the type of Ogre you’d like for your RPG game, what he looks like, his build, what he is wearing, and what colors his clothes are.

Select the most appropriate outputs describing the Ogre and make a key query out of it. Example: A green skin ogre, is a massive brutish humanoid creature with a hulking muscular build.

From the text, delete the commas “,”. Make sure to add these keywords before the text description: full-body character, neutral pose.

Feel free to use big sentences in Scenario. For example, in one of the Ogre generation options, I used a 2000 characters Prompt — a detailed description of what an Ogre looks like.

Step 2: Setup Generator

Go to Scenario.com
On the Left Panel, Click Generate Images
Select the “Anime Portraits” Public Generator:



Copy a text Prompt, paste it into the Prompt field, and set it up like this example:

Step 3: Generate art

Press the button to Generate Images:



Generate 4–8 images:
Look at the interesting designs, and you can use the best-generated image for “Refine” and generate a new iteration. To do this, select the desired image — click on it and hit the settings button (three vertical lines) at the top left, after which a menu with the “Refine” button will appear:



Your next generation of images based on the previously generated image — will get more and more details from your Prompt
From the generated images, you can make your own base pictures — from which you can start the next generation.

If the Prompt does not give the desired result:

Separate each word with commas and strengthen the desired keyword with brackets ((( ))), and weaken unnecessary keywords with squared brackets [[[ ]]]
You can use Negative Prompt — to exclude keywords.
Change Prompt keywords — specify what exactly you want to see.
Change the Influence of the picture in the “image to image” field.
If you did not get outputs that meet your expectations, you can change the “image to image” picture.

Go to the next Prompt or base pictures

Examples
Public Generator: “Anime Portraits”

Step 4: Download art

Download the right image, or good ideas or details. (You can make new base pictures from different parts for “image to image”) To save images quickly, use the Bulk Upload feature (maximum 100 images at a time). To do this, click the arrow button at the top right. An action menu will appear at the bottom with selected images. Click on the images you want to save, and then click on the Download button

You can download an image with automatic background removal. To do this, select the desired image — click on it and click on the settings button (three vertical lines) at the top left, after which a menu with the “Remove Background” button will appear:

Step 5: Slice

Go to Photoshop. Cut the image into layers — each moving part separately, and convert each to Smart Object (so there is no loss of quality when you rotate the layer). This step is needed as you will produce all animations with one model — then the art style for all sprites will be the same style, (because you do not change the pictures, but just rearrange the details of the character in space).

Step 6: Animation & Save frames

Go to Photoshop. (or any other program you know how to make animations and save the resulting frames) From these parts, we create animation frames. Character animation is a separate industry, but If you don't know how to create animation - just download any available sprite sheet - with the necessary storyboard - and use it as the background in each frame to arrange the character parts.

Create a frame animation in Photoshop, and name the panel: Window -> Timeline.

In the middle of the Timeline panel, click “Create Frame Animation”. Note that if it creates a Video Timeline, you can switch to the desired option by clicking on the drop-down list.

In the Timeline panel at the bottom, switch from the animation repeating “Once” to “Forever”, making the animation repeat infinitely.



In each frame, set your character’s parts in the desired configuration, check the resulting animation by pressing the Play button, and make the necessary corrections.

To make a semblance of a character hierarchy — you can use folders for layers. And move not individual parts, but a folder of layers at once.

Remember about the feature of Photoshop — it can remember the movement in frame of the layer with the Move Tool.

Click here to open the animated .gif example



But since you may need to rotate parts of the character — you will have to make duplicates of them, and turn off the visibility of the original layer. Otherwise, when you’ll rotate with “Edit -> Free Transform” — parts of the original animation will rotate on all frames of the animation. (Don’t forget to set the layer to Smart Object mode — you can do this by right-clicking on the layer and calling the menu, so you don’t lose the image quality when rotated. Remember, you can’t draw on the Smart Object layer, you’ll have to rasterize it first — by clicking on the layer and calling the menu).

Click here to open the animated .gif example



This is the disadvantage of animation in Photoshop. You get a lot of auxiliary layers. Therefore, it is better to animate one type of animation in one file, such as walking. In the other — jumping, and so on.

There is also a nuance — when a visible layer is created, or you have made the layer visible on the first frame — this layer is automatically included in all frames of the animation. To do this, just turn off its visibility on the first frame by clicking on the eye icon on the layer (turn on / off the visibility of the layer), copy the invisible layer (CTR + J), and turn on the visibility of the layer in the desired frames. If you need to show this layer only on the first frame — just select all unnecessary frames by holding CTR and clicking on the frames on the Timeline panel with the left mouse button and clicking on the eye icon on the layer (turn on / off the visibility of the layer).

The advantage of Photoshop is that you can draw auxiliary layers directly in each frame (e.g. to finish drawing the missing elements and special effects) and include their visibility on 1 frame.

Click here to open the animated .gif example

After creating the animation — save each frame as a separate image (in PNG format).

Step 7: Pixilezation

All frames are subjected to processing on the site https://www.pixelicious.xyz/



With the following settings:



Upload the image, set the settings, click on the Generate button, and click on the Download button to process all animation frames.

Result:

Click here to open the animated .gif example

The resulting frames can be assembled into a GIF animation, or a sprite sheet, depending on what program you use. For example, in Unity, all frames can be loaded separately, and Unity itself can make a sprite sheet from them.

Why use Pixelization? if the character is immediately made in pixel style — then when you rotate parts of the character, you will see that the square pixels rotate. The feeling of real pixelation will disappear, because it is achieved by making the screen seem to have a small resolution, and all graphical changes occur in the same cells (such as the old monitor), which can not move and rotate. By pixelating the final frames of the animation — we create the correct geometry of the cells.

Although if this is not critical for you, you can immediately try to cut and animate a pixelated character.

How it do faster (in the future):

Option 1.
Use Feature: “X3 images 2 images” (Idea for a feature)
The first img2img will contain an image of the Actor (his design, shape, size, color, etc.)
The second img2img will contain an image of the body pose (eye direction, emotions, hand gestures, etc.)
In the third img2img will be a picture with a sample style (or specify an appropriate generator)
The AI must take the Actor, place him in a given pose, and render him in a given style.

Option 2.
Feature: Intermediate conversion to 3D (Idea for a feature)
The img2img image is converted to 3D
The desired pose is given to the 3D model — with the help of hints or additional img2img (the hands will be very neat — it will be taken as a typical basis — where by default, the hand has 5 fingers and the correct anatomy)
3D is used as a token — the image is rendered in the desired style, and a 2D image is obtained.

As a sample pose, you are not limited to upload only one image. Still, you can upload a template of sprites with all the necessary frames (walking, running, jumping, attacking, etc.) in the right angles and variations. The AI will simply dress up all the templates with the Actor. It’s actually better not to reinvent the wheel every time by training hundreds of new generators, but to teach all the generators in the system to work properly with either the dummy character template or 3D poses.

I believe this will be one of the next features that will be developed in AI because it will really cut tons of hours of a typical animator’s routine. (or a long search for the right sprite assets).

Click here to open the completed animated .gif example

by @Vladerosh

Updated on: 04/05/2023