Get started with Fiso Engine

Let's get started with Fiso Engine!

This tutorial is made for learning the basics.

1) Including Fiso Engine to your project

To use Fiso Engine, it's very simple: link your project with the library by adding "FisoEngine.a" in your IDE linker settings and then put all the .hpp files of the engine next to your project. Don't forget to compile your project with the -std=c++11 flag ! Note that you have to compile in order : FisoEngine then your graphic library, or you will get some compiling errors.

2) Editing our map!

Before start coding, let's begin editing our map. We have to create layer files.
If you have a map of 4 floors, you have to create 4 layer files.
Let's start editing a map of one floor only. Takes your favourite text-editor and create a file named layer1.map, or whatever extension you want.
_Wait, what did I have to put in my file?
To show you the syntax to use, let me show you an example layer file for a map of 10 tile width:

1,1,1,1,1,1,1,1,1,3
1,1,1,1,1,1,1,1,1,1
1,1,1,1,1,1,1,1,1,1
1,1,1,1,1,1,1,1,1,3
1,1,1,1,1,1,1,1,1,3
1,1,1,1,1,1,1,1,1,1
1,1,1,1,1,1,1,1,1,3
1,1,1,1,1,1,1,1,1,1
1,1,1,1,1,1,1,1,1,3
1,1,1,1,1,1,1,1,3,1

Actually pretty simple: 10 tile width, 10 lines, and 10 number per lines separated by a comma. I think you get it.
_Hey, I want to create big maps, and I will have to edit them on my notepad?! That's so boring!
No, of course no, you can use the DAME software to easily edit your maps! This software is pretty instinctive, I think I don't need to make a tutorial how to use it.

3) Creating our tileset!

Before starting to code, there remains one thing to do: creating our tileset.
A tileset is the image that contains all the tile images. Like this.
But our tileset will look slightly different: the tile images will be ordered on the vertical axis, stucked to the right. Why? Because the horizontal axis will be used to store the animations frames.
So open your favourite image-editing software and create your own tileset. The tiles can be any size until they respect the isometric projection. Your tileset musts look like that:

If your tileset is composed as the same way, we can go on!

4) Let's start to code!

Before beggining, you have to know that the FisoEngine corresponding namespace is "fe". So when declaring/using FisoEngine elements like classes, functions and enums you have to put fe:: before the class/function/enum name, or put "using namespace fe" instead. In the following tutorials, fe:: will be ommited.
Before instanciating our map, we have to set a Camera instance. For now, the class will just have to know the screen dimensions.

#include "Map.hpp"

int main()
{
    Camera cam;

    return 0;
}

Don't forget to include the Camera header!

#include "Map.hpp"

int main()
{
    Camera cam;
    cam.setViewDimensions(800, 600); //Example value of view dimensions

    return 0;
}

When you will handle the basics, you can learn more about the camera system here.
And here we are ready to instanciate our map itself.
Then include the Map header to your project. Instanciate your Map object by informing the Camera instance.

#include "Map.hpp"

int main()
{
    Camera cam;
    cam.setViewDimensions(800, 600);

    Map myMap(cam);

    return 0;
}

Then you have to add your layer file by doing:

#include "Map.hpp"

int main()
{
    Camera cam;
    cam.setViewDimensions(800, 600);

    Map myMap(cam);

    myMap.addLayerFile("yourLayer.yourExtension");

    return 0;
}

We also have to set our tileset:

#include "Map.hpp"

int main()
{
    Camera cam;
    cam.setViewDimensions(800, 600);

    Map myMap(cam);

    myMap.addLayerFile("yourLayer.yourExtension");
    myMap.setTileset("yourTileset.png/jpg/etc");

    return 0;
}

Then let's set the tile parameters:

#include "Map.hpp"

int main()
{
    Camera cam;
    cam.setViewDimensions(800, 600);

    Map myMap(cam);

    myMap.addLayerFile("yourLayer.yourExtension");
    myMap.setTileset("yourTileset.png/jpg/etc");
    myMap.setTileSize(40, 40)//Set your real tile dimensions
    myMap.setTileBaseHeight(20)//Set your real tile base height

    return 0;
}

The last thing to do before drawing our map is creating it:

int main()
{
    Camera cam;
    cam.setViewDimensions(800, 600);

    Map myMap(cam);

    myMap.addLayerFile("yourLayer.yourExtension");
    myMap.setTileset("yourTileset.png/jpg/etc");
    myMap.setTileSize(40, 40)//Set your real tile dimensions
    myMap.setTileBaseHeight(20)//Set your real tile base height

    //At this point our map is unavalaible for drawing, etc
    myMap.create();
    //At this point our map is available for all basics manipulations including drawing

    return 0;
}

Well done, our map is ready! Note: you can now try to use multiple layers to compose your map. Just create a new layer configuration file and add it like we have seen.

5) Map positioning

Positioning our map is something essential. For setting a relative position to the map you can call:

myMap.setPosition(posX, posY);

Or you can move the map relatively from its position by calling:

myMap.move(rateX, rateY);

You can call the positioning methods before the map initialization.

6) Finally, let's draw our map!

To draw your map, you have to draw it inside your event loop.
For SFML it's:

myWindow.draw(myMap);

And you can admire your beautiful map on screen!

7) Other map manipulations

Setting a specific tile at precise coordinates: You have to call

void setTileAt(const Vector3 coord, const unsigned int tile, bool modifConf, bool modifDraw)

Getting tile number at precise coordinates: You have to call:

unsigned int getTileAt(const Vector3 coord)

Saving the map in configuration files: You have to call:

void save()

8) Reloading the map

Performing map reloading may be usefull. You may have to perform map reloading to completely change the map configuration. For example, when handling a pretty large world you will have to load such or such world layers to not loose any performance. So the first thing to do (unless you just want to add new layers) is:

myMap.resetLayerFiles();

Calling this function reset the layer files. After this function call, your map does not contain any layer.
Then, recompose your map as you like by adding layers and let's go on by call map reloading:

myMap.reload();

After this function, your map is configured and you can now operates on your map as you did before.

Well done! You master the Fiso Engine basics!