Merge pull request #444 from flame-engine/develop

0.25.0 RC

Author: erickzanardo

CHANGELOG.md

@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## 0.25.0
+ - Externalizing Tiled support to its own package `flame_tiled`
+ - Preventing some crashs that could happen on web when some methods were called
+ - Add mustCallSuper to BaseGame `update` and `render` methods
+ - Moved FPS code from BaseGame to a mixin, BaseGame uses the new mixin.
+ - Deprecate flare API in favor of the package `flame_flare`
+
 ## 0.24.0
  - Outsourcing SVG support to an external package
  - Adding MemoryCache class

doc/README.md

@@ -18,7 +18,7 @@ Put the pub package as your dependency by dropping the following in your `pubspe
 
 ```yaml
 dependencies:
-  flame: ^0.24.0
+  flame: ^0.25.0
 ```
 
 And start using it!

doc/box2d.md

@@ -1,6 +1,6 @@
 # Box2D
 
-Although Flame does not implements Box2d itself, it bundles a forked port of the Java Box2d to Dart by Google.
+Although Flame does not implement Box2d itself, it bundles a forked port of the Java Box2d to Dart by Google.
 
 The source of the bundled box2d on Flame can be found [here](https://github.com/flame-engine/box2d.dart).
 

doc/components.md

@@ -78,20 +78,56 @@ This component uses an instance of `Svg` class to represent a Component that has
     android.y = 100;
 ```
 
-## FlareAnimation Component
+## FlareActor Component
 
