In this installment, we delve into the world of Flutter game development using the Flame engine. Whether you’re a seasoned developer or just starting out, join us for a fun-filled exploration of what Flutter and Flame have to offer.
Table of Contents
Let’s Have Some Fun!
Grab your favorite beverage, fire up your preferred IDE, and let’s dive into the exciting world of Flutter game development.
Recap
For those familiar with Flutter-based game development or have explored the Flame game engine, you know that both are primarily designed for 2D games. However, don’t despair if you’re yearning for a 3D-like experience – enter “Sprite Stacking.” This technique allows you to achieve a pseudo-3D effect, adding depth to your game without true 3D support.
Worlds Without End
In a previous installment, we discussed using Sprite Stacking for individual game objects. But the real magic happens when you apply this technique to the entire game world. While Sprite Stacking excels at handling depth and perspective for multiple objects, it doesn’t integrate seamlessly with the SpriteBatch approach we covered earlier.
Join Our Whatsapp Group
Join Telegram group
Enter the Solution
Fortunately, a new solution has emerged to address this challenge – introducing the fantastic new Flame SpriteStack plugin. This plugin enables “whole game” sprite stacking, unlocking new possibilities for your game development endeavors. Join us as we explore how to harness the power of Flame SpriteStack in this article.
Integrating Sashimi into Your Flame Game
Utilizing Sashimi in a Flame-based game involves a straightforward process of adding the package to your Flutter project alongside Flame itself if you haven’t already done so.
dependencies:
flutter:
sdk: flutter
flame: ^latest_version
sashimi: ^latest_version
Adjusting for Horizontal Layout
If your sprite sheets are laid out horizontally, whereas Sashimi expects them to be laid out vertically, you’ll need to make a slight adjustment. Currently, this feature is not included in the published version of Sashimi, but you can use a forked version with the necessary patch applied.
sashimi:
git:
url: https://github.com/maks/sashimi
ref: horizontal-spritesheets
Implementing Sashimi
To incorporate Sashimi into your Flame app, begin by creating a new engine class that inherits from SashimiGame.
class ExampleGame extends SashimiGame {
...
}
Then, within the onLoad() method of your game class, you can create a model and add it to the game.
@override
Future<void> onLoad() async {
final position = Vector3(10, 10, 0);
final car = Model(
position: position,
sliceSize: Vector2.all(16),
size: Vector3(16, 16, 1),
angle: 45 * degrees2Radians,
image: await images.load('BlueCar.png'),
horizontalSlices: true,
);
await addAll(car);
return super.onLoad();
}
Additionally, in the update() method, you can handle user input, such as rotating the camera viewpoint based on keyboard input.
@override
void update(double dt) {
final rotateLeft = _keysPressed.contains(LogicalKeyboardKey.arrowLeft);
final rotateRight = _keysPressed.contains(LogicalKeyboardKey.arrowRight);
final rotation = rotateLeft ? 1 : (rotateRight ? -1 : 0);
kamera.rotation += rotation * dt;
super.update(dt);
}
This implementation provides a dynamic gameplay experience, allowing for fluid interaction within your Flame game.
Achieving Depth and Perspective with Sashimi
While the previous result resembles what we accomplished in the initial article on sprite stacking, it focused on a single element. However, where Sashimi truly shines is in handling any number of sprite-stacked elements within our game world seamlessly. By employing Sashimi, we can effortlessly incorporate multiple stacked elements into our game environment.
To demonstrate this, let’s add several more models using the same approach as before:
final tree = Model(
position: Vector3(20, 20, 0),
image: await images.load('tree1.png'),
...
);
final tree2 = Model(
position: Vector3(10, 0, 0),
image: await images.load('tree1.png'),
...
);
final house = Model(
position: Vector3(-15, -10, 0),
image: await images.load('house1.png'),
...
);
await addAll([car, tree, tree2, house]);
Now, if we again rotate the camera view (in the demo code, I utilized arrow keys for testing convenience on the desktop platform), we can observe Sashimi maintaining the correct perspective relationship between the different elements. Objects in the foreground, closest to the user’s viewpoint or “camera,” obstruct the view of objects behind them, replicating the behavior we would expect from a real 3D view engine.
Join Our Whatsapp Group
Join Telegram group
This capability adds depth and realism to our game world, enhancing the player’s immersion and overall gaming experience.
Exploring Additional Features of Sashimi
The explanation behind achieving correct perspective with stacked sprites without complex depth buffer management is remarkable.
Introducing Billboards
While Sashimi excels at rendering elements of our game world with accurate perspective, there are instances where we might prefer to display traditional “flat” sprites. In the realm of 3D games, this concept is known as billboarding. Sashimi simplifies this process with its BillboardSprite class, which can be utilized similarly to Models.
await add(
BillboardSprite(
position: Vector3(0, 0, 140),
size: Vector2.all(64),
scale: Vector2.all(2),
sprite: await Sprite.load('house.png', images: images),
),
);
Upcoming Features
Sashimi is an evolving package, actively developed by its creator. One exciting feature in progress is the ability to “tilt” the camera view angle of the sprite-stacked world. This enhancement promises to unlock a multitude of creative possibilities for utilizing Sashimi in your games.
Conclusion
I hope you’ve enjoyed the articles in the #FlutterFunFriday series thus far. While the series takes a brief hiatus for now, keep on stacking those sprites and exploring the vast world of game development possibilities.
FAQs
What is Flame game development?
Flame game development is a process of creating games using the Flame engine, a Flutter library designed for 2D game development.
What is Sprite Stacking?
Sprite Stacking is a technique used in Flame game development to achieve a pseudo-3D effect by layering 2D sprites to create depth and perspective in the game world.
How can I integrate Sashimi into my Flame game?
To integrate Sashimi into your Flame game, you can add the Sashimi package to your Flutter project alongside Flame itself. Additionally, you may need to adjust for horizontal layout if your sprite sheets are laid out differently than expected.
What are the benefits of using Sashimi?
Sashimi simplifies the process of handling sprite-stacked elements in a Flame game, allowing for seamless integration of multiple stacked elements with correct perspective relationships.
What upcoming features can we expect from Sashimi?
One exciting upcoming feature of Sashimi is the ability to “tilt” the camera view angle of the sprite-stacked world, offering new creative possibilities for game development.
Is there support for displaying traditional “flat” sprites in Sashimi?
Yes, Sashimi provides support for displaying traditional “flat” sprites through its BillboardSprite class, offering flexibility in rendering elements of the game world.
Join Our Whatsapp Group
Join Telegram group
When will the #FlutterFunFriday series resume?
The #FlutterFunFriday series is currently on a short hiatus, but stay tuned for future updates and articles exploring the world of Flutter game development.
How can I enhance my game development skills?
To enhance your game development skills, consider experimenting with different techniques, exploring new libraries like Flame and Sashimi, and participating in game development communities for support and inspiration.