Code Blocks !

Learn Visual Node Programming In A Fun, Interactive & Immersive Way

Comment 2

Inspiration ✨

I loved fiddling with technology since my childhood. I even wrote a poem of becoming a computer engineer when I was 8 years old. But I remember my very first step into actually something related to software development or engineering was the scratch coding !

It was this small blocks of steps which I could arrange to make my tiny bot move and perform certain tasks. It was a very fun way to understand the logic development and help improve my critical thinking skills. As the goal was not only to complete the task but do it in an optimal way so that number of steps could be reduced ( Didn't know then it was all about memory and performance optimization :p ) Thus for this lensathon I thought of re-creating the visual node programming experience in AR through a fun & interactive game called "Code Blocks"

What it does 🤔

As the name suggests, "Code Blocks" is all about learning about visual programming through blocks of steps which users can arrange and hit run to see it in action There's a cute protagonist of our experience which is a floating ball bot whom you will help to collect the rare crystals on a unknown planet.

With the help on screen carousel UI you can tap on any actions like "forward", "back" & rotation actions and arrange them in a sequence which will help the bot reach and collect the crystal

You can add actions to your sequence as well as pop out the actions. The bot will only perform the actions when you hit the "Play" button in the middle.

If the bot manages to collect the crystal, you'll be leveled up and the number of remaining slots in your sequence will account towards your score. So yes ! Using as less slots as possible would result into higher score

If the bot does not reach the crystal for the action sequence you input, it will deduct 5 points from your score.

Currently there are over 5 actions & 5 engaging levels to complete ! Can you beat it with optimal solutions & maximum score? Pro tip: It's not necessary to only move on the platforms 👀

How I built it ⚒️

HARDCORE PROGRAMMING 😂 I spent over 12+ hrs non stop scripting and assembling the lens. It uses dynamic prefabs & modular code design. Meaning adding new levels or/and actions would be easier compared to other assembly style.

But even before scripting, I had to revisit how the scratch programming actually works and understand the dynamics of the same. Watched some youtube videos, gave hands-on some old school scratch programming & laid out the rough flow of how and everything will sit out in the lens.

Made a custom 2d carousel interface with tap to select, a controller script to control the actions of the bot, collider logic for crystal collection, block assembly with a custom queue data structure & then headed to photoshop to design the UI assets for the experience. Modified & created 3D models in blender. And took some help from library custom materials to improve the look and feel.

Challenges I ran into 🥲

THE MAIN CHALLENGE WAS THE TIME! I literally started developing the experience today on 12th July just a day prior to the deadline and starting everything from scratch was the main challenge for me. The challenge was to skip meals and continue working on it to finish it. The challenge was to keep my eyes open all the time and not louse off. The challenge was to manage both the office work & this development so I could finish at least the basic implementation of my idea ✨🥵

Also some of the major technical challenges I ran into while developing was to implement the dynamic nature of node programming into the lens giving the users full freedom of however they can arrange the sequence and bot should act according to it 💻

Accomplishments that I'm proud of 🥰

I WAS ABLE TO COMPLETE IT WITHIN THE TIME 😭 I'm very proud of the fact that I didn't have to make any compromises to the experience to develop and publish it out. I'm proud of developing it end to end within the 24 hrs. of time. I was about to cry when I wasn't able to figure out the logic behind dynamic implementation of the action sequence, but took a deep breath, had a short walk outside and finally managed to get it resolved by putting my brain to stress test 😂 This is what I'm proud of.

What I learned 🧑‍🎓

I managed to learn the workings behind the tweenManager & also modified it a bit to support better to my lens experience. Also learnt many new APIs and methods which helped my idea come to life.

What's next for Code Blocks ! 🔮

This was just the beginning, think of it like a working prototype of the grand idea. I would love to see kids use this experience to learn about visual scripting in a very engaging way. I'm planning to add in loop action, collect & drop action, if else actions etc. and accordingly create interesting new levels to help users learn logic development in a whole new exciting way

Built With

Share this project:

Updates