new to Flame and Tile

Question

i have been fooling around with Flame and Tiled for a few days and i have read the docs, but i cant figure out how to get tile data from the TiledComponent ?

Hope someone can help :)

I Would also like to know how to add new objects to the ObjectGroup layer. Like adding monsters etc. to the map.

import 'package:flame/components.dart';
import 'package:flame/effects.dart';
import 'package:flame/flame.dart';
import 'package:flame/game.dart';
import 'package:flame_tiled/flame_tiled.dart';
import 'package:flutter/widgets.dart' hide Animation, Image;

import 'package:flame/input.dart';
import 'package:flame/events.dart';

// Main
void main() {
  runApp(GameWidget(game: TiledGame()));
}

// Tile and map
Size tile = const Size(128, 64);
Size map = const Size(30, 30);

//  TiledGame
class TiledGame extends FlameGame with PanDetector, TapDetector {
  late TiledComponent mapComponent;

  TiledGame() : super(
    camera: CameraComponent.withFixedResolution(
      width: map.width * tile.width,
      height: map.height * tile.height,
    ),
  );

  @override
  Future<void> onLoad() async {
    debugMode = true;

    // Map
    mapComponent = await TiledComponent.load(
        'test.tmx',
        Vector2(128, 64),
        prefix: 'assets/maps/'
    );
    world.add(mapComponent);

    // Camera
    camera.viewfinder.anchor = Anchor.center;
    camera.moveTo(
        Vector2(
            (map.width * tile.width) * 0.5,
            (map.height * tile.height) * 0.5
        )
    );
  }

  @override
  void onTapDown(TapDownInfo info) {
    // int x = ??
    // int y = ??
    // print(mapComponent.tileMap.getTileData(layerId: 0, x: x, y: y));
  }

  @override
  void onPanUpdate(DragUpdateInfo info) {
    double offset = 3.3;
    Vector2 pos = Vector2((info.delta.global.x*offset)*-1, (info.delta.global.y*offset)*-1);
    camera.moveBy(pos);
  }

}

Answer 1

You can get hold of any of the layers from the tilemap via the RenderableTiledMap of the TiledComponent. For example, if your tilemap contains an object layer called 'Trigger', you can read it like this:

    mapComponent = TiledComponent(...);
    final triggerLayer = mapComponent.tileMap.getLayer<ObjectGroup>('Trigger');

Here is the mapping from Tiled's layer types to tiled.dart's layer class types:

    Tiled layers | tiled.dart types
    ---------------------------------------
    Tile Layer   | TileLayer
    Object Layer | ObjectGroup
    Image Layer  | ImageLayer
    Group Layer  | Group

This information can also be found on Flame's official docs here: https://docs.flame-engine.org/latest/bridge_packages/flame_tiled/layers.html#layers

As for the second part of your question:

1. You will need an Object Layer in your map to add objects
2. Once you have an object layer active, all the placement tools will get activated. Using these tools you can mark locations on the map where you want to spawn you game entities.
3. Finally you can read data of all the objects like this:

    final objects = triggerLayer?.objects;
    if (objects != null) {
     for (final object in objects) {
       // You logic goes here...
       // You access various properties of the object
       // to decide which game entity to spawn and 
       // where to spawn it.
     }
    }

You can take a look at this code for reference: https://github.com/ufrshubham/ski_master/blob/afbaa158cdf9f35a0d0575726ef8abe079f3d868/lib/game/routes/gameplay.dart#L88-L112

Answer 2

This dose not answer my question - sorry. As all tiles can be a target, i need a function to calc tile x,y. Something like:

Vector2 globalToIsometric(Vector2 pos) {
  // calc iso x,y based on camera matrix (x,y,zoom) and TileMap matrix and pos
}

Hope this makes sence :)