Cloud Cover IT proudly sponsored Glasgow University Society for Women in Tech Halloween Hackathon on Saturday 24th October. Eddie Pryce, SharePoint Developer, was one of three judges who graded the teams on innovation, creativity, and meeting the brief.
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.