Creating Game Icons Using AI

 The Problem

A good, polished game needs art! Prototype assets can only get you so far before it's time to implement assets that will really draw players in. Unfortunately, I am not artistically inclined in the slightest. Stick figures are usually my go-to. However, stick figures aren't going to cut it. One of the big art hurdles we ran into was to do with icons for our towers/upgrades. These are relatively specific pieces that are hard to fulfill with good free, available art. Instead, I set out to find a way to make our own art look good.  

The Solution

This is where AI has come to the rescue! I had done some research about certain machine learning ventures that are trained to make pictures from text prompts as well as from a reference image. After several hours of messing around with a program called Stable Diffusion and looking up some other videos on people's workflow utilizing the program, I finally came up with my own workflow which produced decent results!

First, I made a rough sketch of what I wanted. This usually consisted of rough painting in Photoshop and/or the use of clip art to get a very general concept. 
A base image for the Freeze Tower
Then I would start developing a prompt to feed into Stable Diffusion. I found out that keeping some key words like "concept art" and certain games like "Guild Wars" or "StarCraft" would help the AI retain a consistent art style throughout each icon made. In addition, Stable Diffusion was trained on art from many artists, including well known concept artists. By plugging in some of their names, I could influence the art style to something akin to their artwork. Adding/removing these names during the process helped guide the AI to a better final result.

I started by using a relatively low sample rate via the LMS sampler method. In addition, I would restrict it to closely follow the prompt while giving it a very generous noise range so that it could get creative from the super rough base image. 
 
I set the batch count relatively high at first to give myself some different pictures to choose from. Once I found a picture that looked like a good start, I would copy it into photoshop. If there were pieces of other pictures I liked more, I would copy those as well and mask only the parts I liked into one picture. This (usually sloppy) mixture was then fed back into stable diffusion while adjusting the denoising and prompt strengths. I would repeat this process over and over again until I started to get something close to what I envisioned. If the AI was struggling with certain parts of the picture, I sometimes would find a real image of that specific part and simply paste it on top of the fed image. Stable Diffusion also allows you to crop the image and only focus on that specific area. This helped a lot when Stable Diffusion kept "smudging" certain aspects of the tower.

After a few tries, I already got some really cool results. The following pictures show some of the progression after modifying bits and pieces in Photoshop and then feeding it back into Stable Diffusion:




This was the first pass through and already it looks pretty good! It seemed to interpret my snowflakes as being part of the tower. In addition, my prompt mentioned a snowstorm which it sort-of implemented with a rain effect.













This time I increased the sample rate and added the rain effect back in to try and get it to get a "stormier" look. I removed the snowflakes and merges a "glowing" effect which produced a cool result. 














This time I mixed in some ice effects and really ramped up the sample rate. I was surprised at how good the ice looked. In addition, one of the pictures generated a nice backdrop. I ended up just using the backdrop and photoshopping it onto a different tower.



This was an alternate to the finalized version I ended up using. I really liked how the tower turned out on this one, and even though it doesn't have the backdrop, the tower really pops which might be a good thing for an icon image.



This was the final version I landed on. Pretty amazing that this came from a simple drawn image in photoshop!


Comments

Post a Comment

Popular posts from this blog

UI Polish

Image
 Author: Yashwant Patel The main thing that our game was missing in the last week was polish on certain things. One of the largest thing that we were missing was replacing the placeholder with final UI assets. This would make the game feel more complete and the player would appreciate the game with a finished UI. Since I was working on UI I had an advantage, because I didn't have to go around searching for UI packs since finding assets that you exactly want can be hard. Instead I mostly made everything from scratch with the exception of some elements that I got from freepik.com  and modified them to what we needed. The main challenge I faced with the UI was getting everything how I liked. I didn't really use Unreal's tools for UI before in terms of properly structuring the hierarchy for UI elements and properly wrapping everything to have it behave how you want it to, so this took a day to get used to. Another thing that needed to be done was reprogram the UI since the old ...
Read more

AI Navigation Problems - Yashwant Patel

Image
Problem In Island Defenders we want our AI to go down a lane to reach the core. Ideally the AI should navigate through the lane in a way where they don't cut corners to try and optimize the path they take in order to reach the Island Core. The path finding algorithm is implemented in a way to have the AI reach the destination using the quickest path while keeping obstacles in mind. For most games this would make for good AI, since you want AI to take the most efficient path. In our case we want the AI to always be in the center of the lane even if that path is not the most optimal. This wouldn't affect the user's gameplay physically, but it would seem like an odd behavior to have AI cutting corners in a game like this. For example, if you have a racing game and the AI cuts through the middle of the map in order to go from one point to another it wouldn't make sense. Even though that is the most optimal path in terms of pathfinding it's not the correct path. This is ...
Read more

Round End Cutscene Implementation

Image
 Author: Yashwant Patel Problem: Before the very first round and in between each round the player has access to the upgrade system where they can spend the currency they earn to purchase upgrades. Currently the player has no idea about the upgrades since they aren't told about them. One thing that can help mitigate this problem is to have a "cutscene" at the end of each round that shows a ship arriving with supplies (upgrades). This would help mitigate the main problem and it also solves the mystery of where the upgrades are arriving from. The objective is clear, but how should it be executed? Could use Unreal's level sequencer to make an animation and then render it and play the video once the round ends. Another way would be to have a "dynamic cutscene". Sounds fancy, but what does this mean? Essentially it means that each round end cutscene would be unique. How can that be accomplished and why attempt it in the first place? The main problem with setting u...
Read more