Skip to content

Commit

Permalink
Update & publish new doc versions
Browse files Browse the repository at this point in the history
  • Loading branch information
Blue Fire committed Oct 24, 2024
1 parent b1291dd commit 0b13e87
Show file tree
Hide file tree
Showing 9 changed files with 573 additions and 15 deletions.
Binary file modified docs/main/_images/polygon_shape.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
109 changes: 109 additions & 0 deletions docs/main/_sources/bridge_packages/flame_console/flame_console.md.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
# flame_console

Flame Console is a terminal overlay for Flame games which allows developers to debug and interact
with their games.

It offers an overlay that can be plugged in to your `GameWidget` which when activated will show a
terminal-like interface written with Flutter widgets where commands can be executed to see
information about the running game and components, or perform actions.

It comes with a set of built-in commands, but it is also possible to add custom commands.


## Usage

Flame Console is an overlay, so to use it, you will need to register it in your game widget.

Then, showing the overlay is up to you, below we see an example of a floating action button that will
show the console when pressed.

```dart
@override
Widget build(BuildContext context) {
return Scaffold(
body: GameWidget(
game: _game,
overlayBuilderMap: {
'console': (BuildContext context, MyGame game) => ConsoleView(
game: game,
onClose: () {
_game.overlays.remove('console');
},
),
},
),
floatingActionButton: FloatingActionButton(
heroTag: 'console_button',
onPressed: () {
_game.overlays.add('console');
},
child: const Icon(Icons.developer_mode),
),
);
}
```


## Built-in commands

- `help` - List available commands and their usage.
- `ls` - List components.
- `rm` - Remove components.
- `debug` - Toggle debug mode on components.
- `pause` - Pauses the game loop.
- `resume` -Resumes the game loop.


## Custom commands

Custom commands can be created by extending the `ConsoleCommand` class and adding them to the
the `customCommands` list in the `ConsoleView` widget.

```dart
class MyCustomCommand extends ConsoleCommand<MyGame> {
MyCustomCommand();

@override
String get name => 'my_command';

@override
String get description => 'Description of my command';

// The execute method is supposed to return a tuple where the first
// element is an error message in case of failure, and the second
// element is the output of the command.
@override
(String?, String) execute(MyGame game, List<String> args) {
// do something on the game
return (null, 'Hello World');
}
}
```

Then when creating the `ConsoleView` widget, add the custom command to the `customCommands` list.

```dart
ConsoleView(
game: game,
onClose: () {
_game.overlays.remove('console');
},
customCommands: [MyCustomCommand()],
),
```


## Customizing the console UI

The console look and feel can also be customized. When creating the `ConsoleView` widget, there are
a couple of properties that can be used to customize it:

- `containerBuilder`: It is used to created the decorated container where the history and the
command input is displayed.
- `cursorBuilder`: It is used to create the cursor widget.
- `historyBuilder`: It is used to create the scrolling element of the history, by default a simple
`SingleChildScrollView` is used.
- `cursorColor`: The color of the cursor. Can be used when just wanting to change the color
of the cursor.
- `textStyle`: The text style of the console.

2 changes: 0 additions & 2 deletions docs/main/_sources/flame/collision_detection.md.txt
Original file line number Diff line number Diff line change
Expand Up @@ -264,8 +264,6 @@ them so don't doubt to use them even if your use case isn't listed here.
It should be noted that if you want to use collision detection or `containsPoint` on the `Polygon`,
the polygon needs to be convex. So always use convex polygons or you will most likely run into
problems if you don't really know what you are doing.
It should also be noted that you should always define the vertices in your polygon
in a counter-clockwise order.

The other hitbox shapes don't have any mandatory constructor, that is because they can have a
default calculated from the size of the collidable that they are attached to, but since a
Expand Down
7 changes: 2 additions & 5 deletions docs/main/_sources/flame/components.md.txt
Original file line number Diff line number Diff line change
Expand Up @@ -1070,9 +1070,9 @@ For example you could create a diamond shapes polygon like this:
void main() {
PolygonComponent.relative(
[
Vector2(0.0, 1.0), // Middle of top wall
Vector2(0.0, -1.0), // Middle of top wall
Vector2(1.0, 0.0), // Middle of right wall
Vector2(0.0, -1.0), // Middle of bottom wall
Vector2(0.0, 1.0), // Middle of bottom wall
Vector2(-1.0, 0.0), // Middle of left wall
],
size: Vector2.all(100),
Expand All @@ -1090,9 +1090,6 @@ the center of the polygon.
In the image you can see how the polygon shape formed by the purple arrows is defined by the red
arrows.

Remember to define the lists in a counter clockwise manner (if you think in the screen coordinate
system where the y-axis is flipped, otherwise it is clockwise).


### RectangleComponent

Expand Down
Loading

0 comments on commit 0b13e87

Please sign in to comment.