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:
Lukas Klingsbo
2021-11-19 14:28:04 +01:00
committed by GitHub
parent 904481d289
commit 8b132d7c0b
90 changed files with 1574 additions and 1140 deletions

View File

@ -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,
);
}

View File

@ -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;
}
}

View 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);
}
}

View File

@ -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));
}
}
}

View File

@ -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());
}
}

View 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);
}
}

View File

@ -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;
}
}