-This component wraps an instance of the [FlareAnimation](/doc/images.md#FlareAnimation), it receives the filename of the Flare animation file, which animation from that file you want to use, and the `width` and `height` of the rendered animation.
+*Note*: The previous implementation of a Flare integration API using `FlareAnimation` and `FlareComponent` has been deprecated.
 
-```dart
-    final fileName = "assets/Bob_Minion.flr";
-    final animation = "Wave";
-    final width = 306;
-    final height = 228;
+To use Flare within Flame, use the [`flame_flare`](https://github.com/flame-engine/flame_flare) package.
+
+This is the interface to use a [flare animation](https://pub.dev/packages/flare_flutter) within flame.
+`FlareActorComponent` has almost the same API as of flare's FlareActor widget. It receives the animation filename (that are loaded by default with `Flame.bundle`),
+it also can receive a FlareController that can play multiple animations and control nodes.
 
-    FlareComponent flareAnimation = FlareComponent(fileName, animation, width, height);
+```dart
+    import 'package:flame_flare/flame_flare.dart';
+
+    // your implementation of FlareController
+    class WashingtonController extends FlareControls {
+        
+        ActorNode rightHandNode;
+        
+        void initialize(FlutterActorArtboard artboard) {
+            super.initialize(artboard);
+            
+            // get flare node
+            rightHand = artboard.getNode('right_hand');
+        }
+    }
+
+    final fileName = 'assets/george_washington.flr';
+    final width = 1776;
+    final height = 1804;
+    final controller = WashingtonController(); //instantiate controller
+    
+    FlareActorComponent flareAnimation = FlareActorComponent(
+      fileName,
+      controller: controller,
+      width: 306,
+      height: 228,
+    );
+ 
     flareAnimation.x = 50;
     flareAnimation.y = 240;
     add(flareAnimation);
+
+    // to play an animation
+    controller.play('rise_up');
+
+    // you can add another animation to play at the same time
+    controller.play('close_door_way_out');
+    
+    // also, get a flare node and modify it
+    controller.rightHandNode.rotation = math.pi;
 ```
 
 You can also change the current playing animation using the `updateAnimation` method.
@@ -139,9 +175,9 @@ Create it like this:
 
 ```dart
   final images = [
-    ParallaxImage("mountains.jpg"),
-    ParallaxImage("forest.jpg"),
-    ParallaxImage("city.jpg"),
+    ParallaxImage('mountains.jpg'),
+    ParallaxImage('forest.jpg'),
+    ParallaxImage('city.jpg'),
   ];
   this.bg = ParallaxComponent(images);
 ```
@@ -163,9 +199,9 @@ By default the images are aligned to the bottom left, repeated along the X-axis
 Advanced example:
 ```dart
   final images = [
-    ParallaxImage("stars.jpg", repeat: ImageRepeat.repeat, alignment: Alignment.center, fill: LayerFill.width),
-    ParallaxImage("planets.jpg", repeat: ImageRepeat.repeatY, alignment: Alignment.bottomLeft, fill: LayerFill.none),
-    ParallaxImage("dust.jpg", repeat: ImageRepeat.repeatX, alignment: Alignment.topRight, fill: LayerFill.height),
+    ParallaxImage('stars.jpg', repeat: ImageRepeat.repeat, alignment: Alignment.center, fill: LayerFill.width),
+    ParallaxImage('planets.jpg', repeat: ImageRepeat.repeatY, alignment: Alignment.bottomLeft, fill: LayerFill.none),
+    ParallaxImage('dust.jpg', repeat: ImageRepeat.repeatX, alignment: Alignment.topRight, fill: LayerFill.height),
   ];
   this.bg = ParallaxComponent(images, baseSpeed: Offset(50, 0), layerDelta: Offset(20, 0));
 ```

doc/debug.md

@@ -1,7 +1,20 @@
-## Debug features
+# Debug features
+
+## FPS counter
+
+Flame provides the `FPSCounter` mixin for recording the fps, this mixin can be applied on any class that extends from `Game`. When applied you have to implemented the `recordFps` method and it should return `true` if you want to access the current fps by using the `fps` method`.
+
+```dart
+class MyGame extends Game with FPS {
+  @override
+  bool recordFps() => true;
+}
+```
+
+## BaseGame features
 
 Flame provides some features for debugging, these features are enabled when the method `debugMode` from the `BaseGame` class is overridden, and returning `true`. When it's enabled all `PositionComponent`s will be wrapped into a rectangle, and have its position rendered on the screen, so you can visually verify the component boundaries and position.
 
-In addition to the debugMode, you can also ask BaseGame to record the fps, that is enabled by overriding the `recordFps` method to return `true`, by doing so, you can access the current fps by using the method `fps`.
+In addition to the debugMode, you can also ask `BaseGame` to record the fps(the `BaseGame` used the [FPSCounter](fps-counter) mixin). To enable it you have to override the `recordFps` method to return `true`, by doing so, you can access the current fps by using the method `fps`.
 
-To see a working example of the debugging features, [check this example](/doc/examples/debug).
+To see a working example of the debugging features of the `BaseGame`, [check this example](/doc/examples/debug).

doc/examples/.gitignore

@@ -2,5 +2,6 @@ web/
 ios/
 android/
 test/
+macos/
 
 generated_plugin_registrant.dart

doc/examples/animations/lib/main.dart

@@ -8,26 +8,38 @@ import 'package:flutter/material.dart';
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
+  await Flame.images.loadAll(['creature.png', 'chopper.png']);
+
   final Size size = await Flame.util.initialDimensions();
   final game = MyGame(size);
   runApp(game.widget);
 }
 
 class MyGame extends BaseGame with TapDetector {
-  final animation = flame_animation.Animation.sequenced('chopper.png', 4,
-      textureWidth: 48, textureHeight: 48, stepTime: 0.15, loop: true);
+  final animation = flame_animation.Animation.sequenced(
+    'chopper.png',
+    4,
+    textureWidth: 48,
+    textureHeight: 48,
+    stepTime: 0.15,
+    loop: true,
+  );
 
   void addAnimation(double x, double y) {
     const textureWidth = 291.0;
     const textureHeight = 178.0;
     final animationComponent = AnimationComponent.sequenced(
-        291, 178, 'creature.png', 18,
-        amountPerRow: 10,
-        textureWidth: textureWidth,
-        textureHeight: textureHeight,
-        stepTime: 0.15,
-        loop: true,
-        destroyOnFinish: true);
+      291,
+      178,
+      'creature.png',
+      18,
+      amountPerRow: 10,
+      textureWidth: textureWidth,
+      textureHeight: textureHeight,
+      stepTime: 0.15,
+      loop: false,
+      destroyOnFinish: true,
+    );
     animationComponent.x = x - textureWidth / 2;
     animationComponent.y = y - textureHeight / 2;
 
@@ -42,14 +54,15 @@ class MyGame extends BaseGame with TapDetector {
   MyGame(Size screenSize) {
     size = screenSize;
 
-    final animationComponent = AnimationComponent(100, 100, animation);
-    animationComponent.x = size.width / 2 - 100;
-    animationComponent.y = 100;
+    const s = 100.0;
+    final animationComponent = AnimationComponent(s, s, animation);
+    animationComponent.x = size.width / 2 - s;
+    animationComponent.y = s;
 
     final reversedAnimationComponent =
-        AnimationComponent(100, 100, animation.reversed());
+        AnimationComponent(s, s, animation.reversed());
     reversedAnimationComponent.x = size.width / 2;
-    reversedAnimationComponent.y = 100;
+    reversedAnimationComponent.y = s;
 
     add(animationComponent);
     add(reversedAnimationComponent);

doc/examples/aseprite/lib/main.dart

@@ -18,7 +18,9 @@ class MyGame extends BaseGame {
 
   void _start() async {
     final animation = await flame_animation.Animation.fromAsepriteData(
-        'chopper.png', 'chopper.json');
+      'chopper.png',
+      'chopper.json',
+    );
     final animationComponent = AnimationComponent(200, 200, animation);
 
     animationComponent.x = (size.width / 2) - 100;

doc/examples/audiopool/lib/main.dart

@@ -21,16 +21,17 @@ TextConfig regular = TextConfig(color: BasicPalette.white.color);
 AudioPool pool = AudioPool('laser.mp3');
 
 class MyGame extends BaseGame with TapDetector {
+  static final black = BasicPalette.black.paint;
+
   MyGame(Size screenSize) {
     size = screenSize;
   }
 
   @override
   void render(Canvas canvas) {
-    canvas.drawRect(Rect.fromLTWH(0.0, 0.0, size.width, size.height),
-        BasicPalette.black.paint);
-    regular.render(canvas, 'hit me!', Position.fromSize(size).div(2),
-        anchor: Anchor.center);
+    canvas.drawRect(Rect.fromLTWH(0.0, 0.0, size.width, size.height), black);
+    final p = Position.fromSize(size).div(2);
+    regular.render(canvas, 'hit me!', p, anchor: Anchor.center);
     super.render(canvas);
   }
 

doc/examples/cleanup.sh

@@ -6,3 +6,4 @@ rm -rf */ios
 rm -rf */web
 rm -rf */macos
 rm -rf */test
+rm -rf */.dart_tool