Kirom12 / tbel-engine_game

Getting Started

• First Steps
• Examples

---

First Steps

1. Create the environment
2. Load Images
3. Create a Scene
4. Create a GameObject

---

Create the environment

Create the canvas

First of all you need to create a canvas in your HTML file.

<canvas id="canvas"> </canvas>

You can now close your HTML file.

Set size of your canvas

In the file Assets/Scripts/Javascript/Game/Init.js, you can set the width and the height of the canvas

// Set the canvas size to window size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Get the context of the canvas

In Assets/Scripts/Javascript/Game/Config.js, we get the context with this line

var ctx = canvas.getContext("2d");

---

Load Images

In order to load all your images, put them in Assets/Graphics. You now have to call them in Assets/Scripts/Javascript/Game/Config.js under ImagePath.

var ImagePath = [{ name:"Boy", path:"Boy.jpg" }];

We'll see in the GameObjects section how to use it.

---

Create a Scene

A Scene is one of the most important part of the engine since it represents a stage.

Duplicate the SceneModel

Go to Assets/Scripts/Javascript/Scenes/SceneModel.js, duplicate all the code in a new file which will be your scene.
Rename the function Scene to the name of your choice, change `this.name` to the name of your choice

Add the scene on the Loader

In the Start function add your scene to the array Scenes

this.Start = function()
{
	if (!this.started)
	{
		Scenes["SceneName"] = new SceneName();
	}
}

Then go to Assets/Scripts/Javascript/Game/Init.js, in ImageLoaded function set the Application.LoadedScene to Scenes["SceneName"]

function ImageLoaded(_imageLoaded) 
{
    Application.LoadedScene = Scenes["SceneHub"];
}

---

Create a GameObject

A GameObject represent every element of interaction in your game. A character, a rock, ...

Duplicate the GameObjects Model

Go to Assets/Scripts/Javascript/GameObjects/GameObjects.js, duplicate all the code in a new file which will be your gameObject.
Rename the function GameObject to the name of your choice, change `this.name` to the name of your choice

Add the GameObject to the Scene

Go to your Scene file and in the Start function, add your GameObject like this

this.Start = function() 
{
	if (!this.started) 
	{
        var gameObject = new NameOfYourGameObject();
        this.GameObjects.push(gameObject);
	}
}

They'll be automatically started in the Update function of the Scene.

Handle Inputs

To act with your GameObject, you can use either your keyboard or the mouse.
In the Update function of your scene, add this :

this.Update = function() 
{
	if (!Application.GamePaused) 
	{
		if(Input.KeysDown[32])
        {
            this.GameObjects[0].Transform.Position.y -= 10;
        }
	}
}

This code will make your GameObject 'jump'.