What versions of pixijs and nodejs are supported regarding pixi-shim?

[xeoshow]

Hello,

I am new to pixi-shim, just would like to know: What versions of pixijs and nodejs are supported with regard to pixi-shim? Thanks.

Best regards, Jason

[Prozi]

hello

latest version supports node 18+ I think but also works on latest always and latest pixi (v6, v7, v8)

if latest version doesn't work with your older version of node/pixi please downgrade pixi-shim by 1 version and try again

[xeoshow]

Hi @Prozi ,

Thanks v much for your kind help. I am using pixijs V7.3.2 , Just one more question: Regarding below pixijs elements, are they all supported in pixi-shim?

AnimatedSprite
BitmapText
Container
Graphics
Mesh
NineSlicePlane
ParticleContainer
SimplePlane
SimpleRope
Sprite
Text
TilingSprite

[Prozi]

@xeoshow to be honest i dont know if all

if you find any of them isnt shimmed/polyfilled please open an issue

remember this library only acts as pixi and should not be used to actually draw in the backend. only to make pixi dependant frontend application runnable in nodejs thx to shim

[xeoshow]

@Prozi I have tested, Sprite and AnimatedSprite works great, while PIXI.Text seems got some problem:

The package.json file: package.json

The code:

require('pixi-shim');
PIXI = require("pixi.js-legacy");
const { createCanvas } = require('canvas');
const fs = require('fs').promises;

const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb
});

const bunny = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png');
bunny.anchor.set(0.5);
bunny.x = app.screen.width / 2;
bunny.y = app.screen.height / 2;
app.stage.addChild(bunny);

 const explosionTextures = [];
 for (let i = 0; i < 8; i++) {
     const texture = PIXI.Texture.from('https://pixijs.com/assets/bunny.png');
     explosionTextures.push(texture);
 }
 const explosion = new PIXI.AnimatedSprite(explosionTextures);
 explosion.x = app.screen.width / 4;
 explosion.y = app.screen.height / 2;
 explosion.anchor.set(0.5);
 explosion.animationSpeed = 0.5;
 explosion.play();
 app.stage.addChild(explosion);

 const style = new PIXI.TextStyle({
     fontFamily: 'Arial',
     fontSize: 36,
     fill: ['#ffffff', '#00ff99'],
     stroke: '#4a1850',
     strokeThickness: 5,
     dropShadow: true,
     dropShadowColor: '#000000',
     dropShadowBlur: 4,
     dropShadowAngle: Math.PI / 6,
     dropShadowDistance: 6,
 });

 const richText = new PIXI.Text('Rich text across multiple lines', style);
 richText.x = 50;
 richText.y = 50;
 app.stage.addChild(richText);

const frameBuffer = [];
const maxBufferSize = 60;

async function renderFrame() {
    app.render();
}

async function processFrame(frameData) {
    await fs.writeFile(`frame_${Date.now()}.png`, frameData);
}

async function animate() {
    console.log('animate:' + Date.now())
    const frameData = await renderFrame();

    bunny.rotation += 0.1;

    setImmediate(animate);
}

animate().catch(console.error);

console.log('Rendering started. Frames are being saved as PNG files.');

[Prozi]

console.log('Rendering started. Frames are being saved as PNG files.');

this will not work (rendering)

the goal of this lib is simply to polyfill those things that pixi uses on front

not to really render them in nodejs

I've tried few years ago to render pixijs in nodejs

and the main problem was difference between pixi resource image and nodejs image file

I haven't accomplished that