The Components Components

This class represents a single object on the screen, either a floating square or a rotating Sprite. Basic abstract classes have update and render methods that are expected to be implemented. The middle implementation PositionComponent adds x,y, Width,height, and Angle attributes to the Component class, as well as useful methods such as distance and angleBetween. The most common implementation is SpriteComponent, which can be used to create sprites:

    import 'package:flame/components/component.dart';
    Sprite sprite = Sprite('player.png'); Const size = 128.0; var player = SpriteComponent.fromSprite(size,size,sprite); // Screen coordinates player.x =... // Default is 0 player.y =... // Default is 0 player. Angle =... // Default is 0 player.render(canvas); // The image will be drawn only if it is loaded and the x,y,width,height parameters are not emptyCopy the code

In this event, if you want to simply change the orientation of the component being drawn, you can also use renderFlipX and renderFlipY in the Render (Canvas Canvas) method to rotate any component that knows the Canvas. Useful for all PositionComponent objects, but especially for SpriteComponent and AnimationComponent. For example, setting Component. renderFlipX = true reverses landscape painting.

Each Componeng has a few methods you can choose to use, which are used for the BaseGame class. If you don’t use BaseGame, you can use these methods in your own game loop.

The resize method is called every time the screen is resized. Component is initially loaded with the add method. When the screen is resized, you need to apply these changes to the component’s x, Y, width, and height, or other changes. You can start applying these variables to the Add method because sprites won’t be drawn until everything is set.

The destroy method can be implemented to return true, reminding BaseGame that your object is marked as destroyed and removed after the current update loop. It will no longer be drawn or updated.

The isHUD method can be implemented to return true(the default is false), causing BaseGame to ignore the element’s camera.

The onMount method can be overridden to perform initialization code for this component. When this method is called, BaseGame ensures that all mixins that can change the behavior of the Component have been handled.

The onDestroy method can be overridden to execute the code before the Component is removed from the game.

There are a few other implementations:

• The AnimationComponent takes an Animation object and draws a periodic Animation Sprite. (For more information about Animations, click here.)
• SvgComponent takes an Svg object and draws the Svg in the game
• ParallaxComponent Draws a parallel background of many frames
• Box2DComponent, with a built-in physics engine (using Dart version of Box2D)

Animation Component Animation Component

This component uses an instance of Animation to represent a Sprite component that can run a periodic Animation. The following example creates a simple three-frame animation:

List<Sprite> Sprite = [0,1,2]. Map ((I) => new Sprite('player_${i}.png')).toList(); This player = AnimationComponent (64.0, 64.0, the new Animation. SpriteList sprites, stepTime: (0.01));Copy the code

If you have a Sprite table, you can use the sequenced constructor, equivalent to providing an Animation class (see more details in this chapter).

This player = AnimationComponent. Sequenced (64.0, 64.0,'player.png', 2);Copy the code

If you’re not using BaseGame, don’t forget to update the component even if it’s static, because the animated object requires ticking to move frames.

SvgComponent

This component uses an instance of an Svg class that has an Svg image drawn to the game.

    Svg svg = Svg('android.svg'); SvgComponent android = SvgComponent. FromSvg (100100, SVG); android.x = 100; android.y = 100;Copy the code

FlareAnimation Component

This component wraps an instance of FlareAnimation that accepts the name of a Flare animation file that contains the animation you want to use. The component can also accept the length and height of the drawing animation.

    final fileName = "assets/Bob_Minion.flr";
    final animation = "Wave";
    final width = 306;
    final height = 228;
    
    FlareComponent flareAnimation = FlareComponent(fileName,aniamtion,width,height);
    flareAnimation.x = 50;
    flareAnimation.y = 240;
    add(flareAnimation);
Copy the code

You can use updateAnimation to change the currently playing animation.

As an example, look at this source file.

Composed Component

A mixin that helps you wrap one component with another. Hierarchies are useful for grouping courseware components. When implemented, such that each item in its Components collection property can be updated and rendered in the same case.

