flutter/flame
1
0
Fork 0
mirror of https://github.com/flame-engine/flame.git synced 2025-11-03 20:36:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: Update the ClipComponent example (#3389)

Browse Source 
This PR updates the ClipComponent example to make it clear how the
clipping works.

Co-authored-by: Lukas Klingsbo <me@lukas.fyi>
This commit is contained in:
DevKage
2024-12-14 03:22:28 +05:30
committed by GitHub
parent 978ad31b42
commit ba3b225a4b
1 changed files with 28 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
examples/lib/stories/components/clip_component_example.dart
View File

@ -1,50 +1,43 @@
import 'dart:math';
import 'dart:ui';
import 'package:examples/commons/ember.dart';
import 'package:flame/components.dart';
import 'package:flame/effects.dart';
import 'package:flame/events.dart';
import 'package:flame/game.dart';
import 'package:flame/input.dart';
import 'package:flutter/material.dart' hide Gradient;
class _Rectangle extends RectangleComponent {
_Rectangle()
: super(
size: Vector2(200, 200),
anchor: Anchor.center,
paint: Paint()
..shader = Gradient.linear(
Offset.zero,
const Offset(0, 100),
[Colors.orange, Colors.blue],
),
children: [
RotateEffect.by(
pi * 2,
EffectController(duration: 0.4, infinite: true),
),
],
);
class TappableEmber extends Ember with TapCallbacks {
TappableEmber({required Vector2 position, required Vector2 size})
: super(position: position, size: size);
@override
bool onTapDown(TapDownEvent event) {
size += Vector2.all(10);
return true;
}
}
class ClipComponentExample extends FlameGame with TapDetector {
class ClipComponentExample extends FlameGame {
static const String description =
'Tap on the objects to increase their size.';
'''Tap on the objects to increase their size and see how the clip component
works.''';
late final _embers = <TappableEmber>[
TappableEmber(size: Vector2.all(200), position: Vector2.all(100)),
TappableEmber(size: Vector2.all(300), position: Vector2.all(100)),
TappableEmber(size: Vector2.all(200), position: Vector2.all(125)),
];
@override
Future<void> onLoad() async {
addAll(
[
ClipComponent.circle(
position: Vector2(100, 100),
size: Vector2.all(50),
children: [_Rectangle()],
position: Vector2.all(200),
size: Vector2.all(200),
children: [_embers[0]],
),
ClipComponent.rectangle(
position: Vector2(200, 100),
size: Vector2.all(50),
children: [_Rectangle()],
position: Vector2(600, 200),
size: Vector2.all(200),
children: [_embers[1]],
),
ClipComponent.polygon(
points: [
@ -53,28 +46,11 @@ class ClipComponentExample extends FlameGame with TapDetector {
Vector2(0, 1),
Vector2(1, 0),
],
position: Vector2(200, 200),
size: Vector2.all(50),
children: [_Rectangle()],
position: Vector2(200, 500),
size: Vector2.all(200),
children: [_embers[2]],
),
],
);
}
@override
void onTapUp(TapUpInfo info) {
final position = info.eventPosition.widget;
final hit = children
.whereType<PositionComponent>()
.where(
(component) => component.containsLocalPoint(
position - component.position,
),
)
.toList();
hit.forEach((component) {
component.size += Vector2.all(10);
});
}
}