Profile picture
, 19 tweets, 10 min read Read on Twitter
1/ Here’s how I built the iconic first level of #SuperMarioBros as a life-size first person AR game that I played in @CentralParkNYC . Read on below!
2/ Ideas can come from anywhere. It all began with a simple cube. While learning @HoloLens dev I mistakenly placed a cube above my head, walked under it and looked up. The image of a #Mario brick flashed through my head
3/ Unable to find 3D assets in the style I wanted, I decided to recreate them myself. Used @adskFusion360 & had to consider things like how will bricks & characters I’ve only ever seen in 2D appear from the various angles that #AR enables.
4/ Laid out the level and re-created game mechanics in @unity3d , scripted using C#. At human scale, the level spanned 110 meters. #madewithunity
5/ I wanted to stay true to the original. Since I couldn’t defy biology and make the player spontaneously grow on eating a virtual mushroom I used a programmatic illusion to scale down the entire level around the player instead.
6/ Similarly, how would I instantly change clothes on eating a flower. I used on-screen effects to communicate the effect of the intended power-up.
7/ I couldn’t figure out how to address jumping up onto the pipes and stairs. Tried shifting the full level down but since the real world remained locked in place, this seemed unnatural. Decided to use the added dimension to my advantage...simply walked around them instead.
8/ To seemingly defy physics and jump twice my height, I added colliders offset from the @HoloLens (which would be on my head) and the bricks above. This let me jump just a little but still hit bricks hovering high above, maintaining original level proportions.
9/ A behind the scenes look at how the collider worked. Since the hololens on your head can detect its position in space, attaching a collider (green box) offset above it and colliders offset below the bricks let you hit bricks higher than you could jump.
10/ While user testing, I realized my shorter friends couldn’t complete the level. The bricks were too high. I added the ability to enter your height at the start. This calibrated the entire level just for you. Always consider the user.
11/ Location scouting was a pain - had to be large, empty-ish, pedestrian only, with no harsh sunlight. The mall in Central Park seemed to be the only suitable area in #NYC. Went at dawn to avoid crowds but got interrupted by #dogs looking for early morning scritches instead.
12/ At 110m, there was lot of cumulative drift occurring as you got deeper into the level, causing the level to deviate off the path, into the trees or into the ground. Split the level into 6m chunks, each with its own anchor and aligned sequentially.
13/ The voids in the ground were made using a stencil buffer which is like a programmatic window in a wall. You can only see certain objects when looking through it. I took the creative liberty to add water at the bottom.
14/ The hidden 1up mushroom was present as well. I was lucky to actually hit it after a couple of tries since it was harder to orient myself precisely in the AR game as compared to on a flat screen.
15/ I used the native hololens airtap gesture for my favorite part - shooting fireballs at the goombas. Embarrassingly I always thought they were called ‘bad mushrooms’ up until this project. You'll also notice the invincibility star.
16/ I also added the ability to subdue and kick away the oncoming koopa-troopa. Seeing it spiraling away in the direction of the nudge was oddly satisfying.
17/ I always wondered what was inside the castle at the end of the original #Mario level. With #AugmentedReality I could now walk in, look around and even see the celebratory fireworks above.
18/ For added performative value, I decided to do it in character. Denim overalls & white gloves from amazon, large yellow buttons I made from wood & a red t-shirt from my closet completed the #DIY look. Made for an interesting early morning subway ride.
19/ Took about 4-6 weeks from start to finish eventually generating 1.9mn youtube views, 5200 RTs, 7600k likes, 20mn+ fb views, ~100 press articles.
Missing some Tweet in this thread?
You can try to force a refresh.

Like this thread? Get email updates or save it to PDF!

Subscribe to Abhishek
Profile picture

Get real-time email alerts when new unrolls are available from this author!

This content may be removed anytime!

Twitter may remove this content at anytime, convert it as a PDF, save and print for later use!

Try unrolling a thread yourself!

how to unroll video

1) Follow Thread Reader App on Twitter so you can easily mention us!

2) Go to a Twitter thread (series of Tweets by the same owner) and mention us with a keyword "unroll" @threadreaderapp unroll

You can practice here first or read more on our help page!

Follow Us on Twitter!

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just three indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3.00/month or $30.00/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!