adding anchor to sprite and animation widget

This commit is contained in:
Erick Zanardo
2020-05-30 15:15:24 -03:00
parent 19b57b0c38
commit 9e4e27e100
4 changed files with 67 additions and 35 deletions

View File

@ -8,6 +8,32 @@ import 'package:flame/widgets/nine_tile_box.dart';
import 'package:flame/widgets/sprite_button.dart'; import 'package:flame/widgets/sprite_button.dart';
import 'package:flame/widgets/sprite_widget.dart'; import 'package:flame/widgets/sprite_widget.dart';
import 'package:flame/widgets/animation_widget.dart'; import 'package:flame/widgets/animation_widget.dart';
import 'package:flame/anchor.dart';
Anchor parseAnchor(String name) {
switch (name) {
case 'Anchor.topLeft':
return Anchor.topLeft;
case 'Anchor.topCenter':
return Anchor.topCenter;
case 'Anchor.topRight':
return Anchor.topRight;
case 'Anchor.centerLeft':
return Anchor.centerLeft;
case 'Anchor.center':
return Anchor.center;
case 'Anchor.centerRight':
return Anchor.centerRight;
case 'Anchor.bottomLeft':
return Anchor.bottomLeft;
case 'Anchor.bottomCenter':
return Anchor.bottomCenter;
case 'Anchor.bottomRight':
return Anchor.bottomRight;
}
return null;
}
void main() async { void main() async {
WidgetsFlutterBinding.ensureInitialized(); WidgetsFlutterBinding.ensureInitialized();
@ -63,16 +89,27 @@ void main() async {
), ),
); );
final anchorOptions = [
'Anchor.topLeft',
'Anchor.topCenter',
'Anchor.topRight',
'Anchor.centerLeft',
'Anchor.center',
'Anchor.centerRight',
'Anchor.bottomLeft',
'Anchor.bottomCenter',
'Anchor.bottomRight',
];
final shieldSprite = await Sprite.loadSprite('shield.png'); final shieldSprite = await Sprite.loadSprite('shield.png');
dashbook.storiesOf('SpriteWidget').decorator(CenterDecorator()).add( dashbook.storiesOf('SpriteWidget').decorator(CenterDecorator()).add(
'default', 'default',
(ctx) => Container( (ctx) => Container(
width: ctx.numberProperty('container width', 400), width: ctx.numberProperty('container width', 400),
height: ctx.numberProperty('container height', 200), height: ctx.numberProperty('container height', 200),
padding: const EdgeInsets.all(20),
child: SpriteWidget( child: SpriteWidget(
sprite: shieldSprite, sprite: shieldSprite,
center: ctx.boolProperty('center', true), anchor: parseAnchor(
ctx.listProperty('anchor', 'Anchor.center', anchorOptions)),
), ),
), ),
); );
@ -85,22 +122,18 @@ void main() async {
columns: 4, columns: 4,
rows: 1, rows: 1,
); );
final _animation = _animationSpriteSheet.createAnimation( final _animation = _animationSpriteSheet.createAnimation(0,
0, stepTime: 0.2, to: 3, loop: true);
stepTime: 0.2,
to: 3,
loop: true,
);
dashbook.storiesOf('AnimationWidget').decorator(CenterDecorator()).add( dashbook.storiesOf('AnimationWidget').decorator(CenterDecorator()).add(
'default', 'default',
(ctx) => Container( (ctx) => Container(
width: ctx.numberProperty('container width', 400), width: ctx.numberProperty('container width', 400),
height: ctx.numberProperty('container height', 200), height: ctx.numberProperty('container height', 200),
padding: const EdgeInsets.all(20),
child: AnimationWidget( child: AnimationWidget(
animation: _animation, animation: _animation,
play: ctx.boolProperty('playing', true), play: ctx.boolProperty('playing', true),
center: ctx.boolProperty('center', true), anchor: parseAnchor(
ctx.listProperty('anchor', 'Anchor.center', anchorOptions)),
), ),
), ),
); );

View File

