Veggie Dash

Fly Dash through the obstacles and learn about the environmental benefits of a plant based diet. Compete against others to beat the high score and hold the collectable pass in your Google Wallet.

Comment

Inspiration

“I couldn't give up meat” was my default mentality, despite considering myself an environmentalist. But then, earlier this year, my girlfriend, Naomi, and I watched “You Are What You Eat : A Twin Experiment” on Netflix. We were left absolutely stunned by just how damaging the meat industry is to the environment and how beneficial it would be for the planet if we all ate less meat.

We were so ignorant to this for years because we just didn't know the facts. We both feel that many people are simply unaware of the facts, like we were, and consume meat without knowing the environmental impact. We instantly knew that we wanted to become vegetarians and also spread the word about how damaging the meat industry is to the environment.

I found out about the Global Gamers Challenge a few days after watching the documentary, which felt like fate. Here was an opportunity to combine my programming skills and Naomi’s creativity and design skills with our new found desire to spread the word about eating less meat.

What it does

Veggie Dash challenges players to navigate Dash past obstacles, each of which has an animal perching on it. When Dash collides with one of the animals, a fact teaching the player about the benefits of eating less meat is displayed. Players can also attempt to beat the current global high score. When they do, they will invalidate the current champion's collectable pass and can add a new active collectable pass to their Google Wallet.

How we built it

I have been using Flutter for about two years in my current job, but I had never made a game before. We researched existing games around vegetarianism and were not very impressed. Most games just consist of a list of facts about how vegetarianism benefits the environment and don't actually involve any gameplay.

I read about Flame and the Flutter Casual Games Toolkit as they were mentioned quite a lot in the documentation about the challenge. Both of them seemed really interesting and we knew we wanted to use them to make an app that actually involved gameplay to spread the word about how beneficial vegetarianism is for the planet.

There are lots of YouTube videos and public repositories for games written using Flame and Flutter. I was looking through some to gain a better understanding of Flame and stumbled across flappy-flame by Pierre Monier. I remember how successful Flappy Bird and other iterations of the game before it had been (my friends and I used to play a similar game called “helicopter” back in school years ago).

What is more, the mascot for Dart and Flutter, Dash, is a bird, so incorporating a bird into the game felt right. Making a Flappy Bird style game featuring Dash with a message about eating less meat seemed like a great combination. Once this basic idea for the game was formulated. The development process was basically as follows:-

Bring flappy-flame up to date

Flappy-flame was written 3 years ago so I first had to update all the code and dependencies to run with the latest version of Flutter and Flame. I ripped out the original custom logic that determined if a collision had occurred and replaced it with Flame's collision detection. I also fixed various bugs, such as the bird not falling to the right position at the end of the game, the rotation animations not working when the bird rises and falls and the score not being shown at the end of the game.

Add global high score

I integrated Firebase into the app and used Firestore to store the current global high score, allowing all players to compete against each other to become the current world champion. It was also necessary to add fields to the dialog shown when the user beats the current global high score so that they can record their name and a sustainable message for the world to see.

Integrate with Google Wallet

I started by adding the functionality from the Google Wallet codelab to a Firebase function so that the example pass from this codelab could be added to my Google wallet when I beat the current high score. This also meant the game over dialog had to be tweaked so that an “Add to Google Wallet” button would be displayed when the user beats the high score.

I then used the generic pass builder to adapt the example codelab pass to look how we wanted it to look. At this point, the custom Veggie Dash pass was successfully being added to my Google Wallet, but this felt like the standard and most basic integration possible. We wanted to do something a bit extra and different. That's when I saw that the Google Wallet API has a patch endpoint. So we decided that instead of every champion in the game's history having a collectable pass in their wallet, we would use the patch endpoint to invalidate the previous champion’s pass so that there's only ever one active Veggie Dash pass in existence.

Using Flutter Casual Games Toolkit

I then transplanted this game code into the Flutter Casual Games Toolkit and integrated the template's persistence and sound functionality into the game.

Adding custom functionality

I came across a sprite image of Dash flying in the Flutter Demo Game Assets. I knew I wanted to add that to the game, however I didn’t even know what a sprite was so it took some research to figure out how to use it.

I also found some nice sprite images of various animals on itch.io and added them perched on top of the pipes that appear in the game. Standard rectangular hitboxes were either too big or too small for these animal sprites so it was necessary to create custom hitboxes for them.

It was also necessary to add a custom overlay when the game ends that displays a fact related to both sustainability and the animal that Dash collides with.

Styling

Everything in the app has been totally customised, including the app icon, the design of the ground, background and obstacles within the game, the fonts, the animation of the text, the dialogs shown at the end of the game and the transitions and animations within those dialogs. We also tested the project on both mobile and web and adjusted it so that it is as responsive as possible to all screen sizes.

Challenges we ran into

Time frame

The challenge had already been running for a month by the time I found out about it in mid-February so we didn't think we were going to have enough time to get everything done that we wanted to for this challenge. The Flutter Casual Games Toolkit was such a great resource and helped to save a lot of time. As we were on such a tight deadline, It was important to always have a clear plan, which we recorded in a Google doc and constantly updated as new tasks came to light and as tasks got completed.

Initial idea

We considered many ideas at first, such as a wordsearch, a Wordle-style game, gamifying exercise and recording how many emissions the player has saved. Settling on a final idea took a while and made us quite anxious as it didn’t feel like we were making any progress towards our end goal. But we knew we didn’t want to start development until there was a clear and firm idea for the game in place. This paid off in the end because having a clear idea of the game we wanted to make made development so much easier.

Google Wallet API errors

When testing the integration with the Google Wallet API, there were quite a few times when the browser or Google Wallet app would be unable to add a pass and the UI would just say “Error: something went wrong”, which made debugging quite difficult. Thankfully, I managed to get the Google Wallet integration working in the end but I do feel that the error messages could be made more developer friendly.

Accomplishments that we're proud of

Firstly, we've never worked together on a software challenge before so we're proud of how we've worked together to create something worthy of submission, all in about a month. We're also very proud that everyone we've shown the game to has had a smile on their face while playing it, reacted positively to the facts around sustainability that the game has shown them and has wanted to play again!

What we learned

Google Wallet API

I had used Google Wallet on my Android phone before entering this challenge but was totally unaware that the Google Wallet API existed. Integrating a game with this API seemed like a very daunting task but I was surprised at how quick and simple it was to write the code, which is testament to how simple and intuitive the API is.

Flame engine

Again, I was unaware that Flame existed before entering this competition so it was a steep learning curve. It took me a while to understand several Flame concepts, such as the relationship between Flame components and Flutter widgets, collision detection, manipulating hitboxes around components and controlling the size and positioning of components on screen. But I have grown to love Flame and using it during this challenge has made me very keen to use it to make more games in the future.

YouTube Shorts

Neither of us have experience creating content for YouTube. So making a video was quite a new experience for both of us. The amount of work it took to capture all the raw footage, edit it together and add the voiceover for a video that is less than 60 seconds long surprised us and gave us a new appreciation for all the content creators on YouTube.

What's next for Veggie Dash

I have a list of further code optimisations that I would love to make to Veggie Dash, such as documentation, unit tests, making it even more accessible and making it run on even more platforms. We also love the idea of partnering with local stores that will give the current Veggie Dash champion discounts on vegetarian, eco-friendly and sustainable products.

Built With

Share this project:

Updates