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. Les mides de l'àrea de joc no tenen relació amb les mides de la pantalla; a l'hora de mostrar-ho, l'àrea de joc s'escalarà segons la pantalla existent.
És pràctic 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.
const gameWidth = 820.0; const gameHeight = 1600.0;
Ara ja podem definir l'àrea de joc, que serà una extensió de l'element RectangleComponent. La definirem en un fitxer que podem anomenar play_area.dart. 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.
import 'dart:async'; import 'package:flame/components.dart'; import 'package:flutter/material.dart'; import '../breakout.dart'; // Importarà el joc
class PlayArea extends RectangleComponent with HasGameReference<Breakout> {
PlayArea() : super(paint: Paint()..color = const Color(0xfff2e8cf));
@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.
export 'play_area.dart';

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