{"id":894,"date":"2023-12-02T21:22:51","date_gmt":"2023-12-02T21:22:51","guid":{"rendered":"http:\/\/portfolio.test\/?page_id=894"},"modified":"2024-04-10T04:49:20","modified_gmt":"2024-04-10T04:49:20","slug":"skate-game-prototype","status":"publish","type":"page","link":"http:\/\/portfolio.test\/skate-game-prototype\/","title":{"rendered":"Skate Game Prototype"},"content":{"rendered":"\n<div class=\"wp-block-cover alignfull\" style=\"padding-top:0;padding-bottom:0;min-height:434px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-nv-dark-bg-background-color has-background-dim\"><\/span><video class=\"wp-block-cover__video-background intrinsic-ignore\" autoplay muted loop playsinline src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2023\/12\/2023-12-02-22-27-05.mp4\" style=\"object-position:50% 28%\" data-object-fit=\"cover\" data-object-position=\"50% 28%\"><\/video><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<h1 class=\"wp-block-heading has-text-align-left has-nv-site-bg-color has-text-color\">Skate Game Prototype<\/h1>\n\n\n\n<p class=\"has-nv-site-bg-color has-text-color\" style=\"font-size:22px\">For learning new things<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div style=\"height:56px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-cover alignfull has-neve-text-color-color has-text-color has-link-color wp-elements-42a24106b0ab8c64fcde10c0243d7561\" style=\"padding-top:0;padding-bottom:0;min-height:434px;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-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<p>An Finite Runner, where the player has to reach the end of the level as fast as they can by gaining speed that increases with your score.<\/p>\n\n\n\n<h4 class=\"wp-block-heading has-text-align-left\">Noteworthy Achievements<\/h4>\n\n\n\n<ul>\n<li>Curved World Shader<\/li>\n\n\n\n<li>Data Driven Architecture<\/li>\n\n\n\n<li>Level Editor<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.79%\">\n<figure class=\"wp-block-video\"><video autoplay controls loop muted src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2024\/04\/Run.mp4\"><\/video><\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover alignfull is-light\" 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\">Curved World Shader<\/h2>\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-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading has-neve-text-color-color has-text-color\">Inspiration (Design)<\/h3>\n\n\n\n<p class=\"has-text-align-left has-neve-text-color-color has-text-color\"><strong>Infinite Runners often do this thing where their world is curved away<\/strong> from the camera, either down or to the side, for multiple benefits. Benefits like minimizing the amount of objects to render on the screen. However, since the game gets faster and faster the longer you survive, <strong>this means that the window to react to the objects appearing on your screen becomes smaller.<\/strong> I despise this.<\/p>\n\n\n\n<p>As a rhythm game fan, I love being overwhelmed and responding to stimuli using just my subconscious. However, <strong>communicating these stimuli more rapidly using a negative feedback loop of reaction time leaves players unsatisfied<\/strong>. They feel cheated because the object that they died to wasn&#8217;t even spawned before they made the decision to dodge right instead of left. Even if this is not actually the case, it is still what the player experiences.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-bottom is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:2%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-video\"><video controls loop muted src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2024\/04\/Curved-optimized.mp4\"><\/video><\/figure>\n<\/div>\n<\/div>\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-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading has-neve-text-color-color has-text-color\">Gameplay Impact (Design)<\/h3>\n\n\n\n<p class=\"has-text-align-left has-neve-text-color-color has-text-color\">What I did instead, is <strong>curve the world towards the player. This way, all the information is easily available to the player ahead of time.<\/strong><\/p>\n\n\n\n<p>This, other than looking cool, removes the previously mentioned feeling of frustration when the player allegedly makes an uninformed decision. <strong>All the information to make decisions on is already on the player&#8217;s screen.<\/strong> <\/p>\n\n\n\n<p><strong>This changes the challenge from <\/strong>&#8220;<strong>Reaction Speed<\/strong>&#8220;<strong> to <\/strong>&#8220;<strong>Information Processing Speed<\/strong>&#8220;<\/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:2%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-video\"><video controls loop muted src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2024\/04\/Empty-optimized.mp4\"><\/video><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns 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\">\n<h3 class=\"wp-block-heading has-neve-text-color-color has-text-color\">Implementation (Tech)<\/h3>\n\n\n\n<p class=\"has-text-align-left has-neve-text-color-color has-text-color\">I use a <strong>Vertex Displacement Shader<\/strong> to curve the world.<\/p>\n\n\n\n<p>It uses parameters that can be <strong>changed at runtime to create a dynamic curvature system<\/strong> which developers can use to elevate gameplay.<\/p>\n\n\n\n<p>This is achieved by using a <strong>Data Driven <\/strong>approach when building this game&#8217;s architecture.<\/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:2%\"><\/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:70%\">\n<figure class=\"wp-block-video\"><video autoplay controls loop muted src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2024\/04\/Shader-Optimized-1.mp4\"><\/video><\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover alignfull\" style=\"min-height:888px;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<h2 class=\"wp-block-heading has-neve-text-color-color has-text-color\">Data Driven Architecture (Tech)<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-5 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center has-neve-text-color-color has-text-color has-link-color wp-elements-12d4996fe727b38257cdcdf53a00b98b is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Object Properties<\/h3>\n\n\n\n<p><strong>Properties <\/strong>in this context is data necessary for specific objects to functions. This data is stored in JSON to generalize the flow of data through game objects.<\/p>\n\n\n\n<p>This prototype consists of generic object types that hold a container of said Properties. When creating an object, it will use its properties to Initialize itself.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Game Objects<\/h3>\n\n\n\n<p>Objects implementing Properties use inheritance to define whatever it will do with this data. However, its Properties are stored as a JSON string. This means that managing classes can interact with these Object Properties generically, and when the need for interacting with its specific Properties arises, it can find the necessary information in the JSON string provided.<\/p>\n\n\n\n<p>The benefit of this is as follows: <\/p>\n\n\n\n<ol>\n<li>A generic function library for interfacing with Properties can be defined. This can then be used throughout the whole project.<\/li>\n\n\n\n<li>Instead of interfacing with the Class, the system will interface with the JSON string instead, removing the need for type matching, this allowing for generic reading and writing of data.<\/li>\n<\/ol>\n\n\n\n<p>An example of this is shown in the <a href=\"#Data-Driven-Implementation\">Level Editor System<\/a>.<\/p>\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:2%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"803\" height=\"713\" src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2023\/12\/SystemBreakdown.drawio.png\" alt=\"\" class=\"wp-image-934\" srcset=\"http:\/\/portfolio.test\/wp-content\/uploads\/2023\/12\/SystemBreakdown.drawio.png 803w, http:\/\/portfolio.test\/wp-content\/uploads\/2023\/12\/SystemBreakdown.drawio-300x266.png 300w, http:\/\/portfolio.test\/wp-content\/uploads\/2023\/12\/SystemBreakdown.drawio-768x682.png 768w\" sizes=\"(max-width: 803px) 100vw, 803px\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover alignfull is-light\" 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\"><\/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\">Level Editor Tools (Tech)<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-6 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center has-neve-text-color-color has-text-color has-link-color wp-elements-d4d8290b208cb5c7b0db0017ad952432 is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:34%\">\n<h3 class=\"wp-block-heading has-neve-text-color-color has-text-color\">Object Placer \/ Editor<\/h3>\n\n\n\n<p class=\"has-text-align-left has-neve-text-color-color has-text-color\"><strong>To easily iterate on levels for my prototype, I made a level editor.<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-left has-neve-text-color-color has-text-color\">You can scrub through the level like a timeline, and Place\/Edit\/Remove level objects.<\/p>\n\n\n\n<p>Object specific properties are stored in JSON to prevent generic classes like the Level Manager or Level Editor from needing clauses for each object type. It can just pass the string and the object will initialize itself.<\/p>\n\n\n\n<p>Levels can be saved, loaded, overwritten, and played.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.79%\">\n<figure class=\"wp-block-video\"><video autoplay controls loop muted src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2024\/04\/Builder-optimized.mp4\"><\/video><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-video\"><video controls loop muted src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2024\/04\/RailBuilder.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"has-text-align-center has-nv-dark-bg-color has-text-color\">Custom Rail placement<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-video\"><video controls loop muted src=\"http:\/\/portfolio.test\/wp-content\/uploads\/2024\/04\/Sav-optimized.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"has-text-align-center has-nv-dark-bg-color has-text-color\">Saving and Loading<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center has-neve-text-color-color has-text-color has-link-color wp-elements-c5cc60857115ce6d0539f254e4ad009c is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:34%\">\n<h3 class=\"wp-block-heading has-neve-text-color-color has-text-color\" id=\"Data-Driven-Implementation\">Data Driven Implementation<\/h3>\n\n\n\n<p class=\"has-text-align-left has-neve-text-color-color has-text-color\">Using the Data Driven object implementation mentioned above, it was trivial to interact and expand the Level Editor interface.<\/p>\n\n\n\n<p>Instead of creating an interface for each Obstacle Class, you create an interface for each Property that you want to interact with in the Level Design process. For each property of a selected object, a separate UI interface can be created dynamically.<\/p>\n\n\n\n<p>As shown in the video, for each Obstacle I select, its relevant properties UI will be added to the screen on the right. The same Property\/UI being used for the Pole and the Ring.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column 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\/2024\/04\/Dd-New-optimized.mp4\"><\/video><\/figure>\n<\/div>\n<\/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-9 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":"","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\/894"}],"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=894"}],"version-history":[{"count":25,"href":"http:\/\/portfolio.test\/wp-json\/wp\/v2\/pages\/894\/revisions"}],"predecessor-version":[{"id":1316,"href":"http:\/\/portfolio.test\/wp-json\/wp\/v2\/pages\/894\/revisions\/1316"}],"wp:attachment":[{"href":"http:\/\/portfolio.test\/wp-json\/wp\/v2\/media?parent=894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}