Flame Game Device Orientation and Resolution
Flutter works on desktop, web and mobile. It’s difficult to test the orientation and resolution on all device types. Fortunately, there are many pre-built solutions that will automatically configure your game for you.
Flame.device.setLandscape() will force the game to display in landscape mode.
This will put the device in landscape mode, but the resolution is wrong and there are mobile phone overlay icons on the screen for time, Wi-Fi, battery and other information.
To get rid of the default overlay, use Flame.device.fullScreen().
Now, the game screen does not have the mobile phone icons, but the resolution is still wrong.
Prior to fixing the resolution problem, let’s take a look at the code for the orientation and full-screen methods. Above the Flutter runApp() method, run the Flame.device.* methods. Prior to setting the device settings, run WidgetsFlutterBinding.ensureInitialized().
void main() {print('setup game orientation');WidgetsFlutterBinding.ensureInitialized();Flame.device.fullScreen();Flame.device.setLandscape();print('1. load the GameWidget with runApp');runApp(GameWidget(game: ChickenGame()));}
To set the proper game resolution, add this line to the game onLoad() method.
camera.viewport = FixedResolutionViewport(Vector2(1280, mapHeight));
You should now have the proper resolution on both mobile and desktop.
Free Game Tutorial Series
The Charlie Chicken tutorial series will be covered in this free playlist on YouTube.
In addition to the viewport and resolution configuration, the series includes tutorials on:
- free game editor Tiled from mapeditor.org
- free sprites and tile sheets from artist Frog Pixel on itch.io
- virtual joystick controller from the Flame package with variable speed of Charlie
- display of Tiled map files in Flame
- world bounds detection
