Merge pull request #475 from flame-engine/develop

0.27.0 release

CHANGELOG.md

@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## 0.27.0
+ - Improved the accuracy of the `FPSCounter` by using Flutter's internal frame timings.
+ - Adding MouseMovementDetector
+ - Adding ScrollDetector
+ - Fixes BGM error
+ - Adding Isometric Tile Maps
+
 ## 0.26.0
  - Improving Flame image auto cache
  - Fix bug in the Box2DGame's add and addLater method , when the Component extends BodyComponent and mixin HasGameRef or other mixins ,the mixins will not be set correctly

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.26.0
+  flame: ^0.27.0
 ```
 
 And start using it!

doc/components.md

@@ -235,6 +235,26 @@ Currently we have a very basic implementation of a Tiled component. This API use
 
 An example of how to use the API can be found [here](/doc/examples/tiled).
 
+# Isometric Tile Map Component
+
+This component allows you to render an isometric map based on a cartesian matrix of blocks and an isometric tileset.
+
+A simple example on how to use it:
+
+```dart
+  // creates a tileset, the block ids are automatically assigned sequentially starting at 0, from left to right and then top to bottom.
+  final tileset = await IsometricTileset.load('tileset.png', 32);
+  // each element is a block id, -1 means nothing
+  final matrix = [[0, 1, 0], [1, 0, 0], [1, 1, 1]];
+  add(IsometricTileMapComponent(tileset, matrix));
+```
+
+It also provides methods for converting coordinates so you can handle clicks, hovers, render entities on top of tiles, add a selector, etc.
+
+A more in-depth example can be found [here](/doc/examples/isometric).
+
+![An example of a isometric map with selector](images/isometric.png)
+
 # Nine Tile Box Component
 
 A Nine Tile Box is a rectangle drawn using a grid sprite.

doc/examples/cleanup.sh

@@ -1,9 +1,11 @@
 #!/bin/bash -xe
 
-rm -rf */build
-rm -rf */android
-rm -rf */ios
-rm -rf */web
-rm -rf */macos
-rm -rf */test
-rm -rf */.dart_tool
+shopt -s globstar
+
+rm -rf **/build
+rm -rf **/android
+rm -rf **/ios
+rm -rf **/web
+rm -rf **/macos
+rm -rf **/test
+rm -rf **/.dart_tool

doc/examples/gestures/lib/main_mouse_movement.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:flame/game.dart';
+import 'package:flame/gestures.dart';
+import 'package:flame/palette.dart';
+import 'package:flame/position.dart';
+
+void main() {
+  final game = MyGame();
+  runApp(game.widget);
+}
+
+class MyGame extends Game with MouseMovementDetector {
+  static const SPEED = 200;
+
+  Position position = Position(0, 0);
+  Position target;
+
+  final Paint _blue = Paint()..color = const Color(0xFF0000FF);
+
+  bool _onTarget = false;
+
+  @override
+  void onMouseMove(event) {
+    target = Position.fromOffset(event.localPosition);
+  }
+
+  Rect _toRect() => Rect.fromLTWH(
+        position.x,
+        position.y,
+        50,
+        50,
+      );
+
+  @override
+  void render(Canvas canvas) {
+    canvas.drawRect(
+      _toRect(),
+      _onTarget ? _blue : BasicPalette.white.paint,
+    );
+  }
+
+  @override
+  void update(double dt) {
+    if (target != null) {
+      _onTarget = _toRect().contains(target.toOffset());
+
+      if (!_onTarget) {
+        final dir = target.clone().minus(position).normalize();
+
+        position.add(dir.times(SPEED * dt));
+      }
+    }
+  }
+}

doc/examples/gestures/lib/main_scroll.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:flame/game.dart';
+import 'package:flame/gestures.dart';
+import 'package:flame/palette.dart';
+import 'package:flame/position.dart';
+
+void main() {
+  final game = MyGame();
+  runApp(game.widget);
+}
+
+class MyGame extends Game with ScrollDetector {
+  static const SPEED = 200;
+
+  Position position = Position(0, 0);
+  Position target;
+
+  @override
+  void onScroll(event) {
+    target = position.minus(Position.fromOffset(event.scrollDelta));
+  }
+
+  @override
+  void render(Canvas canvas) {
+    canvas.drawRect(
+      Rect.fromLTWH(
+        position.x,
+        position.y,
+        50,
+        50,
+      ),
+      BasicPalette.white.paint,
+    );
+  }
+
+  @override
+  void update(double dt) {
+    if (target != null) {
+      final dir = target.clone().minus(position).normalize();
+
+      position.add(dir.times(SPEED * dt));
+    }
+  }
+}

doc/examples/isometric/.metadata

@@ -0,0 +1,10 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled and should not be manually edited.
+
+version:
+  revision: 7fc14a55af64462763d28abfb4e610086c6e0f39
+  channel: dev
+
+project_type: app

doc/examples/isometric/README.md

@@ -0,0 +1,3 @@
+# isometric
+
+A Flame game showcasing how to use the Isometric Tile Map component.

doc/examples/isometric/lib/main.dart

@@ -0,0 +1,85 @@
+import 'package:flame/components/component.dart';
+import 'package:flame/flame.dart';
+import 'package:flame/game.dart';
+import 'package:flame/components/isometric_tile_map_component.dart';
+import 'package:flame/gestures.dart';
+import 'package:flame/position.dart';
+import 'package:flame/sprite.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+
+const x = 500.0;
+const y = 500.0;
+const s = 64;
+final topLeft = Position(x, y);
+
+void main() async {
+  WidgetsFlutterBinding.ensureInitialized();
+  final Size size = await Flame.util.initialDimensions();
+  final game = MyGame(size);
+  runApp(game.widget);
+}
+
+class Selector extends SpriteComponent {
+  bool show = false;
+
+  Selector(double s)
+      : super.fromSprite(s, s, Sprite('selector.png', width: 32, height: 32));
+
+  @override
+  void render(Canvas canvas) {
+    if (!show) {
+      return;
+    }
+
+    super.render(canvas);
+  }
+}
+
+class MyGame extends BaseGame with MouseMovementDetector {
+  IsometricTileMapComponent base;
+  Selector selector;
+
+  MyGame(Size size) {
+    init();
+  }
+
+  void init() async {
+    final tileset = await IsometricTileset.load('tiles.png', 32);
+    final matrix = [
+      [3, 1, 1, 1, 0, 0],
+      [-1, 1, 2, 1, 0, 0],
+      [-1, 0, 1, 1, 0, 0],
+      [-1, 1, 1, 1, 0, 0],
+      [1, 1, 1, 1, 0, 2],
+      [1, 3, 3, 3, 0, 2],
+    ];
+    add(
+      base = IsometricTileMapComponent(tileset, matrix, destTileSize: s)
+        ..x = x
+        ..y = y,
+    );
+    add(selector = Selector(s.toDouble()));
+  }
+
+  @override
+  void render(Canvas canvas) {
+    super.render(canvas);
+
+    canvas.drawRect(
+      const Rect.fromLTWH(x - 1, y - 1, 3, 3),
+      Paint()..color = const Color(0xFFFF00FF),
+    );
+  }
+
+  @override
+  void onMouseMove(PointerHoverEvent event) {
+    if (base == null || selector == null) {
+      return; // loading
+    }
+    final screenPosition = Position.fromOffset(event.position);
+    final block = base.getBlock(screenPosition);
+    selector.show = base.containsBlock(block);
+    selector.setByPosition(base.getBlockPosition(block).add(topLeft));
+  }
+}

doc/examples/isometric/pubspec.yaml

@@ -0,0 +1,22 @@
+name: isometric
+description: Example of isometric tilemap using Flame
+
+version: 0.1.0
+
+environment:
+  sdk: ">=2.1.0 <3.0.0"
+
+dependencies:
+  flutter:
+    sdk: flutter
+  flame:
+      path: ../../../
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+flutter:
+  assets:
+    - assets/images/tiles.png
+    - assets/images/selector.png

doc/input.md

@@ -4,6 +4,8 @@
 
 Inside `package:flame/gestures.dart` you can find a whole set of `mixin`s which can be included on your game class instance to be able to receive touch input events. Below you can see the full list of these `mixin`s and its methods:
 
+
+## Touch and mouse detectors
 ```
 - TapDetector
   - onTap
