{"id":572,"date":"2022-10-31T16:06:32","date_gmt":"2022-10-31T16:06:32","guid":{"rendered":"http:\/\/portfolio.test\/?page_id=572"},"modified":"2024-01-18T15:06:58","modified_gmt":"2024-01-18T15:06:58","slug":"time-enigma","status":"publish","type":"page","link":"http:\/\/portfolio.test\/time-enigma\/","title":{"rendered":"Time Enigma"},"content":{"rendered":"\n<div class=\"wp-block-cover alignfull\" style=\"min-height:496px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-nv-dark-bg-background-color has-background-dim-40 has-background-dim\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"1079\" height=\"1080\" class=\"wp-block-cover__image-background wp-image-383\" alt=\"\" src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2022\/07\/timeenigma-edited-1.webp\" style=\"object-position:46% 48%\" data-object-fit=\"cover\" data-object-position=\"46% 48%\" srcset=\"http:\/\/portfolio.test\/wp-content\/uploads\/2022\/07\/timeenigma-edited-1.webp 1079w, http:\/\/portfolio.test\/wp-content\/uploads\/2022\/07\/timeenigma-edited-1-300x300.webp 300w, http:\/\/portfolio.test\/wp-content\/uploads\/2022\/07\/timeenigma-edited-1-1024x1024.webp 1024w, http:\/\/portfolio.test\/wp-content\/uploads\/2022\/07\/timeenigma-edited-1-150x150.webp 150w, http:\/\/portfolio.test\/wp-content\/uploads\/2022\/07\/timeenigma-edited-1-768x769.webp 768w\" sizes=\"(max-width: 1079px) 100vw, 1079px\" \/><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:70%\">\n<h1 class=\"wp-block-heading has-text-align-left has-nv-site-bg-color has-text-color\">Time Enigma<\/h1>\n\n\n\n<p class=\"has-nv-light-bg-color has-text-color\" style=\"font-size:22px\">Point and Click &#8220;Murder&#8221; Mystery Game<\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover alignfull\" style=\"min-height:600px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-nv-light-bg-background-color has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-neve-text-color-color has-text-color\">Camera Control<\/h2>\n\n\n\n<p class=\"has-nv-dark-bg-color has-text-color\">I worked on the camera for this project. This was an interesting challenge because it is 3D movement done using touch input from a phone. I went through multiple iterations, and want to take this opportunity to show that process.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.79%\">\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls loop muted src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2022\/11\/Media3.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center has-nv-dark-bg-color has-text-color has-medium-font-size\"><br>First Iteration<\/h2>\n\n\n\n<p class=\"has-text-align-center has-nv-dark-bg-color has-text-color\">This iteration was based mostly on personal preference, because you got to start somewhere. I didn&#8217;t want the player to look at the bottom of the level, so I made the camera move closer to the room.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.79%\">\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-video\" style=\"padding-top:10px;padding-bottom:15px\"><video autoplay controls loop muted src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2022\/11\/Media4.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center has-nv-dark-bg-color has-text-color has-medium-font-size\">Second Iteration<\/h2>\n\n\n\n<p class=\"has-text-align-center has-nv-dark-bg-color has-text-color\">In this iteration I moved the camera closer to the level to remove as much dead space as possible, to give players on smaller phone screens a better experience.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.79%\">\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls loop muted src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2022\/11\/Media5.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center has-nv-dark-bg-color has-text-color has-medium-font-size\"><br>Third Iteration<\/h2>\n\n\n\n<p class=\"has-text-align-center has-nv-dark-bg-color has-text-color\">At this point I had clear tests and feedback that I could base my improvements on. The biggest issue was size.\u00a0 I scaled up the FOV for a wider viewing angle, so I was able to move the camera even closer. I clamped the camera further from the ground, because it was an uncomfortable angle.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center has-nv-dark-bg-color has-text-color\">Final Iteration<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls loop muted src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2022\/11\/Media6.mp4\"><\/video><\/figure>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-nv-site-bg-background-color has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-neve-text-color-color has-text-color\">Audio Design<\/h2>\n\n\n\n<p class=\"has-text-align-left has-neve-text-color-color has-text-color\">I also worked on Audio Design, and I wanted to share the thought process that goes into just one sound.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h5 class=\"wp-block-heading has-text-align-center has-nv-dark-bg-color has-text-color\"><em>What is the sound&#8217;s purpose?<\/em><\/h5>\n\n\n\n<p class=\"has-nv-dark-bg-color has-text-color\"><strong>If the sound is to build tension, we want a late kick with a slow, long attack.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-audio\"><audio controls=\"\" style=\"min-width:0px\" src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2022\/11\/ding.mp3\"><\/audio><\/figure>\n\n\n\n<p class=\"has-nv-dark-bg-color has-text-color\">An example of this is the time swap sound. The satisfying \u201cDing\u201d at the ending is to make the sound a bit more mysterious. But when the purpose of the sound is to be functional, then a more realistic and clear sound would be better.<\/p>\n\n\n\n<p class=\"has-nv-dark-bg-color has-text-color\">An example of this is the sound you get when you craft the scissors.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h5 class=\"wp-block-heading has-text-align-center has-nv-dark-bg-color has-text-color\"><em><em>When does the sound play?<\/em><\/em><\/h5>\n\n\n\n<p class=\"has-nv-dark-bg-color has-text-color\">There are <strong>some limitations <\/strong>you have to put in place based on where the sound plays. If the player is picking something up, <strong>the sound shouldn\u2019t be very long, since the player will be picking up objects frequently.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-audio\"><audio controls=\"\" style=\"min-width:0px\" src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2022\/11\/pick.mp3\"><\/audio><\/figure>\n\n\n\n<p class=\"has-nv-dark-bg-color has-text-color\">But when the player loads into the game for the first time, that\u2019s when you can play a sound that is longer and more distinct.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h5 class=\"wp-block-heading has-text-align-center has-nv-dark-bg-color has-text-color\"><em><em>How memorable should the sound be?<\/em><\/em> (1\/2)<\/h5>\n\n\n\n<p class=\"has-nv-dark-bg-color has-text-color\"><strong>Certain events require certain levels of memorability.<\/strong> A great practical example of this is the scissors. Having such a shrill sound for the scissors make them stand out.<\/p>\n\n\n\n<figure class=\"wp-block-audio\"><audio controls=\"\" style=\"min-width:0px\" src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2022\/11\/scissors.mp3\"><\/audio><\/figure>\n\n\n\n<p class=\"has-nv-dark-bg-color has-text-color\"><strong>This is because I want the player to realise what they did<\/strong> when crafting the item. It is the first time they craft an item after all. This is why it should be memorable.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h5 class=\"wp-block-heading has-text-align-center has-nv-dark-bg-color has-text-color\"><em><em><em>How memorable should the sound be?<\/em><\/em><\/em> (2\/2)<\/h5>\n\n\n\n<p class=\"has-nv-dark-bg-color has-text-color\"><strong>A sound that shouldn\u2019t be memorable is, for example, the radio.<\/strong> It has no purpose other than flavour. The sound doesn\u2019t have anything distinct to it, it\u2019s just noise. I tried to go for the <strong>same feeling you\u2019d get when rain is trickling on your window:<\/strong><\/p>\n\n\n\n<p class=\"has-nv-dark-bg-color has-text-color\">I added the in-game music on top to give an idea of how it would sound like in game:<\/p>\n\n\n\n<figure class=\"wp-block-audio\"><audio style=\"min-width: 0px;\" src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2022\/11\/radio2.mp3\" controls=\"controls\"><\/audio><\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover alignfull\" style=\"min-height:600px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-nv-site-bg-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div style=\"height:80px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-neve-text-color-color has-text-color\">Other projects<\/h2>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-4 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image size-full is-style-default\"><a href=\"http:\/\/portfolio.test\/deepspace-vr\/\"><img loading=\"lazy\" decoding=\"async\" width=\"848\" height=\"849\" src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2022\/07\/deepspace-edited.png\" alt=\"\" class=\"wp-image-380\" srcset=\"http:\/\/portfolio.test\/wp-content\/uploads\/2022\/07\/deepspace-edited.png 848w, http:\/\/portfolio.test\/wp-content\/uploads\/2022\/07\/deepspace-edited-300x300.png 300w, http:\/\/portfolio.test\/wp-content\/uploads\/2022\/07\/deepspace-edited-150x150.png 150w, http:\/\/portfolio.test\/wp-content\/uploads\/2022\/07\/deepspace-edited-768x769.png 768w\" sizes=\"(max-width: 848px) 100vw, 848px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/portfolio.test\/til-nord\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2022\/07\/contentimaeg-e1658768051704-1024x1024.png\" alt=\"\" class=\"wp-image-374\" srcset=\"http:\/\/portfolio.test\/wp-content\/uploads\/2022\/07\/contentimaeg-e1658768051704-1024x1024.png 1024w, http:\/\/portfolio.test\/wp-content\/uploads\/2022\/07\/contentimaeg-e1658768051704-300x300.png 300w, http:\/\/portfolio.test\/wp-content\/uploads\/2022\/07\/contentimaeg-e1658768051704-150x150.png 150w, http:\/\/portfolio.test\/wp-content\/uploads\/2022\/07\/contentimaeg-e1658768051704-768x768.png 768w, http:\/\/portfolio.test\/wp-content\/uploads\/2022\/07\/contentimaeg-e1658768051704.png 1368w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover alignfull\" style=\"min-height:300px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-nv-dark-bg-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div style=\"height:140px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center has-nv-text-dark-bg-color has-text-color\">Interested? Contact me!<\/h2>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-5 wp-block-columns-is-layout-flex\" style=\"padding-top:0%;padding-right:33%;padding-bottom:0%;padding-left:33%\">\n<div class=\"wp-block-column is-vertically-aligned-center ticss-f6fc7494 is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:54px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large icon-style is-style-default\"><img decoding=\"async\" src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2021\/06\/email-sm.png\" alt=\"\" class=\"wp-image-306\" style=\"filter: invert(100%); height: 100px\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center has-nv-site-bg-color has-text-color\">Email<\/h3>\n\n\n\n<p class=\"has-text-align-center has-nv-light-bg-color has-text-color\" style=\"font-size:15px\"><a href=\"mailto:semgamedev@gmail.com\" target=\"_blank\" rel=\"noreferrer noopener\">semgamedev@gmail.com<\/a><\/p>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center ticss-f6fc7494 is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:54px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large icon-style is-style-default\"><img decoding=\"async\" src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2023\/12\/2795761_bullet_checklist_cv_list_resume_icon-1.png\" alt=\"\" class=\"wp-image-306\" style=\"filter: invert(100%); height: 100px\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center has-nv-site-bg-color has-text-color\">Resume<\/h3>\n\n\n\n<div class=\"wp-block-file aligncenter\"><a id=\"wp-block-file--media-5e9d4aad-3450-49e3-bf64-59ffffcb4c13\" href=\"http:\/\/portfolio.test\/wp-content\/uploads\/2023\/12\/Sem-Van-Engelen-CV.pdf\">Sem-Van-Engelen-CV<\/a><a href=\"http:\/\/portfolio.test\/wp-content\/uploads\/2023\/12\/Sem-Van-Engelen-CV.pdf\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-5e9d4aad-3450-49e3-bf64-59ffffcb4c13\">Download<\/a><\/div>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:140px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"on","neve_meta_content_width":100,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"off","neve_meta_disable_footer":"","neve_meta_disable_title":"on","_ti_tpc_template_sync":false,"_ti_tpc_template_id":"","footnotes":""},"_links":{"self":[{"href":"http:\/\/portfolio.test\/wp-json\/wp\/v2\/pages\/572"}],"collection":[{"href":"http:\/\/portfolio.test\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/portfolio.test\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/portfolio.test\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/portfolio.test\/wp-json\/wp\/v2\/comments?post=572"}],"version-history":[{"count":24,"href":"http:\/\/portfolio.test\/wp-json\/wp\/v2\/pages\/572\/revisions"}],"predecessor-version":[{"id":1246,"href":"http:\/\/portfolio.test\/wp-json\/wp\/v2\/pages\/572\/revisions\/1246"}],"wp:attachment":[{"href":"http:\/\/portfolio.test\/wp-json\/wp\/v2\/media?parent=572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}