Hackathon 2019: Watch this space

The month of June usually signals the beginning of warmer weather and general summer vibes. This year, it’s started with wind, rain, and... minimal vibes. Not ideal. However, it’s not all doom and gloom because here at Gravitywell we’ve launched our latest hackathon! We haven’t escaped to the sun this time, so the expedition is being conducted from the control room that is our Bristol studio.

I hope the puns didn’t fly over your head. Our mission this week is to build the (demo version) multiplayer element of a rocket-to-the-moon themed educational game for school kids aged 4-10. The game is accessible for the teacher and pupils, so both areas need to be considered. This week we’ll be focusing on only one game-type at only one difficulty/year group level. It’s Wednesday at the time of writing, and we’ve made fast progress since liftoff on Monday morning. Here’s an update, starting with the development side.

James spent the first two days setting up the front end project with typescript, creating a login form for the teacher as well as dummy pupils, and working to make sure they aren’t duplicated.

Henry also focused on the ‘teacher’ functionality, and began by scaffolding and figuring data. He worked on parameters such as game difficulty, game length etc. The pupils involved will belong to a ‘crew’ and are eligible to join the Mission. A progress chart shows the teacher how well pupils are doing (against their previous score, rather than against each other).

Joining James and Henry, Sam started the week scaffolding the app with functions. He then added the game itself, the timer elements, and began work on the game stage. The initial wireframes include more elaborate game features, so these were reduced to what will be needed for the week.

An early challenge was to figure out how to make the leading rocket standout without those at the back seeming too far behind. The game may be a race, but pupils’ confidence is paramount. The stage features moving objects to give the appearance that everyone is progressing, with the moon gradually increasing in size/glow as players approach the finish line.

Launching his week, Jesús spent Monday working on data structure — the Mission, the rocket, pupil info etc. After reviewing this with the rest of the team, he worked with George to create models in GraphQL through AWS AppSync. Yesterday Jesús worked on the movement of the rockets, capping off the evening with an impressive demo. Simon was over the moon.

Meanwhile, George set up the backend with GraphQL and with Jesús, went through the schema to get data entities connected. He also looked at authentication methods we’ll be using to get the data. Yesterday, he started loading questions into the game and began to look at how we subscribe to the data, to connect a live feed between pupils.

Dev goals for Wednesday:

• Connect everything together, so that multiplayer is a live function.
• When players click the correct answer, their rocket will progress.
• Refactoring code to use hooks.
• Customise rockets.

Shifting across to the design elements of the project, Matt (AKA @projectmoon) has been looking at the game UI. An interesting consideration is the font, which needs to be within recommended guidelines for children’s education. Another consideration — being more aware of accessibility when it comes to contrasting colours. The aim for this evening is to finalise concepts and get a UI design across to the devs.

Laura’s illustrative afterburners were fired up from the get go. There were loads of assets to create. She started by getting the style nailed down, working closely with Matt and Sam. By the Monday demo she had created a rocket that was customisable with two colours, primary and secondary fill. Given that hackathons are time sensitive, just one rocket shape was created — this is enough for a demo version, and more can be built in the future.

Yesterday, Laura began work on the stage backdrop. To give the feeling of movement whilst not using a huge static backdrop, the assets will move much like a puppet show. An interesting creative choice was to use Procreate to mockup the backdrop quickly, before building the final version in Illustrator. The goal for today is to have the backdrop finished and texture added to the current flat design.

Stay tuned for more updates, in 5… 4… 3… 2...