F.O.U.R. | Minimalistic methods [part 3]

Hello! A while ago I posted part one and part two of a series about technical aspects of my LD43 entry. Today we move on to the third and final part! 👀

For my last few jams I've been focussing a bit more heavily on graphical fidelity than I did this time, as you can see below, but that doesn't mean there aren't things to be said about the kind of approach I went for this time either! c:

kollasje-50p.png

You can play my LD43 entry F.O.U.R. here!

Would love it if you did, since I need some 7 more ratings. 😨


Dynamic 3D dialogue portraits

I ended the last part by showing you a GIF of the face closeups of characters that the game displays when talking to someone. Today we will be looking closer at those!

blink.gif


Render textures and layers

As you can see, the camera slowly and ever so slightly pans around the little 3D render, and the character blinks occasionally. This is a complete 3D render from a secondary camera that can only see the character that the player is currently talking to, and nothing else. It can also see the character's eyes, which aren't visible when the characters are rendered at a much smaller scale in the actual game world, but it is in fact the very same instance!


Camera setup

I made this game in Unity, so here are the relevant settings for the camera component of the secondary camera I added to the scene:

portkam-kopi.png

The clear colour's alpha is set to zero so that the resulting texture has a completely transparent background. At the bottom you can see the render texture that I've assigned to it, to make it render into that texture instead of to screen. This is the setup for that asset:

rendtex-kopi.png

If we go back to the settings for the camera, we also need to look closer at that "mixed" culling mask…

portcull-kopi.png

As you can see, I've created special layers for portrait rendering; things on the Portrait layer will only get rendered to the portrait camera (e.g. the eyes) while things on the PortraitAndWorld layer (the rest of the character) will also get rendered to the main camera viewing the game world.

Normally the eyes are on the layer DefaultPortrait and the rest of the character on Default, but when a conversation is entered with a character, its renderers get moved to the corresponding portrait layers, so that they are the only things the portrait camera see (so that we don't accidentally get another character visible in frame if they're standing too close).

Finally when the player starts talking to a character, the portrait camera is moved to where they are.


UI setup

Actually showing the character on screen is done through the canvas where the rest of the dialogue UI (the text box and so on) lives

hierarki.png

For this, I'm simply using a "raw image" component that is set to display the render texture from earlier that the camera renders into. This is then positioned and sized as desired.

raa.png

As a detail, to match the rest of the UI where every element has that drop shadow that you can see in the images at the top of this post, I duplicated the raw image, moved it by the same amount as all the other drop shadows, tinted it completely black and decreased the alpha to match the other shadows, and put that behind the regular image!

skygge.png


That's it!

Thanks for reading! And playing and rating, if you did, or will. This has been another fantastic LD! ❤️