MENU

【Flutter x Flame】円を表示する

記事内に商品プロモーションが含まれる場合があります

ゲーム内に円を描写するにはCircleComponentを使います。

四角形を表示する時に使うRectangleComponentと使い方は似ています。

目次

円を描写する

import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flutter/material.dart';

void main() {
  final game = SampleGame();
  runApp(
      GameWidget(game: game)
  );
}

class SampleGame extends FlameGame {

  @override
  Future<void> onLoad() async {
    await add(
      CircleComponent(
        radius: 50
      ),
    );
  }
}

これでゲーム内に白い円が表示されました。

RectangleComponentの場合は大きさをsizeで設定していましたが、CircleComponentの場合はradius(半径)を使用します。

円の色や位置を変更する

CircleComponentには位置や色などを設定するプロパティを持っているので、それらを設定することで円をカスタマイズできます。

プロパティ概要
position位置座標
radius半径
anchor描画の基準点(デフォルトは左上)
paint色などの設定
CircleComponent(
  radius: 50, // 半径のサイズ
  position: Vector2(size.x * 0.5, size.y * 0.5), // 画面の中央に
  anchor: Anchor.center, // 基準点を中心に(デフォルトは左上が基準点)
  paint: Paint()
    ..color = Colors.blue, // 色を青に
)
Share
  • URLをコピーしました!

Comment

コメントする

目次