👾 Flutter Hackathon #Hack20

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.

My Team consisted of myself and two of my friends/work colleagues: Rich Kinsella and Julio Ernesto Rodríguez Cabañas. Before we started, we selected the Cyberpunk theme and came up with a rough idea:

"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.

🧠 Brainstorming

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

After some research we came across tutorials from JapAlekhin - they are amazing. One of the tutorial's conclusions highlighted how easy it was going to be to integrate with Flutter.

"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:

Some screens of the final game

Above are the connector block wireframes (left) and final designs (right). We had to keep a 1-pixel overlap to make the lines connect.

😅 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.

🔗 Links

Team members:

Design Rich Kinsella
Development Julio Ernesto Rodríguez Cabañas
Development Iain Smith