Tweet |
![]() |
04 - Rotating JsIso Isometric Map
require([
'jsiso/canvas/Control',
'jsiso/tile/Field',
'jsiso/img/load',
'jsiso/canvas/Input',
'requirejs/domReady!'
],
function(CanvasControl, TileField, imgLoad, CanvasInput) {
// RGBA of color to use
var tileColor = "(158, 154, 255, 1)";
var groundColor = "(100, 154, 100, 1)";
// Our Tile Map
var tileMap = [
[groundColor, groundColor, groundColor, groundColor, groundColor, groundColor, groundColor],
[groundColor, tileColor, groundColor, tileColor, groundColor, tileColor, groundColor],
[groundColor, tileColor, tileColor, tileColor, groundColor, tileColor, groundColor],
[groundColor, tileColor, groundColor, tileColor, groundColor, tileColor, groundColor],
[groundColor, groundColor, groundColor, groundColor, groundColor, groundColor, groundColor]
]
// Our Height Map
var tileHeightMap = [
[0,0,0,0,0,0,0],
[0,1,0,1,0,1,0],
[0,1,1,1,0,2,0],
[0,4,0,4,0,3,0],
[0,0,0,0,0,0,0]
]
// X & Y drawing position, and tile span to draw
var xrange = 8;
var yrange = 8;
// use CanvasControl to create a simple canvas element
// ID of Canvas,
// width of Canvas,
// Height of Canvas,
// Optioanl: Any Style proprties we wish to apply,
// Optional: The DOM ID location we wish to place the canvas in, otherwise it appends to Body
var context = CanvasControl.create("canavas", 640, 640, {});
var tileLayer = new TileField(context, CanvasControl().height, CanvasControl().width);
var input = new CanvasInput(document, CanvasControl()); // Create our Input controls and pass through the CanvasControl to it
input.keyboard(function(pressed, keydown) { // Pressed is the keycode of user input, and keydown means the button is down rather than press ended
if (!keydown) {
switch(pressed) {
case 81:
tileLayer.rotate("left");
// Call draw Tile Map function
drawTileMap();
break;
case 87:
tileLayer.rotate("right");
// Call draw Tile Map function
drawTileMap();
break;
}
}
});
var images = [
{
graphics: [
"/img/game/ground/blank-block.png" // The images we want to load using imgLoader
]
}
];
function drawTileMap() {
// Clear drawn map before clearing
context.clearRect(0, 0, CanvasControl().width, CanvasControl().height);
// Loop through our tiles and draw the map
for (i = 0; i < 0 + xrange; i++) {
for (j = 0; j < 0 + yrange; j++) {
tileLayer.draw(i,j);
}
}
}
imgLoad(images).then(function(imgResponse) { // imgLoad uses Promises, once the images have loaded we continue and use the returned imgResponse
tileLayer.setup({
layout: tileMap,
isometric: true, // Flag used to layout grid in non isometric format
tileHeight: 50,
tileWidth: 100,
heightMap: {
map: tileHeightMap,
heightTile: imgResponse[0].files["blank-block.png"], // imgResponse[0] contains the files[] we placed in the graphcis array for loading
offset: 0
},
shadow: {
offset: 50, // Offset is the same height as the stack tile
verticalColor: '(5, 5, 30, 0.4)',
horizontalColor: '(6, 5, 50, 0.5)'
}
});
// Rotate our entire Map
tileLayer.rotate("left");
// Set an offset so our map is on screen
tileLayer.setOffset(200, 100)
// Call draw Tile Map function
drawTileMap();
});
});
Check out the View Source to see tutorial.Q & W to rotate.