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 Aug 20, 2023
1 parent 6ce4e65 commit 5b4b1c3
Show file tree
Hide file tree
Showing 9 changed files with 24 additions and 275 deletions.
59 changes: 0 additions & 59 deletions docs/main/_sources/flame/components.md.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -757,65 +757,6 @@ Future<void> onLoad() async {
```


## FlareActorComponent

**Note**: The previous implementation of a Flare integration API using `FlareAnimation` and
`FlareComponent` has been deprecated.

To use Flare within Flame, use the [`flame_flare`](https://github.com/flame-engine/flame_flare)
package.

This is the interface for using a [flare animation](https://pub.dev/packages/flare_flutter) within
flame. `FlareActorComponent` has almost the same API as of flare's `FlareActor` widget. It receives
the animation filename (that is loaded by default with `Flame.bundle`), it can also receive a
FlareController that can play multiple animations and control nodes.

```dart
import 'package:flame_flare/flame_flare.dart';

class YourFlareController extends FlareControls {

late ActorNode rightHandNode;

void initialize(FlutterActorArtboard artboard) {
super.initialize(artboard);

// get flare node
rightHand = artboard.getNode('right_hand');
}
}

final fileName = 'assets/george_washington.flr';
final size = Vector2(1776, 1804);
final controller = YourFlareController();

FlareActorComponent flareAnimation = FlareActorComponent(
fileName,
controller: controller,
width: 306,
height: 228,
);

flareAnimation.x = 50;
flareAnimation.y = 240;
add(flareAnimation);

// to play an animation
controller.play('rise_up');

// you can add another animation to play at the same time
controller.play('close_door_way_out');

// also, you can get a flare node and modify it
controller.rightHandNode.rotation = math.pi;
```

You can also change the current playing animation by using the `updateAnimation` method.

For a working example, check the example in the
[flame_flare repository](https://github.com/flame-engine/flame/tree/main/packages/flame_flare/example).


## ParallaxComponent

This `Component` can be used to render backgrounds with a depth feeling by drawing several
Expand Down
52 changes: 0 additions & 52 deletions docs/main/_sources/flame/rendering/images.md.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -321,58 +321,6 @@ 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).


## FlareAnimation

Do note that Flare is discontinued and [Rive](https://github.com/flame-engine/flame/tree/main/packages/flame_rive)
is preferred.

Flame provides a simple wrapper of [Flare](https://flare.rive.app/) animations so you can use
them in Flame games.

Check the following snippet on how to use this wrapper:

```dart
class MyGame extends Game {
FlareAnimation flareAnimation;
bool loaded = false;

MyGame() {
_start();
}

void _start() async {
flareAnimation = await FlareAnimation.load("assets/FLARE_FILE.flr");
flareAnimation.updateAnimation("ANIMATION_NAME");

flareAnimation.width = 306;
flareAnimation.height = 228;

loaded = true;
}

@override
void render(Canvas canvas) {
if (loaded) {
flareAnimation.render(canvas, x: 50, y: 50);
}
}

@override
void update(double dt) {
if (loaded) {
flareAnimation.update(dt);
}
}
}
```

FlareAnimations are normally used inside `FlareComponent`s, that way `FlameGame` will handle calling
`render` and `update` automatically.

You can see a full example of how to use Flare together with Flame in the example
[here](https://github.com/flame-engine/flame/tree/main/packages/flame_flare/example).


## SpriteSheet

Sprite sheets are big images with several frames of the same sprite on it and is a very good way to
Expand Down
26 changes: 0 additions & 26 deletions docs/main/_sources/flame/rendering/particles.md.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -356,32 +356,6 @@ class RectComponent extends Component {
```


## FlareParticle

To use Flare within Flame, use the
[`flame_flare`](https://github.com/flame-engine/flame/tree/main/packages/flame_flare) package.

It will provide a class called `FlareParticle` that is a container for `FlareActorAnimation`, it
propagates the `update` and `render` methods to its child.

```dart
import 'package:flame_flare/flame_flare.dart';

// Within your game or component's `onLoad` method
const flareSize = 32.0;
final flareAnimation = FlareActorAnimation('assets/sparkle.flr');
flareAnimation.width = flareSize;
flareAnimation.height = flareSize;

// Somewhere in game
game.add(
ParticleSystemComponent(
particle: FlareParticle(flare: flareAnimation),
),
);
```


## ComputedParticle

A `Particle` which could help you when:
Expand Down
22 changes: 14 additions & 8 deletions docs/main/_static/apps/examples/main.dart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87923,14 +87923,20 @@ n.push(p)
r+=p.gqn().c}}if(n.length===0)return null
else return new A.a1z(n,A.bxe(n))}}
A.a1L.prototype={
nB(a,b){var s=this.d
if(s===1){s=a.e
s.toString}else if(s===2){s=a.f
s.toString}else if(s===3){s=a.r
s.toString}else if(s===4){s=a.w
s.toString}else if(s===5){s=a.x
s.toString}else{s=a.y
s.toString}this.a=s
nB(a,b){var s,r=this.d
$label0$0:{if(1===r){s=a.e
s.toString
break $label0$0}if(2===r){s=a.f
s.toString
break $label0$0}if(3===r){s=a.r
s.toString
break $label0$0}if(4===r){s=a.w
s.toString
break $label0$0}if(5===r){s=a.x
s.toString
break $label0$0}s=a.y
s.toString
break $label0$0}this.a=s
s=A.kY(b,s.d,t.zU)
s.toString
this.Yv(a,s)}}
Expand Down
54 changes: 0 additions & 54 deletions docs/main/flame/components.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1151,59 +1151,6 @@ <h2>SvgComponent<a class="headerlink" href="#svgcomponent" title="Permalink to t
</pre></div>
</div>
</section>
<section id="flareactorcomponent">
<h2>FlareActorComponent<a class="headerlink" href="#flareactorcomponent" title="Permalink to this heading"></a></h2>
<p><strong>Note</strong>: The previous implementation of a Flare integration API using <code class="docutils literal notranslate"><span class="pre">FlareAnimation</span></code> and
<code class="docutils literal notranslate"><span class="pre">FlareComponent</span></code> has been deprecated.</p>
<p>To use Flare within Flame, use the <a class="reference external" href="https://github.com/flame-engine/flame_flare"><code class="docutils literal notranslate"><span class="pre">flame_flare</span></code></a>
package.</p>
<p>This is the interface for using a <a class="reference external" href="https://pub.dev/packages/flare_flutter">flare animation</a> within
flame. <code class="docutils literal notranslate"><span class="pre">FlareActorComponent</span></code> has almost the same API as of flare’s <code class="docutils literal notranslate"><span class="pre">FlareActor</span></code> widget. It receives
the animation filename (that is loaded by default with <code class="docutils literal notranslate"><span class="pre">Flame.bundle</span></code>), it can also receive a
FlareController that can play multiple animations and control nodes.</p>
<div class="highlight-dart notranslate"><div class="highlight"><pre><span></span><span class="k">import</span><span class="w"> </span><span class="s1">&#39;package:flame_flare/flame_flare.dart&#39;</span><span class="p">;</span>

<span class="kd">class</span><span class="w"> </span><span class="nc">YourFlareController</span><span class="w"> </span><span class="kd">extends</span><span class="w"> </span><span class="n">FlareControls</span><span class="w"> </span><span class="p">{</span>

<span class="w"> </span><span class="kd">late</span><span class="w"> </span><span class="n">ActorNode</span><span class="w"> </span><span class="n">rightHandNode</span><span class="p">;</span>

<span class="w"> </span><span class="kt">void</span><span class="w"> </span><span class="n">initialize</span><span class="p">(</span><span class="n">FlutterActorArtboard</span><span class="w"> </span><span class="n">artboard</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="k">super</span><span class="p">.</span><span class="n">initialize</span><span class="p">(</span><span class="n">artboard</span><span class="p">);</span>

<span class="w"> </span><span class="c1">// get flare node</span>
<span class="w"> </span><span class="n">rightHand</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">artboard</span><span class="p">.</span><span class="n">getNode</span><span class="p">(</span><span class="s1">&#39;right_hand&#39;</span><span class="p">);</span>
<span class="w"> </span><span class="p">}</span>
<span class="p">}</span>

<span class="kd">final</span><span class="w"> </span><span class="n">fileName</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;assets/george_washington.flr&#39;</span><span class="p">;</span>
<span class="kd">final</span><span class="w"> </span><span class="n">size</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">Vector2</span><span class="p">(</span><span class="m">1776</span><span class="p">,</span><span class="w"> </span><span class="m">1804</span><span class="p">);</span>
<span class="kd">final</span><span class="w"> </span><span class="n">controller</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">YourFlareController</span><span class="p">();</span>

<span class="n">FlareActorComponent</span><span class="w"> </span><span class="n">flareAnimation</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">FlareActorComponent</span><span class="p">(</span>
<span class="w"> </span><span class="n">fileName</span><span class="p">,</span>
<span class="w"> </span><span class="nl">controller:</span><span class="w"> </span><span class="n">controller</span><span class="p">,</span>
<span class="w"> </span><span class="nl">width:</span><span class="w"> </span><span class="m">306</span><span class="p">,</span>
<span class="w"> </span><span class="nl">height:</span><span class="w"> </span><span class="m">228</span><span class="p">,</span>
<span class="p">);</span>

