CODXR with FIO

CODXR is a fun and interesting way to learn spatial coding in personal spaces. Built on WEBXR, this tool is a cross-platform XR experience ensuring accessibility and scalability.

Comment

Inspiration

Inspired by the love of coding, education, and the interest in building in a 3D space, our team has explored ways teens can leverage their devices in personal spaces to upskill themselves in different aspects of life and spatial coding.

What it does

CODXR is a coding game that aims to educate and bring fun to learning about 3D coding. Learners are faced with obstacles and strategic coding problems to solve to help FIO (the robot) navigate through a myriad of personal spaces. FIO's goal is to learn as much as he can about humanity as possible. In the future, learners can upgrade their robots and equip them with gear to help accelerate their level of progress. Coded on WebXR, this game has a low barrier entry, working seamlessly into the lives of our learners.

How we built it

Unity for quick prototyping: using Unity blocks to test interaction with the code building blocks we developed. React-three/xr, 3JS, react-three/fiber

Challenges we ran into

  1. Storing progress: We decided to store them locally on the browsers for the MVP as the experience is quite personal.
  2. Randomizing spawn points for the bot and the exit point: A logic needs to be done where the bot spawns the opposite from the exit.
  3. Edge cases for when there are no windows or doors to mark the escape point for the bot: We would be generating a window instead.
  4. Accelerating in 3D space because there is velocity we don't know the exact distance (cm): We overcame it by setting weak, medium, and strong and predetermining the values to make it easier for the user.
  5. Creating good visible affordance for the building blocks: how to grab them and which are able to connect to each other.
  6. Managing expectations, and thinking about what we can accomplish.

Accomplishments that we're proud of

  • Finding an interesting and understandable user experience of pulling and pushing to adjust parameters in the coding blocks.
  • Implementing new types of interactions
  • Finding a middle ground on design and dev challenges. We are proud that we figured out what to do as a team in the end.
  • Our super amazing promo video
  • Being able to pull off so many workable features in such a short time

What we learned

  • To challenge ourselves outside of 2D plane design in 3D space.
  • To listen to each other and truly understand the subject and audience we are building for.
  • To think outside the box.

What's next for CODXR with FIO

1st Phase: MVP Players can play alone in their rooms, learning more and customizing their bot.

2nd Phase: CHALLENGES Players can use a utility belt to insert portals, jump pads, and platforms to help their characters quicker to the end goal. Monetization can happen here.

3rd Phase: MULTIPLAYER MODE Users can create private rooms to play with their friends and family. They are not limited to headsets.

4th Phase: COMMUNITY CREATORS Players can create their own rooms and submit them as VR experiences for other players to enjoy.

To view our project, visit the website https://xrcc-2024-f10.vercel.app/ with your headset browser

Our team would love to show you our application in person, to also reduce the time for setting up a play space!

Built With

  • framework:-react-three/xr-+-react-three/fiber
  • platforms:-webxr
  • react-three/fiber
  • react-three/xr
  • typescript
  • webxr
Share this project:

Updates