Creating an RPG Game with Flutter & Bonfire (Ep. 1) : Project Setup & Map Design with Sprite Fusion

From Blank Canvas to Dynamic Worlds: Your First Steps in Game Dev!

YouTube Thumbnail

In this tutorial, we’ll craft a map using Sprite Fusion — a powerful tool for designing sprite sheets crucial in 2D game development. We’ll then showcase this map in our Flutter app, breathing life into our 2D world.

If you want, you can watch the speed-run version of this video on my youtube, (it’s only 10 minutes long).

[embed]

You can also follow along and download this branch from my repo here.

Overview

1. Create Map in Sprite Fusion

2. Display New Map in Flutter

By the end of this tutorial, you’ll have a custom map displaying perfectly in your Flutter web app.

Finished product.

Note

You can either use the web version of Sprite Fusion, or purchase and download the application.

Step 1. Create a simple map in Sprite Fusion.

Open a new Sprite Fusions project. Give it a name, description, and set the tile size to 32.

Import all backgrounds and tiles by dragging and dropping them into the editor.

Create four background layers by selecting all tiles, pasting them on the screen, and duplicating the layer 3 times.

Create the Terrain — Auto layer. This is an Autotile layer that requires rules for the autotiling. These rules determine tile placement based on surrounding tiles. Red indicates no tile present on the current layer, while Blue indicates a tile is present.

Create the Terrain — Manual layer. This layer allows for fine-tuning and touching up areas where the previous layer’s automatic tiling doesn’t perfectly cover all tile configurations.

Create the Ground — Auto layer. This layer defines the walkable area for our player, so make sure to select the collision checkbox.

Create the Ground — Manual layer.

Save your project and export it as a JSON file.

Step 2. Display New Map In Flutter

Create new Flutter project.

flutter create my_cool_gamedar

Open your new project and add the Bonfire package through the terminal.

flutter create my_cool_game

Create an assets/images/ directory in your project. Then add the map.json and spritesheet.png files exported earlier to this directory.

Update the pubspec.yaml file to include this assets directory.

flutter:
  uses-material-design: true

  assets:
    - assets/images/

Run the app in Google Chrome.

Now let’s continue building our game. Create a new file called my_cool_game.dart and implement a StatefulWidget named MyCoolGame.

import 'package:flutter/material.dart';

class MyCoolGame extends StatefulWidget {
  const MyCoolGame({super.key});

  @override
  State createState() => _MyCoolGameState();
}

class _MyCoolGameState extends State {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

In main.dart, initialize Flutter bindings by adding a call to void main(). Then, set the home property of MaterialApp to a new instance of the MyCoolGame widget.

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

...

home: const MyCoolGame(),

Create globals.dart to store global variables, starting with the path to the map.

class Globals {
  Globals._();

  static const map = 'map.json';
}

In the MyCoolGame class, modify the build method to return a BonfireWidget. Set its map parameter to a new WorldMapBySpritefusion instance.

@override
Widget build(BuildContext context) => BonfireWidget(
 map: WorldMapBySpritefusion(
  WorldMapReader.fromAsset(Globals.map),
 ),
);

The world appears too small in its initial display. To fix this, create a global _cameraConfig variable and set its initialMapZoomFit and moveOnlyMapArea properties. Then, assign this configuration to the cameraConfig parameter of the BonfireWidget.

/// Default camera configuration.
final _cameraConfig = CameraConfig(
 initialMapZoomFit: InitialMapZoomFitEnum.fitHeight,
 moveOnlyMapArea: true,
);

...

cameraConfig: _cameraConfig,
 map: WorldMapBySpritefusion(
  WorldMapReader.fromAsset(Globals.map),
 ),

To enable map scrolling before adding a player character, we need to implement a keyboard controller. Create a global _keyboard property and add it to the playerControllers list in the BonfireWidget.

/// Keyboard configuration.
final _keyboard = Keyboard(
 config: KeyboardConfig(
  enable: true,
 ),
);

...

playerControllers: [_keyboard],
cameraConfig: _cameraConfig,

Scroll to the end of the map and back.

And there you have it: the foundation of our world within a world.

Thanks for following along with this tutorial! If you found it helpful, please hit that 👏 button and share it with others. I’d love to hear your thoughts in the comments below!!