This is the main object which wraps whole content of this engine. Every other methods, which I'll be talking about here are parameters of this object which means that they're accessible by dot notation. For example: iwe.INIT();

In the next stable version (v2.0) this structure will be changed and this object will be replaced by construction function. It will allows you to create more than one instance on one page. If you want to use it right now, you can checkout the HEAD commit of branch oop-refactoring

This is the initialization method which you will use on the beginning of every file. The default value for the fullScreen is false.

   iwe.INIT({
     canvas: 'main',
     tile: {width: 52, height: 30},
     startAt: {x: 250, y: 15},
     fullScreen: true
    });

Based on what you insert to the canvas parameter inside INIT({canvas: "(canvas-id)"}). This object represents the original canvas element form DOM. It's basically the same as when you write document.getElementById("canvas-id"). That means you can use it the same way and also change the canvas parameters.

iwe.Canvas.height = 500;
iwe.Canvas.width = 1000;
iwe.Canvas.style = 'border: 2px solid red; cursor: pointer';
//and so on ...

This object includes another object offset with parameters x (int) and y (int). When you change one this parameters the map will be shifted in the next redraw iteration.

function mapShift(e){
    isDraged = true;
    var coor = getMouseCoor(e);
    iwe.Map.offset.x -= mouse_x - coor.x;
    iwe.Map.offset.y -= mouse_y - coor.y;
    mouse_x = coor.x;
    mouse_y = coor.y;
    redraw();
}

I know that it's a bit weird and i'm going to change it.

Using the iwe.fillModel() method will be this array filled with instances of object whose constructors you will pas in tile parameter of the iwe.fillModel() method.

On the input it expects 2D array, which contains the number referring to the construction function as the first parameter. On the secound place there will be an array

function mapShift(e){
    isDraged = true;
    var coor = getMouseCoor(e);
    iwe.Map.offset.x -= mouse_x - coor.x;
    iwe.Map.offset.y -= mouse_y - coor.y;
    mouse_x = coor.x;
    mouse_y = coor.y;
    redraw();
}

This object has two parameters x (int) and y (int). These parameters influenced the isometric transformation The value of these parameters you can set inside of iwe.INIT() or directly iwe.tile.x = (int).

I strongly advise you to do it inside of iwe.INIT() - it's much clearer.

This method is really useful, for example when you have to get the tile which was clicked by the user.

function canvasClick(e){
	var mouseCoor = getMouseCoor(e);
	var coor = iwe.TRANSFORM.toModel(mouseCoor.x, mouseCoor.y);
	var tile = iwe.getTile(coor.x, coor.y);
	tile.offsetY += 10;
	redraw();
}

On the input it expects coordinates of some existing object. Based on iwe.Map.offset it will decide if this object is visible or not and returns the appropriate value.

It's used for example inside of the engine in iwe.DRAW.image() to make the canvas draw only visible sprites (objects).

This object is used just as logical cover for iwe.TRANSFORM.toIso() and iwe.TRANSFORM.toModel().

On the input it expects coordinates from 2D model, which are transformed to isometric coordinates and are returned as parameters x and y of the output object

On the input it expects coordinates from isometric environment, which are transformed to 2D coordinates and are returned as parameters x and y of the output object

This object is used just as logical cover for iwe.DRAW.image(), iwe.DRAW.tile() and iwe.DRAW.all().

On the first place of the input it expects instance of class Image(), on the other two are 2D coordinates.
It is basically the same like Canvas.ctx.drawImage(url, x, y) with that difference, that before the object is placed to the canvas it is tested with method iwe.isVisible() if it is in the visible ara of canvas.

As the one and only input it expects instance of some tile (for example form iwe.Model[]).
This method loads the coordinates of the tile, using the iwe.TRANSFORM.toIso() it transform them in to isometric and call iwe.DRAW.image() to draw the tile.

This method simply go through whole iwe.Model[] array and call iwe.DRAW.tile() on every tile instance saved in this array.

Inside of this array there are stored every images you want to use in your app. All of those images are store as instances of Images(). This array you will use always when you want to use some preloaded images. It's filled by the iwe.loadImages() method.

iwe.DRAW.image(iwe.images[tile.spriteId], tile.x, tile.y);

The first parameter is a string refers to the source folder of your images. The next parameter is an array filled with stings refers to the name and extension of the image. Every images is loaded to the temporary memory and instances of the Image() saves in to the iwe.images[] array.

    iwe.loadImages('./images/', ['grass.png','unwalkable.png','hero.png']);

Using this method you can make the canvas element to have the same size as the users active screen (inside of the browser). You can call this method anytime or set the fullscreen implicitly inside of the iwe.INIT() by setting the fullscreen parameter to true.

When you call this method, it will delete whole content of the canvas element. This method is useful (with iwe.DRAW.all()) always when you want to redraw whole scene.