{"id":160,"date":"2024-12-24T02:51:22","date_gmt":"2024-12-24T02:51:22","guid":{"rendered":"https:\/\/colinmc.name\/?page_id=160"},"modified":"2025-09-12T19:31:37","modified_gmt":"2025-09-12T19:31:37","slug":"drifto","status":"publish","type":"page","link":"https:\/\/colinmc.name\/e\/games\/drifto\/","title":{"rendered":"Drifto"},"content":{"rendered":"\n<div class=\"wp-block-cover alignfull is-light\" style=\"min-height:318px;aspect-ratio:unset;\"><video class=\"wp-block-cover__video-background intrinsic-ignore\" autoplay muted loop playsinline src=\"https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/DriftoTrailer2.mp4\" data-object-fit=\"cover\"><\/video><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-0 has-background-dim\" style=\"background-color:#FFF\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-large-font-size\"><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover has-custom-content-position is-position-top-center\" style=\"padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);min-height:430px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-100 has-background-dim\" style=\"background-color:#1e1e1e\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div class=\"wp-block-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-78739c03 wp-block-group-is-layout-flex\" style=\"min-height:0px;margin-top:0;margin-bottom:0;padding-right:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-fe9cc265 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading has-text-align-left\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#885b6e\" class=\"has-inline-color\">objective:<\/mark> design four levels<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#885b6e\" class=\"has-inline-color\">client:<\/mark> drifto<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#885b6e\" class=\"has-inline-color\">process:<\/mark> blender + unity<\/h2>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-default\" style=\"margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20);background-color:#ffffff;color:#ffffff\"\/>\n\n\n\n<p>Drifto is a mobile arcade racing game created by Jonathan Howe, it is available for free on the <a href=\"https:\/\/apps.apple.com\/us\/app\/drifto\/id1643464834\">app store<\/a> and the <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.UnluckyDuck.Drifto&amp;hl=en_US\">google play store<\/a> and has over 1 million downloads.<br>I was tasked with creating 4 new levels for the game<\/p>\n\n\n\n<div class=\"wp-block-group is-style-default is-layout-grid wp-container-core-group-is-layout-2ac3c2b2 wp-block-group-is-layout-grid\" style=\"border-style:none;border-width:0px;min-height:0px;margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-size:clamp(3.037rem, 3.037rem + ((1vw - 0.2rem) * 4.648), 6rem);\">\n<div class=\"wp-block-cover wp-container-content-b4c5012d has-aspect-ratio\" style=\"padding-top:0;padding-bottom:0;aspect-ratio:3\/2;min-height:unset;\"><img loading=\"lazy\" decoding=\"async\" width=\"706\" height=\"397\" class=\"wp-block-cover__image-background wp-image-439 size-full\" alt=\"\" src=\"https:\/\/colinmc.name\/wp-content\/uploads\/2025\/01\/Canyon.png\" data-object-fit=\"cover\" srcset=\"https:\/\/colinmc.name\/wp-content\/uploads\/2025\/01\/Canyon.png 706w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/01\/Canyon-300x169.png 300w\" sizes=\"auto, (max-width: 706px) 100vw, 706px\" \/><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-60 has-background-dim\" style=\"background-color:#363531\"><\/span><div class=\"wp-block-cover__inner-container has-global-padding is-layout-constrained wp-block-cover-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-text-align-center has-large-font-size\">canyon<\/h2>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover wp-container-content-b4c5012d has-aspect-ratio\" style=\"min-height:177px;aspect-ratio:3\/2;min-height:unset;\"><img loading=\"lazy\" decoding=\"async\" width=\"706\" height=\"397\" class=\"wp-block-cover__image-background wp-image-438 size-full\" alt=\"\" src=\"https:\/\/colinmc.name\/wp-content\/uploads\/2025\/01\/Tokyo.png\" data-object-fit=\"cover\" srcset=\"https:\/\/colinmc.name\/wp-content\/uploads\/2025\/01\/Tokyo.png 706w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/01\/Tokyo-300x169.png 300w\" sizes=\"auto, (max-width: 706px) 100vw, 706px\" \/><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\" style=\"background-color:#5b5868\"><\/span><div class=\"wp-block-cover__inner-container has-global-padding is-layout-constrained wp-container-core-cover-is-layout-19e250f3 wp-block-cover-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-text-align-center has-large-font-size\">tokyo<\/h2>\n<\/div><\/div>\n\n\n\n<div style=\"aspect-ratio:3\/2;min-height:unset;\" class=\"wp-block-cover is-light has-base-color has-text-color has-link-color wp-elements-4b553a9afc221da7630fec58b18bc6c6 wp-container-content-b4c5012d has-aspect-ratio\"><img loading=\"lazy\" decoding=\"async\" width=\"706\" height=\"397\" class=\"wp-block-cover__image-background wp-image-440 size-full\" alt=\"\" src=\"https:\/\/colinmc.name\/wp-content\/uploads\/2025\/01\/Raceway.png\" data-object-fit=\"cover\" srcset=\"https:\/\/colinmc.name\/wp-content\/uploads\/2025\/01\/Raceway.png 706w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/01\/Raceway-300x169.png 300w\" sizes=\"auto, (max-width: 706px) 100vw, 706px\" \/><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\" style=\"background-color:#908b89\"><\/span><div class=\"wp-block-cover__inner-container has-global-padding is-layout-constrained wp-block-cover-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-text-align-center has-large-font-size\">raceway<\/h2>\n<\/div><\/div>\n\n\n\n<div style=\"aspect-ratio:3\/2;min-height:unset;\" class=\"wp-block-cover has-base-color has-text-color has-link-color wp-elements-7fdff09fb6208731b63d5fb26d503137 wp-container-content-b4c5012d has-aspect-ratio\"><img loading=\"lazy\" decoding=\"async\" width=\"706\" height=\"397\" class=\"wp-block-cover__image-background wp-image-441 size-full\" alt=\"\" src=\"https:\/\/colinmc.name\/wp-content\/uploads\/2025\/01\/Ski-Slopes.png\" data-object-fit=\"cover\" srcset=\"https:\/\/colinmc.name\/wp-content\/uploads\/2025\/01\/Ski-Slopes.png 706w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/01\/Ski-Slopes-300x169.png 300w\" sizes=\"auto, (max-width: 706px) 100vw, 706px\" \/><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\" style=\"background-color:#5c757d\"><\/span><div class=\"wp-block-cover__inner-container has-global-padding is-layout-constrained wp-block-cover-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-text-align-center has-large-font-size\">ski slope<\/h2>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>The game constructs infinite levels by randomly combining together level tiles. If you&#8217;re curious how that system works you can watch this video:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Creating Infinite Road For My Drifting Game (again) - Drifto Devlog\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/p1odc--Ephk?start=162&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Tokyo Level Design Dive<\/h2>\n\n\n\n<p class=\"is-style-default has-medium-font-size\">Instead of being on a grid, Tokyo streets are on hundreds of slightly offset grids, creating many &#8220;awkward&#8221; intersections.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"438\" src=\"https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-2-1024x438.png\" alt=\"\" class=\"wp-image-936\" srcset=\"https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-2-1024x438.png 1024w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-2-300x128.png 300w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-2-768x328.png 768w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-2-1536x656.png 1536w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-2.png 1671w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/51185597958_5f45fed86c_b.jpg\" alt=\"\" class=\"wp-image-935\" style=\"width:559px;height:auto\" srcset=\"https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/51185597958_5f45fed86c_b.jpg 1024w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/51185597958_5f45fed86c_b-300x225.jpg 300w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/51185597958_5f45fed86c_b-768x576.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><mark style=\"background-color:rgba(0, 0, 0, 0);color:#885b6e\" class=\"has-inline-color\">photo by <a href=\"https:\/\/www.flickr.com\/photos\/whatcouldgowrong\/\">john r walker<\/a><\/mark><\/figcaption><\/figure>\n\n\n\n<p class=\"has-text-align-left is-style-default has-medium-font-size\">With this in mind I began by modeling the roads.<br>In Canyon, the first level I made for the game, I made the mistake of making pieces too long and complex. The interesting part of the road generation algorithm isn&#8217;t the pieces themselves, it&#8217;s the near infinite possible combinations of pieces you can get. So for Tokyo I focused on making the pieces shorter and giving them lots of interesting possible configurations.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"381\" src=\"https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-5-1024x381.png\" alt=\"\" class=\"wp-image-940\" srcset=\"https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-5-1024x381.png 1024w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-5-300x111.png 300w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-5-768x285.png 768w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-5-1536x571.png 1536w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-5.png 1687w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20)\"\/>\n\n\n\n<p class=\"has-medium-font-size\">For texturing the roads I created a &#8220;trim sheet&#8221; texture with all the road elements I needed and then mapped them onto specific parts of the road. This made it easy to reuse elements and keep texture size down.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"498\" src=\"https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-11-1024x498.png\" alt=\"\" class=\"wp-image-946\" srcset=\"https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-11-1024x498.png 1024w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-11-300x146.png 300w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-11-768x373.png 768w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-11-1536x746.png 1536w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-11.png 1706w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20)\"\/>\n\n\n\n<p>For the buildings and environment assets I leaned into a retro-neon vibe which is commonly associated with Drifting because of the Japanese street racing manga <em><strong>Initial D<\/strong><\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"371\" src=\"https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-7-1024x371.png\" alt=\"\" class=\"wp-image-942\" srcset=\"https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-7-1024x371.png 1024w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-7-300x109.png 300w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-7-768x278.png 768w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-7-1536x556.png 1536w, https:\/\/colinmc.name\/wp-content\/uploads\/2025\/06\/image-7.png 1671w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20)\"\/>\n\n\n\n<p>Then I imported everything into Unity and assembled the assets into road tiles.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1056\" style=\"aspect-ratio: 480 \/ 1056;\" width=\"480\" autoplay loop muted src=\"https:\/\/colinmc.name\/wp-content\/uploads\/2025\/09\/Drifto_Tokyo.mp4\"><\/video><\/figure>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":58,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wp-custom-template-banner-image","meta":{"footnotes":""},"class_list":["post-160","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/colinmc.name\/e\/wp-json\/wp\/v2\/pages\/160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/colinmc.name\/e\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/colinmc.name\/e\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/colinmc.name\/e\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/colinmc.name\/e\/wp-json\/wp\/v2\/comments?post=160"}],"version-history":[{"count":38,"href":"https:\/\/colinmc.name\/e\/wp-json\/wp\/v2\/pages\/160\/revisions"}],"predecessor-version":[{"id":1086,"href":"https:\/\/colinmc.name\/e\/wp-json\/wp\/v2\/pages\/160\/revisions\/1086"}],"up":[{"embeddable":true,"href":"https:\/\/colinmc.name\/e\/wp-json\/wp\/v2\/pages\/58"}],"wp:attachment":[{"href":"https:\/\/colinmc.name\/e\/wp-json\/wp\/v2\/media?parent=160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}