Behind The Scenes: Building Code Camp World 3D

Code Camp World, our very own coding platform, was built with an incredible team of Aussie developers at our Sydney HQ. In the Summer of 2017, we decided to launch the world's first 3D kids coding platform designed specifically for education. Here's an insight from lead designer, Opal Liang into the design process that lead to the release of Code Camp World 3D.

Research, Design & Pre-Production

Contextual Research

Audience

The coding program is aimed at kids between 8-13 years old kids ready to begin line coding in Java Script. All the games created during camps are later published and shared with parents  via the Code Camp mobile app. The new 3D assets must appeal to both kids and parents.

Screen Shot 2018-11-14 at 1.35.14 pm.png

Platform

The Code Camp platform is run entirely online, so to give our students the best possible learning experience, it was imperative that our content is lightweight and fast loading.

CC_boy_modelsheet@2x.png
capture_1024.png

3D Renders & Game Engine Tests

We took existing 2D character from the CodeCamp graphics library and experimented with different ways of rendering the model in 3D.

We also tested models under different lighting methods within the Unity based engine until we finally reached a solution that translated across from design to render to engine display.

NEW_Texture5.gif

Protype Pipeline Implementation

One of the key learnings from initial testing was the need to design characters with 3D topology in mind. From this, I changed the way I delivered model sheets. Supplying separate character model sheets detailing topology, colours, textures and scale relation to other characters.

3_full_Crops.png
2_full_Crops.png

Production, Optimisation & Outcomes

Redefined Production Pipeline

As we come to learn more about the capabilities and limitation of the game engine- we had to make visual decision to accommodate for faster loading of models on the platform.

Engine lighting test results helped us decide on flat colour shading for the bulk of our designed assets, leaving 'baked in' gradient textures for higher fidelity ‘hero’ character models.

Image upload crop.png
Dragon_2_modelSheet_cropped.png

Character and Narrative Development

Building on the lesson plans developed for original program; we developed background stories for our characters and set designs.

This helped enriched the 3D game world and made sure that we could cater to the requirements of a Hero’s journey - no matter what story our students wanted to tell.

assets_crop.png
environment wip CROP.png
Screen Shot 2018-04-17 at 3.26.46 PM.png

Creating Variety by Design

Having established a pipeline; the next step was to build variety into the 3D universe with diverse, fun and theme based character packs and environments.

We did this by introducing vastly different shaped models as environmental props; creating level specific textures and colour palettes, as well as recreating the more popular themes from CodeCamp 2D - ie- Candyland, Space and Lavaland.

In-Engine Lighting & Environment Optimisation

Bringing our assets into the Code Camp World platform was where the artist and developers shine.

For every suite of characters and levels, we created matching Sky Backgrounds (that changes lighting - ie- orange light for sky at dusk and cold blue light for night) and Floor Textures (that affects physics and gravity- ie- more float in Space, less

friction on Ice).

Screen Shot 2018-11-14 at 2.07.20 pm.png
Screen Shot 2018-11-14 at 2.04.12 pm.png

UX and UI Optimisation

While we tinkered away with the in-platform game assets; the UX and UI team were making strides on the usability and interface design of the platform.

Seeing the entire platform come together as a functional product was one of the most exciting phases of the project.

[optimize output image]

Project Outcomes

The assets we created were later adapted into the 3D World Builder and AR Creators school holiday programs at Code Camp.

The entire process of designing game graphics for Code Camp World 3D has been a joy of a journey and I’m grateful everyday for having been part of the team that brought to life characters and worlds that will go on to show and inspire children the awesome creative potential of coding.

[optimize output image]
[optimize output image]

The Team Behind Code Camp World

This project is a labour of love that could not have been possible without the help and collaboration of the incredible, talented and humble R&D team at Code Camp. Eilish Boyack for her brilliant 3D execution of my designs; Hayden Wheeler and Chris Glover for their patience and game engine dev work; Joshua Shuvalov and Carmen Famularo for their sleek, beautiful UX and UI designs; Louise Muszynski for managing us through deadlines; Josh Morgan, Martina Kainberger and Jo Thatcher for their back-end coding wizardry; Fidel Torres, Dean Mouslimani and Ambrose Hill for their front-end work; and last but certainly not least Dan Zwolenski for leading this mammoth feat of a product development project and giving us the opportunity to be part of such an incredible family.


We've taught more than 80,000 kids to code.

Find out why Code Camp is Australia's Highest Rated School Holiday Activity. Learn to code at more than 100 locations nationwide these school holidays.

Learn More

Related Articles

No items found.