From dec04f333549721a755634e8bf0251d77c1d7b2d Mon Sep 17 00:00:00 2001 From: Lukas Klingsbo Date: Wed, 8 Dec 2021 13:19:00 +0100 Subject: [PATCH] Work around Flutter bug for `ColorEffect` and fix broken links (#1178) * Fix `ColorEffect` Flutter bug and example links * Remove accidental code * Fix `ColorEffect` test --- examples/lib/stories/input/input.dart | 48 +++++++++---------- examples/lib/stories/parallax/parallax.dart | 2 +- examples/lib/stories/rendering/rendering.dart | 6 +-- examples/lib/stories/sprites/sprites.dart | 2 +- examples/lib/stories/system/system.dart | 4 +- .../widgets/custom_painter_example.dart | 14 +++--- .../flame/lib/src/effects/color_effect.dart | 7 ++- .../flame/test/effects/color_effect_test.dart | 6 ++- 8 files changed, 49 insertions(+), 40 deletions(-) diff --git a/examples/lib/stories/input/input.dart b/examples/lib/stories/input/input.dart index 7673e2f35..3ab66a6df 100644 --- a/examples/lib/stories/input/input.dart +++ b/examples/lib/stories/input/input.dart @@ -18,6 +18,30 @@ import 'tappables_example.dart'; void addInputStories(Dashbook dashbook) { dashbook.storiesOf('Input') + ..add( + 'Tappables', + (_) => GameWidget(game: TappablesExample()), + codeLink: baseLink('input/tappables_example.dart'), + info: TappablesExample.description, + ) + ..add( + 'Draggables', + (context) { + return GameWidget( + game: DraggablesExample( + zoom: context.listProperty('zoom', 1, [0.5, 1, 1.5]), + ), + ); + }, + codeLink: baseLink('input/draggables_example.dart'), + info: DraggablesExample.description, + ) + ..add( + 'Hoverables', + (_) => GameWidget(game: HoverablesExample()), + codeLink: baseLink('input/hoverables_example.dart'), + info: HoverablesExample.description, + ) ..add( 'Keyboard', (_) => GameWidget(game: KeyboardExample()), @@ -57,36 +81,12 @@ void addInputStories(Dashbook dashbook) { codeLink: baseLink('input/multitap_advanced_example.dart'), info: MultitapAdvancedExample.description, ) - ..add( - 'Tappables', - (_) => GameWidget(game: TappablesExample()), - codeLink: baseLink('input/tappables_example.dart'), - info: TappablesExample.description, - ) ..add( 'Overlapping Tappables', (_) => GameWidget(game: OverlappingTappablesExample()), codeLink: baseLink('input/overlapping_tappables_example.dart'), info: OverlappingTappablesExample.description, ) - ..add( - 'Draggables', - (context) { - return GameWidget( - game: DraggablesExample( - zoom: context.listProperty('zoom', 1, [0.5, 1, 1.5]), - ), - ); - }, - codeLink: baseLink('input/draggables_example.dart'), - info: DraggablesExample.description, - ) - ..add( - 'Hoverables', - (_) => GameWidget(game: HoverablesExample()), - codeLink: baseLink('input/hoverables_example.dart'), - info: HoverablesExample.description, - ) ..add( 'Joystick', (_) => GameWidget(game: JoystickExample()), diff --git a/examples/lib/stories/parallax/parallax.dart b/examples/lib/stories/parallax/parallax.dart index b2de15f4e..0d08daec9 100644 --- a/examples/lib/stories/parallax/parallax.dart +++ b/examples/lib/stories/parallax/parallax.dart @@ -17,7 +17,7 @@ void addParallaxStories(Dashbook dashbook) { ..add( 'Basic', (_) => GameWidget(game: BasicParallaxExample()), - codeLink: baseLink('parallax/basic_animation_example.dart'), + codeLink: baseLink('parallax/basic_parallax_example.dart'), info: BasicParallaxExample.description, ) ..add( diff --git a/examples/lib/stories/rendering/rendering.dart b/examples/lib/stories/rendering/rendering.dart index 475d1e27b..c7ec1c579 100644 --- a/examples/lib/stories/rendering/rendering.dart +++ b/examples/lib/stories/rendering/rendering.dart @@ -20,13 +20,13 @@ void addRenderingStories(Dashbook dashbook) { ..add( 'Isometric Tile Map', (_) => GameWidget(game: IsometricTileMapExample()), - codeLink: baseLink('tile_maps/isometric_tile_map_example.dart'), + codeLink: baseLink('rendering/isometric_tile_map_example.dart'), info: IsometricTileMapExample.description, ) ..add( 'Nine Tile Box', (_) => GameWidget(game: NineTileBoxExample()), - codeLink: baseLink('utils/nine_tile_box_example.dart'), + codeLink: baseLink('rendering/nine_tile_box_example.dart'), info: NineTileBoxExample.description, ) ..add( @@ -44,7 +44,7 @@ void addRenderingStories(Dashbook dashbook) { ..add( 'Particles', (_) => GameWidget(game: ParticlesExample()), - codeLink: baseLink('utils/particles_example.dart'), + codeLink: baseLink('rendering/particles_example.dart'), info: ParticlesExample.description, ); } diff --git a/examples/lib/stories/sprites/sprites.dart b/examples/lib/stories/sprites/sprites.dart index fad119ad2..63c2cc20f 100644 --- a/examples/lib/stories/sprites/sprites.dart +++ b/examples/lib/stories/sprites/sprites.dart @@ -14,7 +14,7 @@ void addSpritesStories(Dashbook dashbook) { ..add( 'Basic Sprite', (_) => GameWidget(game: BasicSpriteExample()), - codeLink: baseLink('sprites/basic_animation_example.dart'), + codeLink: baseLink('sprites/basic_sprite_example.dart'), info: BasicSpriteExample.description, ) ..add( diff --git a/examples/lib/stories/system/system.dart b/examples/lib/stories/system/system.dart index 112e8aa8c..15513209f 100644 --- a/examples/lib/stories/system/system.dart +++ b/examples/lib/stories/system/system.dart @@ -17,13 +17,13 @@ void addSystemStories(Dashbook dashbook) { ..add( 'Overlay', overlayBuilder, - codeLink: baseLink('widgets/overlays_example.dart'), + codeLink: baseLink('system/overlays_example.dart'), info: OverlaysExample.description, ) ..add( 'Without FlameGame', (_) => GameWidget(game: NoFlameGameExample()), - codeLink: baseLink('utils/without_flamegame_example.dart'), + codeLink: baseLink('system/without_flamegame_example.dart'), info: NoFlameGameExample.description, ); } diff --git a/examples/lib/stories/widgets/custom_painter_example.dart b/examples/lib/stories/widgets/custom_painter_example.dart index ed27ec9f1..453b176ed 100644 --- a/examples/lib/stories/widgets/custom_painter_example.dart +++ b/examples/lib/stories/widgets/custom_painter_example.dart @@ -10,7 +10,7 @@ class CustomPainterExample extends FlameGame with TapDetector { On the screen you can see a component using a custom painter being rendered on a FlameGame, and if you tap, that same painter is used to - show the happy face on a widget overlay. + show a smiley on a widget overlay. '''; @override @@ -22,10 +22,10 @@ class CustomPainterExample extends FlameGame with TapDetector { @override void onTap() { - if (overlays.isActive('HappyFace')) { - overlays.remove('HappyFace'); + if (overlays.isActive('Smiley')) { + overlays.remove('Smiley'); } else { - overlays.add('HappyFace'); + overlays.add('Smiley'); } } } @@ -34,10 +34,10 @@ Widget customPainterBuilder(DashbookContext ctx) { return GameWidget( game: CustomPainterExample(), overlayBuilderMap: { - 'HappyFace': (context, game) { + 'Smiley': (context, game) { return Center( child: Container( - color: Colors.white, + color: Colors.transparent, width: 200, height: 200, child: Column( @@ -45,7 +45,7 @@ Widget customPainterBuilder(DashbookContext ctx) { const Text( 'Hey, I can be a widget too!', style: TextStyle( - color: Colors.black, + color: Colors.white70, ), ), const SizedBox(height: 32), diff --git a/packages/flame/lib/src/effects/color_effect.dart b/packages/flame/lib/src/effects/color_effect.dart index 70b785f16..9838ef35f 100644 --- a/packages/flame/lib/src/effects/color_effect.dart +++ b/packages/flame/lib/src/effects/color_effect.dart @@ -1,3 +1,5 @@ +import 'dart:math'; + import 'package:flutter/material.dart'; import '../../components.dart'; @@ -33,7 +35,10 @@ class ColorEffect extends ComponentEffect { @override void apply(double progress) { final currentColor = color.withOpacity( - _tween.transform(progress), + // Currently there is a bug when opacity is 0 in the color filter. + // "Expected a value of type 'SkDeletable', but got one of type 'Null'" + // https://github.com/flutter/flutter/issues/89433 + max(_tween.transform(progress), 1 / 255), ); target.tint(currentColor, paintId: paintId); super.apply(progress); diff --git a/packages/flame/test/effects/color_effect_test.dart b/packages/flame/test/effects/color_effect_test.dart index 1749fd816..0c8ab8331 100644 --- a/packages/flame/test/effects/color_effect_test.dart +++ b/packages/flame/test/effects/color_effect_test.dart @@ -19,7 +19,11 @@ void main() { game.update(0); expect( component.paint.colorFilter.toString(), - equals('ColorFilter.mode(Color(0x00f44336), BlendMode.srcATop)'), + // Once https://github.com/flutter/flutter/issues/89433 has been fixed + // the two equals lines should be swapped and the ColorEffect should go + // to opacity 0. + //equals('ColorFilter.mode(Color(0x00f44336), BlendMode.srcATop)'), + equals('ColorFilter.mode(Color(0x01f44336), BlendMode.srcATop)'), ); game.update(0.5);