In the first big puzzle hub, one of the non-linear storylines takes you to a hamburger restaurant. There will be a big, hamburger related puzzle in there! But this week, we talk about creating the AI assisted location.

AI assisted location: Hamburger restaurant final image
The location interior, finished.
Behind the scenes timelapse of the building of the scene.

AI workflow

This location is based on a very early Midjourney v4 creation I made absolutely ages ago. First, I recreated the image with Midjourney v6 and zoomed out a bit to add more play area to the scene as Midjourney tends to make the images too crammed. Or rather, I prefer wider angle views for this game.

After the midjourney image is done, it needs to be upscaled. My favourite Ai upscale tool is called Magnific.ai. It is not the only upscaling too out there with many AI services also offering upscaling these days. But Magnific has been used to upscale all of the artwork for this game so I am sticking with it. And it produces results that I like.

While I was at it I also upscaled the rest of the rooms that are in this location, of which there are 4 at the moment.

For the interior I did some cleanup in Photoshop with generative fill to fix the weird opening in the wall and add a hamburger to the scene.

AI assisted location: Hamburger restaurant generative fill

I also quickly hand painted the shadow pass of the scene. The alpha mask for the doodads on the bar was also created in the shadow pass image, as there are now shadows on the desk so I used that space in the image for alpha data instead.

AI assisted location: Hamburger restaurant shadow pass with alpha

The hamburger will be eventually cut into a separate texture to be used as a prop in the scene that can be moved around.

3D modeling

As always, the next step is fSpy. If you have not been following the project, fSpy is a free software that allows you to reverse engineer camera position and focal length from a photo. I use the camera from fSpy in Bender to help with the modeling process and also in Unity to render the final game image. When the camera perspective is correct, the realtime 3D elements like characters match the scene a lot better!

AI assisted location: Hamburger restaurant fSpy
Burger restaurant int fSpy setup

fSpy is extremely easy to use. You just need to align the perspective lines with the image and set the scene origo and you are good to go! The fSpy files import neatly to Blender as is. For images without 2 vanishing points you need to manually set the focal length of the camera which may require a bit of trial and error to get just right.

Once the camera data is in blender, it is very easy to quickly turn it into a 3D model by hand by lining up polygons with the background image in the camera view. The 3D model in blender does not need to be too detailed. As it will only be used to catch shadows from the characters and add some occlusion meshes so that characters can move behind things in the scene. The bottles and other items on the table I dod not model the silhouette for, but I will use the alpha channel from the shadow version of the background image to mask out the shapes.

To properly connect the interior to the exterior location, I also had to add an animatable door to the outside. The door mesh is embarrassingly simple.

This door consists of opaque door geometry with windows cut out. It will be animated in Unity. I used the 3D cursor in Blender to align the mesh pivots with the door hinges so that they will open correctly.

Unity set up

In Unity I scale the set to the correct size using the player character as reference, add in lights, set the ambient level, place reflection probes and place navigation meshes. I use a template scene as a base that has everything set-up for gameplay.

Recently, I moved away from using FBX files and use Blender files directly in Unity. This allows me to directly edit the files from the Unity project without the destructive FBX import / export process making everything work so much smoother. Blender files also preserve skinning data better for characters.

As the spaces are interconnected, I placed versions of the other rooms within the other scenes. When moving from room to room I still switch to a new scene, even though the geometry is already visible from the other scene. In the outdoor scene this is especially important as the door is openable and you can clearly see to the inside.

Even though the scenes are from completely different camera angles than they are meant to be, as small details in the bigger scene they work just fine.

For the glass in the door I used the same simple custom shader I created for the bathroom scene shower door.

Which I now realise I have not yet written about. But the main gist is that it is a unit transparent fresnel shader with specularity support and channel packed textures for specular and roughness. I wanted glass to glint and reflect the surroundings when doors are opened.

The scene does not yet have any other functionality than going in and out of the room. But building the puzzle logic is the next step.

The burger restaurant might get more rooms if some other puzzle path requires it (there is one unused door and an alley entrance), but for the main puzzle these rooms are all that is needed.

2 responses to “AI assisted location: Hamburger restaurant”

  1. Avatar
    Vlad

    Exceptional learning material. Thank you so much for posting it!

  2. Avatar
    sam

    Really smart stuff and nicely explained a video demo showing step by step demo would be very nice as AI enviromenment is changing so fast every day there is a new technology.

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Posts


Archive


Social Links