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);
app.stage.addChild(isoScalingContainer);
 
const isometryPlane = new PIXI.Graphics();
isometryPlane.rotation = Math.PI / 4;
isoScalingContainer.addChild(isometryPlane);
 
//creates the grid
isometryPlane.lineStyle(20xffffff);
for (let i = -100i <= 100i += 50) {
    isometryPlane.moveTo(-150i);
    isometryPlane.lineTo(150i);
    isometryPlane.moveTo(i-150);
    isometryPlane.lineTo(i150);
}
 
//creates the circle in the grid
isometryPlane.drawCircle(00100);
 
//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.51.0);
    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
    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
        );
    });
}
Link to post
Share on other sites

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/

pixi-proj-test.png

Link to post
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.
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 by jonforum
Link to post
Share on other sites
  • 1 year 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.

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

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...