Créer un jeux avec Flutter et Flame

Flame est un framework permettant de créer des jeux sous Flutter, plus d’information ici et .

Tout d’abord, installez le framework Flutter et créez une application.

Ensuite installer la dépendance flame dans le fichier pubspec.yaml :

flame : ^1.0.0 (^1.0.0-releasecandidate.12), la documentation est .

Exemple documentation d’un Spirite : https://flame-engine.org/docs/#/components?id=spritecomponent

Le cycle de vie d’un jeux :

Game Loop
Ainsi, le jeu se construit comme cela :

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

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

class MyGame extends Game {

  @override
  void update(double dt) {
  }

  @override
  void render(Canvas canvas) {
  }

  @override
  Color backgroundColor() => const Color(0xFF222222);
}

Si on souhaite ajouter un spirite animé :

Exemple d'image constituée de 8 images de 16x18 pixels


Placer le fichier image dans le répertoire : 
<<Application>>/assets/images/

Maj du fichier Pubspec.yaml avec le paragraphe :
  assets:
    - assets/images/ 

Dans la classe "Game", définir la variable et la position du spirite (ici un fichier avec une animation)
  late SpriteAnimation runningRobot;
  final robotPosition = Vector2(240, 50);
  final robotSize = Vector2(48, 60);

Ajouter la définition de l'animation du spirite dans onLoad :
@override
  Future<void> onLoad() async {
    runningRobot = await loadSpriteAnimation(
      'robot.png',                    //-- the image file
      SpriteAnimationData.sequenced(
        amount: 8,                    //-- 8 images (frame) in the file
        textureSize: Vector2(16, 18), //-- each frame is a sprite of 16x18 pixels
        stepTime: 0.1,                //-- each frame should appear for 0.1 seconds
      ),
    );
  }

et Update et Render :
  @override
  void update(double dt) {
    runningRobot.update(dt);
  }

  @override
  void render(Canvas canvas) {
    runningRobot
        .getSprite()
        .render(canvas, position: robotPosition, size: robotSize);
  }

Références : https://github.com/flame-engine/flame/blob/main/tutorials/2_sprite_animations_gestures/README.md

Documentation : https://github.com/flame-engine/flame

Fichier image :

Pour ajouter une image de fond avec un effet parallax :

Une image de fond peut être statique, dans ce cas insérez un Sprite

Sinon, pour avoir une image de fond avec un défilement utilisez le parallax qui permet d’avoir plusieurs images qui défilent :

Future onLoad() async {
final component = await loadParallaxComponent(
[
ParallaxImageData(‘bg.png’),
ParallaxImageData(‘mountain-far.png’),
ParallaxImageData(‘mountains.png’),
ParallaxImageData(‘trees.png’),
ParallaxImageData(‘foreground-trees.png’),
],
size: Vector2.all(200),
baseVelocity: Vector2(20, 0),
velocityMultiplierDelta: Vector2(1.8, 1.0),
)
..position = size / 2;
add(component);

Collisions :

Créez des classes pour les sprites :

Ajoutez le mot clef, « HasCollidables » pour la classe game :

class MyGame extends BaseGame with HasCollidables, TapDetector, DoubleTapDetector {...

Pour chaque classe de sprite, les mots « Hitbox » et « Collidable »

class Droid extends SpriteComponent with Hitbox, Collidable {
  Droid(Sprite sprite) {
    this.sprite = sprite;
    size = Vector2(100.0, 100.0);
    anchor = Anchor.center;
    position = Vector2(100.0, 100.0);
    debugMode = true;
    addShape(HitboxRectangle());
  }
}
Et appelez la classe dans le jeux :
add(Droid(
    await loadSprite('andro.png'))); //..renderFlipX=true); pour inverser

Pour les Sprites animés :

Ajoutez :import 'dart:ui' as ui;

Créer une classe :
class DinoAni extends SpriteAnimationComponent with Hitbox, Collidable {
  DinoAni({
    Vector2? position,
    Vector2? size,
  }) : super(position: position, size: size);

    DinoAni.fromFrameData(
        ui.Image image,
        SpriteAnimationData data, {
          Vector2? position,
          Vector2? size,
        }) : super(position: position, size: size) {
      animation = SpriteAnimation.fromFrameData(image, data);
    }
}

Dans la classe jeux appelez la classe :
    var spriteDinoSheet = await images.load('DinoSprites.png');
    final spriteSDinosize = Vector2(64, 64); //-- Taille souhaitée de l'image
    //-- amount = nombre d'image de la Sheet
    //-- textureSize = taille d'une image de la sheet
    SpriteAnimationData spriteDinoData = SpriteAnimationData.sequenced(
        amount: 12, stepTime: 0.1, textureSize: Vector2(24.0, 24.0));
    DinoAnimation =
    DinoAni.fromFrameData(spriteDinoSheet, spriteDinoData)
      ..x = 150
      ..y = 400
      ..size = spriteSDinosize;
    add(DinoAnimation);

Références :

https://www.youtube.com/watch?v=lWLQYAh05ls
https://www.youtube.com/watch?v=sdyFQ1u1QJQ

Debug permet de visualiser la zone autour des sprite

Création d’un contrôleur de jeux virtuel :

https://fireslime.xyz/articles/20190902_Flame_Virtual_Controller_With_Stack.html

Tutos 1.0 :

https://github.com/codetricity/flutter_flame_tutorial/blob/4_sprite_animation/lib/main.dart

Autres tutos

Publicité et internationalisation : Bob Hellgren

: https://medium.com/codechai/flutter-web-and-flame-5df7772ce226

Sur medium

ttps://github.com/flame-engine/awesome-flame#articles–tutorials

https://jap.alekhin.io/create-mobile-game-flutter-flame-beginner-tutorial

Et : https://medium.com/flutter-community/games-in-flutter-flame-box2d-part-1-4c23a1cbc102

et : https://blog.geekyants.com/building-a-2d-game-in-flutter-a-comprehensive-guide-913f647846bc

Articles récents
Commentaires récents
fatima dans Bienvenue !
AdminDroid dans Bienvenue !
fatima dans Bienvenue !
Archives
Catégories
%d blogueurs aiment cette page :