以前、Flutterでボードゲームと対戦用AIを実装した体験を紹介しました。

本記事では、Flutterでボードゲームにおける六角形の戦場マップを実装する方法を解説します。以下に示すソースコードをベースに説明を進めます。

他にも ChatGPT の API を使って AI と話しながらゲームができる機能や、アルファベータ法を Dart で実装して Firebase Cloud Functions で探索処理を動かすようにしたりと色々やっていたのですが、気が向いたら順次記事にしていこうかと思っています。

ぶっちゃけChatGPTに書かせれば一発で出てきそうですが、一昨年の年末年始に頑張って書いたものを供養する意味でコード解説を書きたいと思います。解説にはもちろんChatGPTを使っています。

(import 文略)

class HexagonTile extends StatelessWidget {
  (プロパティ略)
  const HexagonTile({
    (パラメータ略)
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    (build処理略)
  }
}

class _HexagonClipper extends CustomClipper<Path> {
  (プロパティ略)
  _HexagonClipper({
    (パラメータ略)
  });

  @override
  Path getClip(Size size) {
    (getClip処理略)
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

class _HexagonPainter extends CustomPainter {
  (プロパティ略)
  _HexagonPainter({
    (パラメータ略)
  });

  @override
  void paint(Canvas canvas, Size size) {
    (paint処理略)
  }

  (描画メソッド略)

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

Path createHexagonPath({
  required double radius,
  required Offset center,
}) {
  (createHexagonPath処理略)
}

class PaintComputer {
  (定数定義略)

  double computeRadius({
    required double screenWidth,
    required double screenHeight,
  }) {
    (computeRadius処理略)
  }

  (関数略)
}

実際に私が書いたものは以下のコードを参考にしてください。

六角形のタイル
 タイルを組み合わせたボード

HexagonTile クラス

HexagonTile クラスは、六角形のマップタイルを表現する StatelessWidget です。以下に示すプロパティを持ちます。

tileName: タイルの名前
coordinateX, coordinateY: タイルの座標
centerOffset: タイルの中心位置
radius: タイルの半径
onTap, onHover: タイルのタップやホバー時のイベント
isFocused, isHovered: タイルのフォーカスやホバー状態
deployedUnitClass: 配置されているユニットの種類
他、タイルの状態に関するプロパティ

build メソッドでは、Stack ウィジェットを用いて六角形のタイルとその上に配置されるユニットを描画しています。

_HexagonClipper クラス

_HexagonClipper クラスは、CustomClipper を継承し、getClip メソッドで六角形の Path を作成します。

_HexagonPainter クラス

_HexagonPainter クラスは、CustomPainter を継承し、paint メソッドで六角形のタイルを描画します。タイルの状態によって、フォーカス状態、ホバー状態、移動可能状態、攻撃可能状態、配置可能状態、指示可能状態などの色を付与します。

また、_drawTileId メソッドを用いてタイルの名前を描画します。

createHexagonPath 関数

createHexagonPath 関数は、六角形の Path を生成します。引数として、半径 radius と中心位置 center を受け取ります。この関数では、六角形の各頂点を計算し、それらをつなぐ Path を作成して返します。

PaintComputer クラス

PaintComputer クラスは、六角形のタイルの半径や高さを計算するためのクラスです。computeRadius メソッドでは、画面の幅と高さに応じて適切なタイルの半径を計算します。また、computeHeight メソッドでは、半径からタイルの高さを計算します。

これらのクラスと関数を組み合わせることで、六角形の戦場マップを実装することができます。HexagonTile クラスを利用して、任意の座標に六角形のタイルを配置し、マップ上でのユニットの操作や状態の更新を行うことが可能です。

コード全文