Flame est un framework permettant de créer des jeux sous Flutter, plus d’information ici et là.
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 là.
Exemple documentation d’un Spirite : https://flame-engine.org/docs/#/components?id=spritecomponent
Vocabulaire :
Le composant « FlameGame instance » est similaire à un « Flutter Scaffold »
Components inherit from an abstract Component class. Implement Component’s abstract methods to create the mechanics of the FlameGame class. For example, you’ll often see the following methods implemented throughout DoodleDash:
onLoad: asynchronously initializes a component (similar to Flutter’s initState method)
update: updates a component with each tick of the game loop (similar to Flutter’s build method)
Le cycle de vie d’un jeux :
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=lWLQYAh05lshttps://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
https://jap.alekhin.io/onscreen-gamepad-controller-flame#ui
Tutos 1.0 :
https://github.com/codetricity/flutter_flame_tutorial/blob/4_sprite_animation/lib/main.dart
Autres tutos
https://codelabs.developers.google.com/codelabs/flutter-flame-game?hl=en#0
https://www.kodeco.com/37130129-building-games-in-flutter-with-flame-getting-started#toc-anchor-001
Publicité et internationalisation : Bob Hellgren
: https://medium.com/codechai/flutter-web-and-flame-5df7772ce226
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
AndroLogiciels 