Tutorial : how to build a Flutter game!
As part of the hackathon organized by Devpost and Flutter, I created my application PanicOfPlastic, it's a game based on the collection of plastic bags by a recycling bot the goal of the game is to collect all the plastic bags using the controls (arrow buttons to move), the teleportation tools while avoiding the black holes to absorb the bot this tutorial explains the steps I went through to create my PanicOfPlastic application
I was inspired by the game SuperDash, I used the same template Endless Runner Flame Template that launched with the recent update of the Flutter Casual Games Toolkit.
We partnered with the Flutter team at Google to develop a multiplatform game for Android, iOS, and Web from idea to launch in just 6 weeks with Flutter and Flame. Inspired by nostalgic classics like Super Mario, players run in a side-scrolling platformer game as Dash, who collects acorns and eggs to maximize her score and progress through levels.
The game can be played on a desktop browser and is available for mobile on the Apple App Store and Google Play. The code for the game (including mobile platforms) is open-sourced and available in the super_dash repo on GitHub.
How to play
The recycling bot through each level collects plastics bags and bottles to crease his score. Press the spacebar or tap the screen to start the game and move the bot using the arrow buttons to avoid black holes and collect all the plastic bags to make it through the level.
Use Teleportation tool to move faster, from one side to another.
Step 1 : Design
design is an important step, I consider it more important than code itself, because the majority of the code was automatically generated by Flutter.
For the design, I used Photoshop to create the different entities (Bot, plastic bags, etc.), logo, main page ..
in the design part I saw the FlutterFlow tool FlutterFlow, it was the first time I used it, this tool allows you to create and deploy Flutter applications using graphical interfaces, it allows people who don't really like coding to create their own applications
for the design of the map, I used Tiled it allows you to use layers and draw all 2D shapes
the .tmx file of the map generated by tiled, as well as the layers and the different objects, we put them in the /Assets directory of our project
regarding the background music, I used the sound of birds for two reasons: to avoid copyright issues, because it is peaceful and to remind of nature
Step 2 : Code
As I mentioned earlier, Flutter generates a lot of code, which gives developers plenty of time to focus on their needs and write as little code as possible.
To do this, I created my application with the "Skeleton Application" command. This allows you to generate a skeleton application which contains the necessary code so as not to start from scratch.
for the /Assets directory to be taken into account in the code, we need to regenerate the assets.gen.dart file (you do not need to modify it manually), it is an automatically generated file, for this we use these commands:
- dart pub global activate flutter_gen On windows
https://pub.dev/packages/flutter_gen
- update dev_dependencies
flutter pub get
dart run build_runner build
C:\Users\\AppData\Local\Pub\Cache\bin\fluttergen.bat -h
C:\Users\\AppData\Local\Pub\Cache\bin\fluttergen.bat -c .\pubspec.yaml
to avoid mixing the texts (description, content, etc.) with the source code, we use the l10n tool, which allows a variable to be associated with each sentence
the app_locatizations.dart file will then be generated automatically with the following command :
--- >>> add gen_l10n to dependancies (pubspec.yaml)
flutter pub get
flutter gen-l10n
like SuperDash's game, mine uses Flame, an open-source game engine built in Flutter. While many casual games can be built with just Flutter alone, Flame extends Flutter’s development capabilities for games that require a game loop, collision, and maps.
All physical objects have rectangular hitboxes that are defined by the object’s size and position, and they don’t have to be the same as the object’s visual appearance, something that significantly improves playability.
LeapMap
A component accessible throughLeapGame.leapMap, theLeapMapmanages theTiledmap and automatically constructs tiles with proper collision detection for the ground terrain.
void main() {
runApp(GameWidget(game: MyLeapGame()));
}
class MyLeapGame extends LeapGame with HasTappables, HasKeyboardHandlerComponents {
late final Player player;
@override
Future<void> onLoad() async {
await super.onLoad();
// "map.tmx" should be a Tiled map the meets the Leap requirements defined below
await loadWorldAndMap('map.tmx', 16);
setFixedViewportInTiles(32, 16);
player = Player();
add(player);
camera.followComponent(player);
}
}
To add custom behavior, access the layers through LeapGame.leapMap.tiledMapand integrate your own special behavior for tiles or objects.
Customizing layer names and classes
You can ask Leap to use different classes, types, or names. To do so, build and pass a custom LeapConfigurationto the game.
The following example builds a custom LeapConfiguration
:
class MyLeapGame extends LeapGame {
MyLeapGame() : super(
configuration: LeapConfiguration(
tiled: const TiledOptions(
groundLayerName: 'Ground',
metadataLayerName: 'Metadata',
playerSpawnClass: 'PlayerSpawn',
hazardClass: 'Hazard',
damageProperty: 'Damage',
platformClass: 'Platform',
slopeType: 'Slope',
slopeRightTopProperty: 'RightTop',
slopeLeftTopProperty: 'LeftTop',
),
),
);
}
I did all the design work, and it took me a lot of time, So I didn't have enough time to complete other tasks..
for the moment my application only runs in web mode, and deployed as a static site on AWS:S3