Merge pull request #130 from flame-engine/sprite-as-widget

Sprite as widget

doc/examples/animation_widget/lib/main.dart

@@ -1,11 +1,17 @@
 import 'dart:async';
 
 import 'package:flame/animation.dart' as animation;
+import 'package:flame/sprite.dart';
 import 'package:flame/flame.dart';
 import 'package:flame/position.dart';
 import 'package:flutter/material.dart';
 
-void main() => runApp(MyApp());
+Sprite _sprite;
+
+void main() async {
+  _sprite = await Sprite.loadSprite('minotaur.png', width: 96, height: 96);
+  runApp(MyApp());
+}
 
 class MyApp extends StatelessWidget {
   @override
@@ -65,6 +71,10 @@ class _MyHomePageState extends State<MyHomePage> {
                 animation.Animation.sequenced('minotaur.png', 19,
                     textureWidth: 96.0)),
             const Text('Neat, hum?'),
+            const Text(
+                'By the way, you can also use static sprites as widgets:'),
+            Flame.util.spriteAsWidget(const Size(100, 100), _sprite),
+            const SizedBox(height: 40),
             const Text('Sprites from Elthen\'s amazing work on itch.io:'),
             const Text('https://elthen.itch.io/2d-pixel-art-minotaur-sprites'),
           ],

doc/images.md

@@ -39,6 +39,10 @@ You must pass the size to the render method, and the image will be resized accor
 
 The render method will do nothing while the sprite has not been loaded, so you don't need to worry. The image is cached in the `Images` class, so you can safely create many sprites with the same fileName.
 
+Sprites can also be used as widgets, to do so, just use `Flame.util.spriteAsWidget`
+
+A complete example of using sprite as widegets can be found [here](examples/animation_widget).
+
 ## Svg
 
 Flame provides a simple API to render SVG images on your game.
@@ -151,6 +155,11 @@ Animations, after created, have an update and render method; the latter renders
 
 Animations are normally used inside `AnimationComponent`s, but custom components with several Animations can be created as well.
 
+
+Animations can also be used as widgets, to do so, just use `Flame.util.animationAsWidget`
+
+A complete example of using animations as widegets can be found [here](examples/animation_widget).
+
 ## FlareAnimation
 
 Flame provides a simple wrapper of [Flare](https://www.2dimensions.com/about-flare) animations so you can use them on Flame games.

lib/util.dart

@@ -6,6 +6,7 @@ import 'package:flutter/services.dart';
 import 'package:flutter/widgets.dart' as widgets;
 
 import 'animation.dart';
+import 'sprite.dart';
 import 'components/animation_component.dart';
 import 'game.dart';
 import 'position.dart';
@@ -88,4 +89,27 @@ class Util {
         SimpleGame(AnimationComponent(size.x, size.y, animation)),
         size: size);
   }
+
+  /// Returns a regular Flutter widget represeting this sprite, rendered with the specified size.
+  ///
+  /// This will create a [CustomPaint] widget using a [CustomPainter] for rendering the [Sprite]
+  /// Be aware that the Sprite must have been loaded, otherwise it can't be rendered
+  widgets.CustomPaint spriteAsWidget(Size size, Sprite sprite) =>
+      widgets.CustomPaint(size: size, painter: _SpriteCustomPainter(sprite));
+}
+
+class _SpriteCustomPainter extends widgets.CustomPainter {
+  final Sprite _sprite;
+
+  _SpriteCustomPainter(this._sprite);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if (_sprite.loaded()) {
+      _sprite.render(canvas, size.width, size.height);
+    }
+  }
+
+  @override
+  bool shouldRepaint(widgets.CustomPainter old) => false;
 }