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 Apr 25, 2024
1 parent 706ce9a commit 87c5cdf
Show file tree
Hide file tree
Showing 16 changed files with 106 additions and 97 deletions.
2 changes: 2 additions & 0 deletions docs/main/_sources/tutorials/space_shooter/step_1.md.txt
Original file line number Diff line number Diff line change
Expand Up @@ -87,3 +87,5 @@ game class, insert it into the Flutter widget tree, and render a simple componen
:page: step1
:show: popup code
```

[Next step: Controlling the player and adding some graphics](./step_2.md)
2 changes: 2 additions & 0 deletions docs/main/_sources/tutorials/space_shooter/step_2.md.txt
Original file line number Diff line number Diff line change
Expand Up @@ -194,3 +194,5 @@ structure for developing our game. And that closes this step!
:page: step2
:show: popup code
```

[Next step: Adding animations and depth](./step_3.md)
6 changes: 4 additions & 2 deletions docs/main/_sources/tutorials/space_shooter/step_3.md.txt
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ But our game so far is too boring, the starship is just a static sprite and the
just a black screen.

In this step we will look at how to improve that, we will replace the static graphics of the player
to an animation and will create a cool sense of depth and movement by adding a parallax to the
with an animation and create a cool sense of depth and movement by adding a parallax to the
background of the game.

So lets start by adding the animation to the player ship! For that, we will something that we
Expand Down Expand Up @@ -62,7 +62,7 @@ So lets break down the changes:

The `SpriteAnimationData` class might look complicated at first glance, but it is actually quite
simple, note how we used the `sequenced` constructor, which is a helper to load animation images
where the frames are already layed down in the sequence that they will play, then:
where the frames are already laid down in the sequence that they will play, then:

- `amount` defines how many frames the animation has, in this case `4`
- `stepTime` is the time in seconds that each frame will be rendered, before it gets replaced
Expand Down Expand Up @@ -135,3 +135,5 @@ more convincing feeling to the player that the spaceship is really crossing the
:page: step3
:show: popup code
```

[Next step: Adding bullets](./step_4.md)
31 changes: 16 additions & 15 deletions docs/main/_sources/tutorials/space_shooter/step_4.md.txt
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,10 @@
For this next step we will add a very important feature to any space shooter game, shooting!

Here is how we will implement it: since we already control our space ship by dragging on the screen
with the mouse/fingers, we will make the ship auto shoot when the player stars the dragging and
stops shooting when the gesture/input has ended.
with the mouse/fingers, we will make the ship auto shoot when the player starts dragging and
stop shooting when the gesture/input has ended.

So let's start, to begin let's first create a `Bullet` component that will represent the
shots in the game.
First, let's create a `Bullet` component that will represent the shots in the game.

```dart
class Bullet extends SpriteAnimationComponent
Expand Down Expand Up @@ -78,8 +77,8 @@ in the y axis means getting closer to `0` since the top left corner of the scree
completely off the screen and it can be removed.

Right, we now have a `Bullet` class ready, so lets start to implement the action of shooting.
First thing, let's create two empty methods in the `Player` class, `startShooting` and
`stopShooting`.
First thing, let's create two empty methods in the `Player` class, `startShooting()` and
`stopShooting()`.

```dart
class Player extends SpriteAnimationComponent
Expand All @@ -97,8 +96,8 @@ class Player extends SpriteAnimationComponent
}
```

And let's hook into those methods from the game class, we will do that by using the `onPanStart`
and `onPanEnd` methods from the `PanDetector` mixin that we already have been using for the ship
And let's hook into those methods from the game class by using the `onPanStart()`
and `onPanEnd()` methods from the `PanDetector` mixin that we already have been using for the ship
movement:

```dart
Expand Down Expand Up @@ -183,17 +182,17 @@ to be an variable accessible to the whole component since we will be accessing i
`startShooting` and `stopShooting` methods.
- We initialize our `_bulletSpawner` in the `onLoad` method. In the first argument, `period`, we set
how much time in seconds it will take between calls, and we choose `.2` seconds for now.
- We set `selfPositioning: true` so the spawn component don't try to position the created
component itself since we want to handle that ourselves to make the bullets spawn out of the ship.
- The `factory` attribute receives a function that will be called every time the `period` is reached.
and must return the create component.
- Then we set that it should not auto start by default.
- We set `selfPositioning: true` so the spawn component doesn't try to position the created component
since we want to handle that ourselves to make the bullets spawn out of the ship.
- The `factory` attribute receives a function that will be called every time the `period` is
reached and return the created component.
- We set `autoStart: false` so it does not start by default.
- Finally we add the `_bulletSpawner` to our component, so it can be processed in the game loop.
- Note how the `_bulletSpawner` is added to the game instead of the player, since the bullets
are part of the whole game and not the player itself.

With the `_bulletSpawner` all setup, the only missing piece now is to start the
`_bulletSpawner.timer` at `startShooting` and stop it in the `stopShooting`!
With the `_bulletSpawner` all set up, the only missing piece now is starting the
`_bulletSpawner.timer` in `startShooting()` and stopping it in the `stopShooting()`!

And that closes this step, putting us real close to a real game!

Expand All @@ -202,3 +201,5 @@ And that closes this step, putting us real close to a real game!
:page: step4
:show: popup code
```

