Flame in Flutter anwenden

Wer Mobile-Games in Flutter umzusetzen möchte, kann sich der Flame Bibliothek bedienen, die sehr einfach zu nutzen ist und schnelle Ergebnisse liefert. Dieser Artikel zeigt euch, wie ihr Flame zu Flutter hinzufügt und eine kleine Anwendung baut. Vorher solltet ihr natürlich Flutter installieren. Eine Anleitung findet ihr [hier] (https://flutter.de/artikel/flutter-entwicklungsumgebung-einrichten.html). Dieses Beispiel wurde in VisualStudioCode umgesetzt.

1. Projekt erstellen

Zu Beginn erstellen wir eine leeres Projekt mit einem Konsolen-Befehl in einem beliebigen Verzeichnis. Wir geben folgenden Befehl ein:

create flutter_and_flame

2. Flame zu Dependencies hinzufügen

Danach fügen wir in der pubspec.yaml Flame zu den Dependencies hinzu.

dependencies:  
  flutter:     
    sdk: flutter   
  flame: ^0.29.4
    

Nach dem Speichern wird Flame automatisch zum Projekt hinzugefügt.

3. Verzeichnis

Dann erstellen wir im Verzeichnis ./lib eine neue Datei mit dem Namen test-game.dart und füllen sie wie folgt:

import 'package:flame/game.dart'; 
import 'dart:ui'; 

class TestGame extends Game {   
  Size screenSize;   

  void render(Canvas canvas) {}   

  void update(double t) {}   

  void resize(Size size) {     
    screenSize = size;     
    super.resize(size);   
  } 
}

Das ist unsere Grundlage für das Spiel. Die Methoden haben folgende Aufgaben:

render(): Zeichnet Objekte z.B. Rechtecke und Texte.

update(): Nach jedem Frame wird diese Methode aufgerufen.

resize(): Bestimmt die Größe des Bildschirms, in dem das Spiel abläuft.

4. Starten des Spiels

In der main.dart definieren wir oberhalb der Klasse eine Methode zum Starten unserer Spiels.

import 'package:flame/util.dart'; 
import 'package:flutter/material.dart'; 
import 'package:flutter/services.dart'; 
import 'package:testen/test-game.dart.dart'; 

void main() => runApp(MyApp()); 

void startGame() async {   
  Util flameUtil = Util();   
  await flameUtil.fullScreen();   
  await flameUtil.setOrientation(DeviceOrientation.portraitUp);   
  TestGame game = TestGame();   
  runApp(game.widget); 
}

Innerhalb unserer generierten Klasse MyApp reduzieren wir den Code auf einen Button und etwas Style.

class MyApp extends StatelessWidget {   
  @override   
  Widget build(BuildContext context) {     
    return MaterialApp(       
      title: "TestGame",       
      theme: ThemeData(         
        canvasColor: Colors.black,      
      ),       
      home: MyHomePage(title: "Test my new awesome Game"),     
    );   
  } 
} 

class MyHomePage extends StatefulWidget {   
  const MyHomePage({Key key, this.title}) : super(key: key);
  
  final String title;   
  
  @override   
  _MyHomePageState createState() => _MyHomePageState(); 
} 
  
class _MyHomePageState extends State<MyHomePage> {   
  @override   
  Widget build(BuildContext context) {     
    return Scaffold(       
      body: Center(         
         child: Column(           
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[             
             Container(
               child: ElevatedButton(               
              onPressed: () {                
               startGame();               
              },               
              child: Text(                 
                "start",                 
                style: TextStyle(fontSize: 20, color:Colors.white),              
              ),               
              style: ElevatedButton.styleFrom(
                primary: Colors.black,                 
                onSurface: Colors.black,                 
                shape: RoundedRectangleBorder(                
                  side: BorderSide(color: Colors.white),
                  borderRadius: BorderRadius.all(Radius.circular(20))),               
                ),             
             ))           
           ],         
         ),       
       ),     
     );   
   } 
}

Jetzt haben wir eine Flutter-Anwendung gebaut mit einem Start-Button, der beim Drücken zum Flame-Spiel führt.

Jetzt fehlt nur noch das Spiel.

5. Spiel erstellen

Wir fügen dem Spiel ein Rechteck hinzu.

import 'package:flame/game.dart';
import 'dart:ui';

class TestGame extends Game {   
  Size screenSize;   
  double _moveX = 0.0;   
  double _moveY = 0.0;   
  int _richtung = 0;   
  double rectSizeWidth = 50;   
  double rectSizeHeight = 50;   
  
  void render(Canvas canvas) {    
    Rect boxRect = 
      Rect.fromLTWH(0 + _moveX, 0 + _moveY, rectSizeWidth, 
     rectSizeHeight);     
    Paint boxPaint = Paint();     
    boxPaint.color = Color(0xffff0000);     
    canvas.drawRect(boxRect, boxPaint);   
}

Mit den privaten Variablen bewegen wir das Rechteck. Innerhalb von update() werden die Werte gesetzt.

void update(double t) {     
  switch (_richtung) {       
    case 0:        
      if (screenSize.width - rectSizeWidth > _moveX) {
        _moveY++;         
      } else {           
        _richtung = 1;         
      }         
      break;       
    case 1:        
      if (screenSize.height - rectSizeHeight > _moveY) {
        _moveY++;         
      }         
      break;       
    case 2:        
      if (_moveX >= 0) {           
        _moveX--;         
      } else {           
        _richtung = 3;         
      }         
      break;       
    case 3:        
      if (_moveY >= 0) {           
        _moveY--;         
      } else {           
        _richtung = 0;         
      }         
      break;       
    default:   
  }   
}

Nach jedem Frame wird in update() der x- oder y-Parameter vom Rechteck um 1 erhöht oder gesenkt, je nach Fall. Danach sollte nach dem Drücken von Start ein rotes Rechteck zu sehen sein, das sich im Uhrzeigersinn am Rand des Bildschirms bewegt.

Und so haben wir Flame zu unserem Flutter-Projekt hinzugefügt!