Aplicacions amb Flutter, Dart i Flame

Creació del joc buit i component de càmera

El joc és una extensió de la classe FlameGame que contindrà l'àrea de joc. Fa servir un component de càmera per establir les dimensions i establir les dimensions del joc i la posició de l'inici de les coordenades. En els jocs de dues dimensions és habitual situar l'inici de les coordenades a la cantonada superior esquerra.

import 'dart:async';
import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'components/components.dart';
import 'config.dart';

class Breakout extends FlameGame {
  Breakout()
    : super(
        camera: CameraComponent.withFixedResolution(
          width: gameWidth,
          height: gameHeight,
        ),
      );

  double get width => size.x;
  double get height => size.y;

  @override
  FutureOr<void> onLoad() async {
    super.onLoad();
    camera.viewfinder.anchor = Anchor.topLeft;
    world.add(PlayArea());
  }
}

Ara cal modificar el programa principal perquè carregui el joc.

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

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

Mode de depuració

Durant el desenvolupament del joc, pot ser útil tenir activat el mode de depuració. En aquest mode podrem veure, al costat de cada element, les coordenades del punt on es troba. Com és lògic, en la versió final desactivarem aquest mode.

...
  @override
  FutureOr<void> onLoad() async {
    super.onLoad();
    camera.viewfinder.anchor = Anchor.topLeft;
    world.add(PlayArea());
  }
  debugMode = true;  // De moment, mode de depuració
...

Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.