mirror of
https://github.com/flame-engine/flame.git
synced 2025-10-28 23:46:52 +08:00
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!
31 lines
910 B
Dart
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);
|
|
}
|