With Scenario, creating a dress-up game has never been more accessible and efficient. Our platform empowers game developers to design and implement new, seasonal, and trendy wearables in a snap, enabling you to keep your game content fresh and relevant. Moreover, the ability to quickly ideate and iterate on designs ensures that you can bring your creative vision to life without any unnecessary delays.
%20(94).jpg)
In this tutorial, we'll walk you through a quick path to success when designing a dress up game, using a specific example to illustrate the process. Along the way, we'll share useful tips for further customization. The assets you create by following this guide could be used either as final results or as the basis for further overpainting and refinement.
This guide will walk you through the following three steps:
1. Composing and Posing your Character
2. Designing wearables.
3. Finalizing in Canvas for export.
The first step of this process can be either straightforward or more intricate, depending on the stage of your game design and your vision. We will start by leveraging the pre-trained Platform Models provided by Scenario.
Compose your base models
To create a new character in a specific style, using some of our Platform Models, first navigate to the Models page and click Start Composing from the "New Model“ menu.
For this workflow, we will compose the following two models which can be found in the Platform Models section (in the model composition interface):
%20(57).jpg)
Go ahead and set the Gwendolyn LoRA to 0.35 influence and the Blocky Cartoon LoRA to 0.95 influence. Finally, name your model and click Save Composition.
Generate a portrait
To begin generating images with your new model, first locate it (under Your Models). Click on Generate with This Model to proceed.
%20(58).jpg)
In the prompt, type:
“a portrait of a woman smiling, blue eyes ”
Then, click Generate. After generating images, click on the one you like the most. You can keep generating until you find the image you most prefer. The goal is to get a portrait with clear features to guide our character design.
Generate your character in the right pose via Dual Reference Images
To achieve the desired pose for your character, we have provided a simple character A-Pose for you. You can download it via think link, or use another reference pose of your choice.
Upload this reference pose into the Reference Image section. Switch to Controlnet + Character Reference and change the Mode of Controlnet to "Pose“. Click the "…" symbol and select Remove Background, and set the pose influence to 100.
Then, upload a portrait of your character to the Character Reference section (below) and adjust its influence to 10.
Adjust the prompt to: “a full body pose of a woman”
Generate the image and adjust the settings as needed. If the face lacks detail, slightly increase the Character Reference influence. In the next step, we will further refine the facial features, so the result of this step should be roughly 70% of the final quality for a finished character.
Refining Details with Enhance
To enhance face details in your generated image, apply a Balanced upscale. Select an image you have generated, click Enhance, and choose the Cartoon style. Generate your upscaled image, and if the style is not consistent enough with your original, opt for the Precise option or adjust the sliders in the Advanced Settings. Alternatively, if you want more details added, select the Creative option.
%20(95).jpg)
Before you export, select the image and click Remove Background. Set your new background color to white and launch the background removal. Download a copy of the image to use later.
%20(96).jpg)
The "Sketch" tool is a user-friendly feature that allows for quick adjustments to details or outfits, guiding the AI generation process. You can find it above the Reference Image, represented by a "pen" icon, once an image is loaded.
Map Clothing Design with Sketch
To create clothing for your character using the dress up workflow, start by navigating to Images from the homepage and clicking the + icon. Choose the model you specifically designed for this workflow.
%20(66).jpg)
Next, upload the character base you just finished as a Reference Image. Proceed to click the Sketch tool and use the pencil to roughly block out the areas where you want the clothing to generate, using the colors of your choice. This will help you create a custom outfit for your character with ease. Use the image below as a guide if you prefer.
Generate the Outfit
To create your desired outfit, begin by describing it in the Prompt field. Your prompt should fit with the overall blocking you sketched. For example, you could input
"A woman with red hair wearing a yellow top and pink skirt"
Then, click Generate to see initial results:
%20(67).jpg)
To achieve a closer match to the base sketch, adjust the Influence of the reference image. Increasing the influence will make the generated image more similar to the reference, while reducing it will decrease consistency. It's essential to find a balance that keeps the pose consistent, usually within an influence range of 15-35.
If you want to improve upon a generated image, use it as a new reference and increase the influence to between 40-60. This will help maintain more elements and make smaller changes to the output.
Remove Background and Export
Select the image you prefer, and if you'd like to add more details, choose the Upscale option and click on a complementary style before initiating the upscale process. In this case we suggest Balanced Cartoon. Next, click Remove Background and eliminate the background with a transparent option to prepare for the subsequent step. Finally, download your image for further use.
Do not worry if the face or other elements have changed - we will pull it all together on the next step in the workflow.
The Canvas allows you to integrate image components together quickly without significant overpainting. Fix seams, add additional details, and refine your output, all while keeping your project organized.
%20(68).jpg)
Setting up your project
To start creating your project in Canvas, begin by clicking on the Canvas option located in the left-hand menu on the homepage. Once you're in the Canvas section, click on New Project to initiate a new project. You'll then be prompted to name your project and select the dedicated character model you have been using in this workflow.
After selecting your character model, click on the Upload option in the left-hand tab list and upload your base image. This is the first A Pose image that you generated and upscaled.
Upload Outfit and Edit
Begin by navigating to the Upload tab in Canvas. Upload the outfit image you'd like to use for your character, and if the background has not been removed already, take a moment to do so. Click the layer with the image and press Remove BG. This will ensure that the outfit image is transparent and ready to be layered over your character.
Once your outfit image is prepared, center it over the character as you'd like them to appear in the final image. Make sure that the outfit image is in a layer above the character layer, so that the character is visible beneath the clothing. This will allow you to align the outfit accurately with your character's body.
%20(69).jpg)
Next, switch to the Sketch tab and select the Eraser tool. Ensure you are working on the outfit layer, and carefully erase any elements that you do not want to be included in your final image, such as the face, hair, or arms from the outfit image. Taking care with the edges during this step can help you avoid excessive iterations later on, making the process smoother and more efficient.
Mask and Generate
To create a seamless blend between your original image and the uploaded outfit, start by selecting the Generate option. Mask out the areas where there are visible seams between the two images. Then, describe the character and outfit in your prompt using simple words, such as "A woman in a blue dress." Proceed to click on Reference Image and adjust the Influence setting to 15.
%20(70).jpg)
Adjust your prompt to match the same prompt that you used to generate the outfit in Step 2. Finally, press Generate to create your new image with the desired outfit.
Refine and Export
Obtaining your desired result may require a few iterations, depending on your personal preferences. To streamline the process for subsequent outfits, consider copying the layer for your back character and background, saving it for future use.
Once you're satisfied with your creation, select the layers you're working on and click Merge Layers. Proceed to click Save Image and export your image with the layers merged. To continue using this project for your next outfit, simply hide your finished outfit. The Canvas automatically saves your work, so there's no need to manually save it.
With the Scenario toolset, you can create trendy and seasonal wearables for your characters, quickly ideate and iterate on designs, and bring your creative vision to life without unnecessary delays. By following the steps outlined in this article, you are on your way to designing a engaging dress-up game to better captivate your players. You can even go so far as to create full backgrounds and icons - check out our other Use Cases for more ideas!
Embrace the potential of Scenario's platform, and let your creativity soar as you embark on the exciting journey of designing your dress-up game!
.svg)
%20Cropped.png)
.png)
