mirror of
				https://github.com/flame-engine/flame.git
				synced 2025-11-01 01:18:38 +08:00 
			
		
		
		
	adding anchor to sprite and animation widget
This commit is contained in:
		| @ -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)), | ||||||
|           ), |           ), | ||||||
|         ), |         ), | ||||||
|       ); |       ); | ||||||
|  | |||||||
| @ -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: | ||||||
|  | |||||||
| @ -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); | ||||||
|   } |   } | ||||||
| } | } | ||||||
|  | |||||||
| @ -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); | ||||||
|   } |   } | ||||||
| } | } | ||||||
|  | |||||||
		Reference in New Issue
	
	Block a user
	 Erick Zanardo
					Erick Zanardo