mirror of
				https://github.com/flame-engine/flame.git
				synced 2025-10-31 17:06:50 +08:00 
			
		
		
		
	 76405daf48
			
		
	
	76405daf48
	
	
	
		
			
			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);
 | |
| }
 |