Julio, Rich and I took part in this year's Flutter Hackathon, #Hack20. Here is a recap of the event and the app we submitted.
What is #Hack20?
#Hack20 took place on June 27th-28th this year and was the second Flutter Hackathon organised by the Community. Previous years had seen local Flutter communities hosting events to take part, but due to COVID-19, the hackathon was all online. As part of the new format, the organisers hosted six live stream sessions ranging from tutorials, Q&As and ceremonies. The first session was the opening ceremony, detailing the rules of the hackathon. Teams had the choice of two topics:
- 🌎 Saving the planet/Eco/Pandemic
- 👾 Retro/Cyberpunk future
After a Team had selected a theme, they had the weekend to build and submit a Flutter app. Voting commenced the following week. The top 20 were announced on Friday 3rd of July.
"A puzzle game where you are a cyberpunk trying to bring down the government... or something."
With this, we then started to brainstorm some ideas.
Julio and I have been playing Shenzhen I/O for a couple of weeks and liked solving electronic puzzles. We thought we could make a similar game. After some deliberation, we decided that a Shenzhen clone was too ambitious for a weekend and simplified the approach to a game with logic gates. Here is one of the initial designs:
This idea was further developed into only using NAND logic to solve the problems. Then we started to realise, there would be issues with the inputs on the logic gates, i.e. What side of the square would be input or output? You can see from the image above the input is on the bottom and output on the left.
As Julio and I were coming up with more absurd ideas on how this would work, Rich mentioned how this idea reminded him of the Spiderman hacking game:
Inspired by the simplicity of this game, we decided to switch to only arithmetic operations. This solved a lot of our implementation issues, as we would only have one input, operation and output per component. It also solved another problem we had, of connecting the blocks, by using connector blocks to create the circuit.
With this idea, we had a solid plan and started to look at the coding side, while Rich worked on the design.
🤓 Hacking Time!
We decided that we could save a lot of time if we found a game engine that integrated nicely with Flutter. I had heard about Flame but didn't know enough about it. We decided, if Flame could meet these criteria, then we would use it:
- Gesture support - Drag and Drop
- Audio support - sound effects and looping background music
- Integration with Flutter components - Buttons, etc outside of the engine
- Animation support - Rive or simple animations
"Based on my experience developing games using Flame and Flutter, I have found out that having a regular widget tree in a game is generally good practice.
Buttons, text, dialog boxes, text input, and other UI elements become significantly easier to create.
There’s no set-back on performance and the only thing tricky to set up is the communication between the game and the UI class."
- Japa Alekhin Llemos
Other research involved looking at open source Flame games, e.g. BGUG. We managed to check off all the criteria we needed to push on with Flame as our chosen engine.
Julio had created a script, which can find here, which allowed us to divide the work in such a way that we never had conflicts or overlapping tasks, i.e.,
- Rich - Design, video and descriptions
- Julio - Wireframes, Flame and puzzle design
- Iain - Flutter navigation/screens, communication between Flutter and Flame, Voiceover, Music.
This allowed us to be very efficient, another key to our success.
We also had to consider text scrolling, to display some of the dialogue in the game. We found the package Animated Text Kit but it didn't quite work the way we wanted. We modified the original "Typewriter" to allow for multi-lines and delays between the lines.
While this was going on, Rich had finished the designs, even a couple of different options on some screens! The game was starting to take shape:
Below are the connector block wireframes (left) and final designs (right). We had to keep a 1-pixel overlap to make the lines connect.
Shown below are some screens that didn't make it into the game due to time: a chat screen concept and an alternative newspaper screen.
😅 Final Result
Rich created the video, which was one of the main reasons for our success, it's awesome even with my voice over! We fixed some last-minute bugs and added a skip level button, as we were too tired to complete our own puzzles, we hadn't gone to bed! The project was complete! This is the end result and video that we submitted:
We manage to place 10th! Which is amazing! I would urge you to check out some of the other submitted apps, they are all great, open-sourced and have demo videos.
Here is what the judges had to say:
🤔 Final thoughts
I had a great time at the hackathon, it was well organised and I learned a lot about Flutter and Flame in a short time. I got a real sense of what it is like to develope with Flutter, I had to quickly make screens and tweak certain layouts. Flutter is ideal for this quick development as the tools are not restrictive. One issue I came across was the dynamic typing where I thought an object would be this type but wasn't; this isn't a huge disadvantage as it allows for other language features, its just hard to debug.
I got a sense of what the Flutter community is like, a great bunch of people happy to help one another. There are a lot of people in the community, ~2600 participants 😲.
I want to thank the sponsors and organisers for creating a welcoming hackathon. It was also a pleasure to be making something with a talented Team.
Next year we will definitely enter again as Team "Float like a Dash, sting like a Dart". Hope to see you there too!
If you have any comments or questions about the game, please don't hesitate to ask below.