Difficulty Recreating Isometry Example - Getting "isometryTest.js:45 Uncaught TypeError: Cannot read property 'Sprite2d' of undefined"

[KamiFightingSpirit]

Isometry Example Link: https://pixijs.io/examples/?v=v5.2.1#/plugin-projection/iso-basic.js

 

Tried several different iterations to get around this error. I can't find anything in the docs/source code about Sprite2d so I am wondering where it is even coming from? Everything is rendering fine if I remove the projection pieces (but the sprite does not appear to be standing vertical then). Could someone help explain this and if at all possible, link me some reading material to assist with understanding?

 

My Current Code: 

var canvas = document.getElementById("stage");

var rendererOptions = {

    width: window.innerWidth,

    height: window.innerHeight,

    view: canvas,

    resolution: window.devicePixelRatio,

    autoDensity: true,

    backgroundColor: 0x191919,

    antialias: true

};

 

const app = new PIXI.Application(rendererOptions);

// document.body.appendChild(app.view);

 

// === THIRD PART ===

// Better isometry plane.

// We can even rotate it if you want!

const isoScalingContainer = new PIXI.Container();

isoScalingContainer.scale.y = 0.5; // isometry can be achieved by setting scaleY 0.5 or tan(30 degrees)

isoScalingContainer.position.set(app.screen.width / 2, app.screen.height / 2);

app.stage.addChild(isoScalingContainer);

 

const isometryPlane = new PIXI.Graphics();

isometryPlane.rotation = Math.PI / 4;

isoScalingContainer.addChild(isometryPlane);

 

//creates the grid

isometryPlane.lineStyle(2, 0xffffff);

for (let i = -100; i <= 100; i += 50) {

    isometryPlane.moveTo(-150, i);

    isometryPlane.lineTo(150, i);

    isometryPlane.moveTo(i, -150);

    isometryPlane.lineTo(i, 150);

}

 

//creates the circle in the grid

isometryPlane.drawCircle(0, 0, 100);

 

//create the loader

PIXI.Loader.shared.add("./assets/eggHead.png").load(setup);

function setup() {

    window.eggHeadTexture = PIXI.Loader.shared.resources["./assets/eggHead.png"];

    // let sheet = PIXI.Loader.shared.resources["assets/spritesheet.json"].spritesheet;

    // let sprite = new PIXI.Sprite(sheet.textures["image.png"]);

    const sprite3 = new PIXI.projection.Sprite2d(eggHeadTexture.texture);

 

    sprite3.anchor.set(0.5, 1.0);

    sprite3.proj.affine = PIXI.projection.AFFINE.AXIS_X;

    sprite3.scale.set(0.3, 0.5); // make it small but tall!

    // not-proportional scale can't work without special flag `scaleAfterAffine`

    // fortunately, its `true` by default

    isometryPlane.addChild(sprite3);

    let step = 0;

    app.ticker.add(delta => {

        step += delta;

    });

    app.ticker.add(() => {

        sprite3.rotation = step * 0.05;

        const radius = 100;

        const speed = 0.005;

        sprite3.position.set(

            Math.cos(step * speed) * radius,

            Math.sin(step * speed) * radius

        );

    });

}

[ivan.popelyshev]

Hello!

1. See the attached image.

2. Find a plugin: https://github.com/pixijs/pixi-projection

3. Find a build: https://github.com/pixijs/pixi-projection/tree/master/dist

As to why it does not appear in docs - its experimental plugin.

That means no stackoverflow, no google, the only way is to look at few existing examples and ask its active users: I and @jonforum . 

The best game that uses this plugin is https://mkbatman.lenta.ch/

[jonforum]

hum, Some more demo here (including debugger). These all I have in stock ! and it maybe not the most nice way.
https://www.pixiplayground.com/#/edit/AStdtooMVCNX_-_AeShMd

https://www.pixiplayground.com/#/edit/IwtekmtCPmQxACtqWvGh0

https://www.pixiplayground.com/#/edit/rxzi0sQeQXrTxIB5QotzW

Am not understand the question here, my english may not be good enough, maybe rephrase the question.
The code is also unreadable for me.
My eyes are bleeding.? ?

 

Edited March 11, 2020 by jonforum

[sep]

The playground links all have this error:  "Uncaught TypeError: Cannot read property 'shared' of undefined"

[jonforum]

3 hours ago, sep said:

The playground links all have this error:  "Uncaught TypeError: Cannot read property 'shared' of undefined"

they remove v4

[hulkyuan]

i need docs sir