FlutterでRPGゲームを作る【Part 1/5 - マップ生成】 #Dart

はじめに

Flutterでマルチプラットフォーム対応 (Web, モバイル, PC) のRPGゲームを作成します
ソースコードはこちら (アセットなど一部差し替えています)
この記事は5つのPartに分かれていて、今回はそのPart 1です
- Part 1：マップとUIの実装
- Part 2：プレイヤーと当たり判定の実装
- Part 3：マップ移動の実装
- Part 4：アイテムと取得イベントの実装
- Part 5：NPCと会話の実装
Bonfireという2Dゲームに特化したフレームワーク(Flutterパッケージ)を利用しています
マップ制作にはTiledという無料のGUIツールを利用しています
Tiledは必須ではありませんが、使い方も簡単で制作作業がとても捗ります
アセットはitch.ioで購入できるものを利用しています
トップの画像は今回利用するアセットのサンプル画像です

作成するゲームについて

見下ろし型のRPGゲームです
タッチパネルとキーボードの入力に対応しています
いくつかのイベントがあります
- NPCとの会話する
- アイテムを拾う・使う
- スイッチを押して扉を開く(的なイベント)
戦闘はありません (Bonfireは戦闘アクションの実装機能も充実しています)

Bonfireについて

Flutterで2DのRPGゲーム作るためのフレームワークです
画面やロジックの実装から、状態管理までBonfireだけで完結させることができます
FlameというFlutter用のゲームエンジンに依存しています
Bonfire 公式HP ← 解説やコードサンプル、Demoゲームがあります
Flutterドキュメントページ
Github

開発環境

OS:       macOS 12.6
Flutter:  3.3.5
Bonfire:  2.10.10
Tiled:    1.9.2
Xcode:    14.0.1
テスト環境: Chrome, iOS Simulator

今回のパートの大まかな流れ

Flutterプロジェクトとパッケージ、アセットの準備
マップ用タイルセットの作成 (Tiled利用)
マップの作成 (Tiled利用)
WidgetとUIを実装して動作確認

1. Flutterプロジェクトとパッケージ、アセットの準備

1.1 プロジェクト作成

$ flutter create --platforms=web,ios simple_bonfire

ターミナルから、プロジェクトを作成するディレクトリでflutter create
プラットフォームにiOSとWebを指定
プロジェクト名simple_bonfireはお好みで変更可能

1.2 `bonfire`パッケージの追加

プロジェクトディレクトリでflutter pub add

$ flutter pub add bonfire

pubspec.yamlファイルにbonfireが追加されているのを確認

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter  
  cupertino_icons: ^1.0.2
  bonfire: ^2.10.10

1.3 アセットの準備

こちらなどからタイルセット画像を取得
無料で利用できるのアセットもたくさんあります
ダウンロードした画像をsimple_bonfire/assets/images/mapsに配置
(simple_bonfireはFlutterプロジェクト名)
pubspec.yamlに追加したアセットのディレクトリを記載

pubspec.yaml

flutter:
  uses-material-design: true
  assets:
    - assets/images/
    - assets/images/maps/

2. マップ用タイルセットの作成

元のpngファイルをタイルセットとして利用するための設定jsonファイルを作成します
このjsonファイルを作成するためのツールがTiledです

2.1 Tiledプロジェクトの作成

こちらよりTiledをダウンロードしてください
Tiledを起動して、New Project...を選択しsimple_bonfire/assets/images/maps下にプロジェクトを作成
simple_bonfire.tiled-projectとsimple_bonfire.tiled-sessionの2つのファイルが生成されます

2.2 アセットpngファイルの登録と分割

新しいタイルセットを選択し、ポップアップのフィールドにそれぞれ値を入力
- 名前：タイルセットにわかりやすい名前をつける
- 種類：均等にタイルが… (デフォルト)
- 画像：先にダウンロードしたアセットpngファイルを選択
- タイルの幅、高さ：アセットに合わせて16pxに変更
ファイル名をつけて保存を選択し.tsjで保存した後、.jsonに変更する
(jsonに変更するのはいろいろと便利のため)

assets/maps/franuka_halloween_tileset.json

{
    "columns": 32,
    "image": "franuka_halloween_tileset.png",
    "imageheight": 512,
    "imagewidth": 512,
    "margin": 0,
    "name": "franuka_halloween_tileset",
    "spacing": 0,
    "tilecount": 1024,
    "tiledversion": "1.9.2",
    "tileheight": 16,
    "tilewidth": 16,
    "type": "tileset",
    "version": "1.9"
}

Tiled上で、画像が正しくタイル上に分割されているのを確認する

3. マップの作成

まず、作成したタイルセットを使ってマップ生成用jsonファイルを生成します
Tiledでファイル > 新規 > 新しいマップの順に選択
ポップアップのフィールドにそれぞれ値を入力
- 種類：四角型タイル (デフォルト)
- 出力形式：CSV (デフォルト)
- 描画順序：左から右、上から下 (デフォルト)
- マップの大きさ：任意の値を入力
- タイルの大きさ：アセットに合わせて幅、高さともに16px
マップ編集画面が表示されたら、まず地面のレイヤーを作成
- 右側のタイルを選択して、真ん中のカラムのセルに配置していきます
  (Tiledの詳しい操作は割愛しますが、画像の状態で完成です)