This example shows how the visibility of two components is handled by a wrapper class:

    class GameOverPanel extends PositionComponent with Resizable, ComposedComponent{
        bool visible = false;
        
        GameOverText gameOverText;
        GameOverButton gameOverButton;
        
        GameOverPanel(Image spriteImage):super(){ gameOverText = GameOverText(spriteImage); gameOverButton = GameOverButton(spriteImage); components.. add(gameOverText).. add(gameOverButton); } @override void render(Canvas canvas){if(visible){ super.render(canvas); }}}Copy the code

Parallax Component Parallax Component

This component can render beautiful backgrounds by drawing multiple transparent images on top of each other, each a little out of place.

The basic principle is that when you look at the horizon and move, objects closer seem to move faster than objects farther away.

This component simulates this effect, creating a realistic background with a greater sense of depth.

Create it like this:

    final images = [
        ParallaxImage("mountains.jpg"),
        ParallaxImage("forest.jpg"),
        ParallaxImage("city.jpg")]; this.bg = ParallaxComponent(images);Copy the code

This creates a static background, and if you want to move it, you need to set the naming optional parameters baseSpeed and layerDelta. For example, if you want to move the background image on the X-axis and make the image further away, you can do it like this:

This. Bg = ParallaxComponent(images, baseSpeed: Offset(50,0),layerDelta: Offset(20,0));Copy the code

You can set baseSpeed and layerDelta at any time. Like when your quest jumps or your game speeds up.

This. Bg. BaseSpeed = Offset (100, 0); This. Bg. LayerDelta = Offset (40, 0).Copy the code

The default image is aligned in the lower left corner, repeated on the X-axis, and scaled so that the image covers the screen height. If you want to modify this property, for example if you are not making an edgescrolling game, you can set the repeat, alignment, and fill parameters for each ParallaxImage.

Advanced examples:

    final images = [
        ParallaxImage("stars.jpg", repeat: ImageRepeat.repeat, alignment: Alignment.center, fill:LayerFill.width),
        ParallaxImage("planets.jpg", repeat: ImageRepeat.repeatY, alignment: Alignment.bottomLeft, fill: LayerFill.none),
        ParallaxImage("dust.jpg", repeat: ImageRepeat.repeatX, alignment: Alignment.topRight, fill: LayerFill.height), ]; This. Bg = ParallaxComponent(images, baseSpeed: Offset(50,0),layerDelta: Offset(20,0));Copy the code

• In this example, the stars image is drawn repeatedly on both axes, the screen is aligned in the middle, so it is scaled to fit the screen width
• Assume that the image will repeat in the Y-axis, aligned with the bottom left corner of the screen, without scaling
• The dust image is repeated on the X-axis, aligned in the upper right corner, and scaled to fill the screen height

Once you set the parameters you need, you can draw ParallaxComponent as any other Component.

Just like the AnimationComponent, even though your parallelism is static, you must call the Component’s Update method before it can animate. Also, don’t forget to add your images to the pubspec.yaml directory as resource files, otherwise they won’t be found.

An example implementation can be found in the examples directory.

Box2D Component

Flame has a basic integration with The Box2D implementation of Flutter.

All the concepts of a Box2D world are mapped to the Box2DComponent; Each Body should be a BodyComponent and added directly to Box2DComponent, not a Game List.

So in your game list, you have a HUD and other non-physics related Components, and you can have as many Box2DComponents as you like (I guess it’s usually one), and then add your physical entities to your Components instance. When the Component is updated, it uses the Box2D physics engine to properly update each child Component.

You can check out a more complete example of a WIP game made by @Feroult (please note: it uses the 0.6.x version of Flame, but the Box2D API hasn’t changed).

Tiled Component

We now have a very basic implementation of the Tiled component. This API uses the Tiled library to parse map files and draw visible layers.

How to use this API can be found here.

Nine Tile Box Component Nine Tile Box Component

The nine-grid component uses a rectangle drawn by a grid Sprite.

This grid Sprite is a 3×3 grid with nine squares, representing four corners, four edges and the middle one.

The corners are drawn to the same size, the sides are stretched in the direction of the sides, and the middle block is stretched on both sides.

By using this, you can get box/ Rectangle that expands well on any size. This is useful for creating panels, dialogs, and borders.

You can see more details on how to use this in the example nine_tile_box.