@ -11,7 +11,7 @@ dependencies:
sdk: flutter sdk: flutter
flame: flame:
path: ../../../ path: ../../../
dashbook: ^0.0.5 dashbook: ^0.0.6
cupertino_icons: ^0.1.2 cupertino_icons: ^0.1.2
flutter: flutter:

View File

@ -1,19 +1,20 @@
import 'package:flutter/material.dart' hide Animation; import 'package:flutter/material.dart' hide Animation;
import 'package:flame/animation.dart'; import 'package:flame/animation.dart';
import '../anchor.dart';
import './sprite_widget.dart'; import './sprite_widget.dart';
import 'dart:math'; import 'dart:math';
class AnimationWidget extends StatefulWidget { class AnimationWidget extends StatefulWidget {
final Animation animation; final Animation animation;
final bool center; final Anchor anchor;
final bool play; final bool play;
AnimationWidget({ AnimationWidget({
this.animation, this.animation,
this.play = true, this.play = true,
this.center = false, this.anchor = Anchor.topLeft,
}) : assert(animation.loaded(), 'Animation must be loaded'); }) : assert(animation.loaded(), 'Animation must be loaded');
@override @override
@ -83,6 +84,6 @@ class _AnimationWidget extends State<AnimationWidget>
@override @override
Widget build(ctx) { Widget build(ctx) {
return SpriteWidget( return SpriteWidget(
sprite: widget.animation.getSprite(), center: widget.center); sprite: widget.animation.getSprite(), anchor: widget.anchor);
} }
} }

View File

@ -1,35 +1,36 @@
import 'package:flutter/widgets.dart'; import 'package:flutter/widgets.dart';
import 'package:meta/meta.dart'; import 'package:meta/meta.dart';
import '../sprite.dart'; import '../sprite.dart';
import '../anchor.dart';
import 'dart:math'; import 'dart:math';
class SpriteWidget extends StatelessWidget { class SpriteWidget extends StatelessWidget {
final Sprite sprite; final Sprite sprite;
final bool center; final Anchor anchor;
SpriteWidget({ SpriteWidget({
@required this.sprite, @required this.sprite,
this.center = false, this.anchor = Anchor.topLeft,
}) : assert(sprite.loaded(), 'Sprite must be loaded'); }) : assert(sprite.loaded(), 'Sprite must be loaded');
@override @override
Widget build(_) { Widget build(_) {
return Container( return Container(
child: CustomPaint(painter: _FlameSpritePainer(sprite, center)), child: CustomPaint(painter: _SpritePainer(sprite, anchor)),
); );
} }
} }
class _FlameSpritePainer extends CustomPainter { class _SpritePainer extends CustomPainter {
final Sprite _sprite; final Sprite _sprite;
final bool _center; final Anchor _anchor;
_FlameSpritePainer(this._sprite, this._center); _SpritePainer(this._sprite, this._anchor);
@override @override
bool shouldRepaint(_FlameSpritePainer old) => bool shouldRepaint(_SpritePainer old) =>
old._sprite != _sprite || old._center != _center; old._sprite != _sprite || old._anchor != _anchor;
@override @override
void paint(Canvas canvas, Size size) { void paint(Canvas canvas, Size size) {
@ -38,20 +39,17 @@ class _FlameSpritePainer extends CustomPainter {
final rate = min(widthRate, heightRate); final rate = min(widthRate, heightRate);
final rect = Rect.fromLTWH( final w = _sprite.size.x * rate;
0, final h = _sprite.size.y * rate;
0,
_sprite.size.x * rate, final double dx = _anchor.relativePosition.dx * size.width;
_sprite.size.y * rate, final double dy = _anchor.relativePosition.dy * size.height;
);
if (_center) {
canvas.translate( canvas.translate(
size.width / 2 - rect.width / 2, dx - w * _anchor.relativePosition.dx,
size.height / 2 - rect.height / 2, dy - h * _anchor.relativePosition.dy,
); );
}
_sprite.renderRect(canvas, rect); _sprite.render(canvas, width: w, height: h);
} }
} }