Scribd
Upload
146 views12 pages

flutter_flame_codex

Flutter Flame Codex

Uploaded by

full.stackdev
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
146 views12 pages

flutter_flame_codex

Flutter Flame Codex

Uploaded by

full.stackdev
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Ba

s ic

Game Development
with Flutter and Flame

By

Afzal Ali
Preface

Flame is a modular Flutter game engine that provides a


complete set of out-of-the-way solutions for games. It
takes advantage of the powerful infrastructure provided by
Flutter but simplifies the code you need to build your
projects.

It provides you with a simple yet effective game loop


implementation, and the necessary functionalities that you
might need in a game. For instance; input, images, sprites,
sprite sheets, animations, collision detection, and a
component system that we call Flame Component System.

We will cover basic concepts in following simple chapters.

Index
Sprite ............................................................................................................... 3
SpriteComponent .................................................................................. 4
SpriteAnimation ....................................................................................... 5
SpriteAnimationComponent .......................................................... 6
SpriteAnimationGroupComponent ........................................... 7
Collision Detection ................................................................................. 8
Keyboard Input ........................................................................................ 9
Touch Input - Joystick ........................................................................ 10
Effects ............................................................................................................. 11
Sprite
Sprite is an Image that can be rendered in the Canvas. It is
used to represent a character, item, or other visual element
in the game.

Sprite may
represent entire
image or part of
the image based
on region defined.
bird.png

var birdSprite = await Sprite.load(‘bird.png’);

The above code will load complete bird.png into sprite


which can be used in game component.

To load specific
var birdSprite = await Sprite.load(
part of the image,
‘bird.png’,
srcPosition: Vector2(50, 0), you can define
srcSize: Vector2(50, 50), position and size
); that you want to
target.
(50,0)

50

50
SpriteComponent
SpriteComponent renders the sprite on the canvas. It
manages the size, position and other Layout properties.

var birdComponent = SpriteComponent(


sprite: birdSprite,
position: Vector2(100, 300),
);

(0,0)

MyGame
(100,300)

add(birdComponent);

Other important properties of SpriteComponent

Anchor: Relative reference point for the sprite, think of it as


pin location.

Anchor Anchor Anchor Custom


.topLeft (default) .center .bottomRight Anchor(0.5, 0.9)

Angle: Rotation angle of sprite. Rotation will happen with


respect to anchor point.

angle: 45, anchor: Anchor.center


angle: 45,
SpriteAnimation
SpriteAnimation holds the information of multiple sprites
and sequence it to play animation. There are different ways
to create Sprite Animation.

SpriteAnimation.fromAsepriteData(image, jsonData);
It creates animation from Aseprite JSON data.

SpriteAnimation.fromFrameData(image, data);
It Creates animation with image which we can load from
Sprite, and data which defines frame details and interval

SpriteAnimationData.sequenced(
amount: 6,
amountPerRow: 3, 50

stepTime: 0.05, 50

textureSize: Vector2(50, 50),


),

SpriteAnimation.spriteList(sprites, stepTime: stepTime);


It Creates animation with List<Sprites> and interval is
handled by stepTime.

SpriteAnimation.variableSpriteList(sprites, stepTimes:
stepTimes);
It Creates animation with List<Sprites> and different
interval can be defined by stepTimes.

Generally images contains all frames, so .fromFrameData is


mostly used
SpriteAnimationComponent
SpriteAnimationComponent holds the single animation
with other layout properties like size, position etc.

class Bird extends SpriteAnimationComponent {


@override
FutureOr<void> onLoad() {
animation = SpriteAnimation(...);
return super.onLoad();
}
}

We already have seen how to create SpriteAnimation in the


last section. Now let’s add this animated bird to our game.
(0,0)
MyGame

var bird = Bird();


add(bird);

Bird will have flying animation

Bird is positioned at (0, 0). Let’s create properties in Bird


class to provide the initial position/size.

class Bird extends SpriteAnimationComponent {


Bird({super.position, super.size});
}

var bird = Bird(position: Vector2(100,300));


add(bird);
SpriteAnimationGroupComponent
It can hold multiple animations and it will play animation
which is defined as current.

class Bird extends SpriteAnimationGroupComponent {


@override
FutureOr<void> onLoad() {
animations = {
BirdState.flying: flyingAnimation,
BirdState.falling: fallingAnimation,
};
current = BirdState.flying;
return super.onLoad();
}
}

Theres a lot happening here, lets break down.


1. We need to define an enum to manage different state of
animation.

enum BirdState { flying, falling }

2. flyingAnimation, fallingAnimation etc are spriteAnimation


which we discussed in last section. Generally there are
different images for different animations.

3. Any time you want to change animation, you just have to


update the current state with one of the enum and the
component will handle the animation.
Collision Detection
In the world of 2D graphics, if the coordinates of two
component overlaps each other, collision is marked. Flame
engine has collision detection in-built. Let’s assume that we
have a drone in the sky flying towards the bird.

First, we have to implement CollisionCallbacks in the class

class Bird extends SpriteAnimationGroupComponent with


CollisionCallbacks {}

Secondly, add HitBox to define the region of the bird to


interact with other items. Inside onLoad method
add(RectangleHitbox());

RectangleHitbox CircleHitbox PolygonHitbox

And finally, implement collision logic

@override
void onCollision(intersectionPoints, other) {
if (other is Drone) {
current = BirdState.falling;
}
return super.onCollision(intersectionPoints, other);
}
Keyboard Input
Flame engine supports both keyboard input and touch
input to interact with game objects and perform action.

class MyGame extends FlameGame with


HasKeyboardHandlerComponents {}

Implement HasKeyboardHandlerComponents in your


FlameGame and then you can handle Keyboard Events
inside component. (Bird in this example)

class Bird extends SpriteAnimationGroupComponent with


CollisionCallbacks, KeyboardHandler {}

@override
bool onKeyEvent(event, keysPressed) {
var isSpace =
keysPressed.contains(LogicalKeyboardKey.space);

if(isS
pace){
//Shoot
}
return super.onKeyEvent(event, keysPressed);
}
Touch Input - Joystick
Joystick movement is also very common in character
playing games, add DragCallbakcs in your FlameGame to
get drag updates.

class MyGame extends FlameGame with


HasKeyboardHandlerComponents, DragCallbacks {}

Create joystick component and add it in the game.

var joystick = JoystickComponent(


background: SpriteComponent(...), //Bg circle
knob: SpriteComponent(...), //knob circle
);
add(joys
tick);

Inside update method, check for joystick direction and take


action on player or other component.

switch (joystick.direction){
case JoystickDirection.up:
bird.moveUp();
case JoystickDirection.down:
bird.moveDown();
}
Effects
Effects can be applied on components to change their
properties over time which gives animated effect.

There are multiple effects provided by Flame, and you can


also create your own. The following effects are included:

Let’s take simple example, we will reduce opacity of bird to


30% in 0.1 seconds. (hit by drone effect)

class Bird extends SpriteAnimationComponent {


.
.
//inside some method
var opacityEffect =
OpacityEffec
t.to(0.3, EffectController(duration: 0.1));

add(opacityEffect);
.
.
}

100 ms
Time to Action

Flame Game development is simple yet powerful tool to


create casual games, all it takes is your imagination to
build the next candy crush or flappy bird game which
have made millions in revenue.

Thank you for staying with me till end, I would like you to
join on codexdev.net for more updates on Flutter and
Game Development.

"IT ALWAYS SEEMS IMPOSSIBLE


UNTIL IT'S DONE."
Nelson Mandela

You might also like