|
| 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. |
0 commit comments