Aplicacions amb Flutter, Dart i Flame

Creació del taulell buit

El primer que caldrà fer és afegir Flame a Flutter. Per això, cal modificar el fitxer pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  flame: ^1.28.1
  flutter_animate: ^4.5.2

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^6.0.0

En general, convé triar les versions més recents. En la llista anterior hi ha les darreres versions en el moment d'escriure la primera versió d'aquesta pàgina.

Un cop afegit, cal picar al botó per baixar el paquet ().

Ara cal adaptar el programa principal per tal que sigui el que correspon a un joc. Hem de modificar el fitxer main.dart.

main.dart

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

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

Aquest programa ja es pot executar, però ens mostrarà una pantalla buida.

Important: Quan es simulen les aplicacions fetes amb Flame cal sempre recarregar-les completament (amb el botó ), l'actualització ràpida no funciona.

Ara anem a definir l'àrea de joc. El primer que cal fer és especificar quants píxels d'alt i ample té l'àrea de joc, aquestes mides es faran servir després per definir les dimensions i les posicions dels elements del joc.

Convé definir aquests paràmetres generals del joc en un fitxer separat que, per exemple, podem anomenar config.dart i el podem posar dins de la carpeta lib.

config.dart

const gameWidth = 820.0;
const gameHeight = 1600.0;

També hem de definir el color del fons. Ho farem en el fitxer colors.dart que posarem a la carpeta core.

colors.dart

import 'dart:ui';

class ColorsApp {
  static const Color fons = Color(0xFFFFEECC);
}

Ara ja podem definir l'àrea de joc, que serà una extensió del component rectangle. La definirem en un fitxer que anomenarem play_area.dart i el posarem a la carpeta components. L'àrea de joc ha d'estar lligada necessàriament a un joc; en el nostre cas serà Breakout però, com encara no l'hem definit, de moment ens ho marcarà com incorrecte.

play_area.dart

import 'dart:async';
import 'package:flame/components.dart';
import 'package:flutter/material.dart';
import 'package:joc_breakout/core/colors.dart';
import '../breakout.dart';  // Importarà el joc

class PlayArea extends RectangleComponent with HasGameReference<Breakout> {
  PlayArea() : super(
    paint: Paint()
      ..color = ColorsApp.fons,
  );

  @override
  FutureOr<void> onLoad() async {
    super.onLoad();
    size = Vector2(game.width, game.height);
  }
}

Les dimensions de l'àrea de joc es defineixen com un vector, perquè això facilita el seu tractament matemàtic. Aquesta definició es fa en el moment de carregar l'àrea de joc, just després de fer les inicialitzacions per defecte del rectangle.

Quan es treballa amb Flame, és habitual tenir un fitxer, que podem anomenar components.dart on hi ha les exportacions de tots els components que fa servir el joc. Aquest fitxer el posem a la carpeta components, que és on hi ha els elements referenciats. Això ens estalviarà d'importar tots els components en aquells fitxers que normalment els requeririen.

components.dart

export 'play_area.dart';

Ara comencem a crear el joc. 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.

breakout.dart

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.

main.dart

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));
}

Aquest programa ja es pot executar, però ens mostrarà una pantalla buida, amb el fons del color que hem especificat a l'àrea de joc.

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