mirror of
https://github.com/flame-engine/flame.git
synced 2025-11-03 12:28:03 +08:00
Unify examples structure (#1118)
* Animations, CameraAndViewport, CollisionDetection and Components unified * Added descriptions to effects * Rename input games * Unify input stories * Add info to parallax section * Added descriptions to the rendering examples * Add descriptions to the sprites directory * Fix utils and rendering section * Add descriptions to the widgets section * Delete directory that rebase brought back * Unify game names * Added some styleguide docs for examples * Fix analyze issues * All files should have _example as suffix * Made the FollowComponentExample a bit easier to understand * Change priority of ember
This commit is contained in:
@ -2,33 +2,35 @@ import 'package:dashbook/dashbook.dart';
|
||||
import 'package:flame/game.dart';
|
||||
|
||||
import '../../commons/commons.dart';
|
||||
import 'composability.dart';
|
||||
import 'debug.dart';
|
||||
import 'game_in_game.dart';
|
||||
import 'priority.dart';
|
||||
import 'composability_example.dart';
|
||||
import 'debug_example.dart';
|
||||
import 'game_in_game_example.dart';
|
||||
import 'priority_example.dart';
|
||||
|
||||
void addComponentsStories(Dashbook dashbook) {
|
||||
dashbook.storiesOf('Components')
|
||||
..add(
|
||||
'Composability',
|
||||
(_) => GameWidget(game: Composability()),
|
||||
codeLink: baseLink('components/composability.dart'),
|
||||
(_) => GameWidget(game: ComposabilityExample()),
|
||||
codeLink: baseLink('components/composability_example.dart'),
|
||||
info: ComposabilityExample.description,
|
||||
)
|
||||
..add(
|
||||
'Priority',
|
||||
(_) => GameWidget(game: Priority()),
|
||||
codeLink: baseLink('components/priority.dart'),
|
||||
info: priorityInfo,
|
||||
(_) => GameWidget(game: PriorityExample()),
|
||||
codeLink: baseLink('components/priority_example.dart'),
|
||||
info: PriorityExample.description,
|
||||
)
|
||||
..add(
|
||||
'Debug',
|
||||
(_) => GameWidget(game: DebugGame()),
|
||||
codeLink: baseLink('components/debug.dart'),
|
||||
(_) => GameWidget(game: DebugExample()),
|
||||
codeLink: baseLink('components/debug_example.dart'),
|
||||
info: DebugExample.description,
|
||||
)
|
||||
..add(
|
||||
'Game-in-game',
|
||||
(_) => GameWidget(game: GameInGame()),
|
||||
codeLink: baseLink('components/game_in_game.dart'),
|
||||
info: gameInGameInfo,
|
||||
(_) => GameWidget(game: GameInGameExample()),
|
||||
codeLink: baseLink('components/game_in_game_example.dart'),
|
||||
info: GameInGameExample.description,
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,57 +0,0 @@
|
||||
import 'package:flame/components.dart';
|
||||
import 'package:flame/game.dart';
|
||||
import 'package:flame/input.dart';
|
||||
|
||||
class Square extends PositionComponent {
|
||||
Square(Vector2 position, Vector2 size, {double angle = 0})
|
||||
: super(
|
||||
position: position,
|
||||
size: size,
|
||||
angle: angle,
|
||||
);
|
||||
}
|
||||
|
||||
class ParentSquare extends Square with HasGameRef {
|
||||
ParentSquare(Vector2 position, Vector2 size) : super(position, size);
|
||||
|
||||
@override
|
||||
Future<void> onLoad() async {
|
||||
super.onLoad();
|
||||
createChildren();
|
||||
}
|
||||
|
||||
void createChildren() {
|
||||
// All positions here are in relation to the parent's position
|
||||
final children = [
|
||||
Square(Vector2(100, 100), Vector2(50, 50), angle: 2),
|
||||
Square(Vector2(160, 100), Vector2(50, 50), angle: 3),
|
||||
Square(Vector2(170, 150), Vector2(50, 50), angle: 4),
|
||||
Square(Vector2(70, 200), Vector2(50, 50), angle: 5),
|
||||
];
|
||||
|
||||
addAll(children);
|
||||
}
|
||||
}
|
||||
|
||||
// This class only has `HasDraggables` since the game-in-game example
|
||||
// moves a draggable component to this game.
|
||||
class Composability extends FlameGame with HasDraggables {
|
||||
late ParentSquare parentSquare;
|
||||
|
||||
@override
|
||||
bool debugMode = true;
|
||||
|
||||
@override
|
||||
Future<void> onLoad() async {
|
||||
await super.onLoad();
|
||||
parentSquare = ParentSquare(Vector2.all(200), Vector2.all(300))
|
||||
..anchor = Anchor.center;
|
||||
add(parentSquare);
|
||||
}
|
||||
|
||||
@override
|
||||
void update(double dt) {
|
||||
super.update(dt);
|
||||
parentSquare.angle += dt;
|
||||
}
|
||||
}
|
||||
72
examples/lib/stories/components/composability_example.dart
Normal file
72
examples/lib/stories/components/composability_example.dart
Normal file
@ -0,0 +1,72 @@
|
||||
import 'package:flame/components.dart';
|
||||
import 'package:flame/game.dart';
|
||||
import 'package:flame/input.dart';
|
||||
|
||||
// This class only has `HasDraggables` since the game-in-game example moves a
|
||||
// draggable component to this game.
|
||||
class ComposabilityExample extends FlameGame with HasDraggables {
|
||||
static const String description = '''
|
||||
In this example we showcase how you can add children to a component and how
|
||||
they transform together with their parent, if the parent is a
|
||||
`PositionComponent`. This example is not interactive.
|
||||
''';
|
||||
|
||||
late ParentSquare parentSquare;
|
||||
|
||||
@override
|
||||
bool debugMode = true;
|
||||
|
||||
@override
|
||||
Future<void> onLoad() async {
|
||||
await super.onLoad();
|
||||
parentSquare = ParentSquare(Vector2.all(200), Vector2.all(300))
|
||||
..anchor = Anchor.center;
|
||||
add(parentSquare);
|
||||
}
|
||||
|
||||
@override
|
||||
void update(double dt) {
|
||||
super.update(dt);
|
||||
parentSquare.angle += dt;
|
||||
}
|
||||
}
|
||||
|
||||
class ParentSquare extends RectangleComponent with HasGameRef {
|
||||
ParentSquare(Vector2 position, Vector2 size)
|
||||
: super(position: position, size: size);
|
||||
|
||||
@override
|
||||
Future<void> onLoad() async {
|
||||
super.onLoad();
|
||||
createChildren();
|
||||
}
|
||||
|
||||
void createChildren() {
|
||||
// All positions here are in relation to the parent's position
|
||||
const childSize = 50.0;
|
||||
final children = [
|
||||
RectangleComponent.square(
|
||||
position: Vector2(100, 100),
|
||||
size: childSize,
|
||||
angle: 2,
|
||||
),
|
||||
RectangleComponent.square(
|
||||
position: Vector2(160, 100),
|
||||
size: childSize,
|
||||
angle: 3,
|
||||
),
|
||||
RectangleComponent.square(
|
||||
position: Vector2(170, 150),
|
||||
size: childSize,
|
||||
angle: 4,
|
||||
),
|
||||
RectangleComponent.square(
|
||||
position: Vector2(70, 200),
|
||||
size: childSize,
|
||||
angle: 5,
|
||||
),
|
||||
];
|
||||
|
||||
addAll(children);
|
||||
}
|
||||
}
|
||||
@ -4,13 +4,60 @@ import 'package:flame/components.dart';
|
||||
import 'package:flame/game.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class LogoCompomnent extends SpriteComponent with HasGameRef<DebugGame> {
|
||||
class DebugExample extends FlameGame with FPSCounter {
|
||||
static const String description = '''
|
||||
In this example we show what you will see when setting `debugMode = true` on
|
||||
your game. It is a non-interactive example.
|
||||
''';
|
||||
|
||||
static final fpsTextPaint = TextPaint(
|
||||
style: const TextStyle(color: Color(0xFFFFFFFF)),
|
||||
);
|
||||
|
||||
@override
|
||||
bool debugMode = true;
|
||||
|
||||
@override
|
||||
Future<void> onLoad() async {
|
||||
await super.onLoad();
|
||||
final flameLogo = await loadSprite('flame.png');
|
||||
|
||||
final flame1 = LogoComponent(flameLogo);
|
||||
flame1.x = 100;
|
||||
flame1.y = 400;
|
||||
|
||||
final flame2 = LogoComponent(flameLogo);
|
||||
flame2.x = 100;
|
||||
flame2.y = 400;
|
||||
flame2.yDirection = -1;
|
||||
|
||||
final flame3 = LogoComponent(flameLogo);
|
||||
flame3.x = 100;
|
||||
flame3.y = 400;
|
||||
flame3.xDirection = -1;
|
||||
|
||||
add(flame1);
|
||||
add(flame2);
|
||||
add(flame3);
|
||||
}
|
||||
|
||||
@override
|
||||
void render(Canvas canvas) {
|
||||
super.render(canvas);
|
||||
|
||||
if (debugMode) {
|
||||
fpsTextPaint.render(canvas, fps(120).toString(), Vector2(0, 50));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class LogoComponent extends SpriteComponent with HasGameRef<DebugExample> {
|
||||
static const int speed = 150;
|
||||
|
||||
int xDirection = 1;
|
||||
int yDirection = 1;
|
||||
|
||||
LogoCompomnent(Sprite sprite) : super(sprite: sprite, size: sprite.srcSize);
|
||||
LogoComponent(Sprite sprite) : super(sprite: sprite, size: sprite.srcSize);
|
||||
|
||||
@override
|
||||
void update(double dt) {
|
||||
@ -33,45 +80,3 @@ class LogoCompomnent extends SpriteComponent with HasGameRef<DebugGame> {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class DebugGame extends FlameGame with FPSCounter {
|
||||
static final fpsTextPaint = TextPaint(
|
||||
style: const TextStyle(color: Color(0xFFFFFFFF)),
|
||||
);
|
||||
|
||||
@override
|
||||
bool debugMode = true;
|
||||
|
||||
@override
|
||||
Future<void> onLoad() async {
|
||||
await super.onLoad();
|
||||
final flameLogo = await loadSprite('flame.png');
|
||||
|
||||
final flame1 = LogoCompomnent(flameLogo);
|
||||
flame1.x = 100;
|
||||
flame1.y = 400;
|
||||
|
||||
final flame2 = LogoCompomnent(flameLogo);
|
||||
flame2.x = 100;
|
||||
flame2.y = 400;
|
||||
flame2.yDirection = -1;
|
||||
|
||||
final flame3 = LogoCompomnent(flameLogo);
|
||||
flame3.x = 100;
|
||||
flame3.y = 400;
|
||||
flame3.xDirection = -1;
|
||||
|
||||
add(flame1);
|
||||
add(flame2);
|
||||
add(flame3);
|
||||
}
|
||||
|
||||
@override
|
||||
void render(Canvas canvas) {
|
||||
super.render(canvas);
|
||||
|
||||
if (debugMode) {
|
||||
fpsTextPaint.render(canvas, fps(120).toString(), Vector2(0, 50));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
import 'package:flame/components.dart';
|
||||
import 'package:flame/game.dart';
|
||||
|
||||
import '../input/draggables.dart';
|
||||
import 'composability.dart';
|
||||
|
||||
const gameInGameInfo = '''
|
||||
This example shows two games having another game as a parent.
|
||||
One game contains draggable components and the other is a rotating square with
|
||||
other square children.
|
||||
After 5 seconds, one of the components from the game with draggable squares
|
||||
changes its parent from its original game to the component that is rotating.
|
||||
After another 5 seconds it changes back to its original parent, and so on.
|
||||
''';
|
||||
|
||||
class GameChangeTimer extends TimerComponent with HasGameRef<GameInGame> {
|
||||
GameChangeTimer() : super(period: 5, repeat: true);
|
||||
|
||||
@override
|
||||
void onTick() {
|
||||
final child = gameRef.draggablesGame.square;
|
||||
final newParent = child.parent == gameRef.draggablesGame
|
||||
? gameRef.composedGame.parentSquare
|
||||
: gameRef.draggablesGame;
|
||||
child.changeParent(newParent);
|
||||
}
|
||||
}
|
||||
|
||||
class GameInGame extends FlameGame with HasDraggables {
|
||||
@override
|
||||
bool debugMode = true;
|
||||
late final Composability composedGame;
|
||||
late final DraggablesGame draggablesGame;
|
||||
|
||||
@override
|
||||
Future<void> onLoad() async {
|
||||
await super.onLoad();
|
||||
composedGame = Composability();
|
||||
draggablesGame = DraggablesGame(zoom: 1.0);
|
||||
|
||||
await add(composedGame);
|
||||
await add(draggablesGame);
|
||||
|
||||
add(GameChangeTimer());
|
||||
}
|
||||
}
|
||||
47
examples/lib/stories/components/game_in_game_example.dart
Normal file
47
examples/lib/stories/components/game_in_game_example.dart
Normal file
@ -0,0 +1,47 @@
|
||||
import 'package:flame/components.dart';
|
||||
import 'package:flame/game.dart';
|
||||
|
||||
import '../input/draggables_example.dart';
|
||||
import 'composability_example.dart';
|
||||
|
||||
class GameInGameExample extends FlameGame with HasDraggables {
|
||||
static const String description = '''
|
||||
This example shows two games having another game as a parent.
|
||||
One game contains draggable components and the other is a rotating square
|
||||
with other square children.
|
||||
After 5 seconds, one of the components from the game with draggable squares
|
||||
changes its parent from its original game to the component that is rotating.
|
||||
After another 5 seconds it changes back to its original parent, and so on.
|
||||
''';
|
||||
|
||||
@override
|
||||
bool debugMode = true;
|
||||
late final ComposabilityExample composedGame;
|
||||
late final DraggablesExample draggablesGame;
|
||||
|
||||
@override
|
||||
Future<void> onLoad() async {
|
||||
await super.onLoad();
|
||||
composedGame = ComposabilityExample();
|
||||
draggablesGame = DraggablesExample(zoom: 1.0);
|
||||
|
||||
await add(composedGame);
|
||||
await add(draggablesGame);
|
||||
|
||||
add(GameChangeTimer());
|
||||
}
|
||||
}
|
||||
|
||||
class GameChangeTimer extends TimerComponent
|
||||
with HasGameRef<GameInGameExample> {
|
||||
GameChangeTimer() : super(period: 5, repeat: true);
|
||||
|
||||
@override
|
||||
void onTick() {
|
||||
final child = gameRef.draggablesGame.square;
|
||||
final newParent = child.parent == gameRef.draggablesGame
|
||||
? gameRef.composedGame.parentSquare
|
||||
: gameRef.draggablesGame;
|
||||
child.changeParent(newParent);
|
||||
}
|
||||
}
|
||||
@ -1,40 +1,14 @@
|
||||
import 'dart:ui';
|
||||
|
||||
import 'package:flame/components.dart';
|
||||
import 'package:flame/extensions.dart';
|
||||
import 'package:flame/game.dart';
|
||||
import 'package:flame/input.dart';
|
||||
|
||||
const priorityInfo = '''
|
||||
On this example, click on the square to bring them to the front by changing the
|
||||
priority.
|
||||
''';
|
||||
class PriorityExample extends FlameGame with HasTappables {
|
||||
static const String description = '''
|
||||
On this example, click on the square to bring them to the front by changing
|
||||
the priority.
|
||||
''';
|
||||
|
||||
class Square extends PositionComponent with HasGameRef<Priority>, Tappable {
|
||||
late final Paint paint;
|
||||
|
||||
Square(Vector2 position) {
|
||||
this.position.setFrom(position);
|
||||
size.setValues(100, 100);
|
||||
paint = PaintExtension.random(withAlpha: 0.9, base: 100);
|
||||
}
|
||||
|
||||
@override
|
||||
bool onTapDown(TapDownInfo info) {
|
||||
final topComponent = gameRef.children.last;
|
||||
if (topComponent != this) {
|
||||
gameRef.children.changePriority(this, topComponent.priority + 1);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
@override
|
||||
void render(Canvas canvas) {
|
||||
canvas.drawRect(size.toRect(), paint);
|
||||
}
|
||||
}
|
||||
|
||||
class Priority extends FlameGame with HasTappables {
|
||||
@override
|
||||
Future<void> onLoad() async {
|
||||
await super.onLoad();
|
||||
@ -47,3 +21,22 @@ class Priority extends FlameGame with HasTappables {
|
||||
addAll(squares);
|
||||
}
|
||||
}
|
||||
|
||||
class Square extends RectangleComponent
|
||||
with HasGameRef<PriorityExample>, Tappable {
|
||||
Square(Vector2 position)
|
||||
: super(
|
||||
position: position,
|
||||
size: Vector2.all(100),
|
||||
paint: PaintExtension.random(withAlpha: 0.9, base: 100),
|
||||
);
|
||||
|
||||
@override
|
||||
bool onTapDown(TapDownInfo info) {
|
||||
final topComponent = gameRef.children.last;
|
||||
if (topComponent != this) {
|
||||
gameRef.children.changePriority(this, topComponent.priority + 1);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user