壁やオブジェクト用のレイヤーを作成
- 右上のレイヤー枠で右クリック > タイルレイヤーを選択 (オブジェクトレイヤーではありません)
- タイルレイヤー2が生成されたら、タイルレイヤー1の上に移動
- 柵やオブジェクトを自由に配置
- タイルレイヤー1を非表示 (目のアイコンをクリック) して画像の様な表示になったら完成
  (確認後に非表示を解除してください)
ファイル > 保存を選択し.tmj形式で保存後、拡張子は.jsonに変更

assets/maps/halloween_map_01.json

{
   "compressionlevel": -1,
   "height": 16,
   "infinite": false,
   "layers": [
      {
         "data":[514, 514, 514, 514, 514, 514, 514, 514, 514, 514, 514, 514, 514, 514, 514, 514, 514, 514, 514, 514,
            "...とても長いので中略..."
            514, 514, 514, 514, 514, 514, 514, 514, 514, 514, 514, 514, 514, 514, 514, 514, 514, 514, 514, 514],
         "height":16,
         "id":1,
         "name":"\u30bf\u30a4\u30eb\u30ec\u30a4\u30e4\u30fc1",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":20,
         "x":0,
         "y":0
      }, 
      {
         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0, 13, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 15, 0,
            0, 48, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 48, 0,
            "...とても長いので中略...",
            0, 48, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 48, 0,
            0, 77, 18, 18, 18, 18, 18, 19, 0, 0, 0, 0, 17, 18, 18, 18, 18, 18, 79, 0,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
         "height": 16,
         "id": 2,
         "name": "\u30bf\u30a4\u30eb\u30ec\u30a4\u30e4\u30fc2",
         "opacity": 1,
         "type": "tilelayer",
         "visible": true,
         "width": 20,
         "x": 0,
         "y": 0
      }
   ],
   "nextlayerid": 3,
   "nextobjectid": 1,
   "orientation": "orthogonal",
   "renderorder": "right-down",
   "tiledversion": "1.9.2",
   "tileheight": 16,
   "tilesets": [
      {
         "firstgid": 1,
         "source": "franuka_halloween_tileset.json"
      }
   ],
   "tilewidth": 16,
   "type": "map",
   "version": "1.9",
   "width": 20
}

4 WidgetとUIを実装して動作確認

作成したマップ生成用jsonファイルを使い、FlutterのWidgetを作成します

4.1 マップWidgetの作成

Statefull WidgetのbuildでBonfireWidgetをreturnします
BonfireWidget内で以下の3つを設定しています
- マップ用jsonファイルの読み込み
- 画面上にジョイスティックやボタンと、キーボードの入力の有効化
- 遷移直後の読み込み画面
細かな説明はコメントに留めます

lib/maps/halloween_map_01.dart

import 'package:flutter/material.dart';
import 'package:bonfire/bonfire.dart';
import 'package:flutter/services.dart';

class HalloweenMap01 extends StatefulWidget {
  const HalloweenMap01({Key? key}) : super(key: key);
  @override
  State<HalloweenMap01> createState() => _HalloweenMap01State();
}

class _HalloweenMap01State extends State<HalloweenMap01> {
  final tileSize = 48.0; // タイルのサイズ定義

  @override
  Widget build(BuildContext context) {
    // ゲーム画面Widget
    return BonfireWidget(
      // マップ用jsonファイル読み込み
      map: WorldMapByTiled(
        'maps/halloween_map_01.json',
        forceTileSize: Vector2(tileSize, tileSize),
      ),
      // 入力インターフェースの設定
      joystick: Joystick(
        // 画面上のジョイスティック追加
        directional: JoystickDirectional(
          color: Colors.white,
        ),
        actions: [
          // 画面上のアクションボタン追加
          JoystickAction(
            color: Colors.white,
            actionId: 1,
            margin: const EdgeInsets.all(65),
          ),
        ],
        // キーボード用入力の設定
        keyboardConfig: KeyboardConfig(
          keyboardDirectionalType: KeyboardDirectionalType.wasdAndArrows, // キーボードの矢印とWASDを有効化
          acceptedKeys: [LogicalKeyboardKey.space], // キーボードのスペースバーを有効化
        ),
      ),
      // ロード中の画面の設定
      progress: Container(
        width: double.maxFinite,
        height: double.maxFinite,
        color: Colors.black,
      ),
    );
  }
}

4.2 マップWidgetの実装

いよいよ作成したマップを表示してゲームを動かします
MaterialAppのhomeに作成したマップWidgetを入れます

lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:bonfire/bonfire.dart';
import 'package:simple_bonfire/maps/halloween_map_01.dart';

void main() async {
  // iOSでは横画面にする
  WidgetsFlutterBinding.ensureInitialized();
  if (!kIsWeb) {
    await Flame.device.setLandscape();
    await Flame.device.fullScreen();
  }
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Simple Bonfire',
      debugShowCheckedModeBanner: false,
      home: HalloweenMap01(),
    );
  }
}

4.3 起動して表示と動作の確認

今回はWebとiOS版で動作確認をしています
キャラクターは実装していませんが、矢印キーやWASD、ジョイスティックでカメラが動くのが確認できます

おわりに

アセットやマップの準備には外部のツールも使用し一手間かかりましたが、Flutterの実装部分はとてもシンプルだったと思います。
次回はプレイヤーを実装し、当たり判定などゲームとして必要な要素をさらに追加していきます。
いいね、質問やコメントお待ちしております！

Part 2：プレイヤーと当たり判定の実装へと続く

FlutterでRPGゲームを作る【Part 1/5 - マップ生成】