Quantcast
Channel: Pixi.js Latest Topics
Viewing all articles
Browse latest Browse all 3981

Isometric sprite move

$
0
0

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


Viewing all articles
Browse latest Browse all 3981

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>