Hi everyone,
I created a map and sprite with PixiJS. Now, I would like to know the position of different tiles (x and y) to move the sprite on isometric map by assigning a position.
I saw this tutorial but it was done without Pixi. Here's the code of map creation:
//Aliases
let Application = PIXI.Application,
Container = PIXI.Container,
loader = PIXI.Loader.shared,
Graphics = PIXI.Graphics,
resources = PIXI.LoaderResource,
TextureCache = PIXI.utils.TextureCache,
Sprite = PIXI.Sprite,
Rectangle = PIXI.Rectangle;
//Create a Pixi Application
let app = new PIXI.Application({
width: 1280,
height: 620,
antialias: true,
transparent: false,
resolution: 1,
backgroundColor: 0x333333
});
//Set dimensions and renderer
let WIDTH = 1280;
let HEIGHT = 620;
let stage = new PIXI.Container();
let renderer = PIXI.autoDetectRenderer(WIDTH, HEIGHT);
//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);
//Add pack on stage
let pack, state;
function setup() {
//Create the `cat` sprite
pack = PIXI.Sprite.from('img/pack.png');
pack.x = 230;
pack.y = 312;
pack.vx = 0;
pack.vy = 0;
app.stage.addChild(pack);
}
// Chainable `add` to enqueue a resource
loader.add('img/roadTiles3.json');
//Create map
let G=0, D=1, W=2, S=3, NE=4, ES=5, NW=6, SW=7, EW=8, NS=9;
let terrain = [
[G, G, G, G, G, EW, G, G, G, G],
[G, G, G, G, G, EW, G, G, G, G],
[G, G, G, G, G, EW, G, G, G, G],
[G, G, G, G, G, EW, G, G, G, G],
[G, G, SW, NS, NS, NE, G, G, G, G],
[G, G, EW, G, G, G, G, G, G, G],
[G, G, EW, G, G, G, G, G, G, G],
[G, G, EW, G, G, D, D, G, G, G],
[G, G, EW, G, G, D, D, G, G, G],
[G, G, EW, G, G, G, G, G, G, G],
];
// Tiles with height can exceed these dimensions.
let tileHeight = 50;
let tileWidth = 50;
//Create tiles
let grass = isoTile('grass');
let dirt = isoTile('dirt');
let water = isoTile('water');
let sand = isoTile('beach');
let roadNE = isoTile('roadNE');
let roadES = isoTile('roadES');
let roadNW = isoTile('roadNW');
let roadSW = isoTile('roadSW');
let roadEW = isoTile('roadEW');
let roadNS = isoTile('roadNS');
let tileMethods = [grass, dirt, water, sand, roadNE, roadES, roadNW, roadSW, roadEW, roadNS];
//isoTile
function isoTile(filename) {
return function(x, y) {
let tile = PIXI.Sprite.from(filename);
tile.position.x = x;
tile.position.y = y;
// middle-top
tile.anchor.x = 0.5;
tile.anchor.y = 0;
app.stage.addChild(tile);
}
}
function isoTile(filename) {
return function(x, y) {
let tile = PIXI.Sprite.from(filename);
tile.position.x = x;
tile.position.y = y;
// bottom-left
tile.anchor.x = 0;
tile.anchor.y = 1;
app.stage.addChild(tile);
}
}
function drawMap(terrain, xOffset, yOffset) {
let tileType, x, y, isoX, isoY, idx;
for (let i = 0, iL = terrain.length; i < iL; i++) {
for (let j = 0, jL = terrain[i].length; j < jL; j++) {
// cartesian 2D coordinate
x = j * tileWidth;
y = i * tileHeight;
// iso coordinate
isoX = x - y;
isoY = (x + y) / 2;
tileType = terrain[i][j];
drawTile = tileMethods[tileType];
drawTile(isoX + xOffset, isoY + yOffset);
}
}
}
//Load and start
loader.onComplete.add(() => {
start();
setup();
});
loader.load();
function start() {
drawMap(terrain, WIDTH / 2.3, tileHeight * 2.3);
function animate() {
requestAnimFrame(animate);
renderer.render(stage);
}
requestAnimFrame(animate);
}
Thanks for your suggestions