Isometric sprite move

[PixiNew]

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]

> 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.

[PixiNew]

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.

[ivan.popelyshev]

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.