Leave Me Alone

Wear a mask and start the game
Choose a level you would like to play
Hurry and help the characters maintain social distancing

Inspiration

During this worldwide pandemic, we are constantly reminded to wear our masks and adhere to 1.5m social distance wherever we go. Inspired by this, we've decided to gamify this daily routine where players can help our characters maintain social distancing and receive masks. In doing so, we hope to lighten the mood regarding the current situation and remind everyone that we can overcome COVID-19 together.

What it does

Leave Me Alone is a game with different characters who need the player's help in maintaining social distancing. In the form of a slide puzzle, the player needs to separate the characters with the use of 1.5m distancing blocks. As long as each character doesn't have any other person on his/her top and bottom, left and right, the player will win and receives a mask.There is actually more than one way to win the game, so for those who are up for a challenge, you can always try and win with the least steps possible.

Leave Me Alone also has different game difficulties. More characters will appear in more difficult levels. If any players get stuck, don’t worry, just simply click the hint button or shuffle the puzzle again to start anew. Desktop players can move the characters and the blocks using the arrow keys or by clicking, while mobile players can do the same thing by tapping or sliding the puzzle. Don’t forget to tell others to leave you alone when you are playing.

How we built it

We first started brainstorming different ideas on playing slide puzzles, researching a lot on the visuals of how the puzzles can look, but we soon realize that something is missing. Even with a good visual, the game seems to be lacking a story to make it complete and interesting. So we changed our thinking direction and started taking inspiration from our surroundings for a story. Seeing how the pandemic has affected our daily lives tremendously, we eventually settled on the idea of social distancing and started working on incorporating it into the puzzle.

During the design stage, we aimed at creating a very clean aesthetic. After all, being clean is very important these days. We drafted different characters and added animation and sound to build up the experience bit by bit. After that, we based on the proposed design to start our long coding journey.

In the development period, different plugins are used in this project. Flutter Bloc is used in this project as state management, animated Image is powered by Lottie format, Beamer is used as the route management and Just Audio is used as audio controlling of game sound effects. Besides, we wrapped LayoutBuilder to create a custom widget to declare the layout in different screen sizes. Different layout components are also created as a custom widget to maintain the flexibility and reusability in coding.

Challenges we ran into

Supporting multi-platform is one of the key elements in this project, but it is also a challenge. Although we can develop different platforms’ applications in one single code base, the performance between different platforms might be slightly different. For example, the images loading, rendering and performance can be different between web, mobile, and desktop due to the difference of the processing power of the devices and the rendering architecture. Extra handlings (e.g image and assets pre-caching) needs to be done to align the performance and visual effects on all platforms. Beside the performance concerns, designing and developing responsive layouts for different platforms is another huge challenge. We have to spend time on thinking how the interface of the game can fit in different sizes without affecting the user experience since having a great user experience in a game is a key to enable the user to understand the message we would like to bring out in game. And the code must be reusable and maintainable so that we can re-use different widgets in different devices and layout structures.

Accomplishments that we're proud of

From designing to coding, we are happy that we could reimagine the slide puzzle as something simple and relatable to everyone. Inspired by the people around us, we created a number of different characters and were able to complete the storytelling little by little through the use of animations and sounds. We are delighted to see Leave Me Alone turning into more of an experience than just a slide puzzle.

Besides, using Flutter to create a multi-platforms supported application in a short time is no easy feat. As our first multi-platforms project, it has a lot of challenges and difficulties we have never met before. Although the road is rough, we are proud of overcoming these obstacles, and that our team worked smoothly together to solve the problems. It is amazing that we can turn our idea into reality and share it with others by using Flutter.

What we learned

Without a doubt, we have learnt more about designing and building Flutter apps. Since it is our first multi-platforms project, we have learnt how to streamline workflow and work as a team to overcome any problems that might arise. During this process, some compromises must be made to work around different situations, but we are grateful to have gained such an experience within this short period of time.

What's next for Leave Me Alone

In the next stage of Leave Me Alone, we hope to introduce more games or levels about other preventive measures for COVID-19 such as hand sanitizing, vaccines etc. We want to keep supporting everyone through fun and interesting gameplay as we face this pandemic together.