Unreal Engine Daz Translating Daz assets into 2D sprites and Tilemaps

GhostlabFX

Newbie
Aug 3, 2017
16
3
Hello fellow devs,

I recently played nlt 's game Treasure of Nadia and I try to recreate this type of gameplay it in my spare time using ue4.
While turning the characters into sprites rendering them and even playing with Unreal Engine's lighting system and the shader to make them react to proper lighting inside the engine was piece of cake I have hard time of rendering the environment assets for the level. So basically my travel is to make the acid stranded in way to make modular a town map that I can use to create a level that my guys walk into. If anyone has ever done this or has kno whow I would be very very happy and very thankful to show me or to share his or her experience.

Cheers,
J
 

probably_dave

Member
Jun 3, 2017
133
363
I've done something similar for my game:
screen_1.png

This is done in Ren'py, but the Daz process should be similar.

How I did the renders was first create a 'studio' scene where I had all the sizes and cameras setup.
First, I had to decide how many tiles to fit the screen, I went for 20 and then had to calculate the pixel size for each tile (1920x1080 / 20 gives 96x54)

I created a a square base planes for sizing. For me, 1 tile would be 10 meters so added a 10x10 plane primitive. I then repeated for 2x2, 3x3 etc. Below is the 2x2:
Screen_2.png

The next thing was to setup the cameras for each tile size. Starting with the 1x1, I created a new camera and set the aspect ratio to 16:9 and pixel size to 96x54 and then moved the camera into it's initial position (no need to be too accurate here).
Screen_3.png

As you can probably tell, it would be difficult to create a tiled based game like this, because making everything fit together could be difficult. This is why most maps do not use perspective. By default, Daz cameras use perspective, but this can be disabled in the Parameters>Camera settings when the camera is selected. Once done, you need to align the square so it fits the 16:9 render border:
1615102567588.png
Note, the rotation widget did not work for me to align the square perfectly, so you might need to adjust the camera parameters to rotate the camera.
Once in position, lock the cameras rotation in the Cameras parameters:
1615102762826.png
Hopefully, your Y and Z rotations should be 0, while the X would be around -35. You should make note of the X Rotation however as all your Cameras should have the same rotation.
Next is to repeat the process for each Camera.
Note: For each tile size, I adjusted the aspect ratio rather than the pixel size before rendering. I believe it is possible to have each camera have it's own rendering settings, but I couldn't find a way to make it work properly. Instead, I just created a quick spreadsheet of aspect ratios and sizes (1x1 Tile, 16:9, 96x54; 2x2 Tile, 32:18, 192x108;...). However, it means that sometimes you need to adjust the zoom or position of the camera (but not the rotation!) to make it align.

For convenience, I then grouped each Plane and Camera together so I could quickly switch between the different ones, based on my needs (Create>New Group):
1615103316187.png

Next was lighting. I happened to use HDRI lighting for my scenes, but I then changed to large planes instead. This was so I could easily switch between different lightings without having to remember which lights I originally used. I created a lighting set for Morning, Noon, Evening and Night. I did this with 3 planes with a size 1 greater than my biggest tile.
1615103799130.png
Once I was happy, I created a group and added them to the group. I could then add other lights for different times of day, and hiding the groups when I didn't need them. Just make sure none of the lights are visible from your biggest tile.
There may be other or easier ways to do this, but it seemed to work ok for me.
At this point, you should also ensure that Draw Dome and Draw Ground is disabled in the Render Settings > Environment Options

Next thing to do, is to Save, and Save again, and again and then backup. As you'll this as the base for your tiles, if you're anything like me, you'll forget to save it as a new project when you load and accidently hit save and overwrite the base studio. So the more backups you have the better.

You can now start testing the setup to ensure the lighting and sizing for everything works fine.

Now, this does seem like a lot of work, however, doing this preliminary work means creating tiles should be significantly faster in the long run.

Next is to setup your scene. A key point here, is you want to avoid changing the scale of any objects in your scene, especially if they are full daz environments. This is to ensure the scale of things (like vehicles and doorways) remain consistent across your tiles
1615105413047.png

Here, you should keep all objects within the original plane that you created. Anything outside will likely will be outside of your render. Once setup, you can switch back to the camera you created for that tile size:
1615105532722.png

Hopefully, you can see the problem here. The vertical items are being cut because the size of the render is done at the plane level. Rather than zooming out though, you should adjust the Y-ratio in the render settings so you can include the verticals in the scene and then move the camera (do not rotate!) so that the base is aligned:
1615105722216.png
Note: here I changed the original Y ratio from 18 to 24 but kept the x-ratio the same (do not change this). You will need to adjust the camera to ensure it still fits in as well (but not the rotation :p)
Also note, the background is now contained within the frame. This is why we disabled the Draw Dome and Draw Ground earlier.

Now, we're ready to render. Make sure this is done as PNG to allow for transparency.
Render_example.png
I've now got my image file that is should exact fit 2x2 tiles and can be placed in the game:
1615106037075.png

To make it easier to place the tiles, I've aligned the image so it anchor point is on the bottom left hand side (it usually defaults to top-left). I'm also placing each tile from top to bottom. This is to done so the houses on the right are placed first. The building yard is then placed on lower down, however, as it's height is greater than that of 2x2, it overlays the houses placed above.

Hopefully this helps. There may be other ways of doing it, but this is what I follow when I have the need to create a significant amount of different tiles for my game. I'm sure there may be some shortcuts, or I'm missing some key parts, but hopefully, you can use it as a starting point.

One more decent this with this setup. As nothing has been scaled down, you can use the same model for your actual scenes (with adjustments for lighting of course) :)

Render_example_2.png