Bonjour,

je voudrais créer une carte à l'aide de PixiJS et j'ai utilisé ce tutoriel: https://github.com/peepsquest/tutorials/blob/master/src/isometric-tiles-with-height.md

Le tutoriel date un peu et ici ils utilisaient la version 3. La version actuelle est la 5.
J'ai donc essayé de remplacer les méthodes anciennes avec les nouvelles mais actuellement, bien que je n'ai pas d'erreurs en console, rien ne s'affiche sur l’écran.

Voici le script:

  let Application = PIXI.Application,
    Container = PIXI.Container,
    loader = PIXI.Loader.shared,
    resources = PIXI.LoaderResource,
    TextureCache = PIXI.utils.TextureCache,
    Sprite = PIXI.Sprite,
    Rectangle = PIXI.Rectangle;

  let app = new PIXI.Application({
      width:  300, //window.innerWidth,
      height: 300, // window.innerHeight,
      antialias: true,
      transparent: false,
      resolution: 1,
      backgroundColor: 0xFF0000
    }
  );

  let WIDTH = 600;
  let HEIGHT = 300;
  let stage = new PIXI.Container();
  let renderer = PIXI.autoDetectRenderer(WIDTH, HEIGHT);

  document.body.appendChild(app.view);


  const sprites = {};
  loader.add('img/roadTiles.json');

    //Carte
    let G=0, D=1, W=2, S=3;
    let terrain = [
        [G, G, G, G, G, G, G, G, G, G],
        [G, G, G, G, D, G, G, G, G, G],
        [G, G, G, G, G, G, G, G, G, G],
        [G, G, G, G, G, G, W, G, G, G],
        [G, G, G, G, G, G, G, G, G, G],
        [G, G, G, S, G, G, G, G, G, G],
        [G, G, G, G, G, G, G, G, G, G],
        [G, G, G, G, G, G, G, G, G, G],
        [G, G, G, G, G, G, G, G, G, G],
        [G, G, G, G, G, G, G, G, G, G],
    ];

    let tileHeight = 50;
    let tileWidth = 50;

    let grass = isoTile('grass');
    let dirt = isoTile('dirt');
    let water = isoTile('water');
    let sand = isoTile('beach');

    let tileMethods = [grass, dirt, water, sand];

    //isoTile
    function isoTile(filename) {
    return function(x, y) {
        let tile = PIXI.AnimatedSprite.fromFrames(filename);
        tile.position.x = x;
        tile.position.y = y;

        // middle-top
        tile.anchor.x = 0.5;
        tile.anchor.y = 0;
        app.stage.addChild(PIXI.Sprite.from(tile));
        }
    }

    function isoTile(filename) {
    return function(x, y) {
        let tile = PIXI.AnimatedSprite.fromFrames(filename);
        tile.position.x = x;
        tile.position.y = y;

        // bottom-left
        tile.anchor.x = 0;
        tile.anchor.y = 1;
        app.stage.addChild(PIXI.Sprite.from(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);
            }
        }
    }

    loader.onComplete.add(() => {
      start();
    });
    loader.load();

    function start() {
    drawMap(terrain, WIDTH / 2.3, tileHeight * 2.3);

    function animate() {
        requestAnimFrame(animate);
        renderer.render(stage);
        }
    requestAnimFrame(animate);
    }

Merci d'avance pour votre aide

-
Edité par BdA 18 septembre 2019 à 12:54:46