In the second instalment of GUSwitch winner’s blogs, co-winners, The Crybabies, share their experience of building BOOgie Mansion in less than a day!

By: Chloe Dalziel, Yasmin Jamshidi, Peter Maitland, Youssef Moawad, Dasha Shumitskiy  

We are Crybabies! The team is made up of a postgrad computer scientist, two software engineers, a half-chemist half-software developer, and a biomedical engineer.

When the keywords were revealed we unanimously agreed the words ‘ghost’ and ‘party’. Parties usually involve games so making a game seemed like the natural solution. Additionally, for the past two years, the computer scientist has been desperate to build a PhaserJS multiplayer game. So, development on BOOgie Mansion began.

We began brainstorming and organising our ideas for the game on a Trello board, voting for our favourites and discussing feasibility in the restricted time we had. Once these ideas were finalised, tasks were defined and organised on a ‘to do, doing, blocked, done’ board.

An extensive number of assets were required, and the hackathon emphasised the importance of creativity so, two worked exclusively on creating the assets, two worked on programming, and one worked in between these tasks as needed.

Tech-wise, we decided to go with PhaserJS, to render the game elements on a web page and Socket.io to facilitate two-way communication between the game server and connected players. The Socket.io server was implemented in Python and was hosted locally on one of our machines.

We went for a somewhat unconventional collaboration method; while we did set up a repo for our code, the limited time meant we didn’t want to deal with git’s usual hassles. We used Visual Studio Code’s Live Share extension to work on the code together, similar to one giant Google Doc. This had the added benefit of letting us forward specific ports from the host machine to the rest of the team. This meant team members could work on different sections of the app and be able to test out their changes without needing to refresh a page on the host machine.

This also made it very convenient to test out the multiplayer aspect of the game; as several members of our team could try to connect one game session, despite our physical distance, and without needing to host the game somewhere online.

For each active game session, the server stores the position of each player on the map and their score; when a new player joins, a socket connection is established and they start receiving updates about the game state, their views updating as they do. As the state of a player changes, the server is updated and it broadcasts the new game state to all players at regular intervals.

For asset creation, snack art was created in Autodesk Sketch and exported to transparent PNGs for importing and scaling into the game. The background was based off a Club Penguin mansion found on Google Search when looking for artistic inspiration. To cut the drawing time as much as possible, the game background art was designed to be symmetrical and, after finalising the initial sketch, it was lined in illustrator so areas could be cut and pasted and reflected across the Y-axis. The final asset which was created was the ghosts. It was created as a vector asset in Illustrator and animated in After Effects. Unfortunately, the animation did not make it into the game.

The challenge of a seven-hour hackathon pushed us to refine our workflow to be as efficient as possible to allow us to create a functioning game in this time. Our end product was less than perfect but we were very happy that our goal of a spooky multiplayer experience was achieved.

We would like to extend our warmest thanks to the amazing team behind GUSWiTCH for putting on such a fun first hackathon, and to Cloud Cover for making the event possible.

The post Guest Blog: Building BOOgie Mansion appeared first on Flyte.

In the first of two blogs, co-winners Team 8, share their experience of what it was like to participate in a virtual hackathon.

By: Ana Forero, Mark Harris, Hector Jones, Fin McCallum, Leon Tadina

Just an average hackathon day. It’s Saturday, so we enjoyed our morning of introductions before meeting together for the first time.

At this point we were still confused on the rules. We’re used to having prep reading so being given the rules then diving right in on the same day was a new experience!  After a quick read we figured we needed to choose a word from the options to make our theme and create software that followed said theme.

We chose the word pumpkin. I didn’t mention above but we’d misinterpreted the rules. We had to choose TWO words to make up our theme, but more on that later. We started coming up with some good ideas for what we were going to code quickly, with only three of us physically present and another teammate in quarantine on a video call.

The concept of a pumpkin programming language was thrown into the mix, but not discussed further due to time constraints. Then we had an idea. We’d create an algorithm that would put messages into a picture of a pumpkin, perfectly themed and not as hard to implement as a pumpkin programming language. It was time to get coding.

We broke up the function quickly, encoding, decoding, dictionary generator, picture parser. Dividing these roles and working on them – the most artistic hands on the pumpkin drawing and colouring, the rest on coding.

An hour before deadline, we were ready… kind of. We had a working dictionary generator, which would convert a range of printable characters into shades of orange; an encoder, which would take an array of pixels representing a pumpkin and colour in whatever needed to be coloured in orange, starting with the message and then filling out the rest with padding values.

Needless to say, we had a bug. A big one. The message was getting through the decoder, but instead of a simple “hello”, we were getting “hhheeeellloooo”. 15 minutes to the deadline, this was less than ideal. So, we started using the best debugging tools at our disposal: print statements.

A stroke of genius told us that the problem was with how we saved the image, and sure enough, we were saving the image as a different size than our base image. This meant pixels were stretched, stretching our message in turn. Some quick googling landed us on using a PNG format. We did it. We had a working demo.

One minute into Team 1’s presentation, we realize that we actually had to choose two words for our theme. At this point we were proud of what we made, and as good coders, we didn’t want change anything in our bug ridden, uncommented code. Our saving grace came in the word “plant” in the second set of words. A team member suggested: ‘we plant the message…in the pumpkin’.

We get a chuckle from the judges when we present our choice of words and explained our program. Next came the results. We were experiencing some Zoom sound issues so when the judges announced we’d won, we missed it. Thankfully our quarantined teammate hadn’t and passed on the good news!

We closed the day with some pizza, played some Among Us and an early night, riddled with dreams about how we could improve our code at some point.

The post Guest Blog: A day in the life of a hackathon appeared first on Flyte.