We've detected that you are using an unsupported browser. Please upgrade your browser to Internet Explorer 10 or higher.

Inspiration

The genesis for this game was borne of a very real, everyday challenge we encounter in our daily lives – waste segregation and disposal. Despite the apparent simplicity of the chore, the real life implications and complexities of proper waste management are huge. Our objective was to craft an engaging gaming experience centered around this concept.

What it does

In our game, players take charge as eco-friendly waste collectors, navigating their vehicles through diverse urban landscapes. As they progress, players are prompted to make eco-conscious decisions regarding waste segregation, fostering awareness of responsible environmental practices.

What all are involved

The project can be divided as parts below:

  1. Loading
  2. Controllers & Persistence
  3. Game & Overlays
  4. Animations

Loading

The main reason of the loading page was to load all the audio assets and cache images/animation assets.

Controllers & Persistence

All the stored items go through a set of controllers, which are listened for changes all over the app.

Game & Overlays

Finding the perfect balance between in game renders and overlays was quite tricky and finally via modularizing the components, we figured the right way to balance this out.

Animations

Found out the power of Flutter animations while working on this project. Right from sprite animations to sprite sheet animations.

Challenges we ran into

  • The biggest hurdle was the limited time available. Discovering the competition with only a week to develop the game presented a significant challenge. Thankfully, with the power of flutter and flame things were smooth.

  • While we had a clear vision for the animations, translating those ideas into the app proved to be another obstacle. Fortunately, we were able to leverage the power of Sprites to achieve our desired results.

Accomplishments that we're proud of

Many accomplishments made us proud while working on the project, right from the guide path we build from the trash icon to the truck.

@override
  void paint(Canvas canvas, Size size) {
    var path = Path();
    path.moveTo(leftTop.x, leftTop.y);
    path.lineTo(rightTop.x, rightTop.y);
    path.quadraticBezierTo(
        (rightTop.x + rightBottom.x) / 2 + ((leftBottom.x - leftTop.x) / 2),
        (rightTop.y + rightBottom.y) / 2,
        rightBottom.x,
        rightBottom.y);
    path.quadraticBezierTo(
      leftBottom.x - ((leftBottom.x - rightBottom.x) / 2),
      leftBottom.y - ((leftBottom.x - rightBottom.x) / 2),
      leftBottom.x,
      leftBottom.y,
    );
    path.quadraticBezierTo(
        (leftTop.x + leftBottom.x) / 2 + ((leftBottom.x - leftTop.x) / 2),
        (leftTop.y + leftBottom.y) / 2,
        leftTop.x,
        leftTop.y);
    path.close();

    canvas.drawPath(
      path,
     ...
    );
  }

Through the combined power of Path and QuadraticBezier curves, we were able to achieve the exact visual path we envisioned.

What's next for Bin It Right

As passionate creators of 'Bin It Right,' our vision extends beyond its current iteration. We plan to enhance user engagement by introducing dynamic levels and challenges, incorporating user-generated content to foster a sense of community, and expanding educational elements with real-world waste reduction tips. Collaborations with environmental organizations are in the pipeline to amplify our impact and encourage eco-conscious gaming. Additionally, we aim to optimize the game for accessibility and explore partnerships for wider distribution. Our commitment is not just to create a game but to drive lasting change, transforming 'Bin It Right' into a powerful catalyst for global awareness and action on waste management and sustainability.

Updates

  • Added a green wins gallery for meta progression.
  • Responsive
  • Multiplatform support
  • Bug fixes

Please find the refined APK here -> https://drive.google.com/file/d/1NN6NNxOaIHTFhxm_UX4_3fBFQeeSSJkR/view?usp=sharing

Educational content

  1. https://medium.com/@dhanish_9850/4dab80370ef2
  2. https://medium.com/@dhanish_9850/abfdc05a3ce8
  3. https://medium.com/@dhanish_9850/2b9d8aa82bbb
  4. https://medium.com/@dhanish_9850/3662c28765a8
  5. https://medium.com/@dhanish_9850/7761a143ca74
  6. https://medium.com/@dhanish_9850/creating-a-sprite-scroller-for-vertical-infinite-scrolling-in-flutter-flame-d6ca2a868c8e
  7. https://medium.com/@dhanish_9850/d9bceba97f03
  8. https://medium.com/@dhanish_9850/exploring-sprite-animation-and-animation-ticker-in-flutter-flame-b338a63ce9a4

Note: Now supported for screens with width of 375px and above.

Built With

+ 61 more
Share this project:

Updates