@@ -68,11 +70,19 @@ Inside `package:flame/gestures.dart` you can find a whole set of `mixin`s which
   - onReceiveDrag
 ```
 
+Mouse only events
+```
+ - MouseMovementDetector
+  - onMouseMove
+ - ScrollDetector
+  - onScroll
+```
+
 Many of these detectors can conflict with each other. For example, you can't register both Vertical and Horizontal drags, so not all of them can be used together.
 
 It is also not possible to mix advanced detectors (`MultiTouch*`) with basic detectors as they will *always win the gesture arena* and the basic detectors will never be triggered. So for example, you can use both `MultiTouchDragDetector` and `MultiTouchDragDetector` together, but if you try to use `MultiTouchTapDetector` and `PanDetector`, no events will be triggered for the later.
 
-Flame's GestureApi is provided byt Flutter's Gestures Widgets, including [GestureDetector widget](https://api.flutter.dev/flutter/widgets/GestureDetector-class.html) and [RawGestureDetector widget](https://api.flutter.dev/flutter/widgets/RawGestureDetector-class.html), you can also read more about Flutter's gestures [here](https://api.flutter.dev/flutter/gestures/gestures-library.html).
+Flame's GestureApi is provided byt Flutter's Gestures Widgets, including [GestureDetector widget](https://api.flutter.dev/flutter/widgets/GestureDetector-class.html), [RawGestureDetector widget](https://api.flutter.dev/flutter/widgets/RawGestureDetector-class.html) and [MouseRegion widget](https://api.flutter.dev/flutter/widgets/MouseRegion-class.html), you can also read more about Flutter's gestures [here](https://api.flutter.dev/flutter/gestures/gestures-library.html).
 
 ## Example
 

lib/assets_cache.dart

@@ -1,6 +1,7 @@
-import 'package:flutter/services.dart' show rootBundle;
 import 'dart:typed_data';
 
+import 'package:flutter/services.dart' show rootBundle;
+
 /// A class that loads, and cache files
 ///
 /// it automatically looks for files on the assets folder