Skip to content

Commit 7b8c6b9

Browse files
author
Blue Fire
committed
Update & publish new doc versions
1 parent 6daec6e commit 7b8c6b9

File tree

661 files changed

+741962
-100882
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

661 files changed

+741962
-100882
lines changed

docs/1.23.0/.buildinfo

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Sphinx build info version 1
2+
# This file hashes the configuration used when building these files. When it is not found, a full rebuild will be done.
3+
config: ce7fb4dff48a72ce57913ea9f5373460
4+
tags: 645f666f9bcd5a90fca523b33c5a78b7

docs/1.23.0/README.html

Lines changed: 518 additions & 0 deletions
Large diffs are not rendered by default.
120 KB
Loading
24.5 KB
Loading
42.1 KB
Loading

docs/1.23.0/_images/Step4Enemies.jpg

49.6 KB
Loading

docs/1.23.0/_images/Step4Ground.jpg

80.4 KB
Loading

docs/1.23.0/_images/Step6HUD.jpg

95.6 KB
Loading

docs/1.23.0/_images/TiledEditor.jpg

211 KB
Loading
Binary file not shown.
Binary file not shown.

docs/1.23.0/_images/block.png

117 Bytes
Loading

docs/1.23.0/_images/ember.png

421 Bytes
Loading
20.9 KB
Loading

docs/1.23.0/_images/ground.png

318 Bytes
Loading

docs/1.23.0/_images/heart.png

273 Bytes
Loading

docs/1.23.0/_images/heart_half.png

301 Bytes
Loading

docs/1.23.0/_images/isometric.png

1.53 KB
Loading
37.9 KB
Binary file not shown.
341 KB
Loading
Loading

docs/1.23.0/_images/orthogonal.png

4.37 KB
Loading

docs/1.23.0/_images/player.png

384 Bytes
Loading
33.5 KB
Loading

docs/1.23.0/_images/polygon_shape.png

8.83 KB
Loading

docs/1.23.0/_images/star.png

309 Bytes
Loading
786 Bytes
Loading
76.5 KB
Loading

docs/1.23.0/_images/water_enemy.png

194 Bytes
Loading