<span class="n">flareAnimation</span><span class="p">.</span><span class="n">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">50</span><span class="p">;</span>
<span class="n">flareAnimation</span><span class="p">.</span><span class="n">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">240</span><span class="p">;</span>
<span class="n">add</span><span class="p">(</span><span class="n">flareAnimation</span><span class="p">);</span>

<span class="c1">// to play an animation</span>
<span class="n">controller</span><span class="p">.</span><span class="n">play</span><span class="p">(</span><span class="s1">&#39;rise_up&#39;</span><span class="p">);</span>

<span class="c1">// you can add another animation to play at the same time</span>
<span class="n">controller</span><span class="p">.</span><span class="n">play</span><span class="p">(</span><span class="s1">&#39;close_door_way_out&#39;</span><span class="p">);</span>

<span class="c1">// also, you can get a flare node and modify it</span>
<span class="n">controller</span><span class="p">.</span><span class="n">rightHandNode</span><span class="p">.</span><span class="n">rotation</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">math</span><span class="p">.</span><span class="n">pi</span><span class="p">;</span>
</pre></div>
</div>
<p>You can also change the current playing animation by using the <code class="docutils literal notranslate"><span class="pre">updateAnimation</span></code> method.</p>
<p>For a working example, check the example in the
<a class="reference external" href="https://github.com/flame-engine/flame/tree/main/packages/flame_flare/example">flame_flare repository</a>.</p>
</section>
<section id="parallaxcomponent">
<h2>ParallaxComponent<a class="headerlink" href="#parallaxcomponent" title="Permalink to this heading"></a></h2>
<p>This <code class="docutils literal notranslate"><span class="pre">Component</span></code> can be used to render backgrounds with a depth feeling by drawing several
Expand Down Expand Up @@ -1733,7 +1680,6 @@ <h2>When not using <code class="docutils literal notranslate"><span class="pre">
<a href='#spriteanimationgroupcomponent' class='list-group-item level-1'>SpriteAnimationGroupComponent</a>
<a href='#spritegroup' class='list-group-item level-1'>SpriteGroup</a>
<a href='#svgcomponent' class='list-group-item level-1'>SvgComponent</a>
<a href='#flareactorcomponent' class='list-group-item level-1'>FlareActorComponent</a>
<a href='#parallaxcomponent' class='list-group-item level-1'>ParallaxComponent</a>
<a href='#shapecomponents' class='list-group-item level-1'>ShapeComponents</a>
<a href='#polygoncomponent' class='list-group-item level-2'>PolygonComponent</a>
Expand Down
47 changes: 0 additions & 47 deletions docs/main/flame/rendering/images.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -568,52 +568,6 @@ <h2>Animation<a class="headerlink" href="#animation" title="Permalink to this he
<p>A complete example of using animations as widgets can be found
<a class="reference external" href="https://github.com/flame-engine/flame/blob/main/examples/lib/stories/widgets/sprite_animation_widget_example.dart">here</a>.</p>
</section>
<section id="flareanimation">
<h2>FlareAnimation<a class="headerlink" href="#flareanimation" title="Permalink to this heading"></a></h2>
<p>Do note that Flare is discontinued and <a class="reference external" href="https://github.com/flame-engine/flame/tree/main/packages/flame_rive">Rive</a>
is preferred.</p>
<p>Flame provides a simple wrapper of <a class="reference external" href="https://flare.rive.app/">Flare</a> animations so you can use
them in Flame games.</p>
<p>Check the following snippet on how to use this wrapper:</p>
<div class="highlight-dart notranslate"><div class="highlight"><pre><span></span><span class="kd">class</span><span class="w"> </span><span class="nc">MyGame</span><span class="w"> </span><span class="kd">extends</span><span class="w"> </span><span class="n">Game</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="n">FlareAnimation</span><span class="w"> </span><span class="n">flareAnimation</span><span class="p">;</span>
<span class="w"> </span><span class="kt">bool</span><span class="w"> </span><span class="n">loaded</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">false</span><span class="p">;</span>

<span class="w"> </span><span class="n">MyGame</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="n">_start</span><span class="p">();</span>
<span class="w"> </span><span class="p">}</span>

<span class="w"> </span><span class="kt">void</span><span class="w"> </span><span class="n">_start</span><span class="p">()</span><span class="w"> </span><span class="kd">async</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="n">flareAnimation</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">await</span><span class="w"> </span><span class="n">FlareAnimation</span><span class="p">.</span><span class="n">load</span><span class="p">(</span><span class="s2">&quot;assets/FLARE_FILE.flr&quot;</span><span class="p">);</span>
<span class="w"> </span><span class="n">flareAnimation</span><span class="p">.</span><span class="n">updateAnimation</span><span class="p">(</span><span class="s2">&quot;ANIMATION_NAME&quot;</span><span class="p">);</span>

<span class="w"> </span><span class="n">flareAnimation</span><span class="p">.</span><span class="n">width</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">306</span><span class="p">;</span>
<span class="w"> </span><span class="n">flareAnimation</span><span class="p">.</span><span class="n">height</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">228</span><span class="p">;</span>

<span class="w"> </span><span class="n">loaded</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span>
<span class="w"> </span><span class="p">}</span>

