Bacon2D provides many easy to use QML components that are useful for game development. You can create fun and compelling games with ease.

Lets get started!

We'll begin by adding a top-level container for our game with the "Game" component. This provides a game loop and scene management.

import QtQuick 2.2
import Bacon2D 1.0

Game {
    id: game
    width: 800
    height: 600
    gameName: "com.ubuntu.developer.ken-vandine.mygame"
}

Now you have an empty container that is 800x600, exciting huh? The Game container manages scenes and the viewport, we'll get into that later.

We need to add at least one Scene to our game.

Game {
    id: game
    width: 800
    height: 600
    gameName: "com.ubuntu.developer.ken-vandine.mygame"
    currentScene: scene1

    Scene {
        id: scene1
        anchors.fill: parent
        Image {
            anchors.fill: parent
            source: "images/backgrounds/scene1.png"
            fillMode: Image.Tile
        }
    }
}

Now we have one scene with a tiled image filling the scene. Notice I added set a property on Game, currentScene. This sets the active scene in the game. If we had multiple scenes, we could switch scenes by changing currentScene. When the scene changes, only the scene referenced by currentScene can be running.

So what does "running" mean talking about a scene? When the scene is running, each of the entities contained in the scene get updated on each tick of the game loop. We'll talk more about the interesting things that can be done when the entities get updated later. You can even pause/resume the scene by toggling the running property of the scene.

Let's add a couple more scenes, including a scene that contains our main menu.

main.qml:

import QtQuick 2.2
import Bacon2D 1.0

Game {
    id: game
    width: 800
    height: 600
    gameName: "com.ubuntu.developer.ken-vandine.mygame"
    currentScene: menuScene

    MenuScene {
        id: menuScene
        anchors.fill: parent
    }

    LevelOne {
        id: level1
        anchors.fill: parent
    }

    LevelTwo {
        id: level2
        anchors.fill: parent
    }
}

MenuScene.qml:

import QtQuick 2.2
import Bacon2D 1.0

Scene {
    id: menuScene
    anchors.fill: parent
    Image {
        anchors.fill: parent
        source: "images/menu/bg.png"
        fillMode: Image.Tile
    }

    Image {
        anchors.centerIn: parent
        source: "images/menu/box.png"
        fillMode: Image.PreserveAspectFit
        height: 250
        width: 300

        Column {
            anchors.centerIn: parent
            height: childrenRect.height
            width: childrenRect.width
            spacing: 20

            LevelButton {
                text: "Level 1"
                onClicked: game.currentScene = level1
            }

            LevelButton {
                text: "Level 2"
                onClicked: game.currentScene = level2
            }
        }
    }
}

LevelOne.qml:

import QtQuick 2.2
import Bacon2D 1.0

Scene {
    id: level1
    anchors.fill: parent
    Image {
        anchors.fill: parent
        source: "images/level1/bg.png"
        fillMode: Image.Tile            
    }
}

LevelTwo.qml:

import QtQuick 2.2
import Bacon2D 1.0

Scene {
    id: level2
    anchors.fill: parent
    Image {
        anchors.fill: parent
        source: "images/level2/bg.png"
        fillMode: Image.Tile            
    }
}

We now have a menu scene and two level scenes, which I moved into separate qml files. The menu scene contains buttons to choose a scene.