{"author_link":"\/users\/ava-skoog","author_name":"Ava Skoog","author_uid":"ava-skoog","comments":[],"epoch":1546103308,"event":"LD43","format":"md","ldjam_node_id":138065,"likes":1,"metadata":{"p_key":"127457","p_author":"Ava Skoog","p_authorkey":"1000196","p_urlkey":"343579","p_title":"F.O.U.R. | Minimalistic methods [part 3]","p_cat":"LDJam ","p_event":"LD43","p_time":"1546103308","p_likes":"1","p_comments":"0","p_status":"WAYBACK","us_key":"1000196","us_name":"Ava Skoog","us_username":"ava-skoog","event_start":"1543536000","event_key":"71","event_name":"LD 43"},"node":{"_collation":{"body_sanitizer":"TextUtils::SanitizeHTML via existing importer","event":"LD43","removed_author":false},"_superparent":120415,"_trust":15,"author":196,"body":"Hello! A while ago I posted [part one](https:\/\/ldjam.com\/events\/ludum-dare\/43\/f-o-u-r\/f-o-u-r-minimalistic-methods-part-1) and [part two](https:\/\/ldjam.com\/events\/ludum-dare\/43\/f-o-u-r\/f-o-u-r-minimalistic-methods-part-2) of a series about technical aspects of my LD43 entry. Today we move on to the third and final part! \ud83d\udc40\n\nFor 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:\n\n![kollasje-50p.png](\/\/\/raw\/4c\/z\/1f89f.png)\n\n### You can play my LD43 entry F.O.U.R. [here](https:\/\/ldjam.com\/events\/ludum-dare\/43\/f-o-u-r)!\n\nWould love it if you did, since I need some 7 more ratings. \ud83d\ude28\n\n---\n\n# Dynamic 3D dialogue portraits\n\nI 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!\n\n![blink.gif](\/\/\/raw\/4c\/z\/1f956.gif)\n\n---\n\n# Render textures and layers\n\nAs 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!\n\n---\n\n# Camera setup\n\nI made this game in Unity, so here are the relevant settings for the camera component of the secondary camera I added to the scene:\n\n![portkam-kopi.png](\/\/\/raw\/4c\/z\/1fd6c.png)\n\nThe 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:\n\n![rendtex-kopi.png](\/\/\/raw\/4c\/z\/1fd6d.png)\n\nIf we go back to the settings for the camera, we also need to look closer at that \"mixed\" culling mask\u2026\n\n![portcull-kopi.png](\/\/\/raw\/4c\/z\/1fd6e.png)\n\nAs 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.\n\nNormally 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).\n\nFinally when the player starts talking to a character, the portrait camera is moved to where they are.\n\n---\n\n# UI setup\n\nActually showing the character on screen is done through the canvas where the rest of the dialogue UI (the text box and so on) lives\n\n![hierarki.png](\/\/\/raw\/4c\/z\/1fd70.png)\n\nFor 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.\n\n![raa.png](\/\/\/raw\/4c\/z\/1fd71.png)\n\nAs 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!\n\n![skygge.png](\/\/\/raw\/4c\/z\/1fd72.png)\n\n---\n\n# That's it!\n\nThanks for reading! And playing and rating, if you did, or will. This has been another fantastic LD! \u2764\ufe0f","comments":0,"created":"2018-12-29T16:47:30Z","files":[],"files-timestamp":0,"id":138065,"love":1,"love-timestamp":"2018-12-29T18:32:41Z","meta":[],"modified":"2018-12-29T18:32:41Z","name":"F.O.U.R. | Minimalistic methods [part 3]","node-timestamp":"2018-12-29T17:11:03Z","parent":120490,"parents":[1,5,9,120415,120490],"path":"\/events\/ludum-dare\/43\/f-o-u-r\/f-o-u-r-minimalistic-methods-part-3","published":"2018-12-29T17:08:28Z","scope":"public","slug":"f-o-u-r-minimalistic-methods-part-3","subsubtype":"","subtype":"","type":"post","version":415858},"node_metadata":{"n_key":"138065","n_urlkey":"343579","n_parent":"120490","n_path":"\/events\/ludum-dare\/43\/f-o-u-r\/f-o-u-r-minimalistic-methods-part-3","n_slug":"f-o-u-r-minimalistic-methods-par","n_type":"post","n_subtype":"","n_subsubtype":"","n_author":"196","n_created":"1546102050","n_modified":"1546108361","n_version":"415858","n_status":"WAYBACK"},"source_url":"https:\/\/ldjam.com\/events\/ludum-dare\/43\/f-o-u-r\/f-o-u-r-minimalistic-methods-part-3","text":"Hello! A while ago I posted [part one](https:\/\/ldjam.com\/events\/ludum-dare\/43\/f-o-u-r\/f-o-u-r-minimalistic-methods-part-1) and [part two](https:\/\/ldjam.com\/events\/ludum-dare\/43\/f-o-u-r\/f-o-u-r-minimalistic-methods-part-2) of a series about technical aspects of my LD43 entry. Today we move on to the third and final part! \ud83d\udc40\n\nFor 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:\n\n![kollasje-50p.png](\/\/\/raw\/4c\/z\/1f89f.png)\n\n### You can play my LD43 entry F.O.U.R. [here](https:\/\/ldjam.com\/events\/ludum-dare\/43\/f-o-u-r)!\n\nWould love it if you did, since I need some 7 more ratings. \ud83d\ude28\n\n---\n\n# Dynamic 3D dialogue portraits\n\nI 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!\n\n![blink.gif](\/\/\/raw\/4c\/z\/1f956.gif)\n\n---\n\n# Render textures and layers\n\nAs 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!\n\n---\n\n# Camera setup\n\nI made this game in Unity, so here are the relevant settings for the camera component of the secondary camera I added to the scene:\n\n![portkam-kopi.png](\/\/\/raw\/4c\/z\/1fd6c.png)\n\nThe 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:\n\n![rendtex-kopi.png](\/\/\/raw\/4c\/z\/1fd6d.png)\n\nIf we go back to the settings for the camera, we also need to look closer at that \"mixed\" culling mask\u2026\n\n![portcull-kopi.png](\/\/\/raw\/4c\/z\/1fd6e.png)\n\nAs 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.\n\nNormally 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).\n\nFinally when the player starts talking to a character, the portrait camera is moved to where they are.\n\n---\n\n# UI setup\n\nActually showing the character on screen is done through the canvas where the rest of the dialogue UI (the text box and so on) lives\n\n![hierarki.png](\/\/\/raw\/4c\/z\/1fd70.png)\n\nFor 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.\n\n![raa.png](\/\/\/raw\/4c\/z\/1fd71.png)\n\nAs 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!\n\n![skygge.png](\/\/\/raw\/4c\/z\/1fd72.png)\n\n---\n\n# That's it!\n\nThanks for reading! And playing and rating, if you did, or will. This has been another fantastic LD! \u2764\ufe0f","title":"F.O.U.R. | Minimalistic methods [part 3]","wayback_source":[]}