illume

Description:

illume

illume #
A Widget-based Game Engine for Flutter #
Illume is a simple Flutter game engine which uses widgets to create game objects instead of sprites
in normal game engines. This allows the app and game part to be quite integrated and use a lot of
common components without needing graphics work to create sprites and backgrounds (which was honestly
my main motivation, since I don't know anything about graphic design). It's also quite easy to create
and manage the game state as shown in the features ahead. A lot of functionality still needs to be
implemented including physics - only normal box-based collision is currently implemented.
Some parts were inspired by other game engines, primarily Flame.
DISCLAIMER: Since widgets are heavier than sprites drawn on a canvas, this engine is going to be
less performant than others. It is in a very early stage and I plan to add a lot of features but
this is primarily due to my interest in having widget-based game engines -- any serious game
development should still be carried out with more mature engines like Flame.
This is just meant as an experiment to satisfy my curiosity. I quite like - and still heavily use the
main Flutter game engines whose development teams I respect a lot.
Features #
Use Widgets directly to build your game objects #
class FlappyWidget extends GameObject {

@override
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
child: const Text('Demo'),
);
}

@override
void init() {}

@override
void onCollision(List<Collision> collisions) { }

@override
void onScreenSizeChange(Vector2 size) {}

@override
void update(Duration delta) {}

//...
}
copied to clipboard
Easy game development without large separation between widgets and games #
You can add a game to your app simply by adding an Illume widget and an IllumeController. (More
info given in usage section)
class _MyHomePageState extends State<MyHomePage> {
IllumeController gameController = IllumeController();

FlappyWidget flappyWidget = FlappyWidget();

@override
void initState() {
super.initState();
gameController.startGame();
gameController.gameObjects.add(flappyWidget);
}

@override
Widget build(BuildContext context) {
return Scaffold(
body: Illume(
illumeController: gameController,
),
);
}
}

// Definition of game object given later
copied to clipboard
IllumeController allows easy manipulation of game state #
IllumeController gameController = IllumeController();

gameController.startGame();
gameController.gameObjects.add(DemoObject());
gameController.stopGame();
// etc
copied to clipboard
The controller is also available for use in all game objects so no need for an abundance of callbacks.
Collision detection #
Collision detection is enabled by default for all objects which can be turned off. Every object is
notified of collisions as well as given the Rect of intersection so collisions can be better
understood. This is a very early prototype so no complex physics (Box2d-ish) exist but I hope to
add this in the future.
class FlappyWidget extends GameObject {

//...

@override
void onCollision(List<Collision> collisions) {
// This gives a list of objects which are colliding with this one
// as well as the rect of intersection.
}

//...
}
copied to clipboard
Gesture Detection #
This is technically NOT a feature of illume since we can use the default Flutter gesture detecting
widgets like the GestureDetector to power our apps. Check the example provided in the repo for more
but here is a short demo:
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
flappyWidget.jump();
},
child: Scaffold(
appBar: AppBar(
title: Text('Illume Demo'),
),
body: Illume(
illumeController: gameController,
),
),
);
}
copied to clipboard
Usage #
Step 1 #
Add the dependency first:
dependencies:
illume: ^0.1.0
copied to clipboard
Step 2 #
Add the Illume widget and associated IllumeController wherever you need to create a game:
IllumeController gameController = IllumeController();

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Illume Demo'),
),
body: Illume(
illumeController: gameController,
),
);
}
copied to clipboard
Step 3 #
Define your GameObject by extending the class:
class FlappyWidget extends GameObject {
var velocity = 0.0;
var acceleration = 0.2;

@override
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
child: const Text('Demo'),
);
}

@override
void init() {
size = Vector2.all(50);
alignment = GameObjectAlignment.center;
position = (gameSize / 2);
}

@override
void onCollision(List<Collision> collisions) {
illumeController.stopGame();
}

@override
void onScreenSizeChange(Vector2 size) {
// This is a quick demo but you really should shift your positions in a
// real world app or at least lock orientation.
}

@override
void update(Duration delta) {
position += Vector2(0, velocity);
velocity = velocity + acceleration;
}

void jump() {
velocity = -5;
}
}
copied to clipboard
Note: In the object there are various properties - #

gameSize gives the max size for the game.
alignment allows you to align the center to the center of the widget or the top left corner of
the widget.
position is the position of the widget.
size is the size of the widget.
illumeController is the game controller for the game.

Step 4 #
Add the object to the game and start the game:
FlappyWidget flappyWidget = FlappyWidget();

@override
void initState() {
super.initState();
gameController.startGame();
gameController.gameObjects.add(flappyWidget);
}
copied to clipboard
Check out the full example for the demo flappy bird game (This is a very basic demo for now, I'll
add a far better one later).