diff --git a/doc/flame/inputs/other_inputs.md b/doc/flame/inputs/other_inputs.md
index 10636cf6331..5e86acf1ea7 100644
--- a/doc/flame/inputs/other_inputs.md
+++ b/doc/flame/inputs/other_inputs.md
@@ -14,7 +14,7 @@ Flame provides a component capable of creating a virtual joystick for taking inp
To use this feature, you need to create a `JoystickComponent`, configure it the way you want, and
add it to your game.
-Check this example to get a better understanding:
+Check out the following example to get a better understanding:
```dart
class MyGame extends FlameGame {
@@ -74,12 +74,13 @@ class Player extends SpriteComponent with HasGameRef {
}
```
-So in this example, we create the classes `MyGame` and `Player`. `MyGame` creates a joystick which is
-passed to the `Player` when it is created. In the `Player` class we act upon the current state of
-the joystick.
+In this example, we created the classes `MyGame` and `Player`.
+`MyGame` creates a joystick which is passed to the `Player` when the latter is created.
+In the `Player` class we act upon the current state of the joystick.
The joystick has a few fields that change depending on what state it is in.
-These are the fields that should be used to know the state of the joystick:
+
+Following fields should be used to know the state of the joystick:
- `intensity`: The percentage [0.0, 1.0] that the knob is dragged from the epicenter to the edge of
the joystick (or `knobRadius` if that is set).
@@ -90,13 +91,16 @@ These are the fields that should be used to know the state of the joystick:
If you want to create buttons to go with your joystick, check out
[`HudButtonComponent`](#hudbuttoncomponent).
-A full examples of how to use it can be found
-[here](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/input/joystick_example.dart).
-And it can be seen running [here](https://examples.flame-engine.org/#/Input_Joystick).
+For the complete code on implementing the joystick, check out the
+[Joystick Example](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/input/joystick_example.dart).
+You can also view the
+[JoystickComponent in action](https://examples.flame-engine.org/#/Input_Joystick)
+to see a live example of the joystick input function integrated into a game.
-There is also a more advanced example
-[here](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/input/joystick_advanced_example.dart)
-which is running [here](https://examples.flame-engine.org/#/Input_Joystick_Advanced).
+For an additional challenge, explore the
+[Advanced Joystick Example](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/input/joystick_advanced_example.dart).
+See what else the advanced features can do in the
+[live demo](https://examples.flame-engine.org/#/Input_Joystick_Advanced).
## HudButtonComponent
@@ -134,8 +138,8 @@ else which isn't a pure sprite.
## Gamepad
-Flame has a separate plugin to support external game controllers (gamepads), check
-[here](https://github.com/flame-engine/flame_gamepad) for more information.
+Flame has a dedicated plugin to support external game controllers (gamepads).
+Find more information in the [Gamepads repository](https://github.com/flame-engine/gamepad).
## AdvancedButtonComponent
diff --git a/doc/flame/other/debug.md b/doc/flame/other/debug.md
index fbd02f3a8ae..fd7abbea1f5 100644
--- a/doc/flame/other/debug.md
+++ b/doc/flame/other/debug.md
@@ -9,8 +9,7 @@ When `debugMode` is enabled, each `PositionComponent` will be rendered with thei
have their positions written on the screen. This way, you can visually verify the components
boundaries and positions.
-To see a working example of the debugging features of the `FlameGame`, check this
-[example](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/components/debug_example.dart).
+Check out this [working example of the debugging features of the `FlameGame`](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/components/debug_example.dart).
## Devtools extension
diff --git a/doc/flame/overlays.md b/doc/flame/overlays.md
index 897a9ff98eb..7a96d4f29a6 100644
--- a/doc/flame/overlays.md
+++ b/doc/flame/overlays.md
@@ -42,5 +42,4 @@ Widget build(BuildContext context) {
The order of rendering for an overlay is determined by the order of the keys in the
`overlayBuilderMap`.
-An example of this feature can be found
-[here](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/system/overlays_example.dart).
+See an [example of the Overlays feature](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/system/overlays_example.dart).
diff --git a/doc/flame/rendering/images.md b/doc/flame/rendering/images.md
index ed7cf5a8946..3a4c3e8db60 100644
--- a/doc/flame/rendering/images.md
+++ b/doc/flame/rendering/images.md
@@ -192,9 +192,8 @@ parameter `overridePaint` that parameter will override the current `Sprite` pain
render call.
`Sprite`s can also be used as widgets, to do so just use `SpriteWidget` class.
-
-A complete example using sprite as widgets can be found
-[here](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/widgets/sprite_widget_example.dart).
+Here is a complete
+[example using sprite as widgets](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/widgets/sprite_widget_example.dart).
## SpriteBatch
@@ -209,8 +208,8 @@ You render it with a `Canvas` and an optional `Paint`, `BlendMode` and `CullRect
A `SpriteBatchComponent` is also available for your convenience.
-See the examples
-[here](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/sprites/sprite_batch_example.dart).
+See how to use it in the
+[SpriteBatch examples](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/sprites/sprite_batch_example.dart)
## ImageComposition
@@ -317,16 +316,16 @@ and the former ticks the internal clock to update the frames.
Animations are normally used inside `SpriteAnimationComponent`s, but custom components with several
Animations can be created as well.
-A complete example of using animations as widgets can be found
-[here](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/widgets/sprite_animation_widget_example.dart).
+To learn more, check out the full example code of
+[using animations as widgets](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/widgets/sprite_animation_widget_example.dart).
## SpriteSheet
Sprite sheets are big images with several frames of the same sprite on it and is a very good way to
-organize and keep your animations stored. Flame provides a very simple utility class to deal with
-SpriteSheets, with it you can load your sprite sheet image and extract animations from it. Below is
-a very simple example of how to use it:
+organize and store your animations. Flame provides a very simple utility class to deal with
+SpriteSheets, using which you can load your sprite sheet image and extract animations from it as
+well. Following is a simple example of how to use it:
```dart
import 'package:flame/sprite.dart';
@@ -363,5 +362,5 @@ spriteSheet.getSpriteById(2); // by id
spriteSheet.getSprite(0, 0); // row, column
```
-You can see a full example of the `SpriteSheet` class
-[here](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/sprites/sprite_sheet_example.dart).
+See a full example of the [`SpriteSheet` class](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/sprites/sprite_sheet_example.dart)
+for more details on how to work with it.
diff --git a/doc/flame/rendering/layers.md b/doc/flame/rendering/layers.md
index cd28ad42eba..4c32552c88d 100644
--- a/doc/flame/rendering/layers.md
+++ b/doc/flame/rendering/layers.md
@@ -111,7 +111,7 @@ entire layer. At the moment, out of the box, only the `ShadowProcessor` is avail
renders a back drop shadow on your layer.
To add processors to your layer, just add them to the layer `preProcessors` or `postProcessors`
-list. For example:
+list, like so:
```dart
// Works the same for both DynamicLayer and PreRenderedLayer
@@ -130,8 +130,7 @@ class BackgroundLayer extends PreRenderedLayer {
Custom processors can be created by extending the `LayerProcessor` class.
-You can check a working example of layers
-[here](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/rendering/layers_example.dart).
+See [a working example of layers](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/rendering/layers_example.dart).
## Snapshots
@@ -158,8 +157,8 @@ class MyGame extends FlameGame {
Setting `renderSnapshot` to `true` (the default) on a snapshot-enabled component behaves similarly
to a `PreRenderedLayer`. The component is rendered only once, cached in memory and then just
-replicated on the game canvas afterwards. They are useful for caching content that doesn't change
-during the game, like a background for example.
+replicated on the game canvas afterwards. This is useful for caching content that doesn't change
+during the game, like a background.
```dart
class SnapshotComponent extends PositionComponent with Snapshot {}
@@ -243,7 +242,7 @@ class MyGame extends FlameGame {
### Snapshots that are cropped or off-center
-Sometimes your snapshot `Image` may appear cropped, or not in the position that is expected.
+Sometimes your snapshot `Image` may appear cropped, or not in the position you expected.
This is because the contents of a `Picture` can be positioned anywhere with respect to the origin,
but when it is converted to an `Image`, the image always starts from `0,0`. This means that
@@ -254,7 +253,7 @@ The best way to deal with this is to ensure that your `Snapshot` component is al
contain what you expect it to.
However, this is not always possible. To move (or rotate, or scale etc) the snapshot before
-converting it to an image, pass a transformation matrix to `snapshotToImage`.
+converting it to an image, pass a transformation matrix to `snapshotToImage` like so:
```dart
// Call something like this to take an image snapshot at any time.
diff --git a/doc/flame/rendering/palette.md b/doc/flame/rendering/palette.md
index cb36144d8e3..d1e87eca028 100644
--- a/doc/flame/rendering/palette.md
+++ b/doc/flame/rendering/palette.md
@@ -40,12 +40,12 @@ You can create such an object like this:
Paint green = Paint()..color = const Color(0xFF00FF00);
```
-To help you with this and to also keep your game's color palette consistent, Flame adds the `Palette`
-class. You can use it to easily access both `Color`s and `Paint`s where needed and also to define
-the colors your game use as constants, so you don't get those mixed up.
+To help you with this and also keep your game's color palette consistent, Flame adds the `Palette`
+class. You can use it to easily access both `Color`s and `Paint`s where needed and also define
+the colors your game use as constants, so that you don't get those mixed up.
The `BasicPalette` class is an example of what a palette can look like, and adds black and white as
-colors. So to use black or white you can access those directly from the `BasicPalette`; for example,
+colors. So you can access black or white directly from the `BasicPalette`; for example,
using `color`:
```dart
@@ -60,8 +60,8 @@ canvas.drawRect(rect, BasicPalette.black.paint);
However, the idea is that you can create your own palette, following the `BasicPalette` example, and
add the color palette/scheme of your game. Then you will be able to statically access any color in
-your components and classes. Below is an example of a `Palette` implementation, from the example
-game [BGUG](https://github.com/bluefireteam/bgug/blob/master/lib/palette.dart):
+your components and classes. Below is an example of a `Palette` implementation, from the [example
+game BGUG](https://github.com/bluefireteam/bgug/blob/master/lib/palette.dart):
```dart
import 'dart:ui';
diff --git a/doc/flame/rendering/particles.md b/doc/flame/rendering/particles.md
index 056ccb5e048..448d66c5fdf 100644
--- a/doc/flame/rendering/particles.md
+++ b/doc/flame/rendering/particles.md
@@ -3,7 +3,7 @@
Flame offers a basic, yet robust and extendable particle system. The core concept of this system is
the `Particle` class, which is very similar in its behavior to the `ParticleSystemComponent`.
-The most basic usage of a `Particle` with `FlameGame` would look as following:
+The most basic usage of a `Particle` with `FlameGame` would look as in the following:
```dart
import 'package:flame/components.dart';
@@ -103,8 +103,8 @@ game.add(
);
```
-You can find more examples of how to use different built-in particles in various combinations
-[here](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/rendering/particles_example.dart).
+See more [examples of how to use built-in particles in various
+combinations](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/rendering/particles_example.dart).
## Lifecycle
@@ -160,11 +160,10 @@ Flame ships with a few built-in `Particle` behaviors:
- The `ComponentParticle` renders Flame `Component` within a `Particle` effect
- The `FlareParticle` renders Flare animation within a `Particle` effect
-More examples of how to use these behaviors together are available
-[here](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/rendering/particles_example.dart).
-All the implementations are available in the
-[particles](https://github.com/flame-engine/flame/tree/main/packages/flame/lib/src/particles) folder
-on the Flame repository.
+See more [examples of how to use built-in Particle behaviors
+together](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/rendering/particles_example.dart).
+All the implementations are available in the [particles folder on the
+Flame repository.](https://github.com/flame-engine/flame/tree/main/packages/flame/lib/src/particles)
## TranslatedParticle
diff --git a/doc/flame/rendering/text_rendering.md b/doc/flame/rendering/text_rendering.md
index ebfd81b1fc6..2dd4d0eb117 100644
--- a/doc/flame/rendering/text_rendering.md
+++ b/doc/flame/rendering/text_rendering.md
@@ -16,8 +16,7 @@ typing effect. You can use the `newLineNotifier` to be notified when a new line
scrolling capability when the text exceeds the boundaries of the enclosing box.
-All components are showcased in
-[this example](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/rendering/text_example.dart).
+All components are showcased in [this example](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/rendering/text_example.dart).
### TextComponent
@@ -193,8 +192,8 @@ well):
);
```
-For a more elaborate example of rich-text, formatted text blocks rendering, check [this
-example](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/rendering/rich_text_example.dart).
+See a more elaborate [example of rich-text, formatted
+text blocks rendering](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/rendering/rich_text_example.dart).
For more details about the underlying mechanics of the text rendering pipeline, see "Text Elements,
Text Nodes, and Text Styles" below.
@@ -354,16 +353,16 @@ import 'package:flutter/painting.dart';
import 'dart:ui' hide TextStyle;
```
-Some common properties of `TextStyle` are the following (here is the [full
-list](https://api.flutter.dev/flutter/painting/TextStyle-class.html)):
+Following are some common properties of `TextStyle`(see the [full
+list of `TextStyle` properties](https://api.flutter.dev/flutter/painting/TextStyle-class.html)):
- `fontFamily`: a commonly available font, like Arial (default), or a custom font added in your
- pubspec (see [here](https://docs.flutter.dev/cookbook/design/fonts) how to do it).
+ pubspec (see [how to add a custom font](https://docs.flutter.dev/cookbook/design/fonts)).
- `fontSize`: font size, in pts (default `24.0`).
- `height`: height of text line, as a multiple of font size (default `null`).
- `color`: the color, as a `ui.Color` (default white).
-For more information regarding colors and how to create then, see the [Colors and the
+For more information regarding colors and how to create them, see the [Colors and
Palette](palette.md) guide.
@@ -441,8 +440,7 @@ However, the other types of Text Elements, Text Nodes, and Text Styles must be u
to create an entire document (multiple blocks or paragraphs), enriched with formatted text. In order
to render an arbitrary TextElement, you can alternatively use the `TextElementComponent` (see above).
-An example of such usages can be seen in [this
-example](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/rendering/rich_text_example.dart).
+See [examples of such usage](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/rendering/rich_text_example.dart).
### Text Nodes and the Document Root
}}){kind=logo}
+