<span class="w"> </span><span class="nd">@override</span>
<span class="w"> </span><span class="kt">void</span><span class="w"> </span><span class="n">render</span><span class="p">(</span><span class="n">Canvas</span><span class="w"> </span><span class="n">canvas</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="n">loaded</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="n">flareAnimation</span><span class="p">.</span><span class="n">render</span><span class="p">(</span><span class="n">canvas</span><span class="p">,</span><span class="w"> </span><span class="nl">x:</span><span class="w"> </span><span class="m">50</span><span class="p">,</span><span class="w"> </span><span class="nl">y:</span><span class="w"> </span><span class="m">50</span><span class="p">);</span>
<span class="w"> </span><span class="p">}</span>
<span class="w"> </span><span class="p">}</span>

<span class="w"> </span><span class="nd">@override</span>
<span class="w"> </span><span class="kt">void</span><span class="w"> </span><span class="n">update</span><span class="p">(</span><span class="kt">double</span><span class="w"> </span><span class="n">dt</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="n">loaded</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="n">flareAnimation</span><span class="p">.</span><span class="n">update</span><span class="p">(</span><span class="n">dt</span><span class="p">);</span>
<span class="w"> </span><span class="p">}</span>
<span class="w"> </span><span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
<p>FlareAnimations are normally used inside <code class="docutils literal notranslate"><span class="pre">FlareComponent</span></code>s, that way <code class="docutils literal notranslate"><span class="pre">FlameGame</span></code> will handle calling
<code class="docutils literal notranslate"><span class="pre">render</span></code> and <code class="docutils literal notranslate"><span class="pre">update</span></code> automatically.</p>
<p>You can see a full example of how to use Flare together with Flame in the example
<a class="reference external" href="https://github.com/flame-engine/flame/tree/main/packages/flame_flare/example">here</a>.</p>
</section>
<section id="spritesheet">
<h2>SpriteSheet<a class="headerlink" href="#spritesheet" title="Permalink to this heading"></a></h2>
<p>Sprite sheets are big images with several frames of the same sprite on it and is a very good way to
Expand Down Expand Up @@ -679,7 +633,6 @@ <h2>SpriteSheet<a class="headerlink" href="#spritesheet" title="Permalink to thi
<a href='#spritebatch' class='list-group-item level-1'>SpriteBatch</a>
<a href='#imagecomposition' class='list-group-item level-1'>ImageComposition</a>
<a href='#animation' class='list-group-item level-1'>Animation</a>
<a href='#flareanimation' class='list-group-item level-1'>FlareAnimation</a>
<a href='#spritesheet' class='list-group-item level-1'>SpriteSheet</a>
</div>

Expand Down
Loading

0 comments on commit 5b4b1c3

Please sign in to comment.