[Next step: Adding Enemies](./step_5.md)
16 changes: 9 additions & 7 deletions docs/main/_sources/tutorials/space_shooter/step_5.md.txt
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
Now that the starship is able to shoot, we need something for the player to shoot at! So for
this step we will work on adding enemies to the game.

So first things first, let's create an `Enemy` class that will represent the enemies in game:
First, let's create an `Enemy` class that will represent the enemies in game:

```dart
class Enemy extends SpriteAnimationComponent
Expand Down Expand Up @@ -50,13 +50,13 @@ Note that for now, the `Enemy` class is super similar to the `Bullet` one, the o
their sizes, animation information and that bullets travel from bottom to top, while enemies travel from
top to bottom, so nothing new here.

Next we need to make the enemies spawn in the game, the logic that we will do here will be simple,
we will simply make enemies spawn from the top of the screen at a random position on the `x` axis.
Next we need to make the enemies spawn in the game, the logic here will be simple:
we will make enemies spawn from the top of the screen at a random position on the `x` axis.

Once again, we could manually make all the time based event in the game's `update` method, maintain
a random instance to get the enemy x position and so on and so forth, but Flame provides us a
way to avoid having to write all that by ourselves, we can use the `SpawnComponent`! So in the
`SpaceShooterGame.onLoad` method let's add the following code:
Once again, we could manually add all the time based events in the game's `update()` method, maintain
a random instance to get the enemy x position and so on and so forth, but Flame provides us with a
way to avoid having to write all that by ourselves: we can use the `SpawnComponent`! So in the
`SpaceShooterGame.onLoad()` method let's add the following code:

```dart
add(
Expand Down Expand Up @@ -87,3 +87,5 @@ And this concludes this short step!
:page: step5
:show: popup code
```

[Next step: Collision Detection](./step_6.md)
38 changes: 18 additions & 20 deletions docs/main/_sources/tutorials/space_shooter/step_6.md.txt
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ Right, we are really close to a playable game, we have enemies and we have the a
at them! We now need to do something when a bullet hits an enemy.

Flame provides a collision detection system out of the box, which we will use to implement our
logic that will handle when a bullet and an enemy comes into contact. The result will be that
both are removed!
logic when a bullet and an enemy come into contact. The result will be that both are removed!

First we need to let our `FlameGame` know that we want collisions between components to
be checked. In order to do so, simply add the `HasCollisionDetection` mixin to the declaration
Expand All @@ -18,19 +17,18 @@ class SpaceShooterGame extends FlameGame
}
```

With that, Flame now will start to check if components has collided with each other. Next we need to
With that, Flame now will start to check if components have collided with each other. Next we need to
identify which components can cause collisions.

In our case those are the `Bullet` and `Enemy` components and we need to add hitboxes to them.

A hitbox is nothing more than a defined part of the component's area that can hit
other objects. Flame offers a collection of classes to define a hitbox, the simplest of them is
the `RectangleHitbox`, which like the name implies will make a rectangular area as the component's
the `RectangleHitbox`, which like the name implies, will set a rectangular area as the component's
hitbox.

Hitboxes are also components, so in order to add them to our components we can simply add
them to the components that we want to have hitboxes, so let's do it, let's start by adding the
following line to the `Enemy` class:
Hitboxes are also components, so we can simply add them to the components that we want to have hitboxes.
Let's start by adding the following line to the `Enemy` class:

```dart
add(RectangleHitbox());
Expand All @@ -51,28 +49,28 @@ performance!

There are three types of collisions in Flame:

- `active` collides with other `Hitbox`es of type active or passive
- `passive` collides with other `Hitbox`es of type active
- `inactive` will not collide with any other `Hitbox`es
- `active` collides with other hitboxes of type active or passive
- `passive` collides with other hitboxes of type active
- `inactive` will not collide with any other hitbox

Usually it is smart to mark hitboxes from components that will have a higher number of instances
Usually it is smart to mark `hitboxes` from components that will have a higher number of instances
as passive, so they will be taken into account for collision, but they themselves will not check
their own collisions, drastically reducing the number of checking, giving a better performance
to the game!

And since in this game we anticipate that there will be more bullets than enemies, we choose the
And since in this game we anticipate that there will be more bullets than enemies, we set the
bullets to have a passive collision type!

From this point on, Flame will take care of checking the collision between those two components,
we now need to do something when they come in contact.
From this point on, Flame will take care of checking the collision between those two components and
we now need to do something when this occurs.

We can start that by receiving the collision events in one of the classes. Since `Bullet`s have a
We start by receiving the collision events in one of the classes. Since `Bullet`s have a
passive collision type, we will also add the collision checking logic to the `Enemy` class.

To listen to collision events we need to add the `CollisionCallbacks` mixin to the component.
By doing so we will be able to override some methods like `onCollisionStart` and `onCollisionEnd`.
To listen for collision events we need to add the `CollisionCallbacks` mixin to the component.
By doing so we will be able to override some methods like `onCollisionStart()` and `onCollisionEnd()`.

So let's do that and make a few changes to the `Enemy` class:
So let's make a few changes to the `Enemy` class:

```dart
class Enemy extends SpriteAnimationComponent
Expand Down Expand Up @@ -101,7 +99,7 @@ we remove both the current `Enemy` instance and the `Bullet`.

If you run the game now you will finally be able to defeat the enemies crawling down the screen!

To add some final touches, let's add some explosion animations and add more action to the game!
To add some final touches, let's add some explosion animations to introduce more action to the game!

First, let's create the explosion class:

Expand Down Expand Up @@ -139,7 +137,7 @@ that we are passing `loop: false` in the `SpriteAnimationData.sequenced` constru
setting `removeOnFinish: true;`. We do that so that when the animation is finished, it will
automatically be removed from the game!

And finally, we make a small change in the `onCollisionStart` method from the `Enemy` class
And finally, we make a small change in the `onCollisionStart()` method in the `Enemy` class
in order to add the explosion to the game:

```dart
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30072,7 +30072,7 @@ c4(){var s=this.az$
return s==null?this.h8():s}}
A.k2.prototype={
aE(a){var s=null
return A.Se(B.b5,A.Ul(A.RM(A.Ur(A.a([B.DV,B.pu,A.Wy(A.Vd(B.DW,new A.Hz(this),A.Ve(s,s,B.h,s,s,s,s,s,s,s,s,s,s,s,s,s,s,s,s)),75,200),B.zS,B.DS],t.nA),B.lg),B.en,250,B.f0,300)),B.K,B.a4,0,s,s,s,s,B.c8)}}
return A.Se(B.b5,A.Ul(A.RM(A.Ur(A.a([B.DV,B.pu,A.Wy(A.Vd(B.DW,new A.Hz(this),A.Ve(s,s,B.h,s,s,s,s,s,s,s,s,s,s,s,s,s,s,s,s)),75,200),B.zS,B.DS],t.nA),B.lg),B.en,300,B.f0,300)),B.K,B.a4,0,s,s,s,s,B.c8)}}
A.Hz.prototype={
$0(){this.a.c.gkT().u(0,"MainMenu")},
$S:0}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12602,7 +12602,7 @@ s=new A.cD(new A.mw(s,r,new A.zX(o),p,t.bt),n,m,l,k,$,e,e,e,$,!1,!1,$,B.P,j,!1,i
s.fo(e,e,e,t.B)
A.kf(A.ld(s,t.vY))
s=e
break $label0$0}s=A.kf(A.Pl(new A.tz('Error: unknown page name "'+b+'"',e),B.i))
break $label0$0}s=A.kf(A.Pl(new A.tz('Error: unknown page. Pass "step{1,6}" as a GET param; \ne.g: '+A.j(window.location)+"?step1",e),B.i))
break $label0$0}return s}},B={}
var w=[A,J,B]
var $={}
Expand Down
2 changes: 1 addition & 1 deletion docs/main/searchindex.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/main/tutorials/platformer/step_7.html
Original file line number Diff line number Diff line change
Expand Up @@ -1477,7 +1477,7 @@ <h2>Congratulations<a class="headerlink" href="#congratulations" title="Link to
<span class="linenos">18</span><span class="w"> </span><span class="nl">child:</span><span class="w"> </span><span class="n">Center</span><span class="p">(</span>
<span class="linenos">19</span><span class="w"> </span><span class="nl">child:</span><span class="w"> </span><span class="n">Container</span><span class="p">(</span>
<span class="linenos">20</span><span class="w"> </span><span class="nl">padding:</span><span class="w"> </span><span class="k">const</span><span class="w"> </span><span class="n">EdgeInsets</span><span class="p">.</span><span class="n">all</span><span class="p">(</span><span class="m">10.0</span><span class="p">),</span>
<span class="linenos">21</span><span class="w"> </span><span class="nl">height:</span><span class="w"> </span><span class="m">250</span><span class="p">,</span>
<span class="linenos">21</span><span class="w"> </span><span class="nl">height:</span><span class="w"> </span><span class="m">300</span><span class="p">,</span>
<span class="linenos">22</span><span class="w"> </span><span class="nl">width:</span><span class="w"> </span><span class="m">300</span><span class="p">,</span>
<span class="linenos">23</span><span class="w"> </span><span class="nl">decoration:</span><span class="w"> </span><span class="k">const</span><span class="w"> </span><span class="n">BoxDecoration</span><span class="p">(</span>
<span class="linenos">24</span><span class="w"> </span><span class="nl">color:</span><span class="w"> </span><span class="n">blackTextColor</span><span class="p">,</span>
Expand Down
3 changes: 2 additions & 1 deletion docs/main/tutorials/space_shooter/step_1.html
Original file line number Diff line number Diff line change
Expand Up @@ -430,7 +430,8 @@ <h1>Getting Started<a class="headerlink" href="#getting-started" title="Link to
</pre></div>
</div>
</div>
<button class="flutter-app-button code" onclick="open_code_listings(&quot;tutorials-space_shooter-app-source-step1&quot;)">Code</button></section>
<button class="flutter-app-button code" onclick="open_code_listings(&quot;tutorials-space_shooter-app-source-step1&quot;)">Code</button><p><a class="reference internal" href="step_2.html"><span class="std std-doc">Next step: Controlling the player and adding some graphics</span></a></p>
</section>


</div>
Expand Down
3 changes: 2 additions & 1 deletion docs/main/tutorials/space_shooter/step_2.html
Original file line number Diff line number Diff line change
Expand Up @@ -545,7 +545,8 @@ <h1>Controlling the player and adding some graphics<a class="headerlink" href="#
</pre></div>
</div>
</div>
<button class="flutter-app-button code" onclick="open_code_listings(&quot;tutorials-space_shooter-app-source-step2&quot;)">Code</button></section>
<button class="flutter-app-button code" onclick="open_code_listings(&quot;tutorials-space_shooter-app-source-step2&quot;)">Code</button><p><a class="reference internal" href="step_3.html"><span class="std std-doc">Next step: Adding animations and depth</span></a></p>
</section>


</div>
Expand Down
7 changes: 4 additions & 3 deletions docs/main/tutorials/space_shooter/step_3.html
Original file line number Diff line number Diff line change
Expand Up @@ -329,7 +329,7 @@ <h1>Adding animations and depth<a class="headerlink" href="#adding-animations-an
<p>But our game so far is too boring, the starship is just a static sprite and the background is
just a black screen.</p>
<p>In this step we will look at how to improve that, we will replace the static graphics of the player
to an animation and will create a cool sense of depth and movement by adding a parallax to the
with an animation and create a cool sense of depth and movement by adding a parallax to the
background of the game.</p>
<p>So lets start by adding the animation to the player ship! For that, we will something that we
call Sprite Animations, which is an animation that is composed by a collection of sprites, each
Expand Down Expand Up @@ -378,7 +378,7 @@ <h1>Adding animations and depth<a class="headerlink" href="#adding-animations-an
</ul>
<p>The <code class="docutils literal notranslate"><span class="pre">SpriteAnimationData</span></code> class might look complicated at first glance, but it is actually quite
simple, note how we used the <code class="docutils literal notranslate"><span class="pre">sequenced</span></code> constructor, which is a helper to load animation images
where the frames are already layed down in the sequence that they will play, then:</p>
where the frames are already laid down in the sequence that they will play, then:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">amount</span></code> defines how many frames the animation has, in this case <code class="docutils literal notranslate"><span class="pre">4</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">stepTime</span></code> is the time in seconds that each frame will be rendered, before it gets replaced
Expand Down Expand Up @@ -511,7 +511,8 @@ <h1>Adding animations and depth<a class="headerlink" href="#adding-animations-an
</pre></div>
</div>
</div>
<button class="flutter-app-button code" onclick="open_code_listings(&quot;tutorials-space_shooter-app-source-step3&quot;)">Code</button></section>
<button class="flutter-app-button code" onclick="open_code_listings(&quot;tutorials-space_shooter-app-source-step3&quot;)">Code</button><p><a class="reference internal" href="step_4.html"><span class="std std-doc">Next step: Adding bullets</span></a></p>
</section>


</div>
Expand Down
Loading

0 comments on commit 87c5cdf

Please sign in to comment.