PixiNew Posted September 25, 2019 Share Posted September 25, 2019 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 ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted September 25, 2019 Share Posted September 25, 2019 > I would like to know the position of different tiles (x and y) to move the sprite on isometric map by assigning a position. Its not pixi question, you need a function that converts iso coords to screen coords. I usually suggest people to just use "y2 = y / 2" and use only "even" cells in that grid you made - that's also isometry! OK, suppose you want it the general way everyone does it (x2=x+y, y2=x-y), and dont care about the way I do it. 1. How to determine which tile is hit by mouse? Make a hitArea polygon and assign it to all the drawMap, then hitTest it. 2. How to hitTest? use interactionManager. 3. Where is it? In "renderer.plugins.interaction". that's the pixi way. 4. Why is it that difficult? Because its your game logic and you supposed to take care of that. You can use pixi math and hittest that is created ONLY for rendering purposes. 5. WIll it be super-fast? Nope, its a FOR, if you want performance - make your own algorithms. 6. Can it be a simple math formula? Yes, but I'm very tired of helping people with basic stuff. It can be a formula with a few divisions/mods and one "if" element. If you want it to make formulas VERY EASY, use my suggestion. https://codesandbox.io/s/tender-franklin-iycmu full app, but it doesnt have hittest, you can just add it there with math. Quote Link to comment Share on other sites More sharing options...
PixiNew Posted September 25, 2019 Author Share Posted September 25, 2019 Ok, thanks for your answer. Sorry, I'd forgotten the link of the page that contains approximately what I'm trying to reproduce: http://nick-aschenbach.github.io/blog/2015/02/25/isometric-tile-engine/ Now I’m trying to do what you told me in your post. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted September 25, 2019 Share Posted September 25, 2019 Yep var offX = Xi * this.tileColumnOffset / 2 + Yi * this.tileColumnOffset / 2 + this.originX; var offY = Yi * this.tileRowOffset / 2 - Xi * this.tileRowOffset / 2 + this.originY; ITs not easy to make hitTest for that thing, but if you dont do that - you'll have problems later. pixi-projection has some support for isometry in case you want easier operations: https://pixijs.io/examples/#/plugin-projection/iso-basic.js . You can just rotate grid 45 degrees (rotation=Math.PI/8) and squash it, and with usage of return_to_affine technique it'll work. However it doesnt give you hitTest, reverse transformation is still on you. Also, if you are gonna make many tiles, i recommend to search this forum for it, I explained it like 20 times already. Simple sprites will do in beginning, but bear in mind that when you have big maps you'll need better algos. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.