Flutter flame sprite duplication on Android but not Iphone? - android-studio

Question

Making a game using Flutter Flame engine and AndroidStudio for development. The render function uses canvas.save() and canvas.render() functions that ensure that the screen is clear between frames (to prevent duplicate sprite drawing). On IPhone simulator the app runs as expected, however on multiple Android Simulators duplicate sprites are rendered. Can't figure out why this is happening... Any help appreciated!
import 'dart:ui';
import 'package:flame/components/component.dart';
import 'package:flame/flame.dart';
import 'package:flame/game.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
class ThisGame extends Game {
final SharedPreferences storage;
Size screenSize;
double tileSize;
Player player;
double spriteSize = 128;
double timeElapsed = 0;
ThisGame(this.storage) {
initialize();
}
initialize() async {
resize(await Flame.util.initialDimensions());
player = Player();
player.x = 0;
player.y = 0;
}
#override
void render(Canvas canvas) {
canvas.save();
player.render(canvas);
canvas.restore();
}
#override
void update(double t) {
timeElapsed += t;
if (timeElapsed > 1) {
timeElapsed = 0;
player.y += t * 300;
player.x += t * 300;
}
}
#override
void resize(Size size) {
screenSize = size;
tileSize = screenSize.width / 9;
}
}
class Player extends SpriteComponent {
Player() : super.square(128.0, 'player.png') {
this.angle = 0.0;
}
}

Answer 1

You don't have to handle the render method yourself, just add your SpriteComponent to the game and it will handle the rendering for you.
class ThisGame extends Game {
final SharedPreferences storage;
Size screenSize;
double tileSize;
Player player;
double spriteSize = 128;
double timeElapsed = 0;
ThisGame(this.storage) {
initialize();
}
initialize() async {
resize(await Flame.util.initialDimensions());
player = Player();
player.x = 0;
player.y = 0;
add(player); // <-- Like this
}
#override
void update(double t) {
super.update(t) // Also don't forget to call super
timeElapsed += t;
if (timeElapsed > 1) {
timeElapsed = 0;
player.y += t * 300;
player.x += t * 300;
}
}
#override
void resize(Size size) {
screenSize = size;
tileSize = screenSize.width / 9;
}
}
class Player extends SpriteComponent {
Player() : super.square(128.0, 'player.png') {
this.angle = 0.0;
}
}
Also, don't forget to call super.update(t) in your update override.