From 96a6ce31c20dbffa2b62543d74770472015fd656 Mon Sep 17 00:00:00 2001 From: Erick Zanardo Date: Sat, 23 May 2020 15:07:35 -0300 Subject: [PATCH] Adding FlameSpriteWidget --- .../widgets/assets/images/bomb_ptero.png | Bin 0 -> 1114 bytes doc/examples/widgets/assets/images/shield.png | Bin 0 -> 253 bytes doc/examples/widgets/lib/main.dart | 36 +++++++---- doc/examples/widgets/pubspec.yaml | 2 + doc/widgets.md | 14 +++++ lib/util.dart | 2 + lib/widgets/flame_sprite_widget.dart | 56 ++++++++++++++++++ 7 files changed, 99 insertions(+), 11 deletions(-) create mode 100644 doc/examples/widgets/assets/images/bomb_ptero.png create mode 100644 doc/examples/widgets/assets/images/shield.png create mode 100644 lib/widgets/flame_sprite_widget.dart diff --git a/doc/examples/widgets/assets/images/bomb_ptero.png b/doc/examples/widgets/assets/images/bomb_ptero.png new file mode 100644 index 0000000000000000000000000000000000000000..fa4ddadc84fd252eb155441d1ebae241199bba89 GIT binary patch literal 1114 zcmV-g1f~0lP)QvvI+P9_L+K(SrBKl! zLo{?xvj(RwjZ>&1{UeCiL0-6v?{e?m`>*$bV0hlW`~KeV`@8qO8vSa}=vM>N zI@030ejQAx>^w_Ah6p;2p9G1^pElxz{La*T-FY_uOCn!gVF+U zH34rvUNW`WitG9bI{c%g0B%YGGR&aUKiNZY4B-KHv3OnAuM1@b;Bo?vUhR1-ZMNdN zen6jploSAMusipURa{Crxusl0``Pv*r*^Y)OF7dLxY1d_KFdL@TTu1l?lqAl0r}O= z@P8ux>1JU01w-DteBbNSf8y#@;9pg z!%@px?Tvmls26uV5(Ck`xp9K$`5A02fAPpMvaT8FNT&G-Gy{nuV*uh}Ei9hn@bZFs z&ccL`(}PK6n$ki{(dbtL7X9Q{)0%1RN&bnuk*1Bs8z&|WX$_PH-k@3HEG(V_0LsC? zNPFA6T8pyi*J-TLn0WP@)Jj8!e|Tc@Rs6>b0W{51w-ABHvBj zWkvMMB+dAX`iE!y{qO-Yi$P@qSWRWa5AaMcHB2Hh{<8d&H2#rYAliYZO_bI=qPhpA z@-PX5QW+4K!Aul^O#Nvv?VB*;#y{~zSiQLGkq^&B2cEjSxY4*<1Z)B9X{643P5dQGnZb8B;+4Hw=57J3gL3T-c%wvAa?WEZpLs9|D z(w_PmfCXCym=&^oi2HwK{sOJ8kI`j>EhOpRTK?jJvJA2n*ZhOE{guQAES6(3_~F@M gvFRmM7!&^a50>N07|5r#tN;K207*qoM6N<$f*y4lK-Y>J2zUI~keJC-D?){>#U*ts(LK)E~?H z=q%=LO!V5`OyAuRn3aMSt--bLW3LpJOENw>YelR@7y?;?>wvi=v&=5*5ICz1fHT_& zG)6U%6|clo2WLWbH|+sl)aPTb4LAU#(`XgX0$hA_HkWkSIIPPY&>rA>^&DWd*~Wol z&k&IOy#p`^T3>@RkNdM*s$siuFSK Container( @@ -42,6 +34,15 @@ void main() async { ), )); + await Flame.images.load('buttons.png'); + + final _buttons = SpriteSheet( + imageName: 'buttons.png', + textureHeight: 20, + textureWidth: 60, + columns: 1, + rows: 2, + ); dashbook.storiesOf('SpriteButton').decorator(CenterDecorator()).add( 'default', (ctx) => Container( @@ -62,5 +63,18 @@ void main() async { ), ); + final shieldSprite = await Sprite.loadSprite('shield.png'); + dashbook.storiesOf('FlameSpriteWidget').decorator(CenterDecorator()).add( + 'default', + (ctx) => Container( + width: ctx.numberProperty('container width', 200), + height: ctx.numberProperty('container height', 200), + padding: const EdgeInsets.all(20), + child: FlameSpriteWidget( + sprite: shieldSprite, + ), + ), + ); + runApp(dashbook); } diff --git a/doc/examples/widgets/pubspec.yaml b/doc/examples/widgets/pubspec.yaml index 503e2fc86..16674b9be 100644 --- a/doc/examples/widgets/pubspec.yaml +++ b/doc/examples/widgets/pubspec.yaml @@ -19,3 +19,5 @@ flutter: assets: - assets/images/nine_tile_box.png - assets/images/buttons.png + - assets/images/shield.png + - assets/images/bomb_ptero.png diff --git a/doc/widgets.md b/doc/widgets.md index 6e9303db5..7fdac5063 100644 --- a/doc/widgets.md +++ b/doc/widgets.md @@ -47,3 +47,17 @@ SpriteButton( pressedSprite: _pressedSpriteButton, ) ``` + +## FlameSpriteWidget + +`FlameSpriteWidget` is a widget used to display [Sprites](https://github.com/flame-engine/flame/blob/master/lib/sprite.dart) inside a widget tree. + +How to use it: + +```dart +FlameSpriteWidget( + sprite: shieldSprite, + center: true, +), + +``` diff --git a/lib/util.dart b/lib/util.dart index dd2b50f04..86cb98e02 100644 --- a/lib/util.dart +++ b/lib/util.dart @@ -164,6 +164,8 @@ class Util { /// /// 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 + /// + /// @Deprecated('Use FlameSpriteWidget instead') widgets.CustomPaint spriteAsWidget(Size size, Sprite sprite) => widgets.CustomPaint(size: size, painter: _SpriteCustomPainter(sprite)); } diff --git a/lib/widgets/flame_sprite_widget.dart b/lib/widgets/flame_sprite_widget.dart new file mode 100644 index 000000000..15111a44f --- /dev/null +++ b/lib/widgets/flame_sprite_widget.dart @@ -0,0 +1,56 @@ +import 'package:flutter/widgets.dart'; +import 'package:meta/meta.dart'; +import '../sprite.dart'; + +import 'dart:math'; + +class FlameSpriteWidget extends StatelessWidget { + final Sprite sprite; + final bool center; + + FlameSpriteWidget({ + @required this.sprite, + this.center = false, + }) : assert(sprite.loaded(), 'Sprite must be loaded'); + + @override + Widget build(_) { + return Container( + child: CustomPaint(painter: _FlameSpritePainer(sprite, center)), + ); + } +} + +class _FlameSpritePainer extends CustomPainter { + final Sprite _sprite; + final bool _center; + + _FlameSpritePainer(this._sprite, this._center); + + @override + bool shouldRepaint(_FlameSpritePainer old) => old._sprite != _sprite; + + @override + void paint(Canvas canvas, Size size) { + final widthRate = size.width / _sprite.size.x; + final heightRate = size.height / _sprite.size.y; + + final rate = min(widthRate, heightRate); + + final rect = Rect.fromLTWH( + 0, + 0, + _sprite.size.x * rate, + _sprite.size.y * rate, + ); + + if (_center) { + canvas.translate( + size.width / 2 - rect.width / 2, + size.height / 2 - rect.height / 2, + ); + } + + _sprite.renderRect(canvas, rect); + } +}