Jump to content

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


Recommended Posts

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 / 2app.screen.height / 2);
const isometryPlane = new PIXI.Graphics();
isometryPlane.rotation = Math.PI / 4;
//creates the grid
for (let i = -100i <= 100i += 50) {
//creates the circle in the grid
//create the loader
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.proj.affine = PIXI.projection.AFFINE.AXIS_X;
    sprite3.scale.set(0.30.5); // make it small but tall!
    // not-proportional scale can't work without special flag `scaleAfterAffine`
    // fortunately, its `true` by default
    let step = 0;
    app.ticker.add(delta => {
        step += delta;
    app.ticker.add(() => {
        sprite3.rotation = step * 0.05;
        const radius = 100;
        const speed = 0.005;
            Math.cos(step * speed* radius,
            Math.sin(step * speed* radius
Link to comment
Share on other sites


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/


Link to comment
Share on other sites

hum, Some more demo here (including debugger). These all I have in stock ! and it maybe not the most nice way.



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 by jonforum
Link to comment
Share on other sites

  • 1 year later...
  • 7 months later...

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...