Files
flame/examples/lib/stories/components/has_visibility_example.dart
Peter Vullings 76405daf48 feat: Component visibility (HasVisibility mixin) (#2681)
This PR introduces a new HasVisibility mixin on Component. It prevents the renderTree method from progressing if the isVisible property is false. It therefore prevents the component and all it's children from rendering.

The purpose of this mixin is to allow showing and hiding a component without removing it from the tree.

An important note is that the component (and all it's children) will still be on the tree. They will continue to receive update events, and all other lifecycle events. If the user has implemented input such as tap events, or collision detection, or any other interactivity, this will continue to operate without affect (unless it relies on the render step - such as per-pixel collision detection).

This is expected behaviour. If it is not desired, the user needs to account for it (by checking isVisible in their code) or someone needs to create another mixin for HasEnabled or HasActive which would prevent these other actions 😁

I am very happy to make changes, take suggestions, etc!
2023-08-26 14:26:22 +02:00

31 lines
910 B
Dart

import 'dart:async';
import 'package:flame/components.dart' hide Timer;
import 'package:flame/game.dart';
class HasVisibilityExample extends FlameGame {
static const String description = '''
In this example we use the `HasVisibility` mixin to toggle the
visibility of a component without removing it from the parent
component.
This is a non-interactive example.
''';
@override
Future<void> onLoad() async {
final flameLogoComponent = LogoComponent(await loadSprite('flame.png'));
add(flameLogoComponent);
// Toggle visibility every second
const oneSecDuration = Duration(seconds: 1);
Timer.periodic(
oneSecDuration,
(Timer t) => flameLogoComponent.isVisible = !flameLogoComponent.isVisible,
);
}
}
class LogoComponent extends SpriteComponent with HasVisibility {
LogoComponent(Sprite sprite) : super(sprite: sprite, size: sprite.srcSize);
}