docs/1.23.0/_sources/README.md.txt

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
# Getting Started
2+
3+
4+
## About Flame
5+
6+
Flame is a modular Flutter game engine that provides a complete set of out-of-the-way solutions for
7+
games. It takes advantage of the powerful infrastructure provided by Flutter but simplifies the code
8+
you need to build your projects.
9+
10+
It provides you with a simple yet effective game loop implementation, and the necessary
11+
functionalities that you might need in a game. For instance; input, images, sprites, sprite sheets,
12+
animations, collision detection, and a component system that we call Flame Component System (FCS for
13+
short).
14+
15+
We also provide stand-alone packages that extend the Flame functionality which can be found in the
16+
[Bridge Packages](bridge_packages/bridge_packages.md) section.
17+
18+
You can pick and choose whichever parts you want, as they are all independent and modular.
19+
20+
The engine and its ecosystem are constantly being improved by the community, so please feel free to
21+
reach out, open issues and PRs as well as make suggestions.
22+
23+
Give us a star if you want to help give the engine exposure and grow the community. :)
24+
25+
26+
## Installation
27+
28+
Add the `flame` package as a dependency in your `pubspec.yaml` by running the following command:
29+
30+
```console
31+
flutter pub add flame
32+
```
33+
34+
The latest version can be found on [pub.dev](https://pub.dev/packages/flame/install).
35+
36+
then run `flutter pub get` and you are ready to start using it!
37+
38+
39+
## Getting started
40+
41+
There is a set of tutorials that you can follow to get started in the
42+
[tutorials folder](https://github.com/flame-engine/flame/tree/main/doc/tutorials).
43+
44+
Simple examples for all features can be found in the
45+
[examples folder](https://github.com/flame-engine/flame/tree/main/examples).
46+
47+
To run Flame you need use the `GameWidget`, which is just another widget that can live anywhere in
48+
your widget tree. You can use it as the root widget of your app, or as a child of another widget.
49+
50+
Here is a simple example of how to use the `GameWidget`:
51+
52+
```dart
53+
import 'package:flame/game.dart';
54+
import 'package:flutter/material.dart';
55+
56+
void main() {
57+
runApp(
58+
GameWidget(
59+
game: FlameGame(),
60+
),
61+
);
62+
}
63+
```
64+
65+
In Flame we provide a concept called the Flame Component System (FCS), which is a way to organize
66+
your game objects in a way that makes it easy to manage them. You can read more about it in the
67+
[Components](flame/components.md) section.
68+
69+
When you want to start a new game you either have to extend the `FlameGame` class or the `World`
70+
class. The `FlameGame` is the root of your game and is responsible for managing the game loop and
71+
the components. The `World` class is a component that can be used to create a world in your game.
72+
73+
So to create a simple game you can do something like this:
74+
75+
```dart
76+
import 'package:flame/game.dart';
77+
import 'package:flame/components.dart';
78+
import 'package:flutter/widgets.dart';
79+
80+
void main() {
81+
runApp(
82+
GameWidget(
83+
game: FlameGame(world: MyWorld()),
84+
),
85+
);
86+
}
87+
88+
class MyWorld extends World {
89+
@override
90+
Future<void> onLoad() async {
91+
add(Player(position: Vector2(0, 0)));
92+
}
93+
}
94+
```
95+
96+
As you can see, we have created a `MyWorld` class that extends the `World` class. We have overridden
97+
the `onLoad` method to add a `Player` component (which doesn't exist yet) to the world. In the
98+
`FlameGame` class we by default have a `camera` that is watching the world, and by default it is
99+
looking at the (0, 0) position of the world in the center of the screen, to learn more about the
100+
camera and the world you can read the [Camera Component](flame/camera.md) section.
101+
102+
The `Player` component can be whatever type of component that you want, to get started we recommend
103+
to use the `SpriteComponent` class, which is a component that can render a sprite (image) on the
104+
screen.
105+
106+
For example something like this:
107+
108+
```dart
109+
import 'package:flame/components.dart';
110+
import 'package:flame/geometry.dart';
111+
import 'package:flame/extensions.dart';
112+
113+
class Player extends SpriteComponent {
114+
Player({super.position}) :
115+
super(size: Vector2.all(200), anchor: Anchor.center);
116+
117+
@override
118+
Future<void> onLoad() async {
119+
sprite = await Sprite.load('player.png');
120+
}
121+
}
122+
```
123+
124+
In this example, we have created a `Player` class that extends the `SpriteComponent` class. We have
125+
overridden the `onLoad` method to set the sprite of the component to a sprite that we load from an
126+
image file called `player.png`. The image has to be in the `assets/images` directory in your project
127+
(see the [Assets Directory Structure](flame/structure.md)) and you have to add it to the
128+
[assets section](https://docs.flutter.dev/ui/assets/assets-and-images) of your `pubspec.yaml` file.
129+
In this class we also set the size of the component to 200x200 and the [anchor](flame/components.md#anchor)
130+
to the center of the component by sending them to the `super` constructor. We also let the user of
131+
the `Player` class set the position of the component when creating it
132+
(`Player(position: Vector2(0, 0))`).
133+
134+
To handle input on a component you can add any of our [input mixins](flame/inputs/inputs.md) to the
135+
component. For example, if you want to handle tap input you can add the `TapCallbacks` mixin to the
136+
player component, and receive tap events within the bounds of the player component. Or if you want
137+
to handle tap input on the whole world you can add the `TapCallbacks` mixin to the extended `World`
138+
class.
139+
140+
The following example handles taps on the player component, and when the player component is
141+
tapped the size of the player will increase by 50 pixels in both width and height.
142+
143+
```dart
144+
import 'package:flame/components.dart';
145+
import 'package:flame/geometry.dart';
146+
import 'package:flame/extensions.dart';
147+
148+
class Player extends SpriteComponent with TapCallbacks {
149+
Player({super.position}) :
150+
super(size: Vector2.all(200), anchor: Anchor.center);
151+
152+
@override
153+
Future<void> onLoad() async {
154+
sprite = await Sprite.load('player.png');
155+
}
156+
157+
@override
158+
void onTapUp(TapUpInfo info) {
159+
size += Vector2.all(50);
160+
}
161+
}
162+
```
163+
164+
This is just a simple example of how to get started with Flame, there are many more features that you
165+
can use (and probably need) to create your game, but this should give you a good starting point.
166+
167+
You can also check out the [awesome flame repository](https://github.com/flame-engine/awesome-flame#user-content-articles--tutorials),
168+
it contains quite a lot of good tutorials and articles written by the community to get you started
169+
with Flame.
170+
171+
172+
## Outside of the scope of the engine
173+
174+
Games sometimes require complex feature sets depending on what the game is all about. Some of these
175+
feature sets are outside of the scope of the Flame Engine ecosystem, in this section you can find
176+
them, and also some recommendations of packages/services that can be used:
177+
178+
179+
### Multiplayer (netcode)
180+
181+
Flame doesn't bundle any network feature, which may be needed to write online multiplayer games.
182+
183+
If you are building a multiplayer game, here are some recommendations of packages/services:
184+
185+
- [Nakama](https://github.com/obrunsmann/flutter_nakama/): An open-source server designed
186+
to power modern games and apps.
187+
- [Firebase](https://firebase.google.com/): Provides dozens of services that can be used to write
188+
simpler multiplayer experiences.
189+
- [Supabase](https://supabase.com/): A cheaper alternative to Firebase, based on Postgres.
Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
# Bridge Packages
2+
3+
:::{package} flame_audio
4+
5+
Play multiple audio files simultaneously (bridge package for [AudioPlayers]).
6+
:::
7+
8+
:::{package} flame_bloc
9+
10+
A predictable state management library (bridge package for [Bloc]).
11+
:::
12+
13+
:::{package} flame_fire_atlas
14+
15+
Create texture atlases for games (bridge package for [FireAtlas]).
16+
:::
17+
18+
:::{package} flame_forge2d
19+
20+
A Box2D physics engine (bridge package for [Forge2D]).
21+
:::
22+
23+
:::{package} flame_isolate
24+
25+
Use isolates to offload heavy computations to another thread.
26+
:::
27+
28+
:::{package} flame_lottie
29+
30+
Use Lottie animations in Flame (bridge package for [Lottie]).
31+
:::
32+
33+
:::{package} flame_network_assets
34+
35+
Fetch assets over the network.
36+
:::
37+
38+
:::{package} flame_oxygen
39+
40+
Replace FCS with the Oxygen Entity Component System.
41+
:::
42+
43+
:::{package} flame_rive
44+
45+
Create interactive animations (bridge package for [Rive]).
46+
:::
47+
48+
:::{package} flame_riverpod
49+
50+
A reactive caching and data-binding framework (bridge package for [Riverpod]).
51+
:::
52+
53+
:::{package} flame_spine
54+
55+
Use Spine skeletal animations (bridge package for [Spine]).
56+
:::
57+
58+
:::{package} flame_splash_screen
59+
60+
Add the "Powered by Flame" splash screen.
61+
:::
62+
63+
:::{package} flame_svg
64+
65+
Draw SVG files in Flutter (bridge package for [flutter_svg]).
66+
:::
67+
68+
:::{package} flame_tiled
69+
70+
2D tilemap level editor (bridge package for [Tiled]).
71+
:::
72+
73+
[AudioPlayers]: https://github.com/bluefireteam/audioplayers
74+
[Bloc]: https://github.com/felangel/bloc
75+
[FireAtlas]: https://github.com/flame-engine/fire-atlas
76+
[Forge2D]: https://github.com/flame-engine/forge2d
77+
[Lottie]: https://pub.dev/packages/lottie
78+
[Rive]: https://rive.app/
79+
[Riverpod]: https://github.com/rrousselGit/riverpod
80+
[Spine]: https://pub.dev/packages/spine_flutter
81+
[Tiled]: https://www.mapeditor.org/
82+
[flutter_svg]: https://github.com/dnfield/flutter_svg
83+
84+
85+
```{toctree}
86+
:hidden:
87+
88+
flame_audio <flame_audio/flame_audio.md>
89+
flame_bloc <flame_bloc/flame_bloc.md>
90+
flame_fire_atlas <flame_fire_atlas/flame_fire_atlas.md>
91+
flame_forge2d <flame_forge2d/flame_forge2d.md>
92+
flame_isolate <flame_isolate/flame_isolate.md>
93+
flame_lottie <flame_lottie/flame_lottie.md>
94+
flame_network_assets <flame_network_assets/flame_network_assets.md>
95+
flame_oxygen <flame_oxygen/flame_oxygen.md>
96+
flame_rive <flame_rive/flame_rive.md>
97+
flame_riverpod <flame_riverpod/flame_riverpod.md>
98+
flame_splash_screen <flame_splash_screen/flame_splash_screen.md>
99+
flame_spine <flame_spine/flame_spine.md>
100+
flame_svg <flame_svg/flame_svg.md>
101+
flame_tiled <flame_tiled/flame_tiled.md>
102+
```

0 commit comments

Comments
 (0)