| Tweet |
|
02 - Creating a simple Isometric Height Map
Using the same code as the previous with isometric set to true we also introduce the 'jsiso/img/load' module for handling our graphics. As well as the height map properties applied to the Tile Layer, we apply a basic offset for the drawing using .setOffset(). setOffset takes in X and Y arguments e.g. setOffset(10,200);.
The map is built from RGBA colors.
require([
'jsiso/canvas/Control',
'jsiso/tile/Field',
'jsiso/img/load',
'requirejs/domReady!'
],
function(CanvasControl, TileField, imgLoad) {
// RGBA of color to use
var tileColor = "(158, 154, 255, 1)";
// Our Tile Map
var tileMap = [
[tileColor, 0, tileColor, 0, tileColor],
[tileColor, tileColor, tileColor, 0, tileColor],
[tileColor, 0, tileColor, 0, tileColor]
]
// Our Height Map
var tileHeightMap = [
[3,0,1,0,1],
[4,1,1,0,2],
[3,0,1,0,1]
]
// 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, {}, "main");
var tileLayer = new TileField(context, CanvasControl().height, CanvasControl().width);
var images = [
{
graphics: [
"/img/game/ground/blank-block.png" // The images we want to load using imgLoader
]
}
];
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: 40,
tileWidth: 80,
zeroIsBlank: true,
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
},
});
// Rotate our entire Map
tileLayer.rotate("left");
// Set an offset so our map is on screen
tileLayer.setOffset(300, 300)
// 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);
}
}
});
});
Tutorial Outcome (View & Run Source)
10 comments
Как избавиться от боли в суставах? Пантогор - гель для суставов быстро избавит от боли в суставах без вреда для здоровья. Полная потеря дееспособности и жизнь без надежды на будущее - вот, что вам грозит, если вы не позаботитесь о своих суставах! Жить полноценной жизнью или провести остаток своих дней в инвалидном кресле - решать вам! По данным Всемирной организации по борьбе с болезнями суставов, 80% людей в мире имеют проблемы с суставами. Самое страшное, что заболевания суставов приводят к параличу и инвалидности. На сегодняшний день есть одно единственное средство, которое отличается от всех существующих до этого средств. Это средство Пантогор. Основной компонент Пантогора - панты канадского марала. Панты канадского марала активируют природные силы организма и запускают процесс его самовосстановления. Все остальные компоненты действуют синергически - дополняют и усиливают действие друг друга. Прием средства Пантогор гарантирует вам избавление от боли в суставах всего за 1 курс. Внимание! Акция действует только на территории России и стран СНГ! Успейте оформить заказ по выгодной промо-цене! Заказать Пантогор Здесь --> http://c.trktp.ru/ud6b
— TerrellReday Sun, 28 Apr 2019
Как Открыть Страховую Компанию, Агентство Или Брокера?
-----------------------------------
Там же можно ознакомиться с информацией о тарифах на карту «Мир». Такие организации в большинстве своем не требуют посещения их офиса, а переводят деньги сразу на банковскую карту заказчика. Если ответ по заявке окажется положительным, Вам, как без пяти минут новоиспеченному заемщику, останется сделать только одно: прийти в банк, подписать кредитный договор и получить деньги. Если должник не мог вернуть займ, он переходил в руки заемщика, тот заключал его в долговую тюрьму, но в течение месяца должника еще можно было выкупить. Если решили сохранить свой старый номер, то нужно запастись терпением. Многие говорят об удобстве сервиса, но есть и такие, кому приходилось сталкиваться с определенными трудностями. Ситибанк предлагает взять кредит для тех, у кого уже есть несколько кредитов, но у него проблемы с их погашением. Оказывается , что кредит не закрыт и набегает штраф и проценты! А в течение нескольких дней. Дальше вносим необходимую сумму в купюроприемник, и если вносимая сумма будет превышена суммы оплаты, тогда банкомат предложит внести ее на счет мобильного телефона. Сложно представить смартфон без мобильного интернета.
Перейдите ниже по ссылке, чтобы получить кредит:
почта банк
— SylviaTow Mon, 29 Apr 2019
«Папиловит» — быстро и безопасно избавит от любых папиллом и бородавок.
Наш сайт: https://lcokbhlw.bestseller-super.ru
— Davidintit Fri, 17 May 2019
Hi, after reading this awesome piece of writing i am too glad to share my knowledge here with colleagues. zombs royale
— samuelddarden Wed, 29 May 2019
«Папиловит» — быстро и безопасно избавит от любых папиллом и бородавок.
Наш сайт: https://lcokbhlw.bestseller-super.ru
— Davidintit Sat, 1 Jun 2019
«Папиловит» — быстро и безопасно избавит от любых папиллом и бородавок.
Наш сайт: https://lcokbhlw.bestseller-super.ru
— Davidintit Sat, 1 Jun 2019
«Папиловит» — быстро и безопасно избавит от любых папиллом и бородавок.
Наш сайт: https://lcokbhlw.bestseller-super.ru
— Davidintit Sat, 1 Jun 2019
«Папиловит» — быстро и безопасно избавит от любых папиллом и бородавок.
Наш сайт: https://lcokbhlw.bestseller-super.ru
— Davidintit Sun, 2 Jun 2019
I’ve been visiting your tutorials for a while now and I always find a gem in your new posts. Thanks for your usual wonderful effort. click here
— Joshua A. Price Mon, 10 Jun 2019
I just happened upon your blog and liked to comment that I have really enjoyed reading your entries. I'll be subscribing to your feed and I hope you post again soon. tile installer
— fredluis Wed, 10 Jul 2019