HI,

I want to use Pixi(v5) to play a hls(.m3u8) video on mobile webpage, 
but I find that on IOS (Iphone Xs), PIXI.Texture.from is not updated as predicted.
Can somebody tell me why & is there a way to solve it ?

This is my testing code.

# code
https://jsbin.com/pohikim/edit?html,js,console,output

# just Output
https://jsbin.com/pohikim/edit?output

some old discussing (2016)
https://stackoverflow.com/questions/43287226/hls-video-streaming-on-ios-safari

Thanks for your heeeeeelp

I've written a virtual dom library for pixi.js. https://github.com/eguneys/snabbpixi

It only supports `PIXI.Container` and `PIXI.Sprite` but you can extend it to work for custom display containers.

It's used like this:

import * as PIXI from 'pixi.js';
import { init } from 'snabbpixi';
import { h } from 'snabbpixi';

const app = new PIXI.Application({});

app.loader
  .add("")
  .load(() => {

    let patch, vnode;

    function redraw() {
      vnode = patch(vnode, view());
    }

    patch = init([]);

    const blueprint = view();
    vnode = patch(app.stage, blueprint);
  };

function view() {
  return h('container', [
    h('sprite', {
     texture: PIXI.Texture.from('image.png')
    }),
    h('sprite', {
      texture: PIXI.Texture.from('image.png')
      x: 10,
      y: 10,
      height: 100,
      width: 100
    });
  ]);
}

Please take a look and use it, I will try to improve it as I make more games.

Hello
I have problem in understanding how pixi layers work. I want to make some layers like top one, mid and bottom. I want to add players to the top layer, enemies to mid and move dead enemies to bottom layer. I tried to do this, but my sprites are invisible now. Can you provide minimum working code for pixiv4 for my problem?

I init player this way:

this.player = new PIXI.Sprite(texture_hero);
this.player.anchor.set(0.5, 0.7);
this.player.x = cords.x;
this.player.y = cords.y;
this.player.visible = true;
container.addChild(this.player);

This is how i init pixi:

var type = "WebGL"
if (!PIXI.utils.isWebGLSupported()) {
    type = "canvas"
}

const app = new PIXI.Application(1000, 800, {
    transparent: false,
    backgroundColor: '0x000000'
});

document.body.appendChild(app.view);

//var layer = new PIXI.display.Layer();
//stage.addChild(layer);

var container = new PIXI.Container();
app.stage.addChild(container);

My game is quite big and its hard to select code to post it here to explain my problem. If something is unclear i can post more.

Thank you for your time

When it is the first time I open the game and play everything is fine 

after a couple of moves, players get new turns, some cards fly around(players get resources, trade etc) and then when I hit page refresh to start a new game some of the cards are smaller: 

Note that this happens to only to cards. The thing that is common with all cards is that they animate. The cards animate when player receives a new resource. So maybe I thought some old code was continuing to run on the background even when the player refreshed the page, so I made sure all the old animations stopped when the player hit refresh. This didn't solve the problem.

Another thing that was interesting was, the cards on the left bottom and the cards in the bank are totally different sprites. They have nothing in common except for their texture (bank cards don't even animate). So I'm guessing the texture pack didn't load right specifically for the 2 types of cards shown in this image. Note that each game different cards are smaller, but once a certain texture is smaller 'ALL' of the sprites that use that texture becomes smaller. 

How can I fix this?

My loading function is as below
 

export function loadImages() {
        PIXI.loader
            .add("tile_lumber", "../images/tile_lumber.svg")
            .add("tile_brick", "../images/tile_brick.svg")
            .add("tile_wool", "../images/tile_wool.svg")
            .add("tile_grain", "../images/tile_grain.svg")
            .add("tile_ore", "../images/tile_ore.svg")
            .add("tile_desert", "../images/tile_desert.svg")
            .
            .
            .
            .on("progress", loadProgressHandler)
            .load(GameUICore.setup);

}

export function setup() {
        assetsLoaded = true
        createContainers()
        GameUICards.setCardProps() //The cards on left bottom created here
        GameUIActions.createActions()
        GameUIPlayers.createPlayers() //The cards in bank created here
        createTimer()
        createKeyboardActions()

        app.ticker.add(function (delta) {
            animateObjects()
        });
    }

function animateObjects() {
        for (let view of animatingViews) {
            view.animate()
        }
        for (let line of animatingLines) {
            line.animate()
        }
        for (let text of animatingTexts) {
            text.animate()
        }
        removeObjectsWhoseAnimationFinished()
    }

You can try to reproduce the problem: http://katan.io/

Hi guys

It's been a long time since working with Pixi.js. Since the version 1.6 is 'in da house' with the ability to fill up complex polygons, I resumed my project again.

As the title says, I draw thousands of lines on WebGL using Pixi.js Graphics class. Then I change the style of the lines.

For example, say I drew 1000 lines on the screen, then I want to update their styles (width, color and etc) somehow not by drawing them again.

Is there a way to achieve this? (possibly for polygons as well?)

I'm looking for any tips in regards to performance with the GPU and composite layers specifically. ^.^ 

My performance now is pretty good on web ~55-60 fps and it also looks pretty good on mobile, but it is using ~70% iPad's GPU power and only ~20-30% CPU. 

The code is in PIXI 5.1.0 and I have two renderers with one main RAF that renders both of them. Before the RAF starts, I'm using the PIXI.loader.shared to load in all the images and then I use the prepare plugin on all the PIXI containers that contain sprites. Offscreen sprites are all .visible = false. My main animations are constant x position subtracting to ~15-30 individual sprites on screen at a time and tinting menu sprites that are always on screen and aren't moving.

Main Question: Looking at causes of composite layer paint complexity, I'm seeing that my PIXI renderers caused two layers for each of them. Is this normal for each renderer to have two layers with one saying n/a for compositing reasons? 

n/a layer: https://imgur.com/a/IGjPmTs

Compositing due to the element being a <canvas> element: https://imgur.com/a/o4zZ21R

Chrome devtools normal performance frame: https://imgur.com/a/iW3quHn

I also have a lot of overlapping containers with sprites in the actual PIXI code which could be causing a higher memory estimate on the GPU's work. Is it worse to have each of the sprites in Containers when they overlap?  Overlapping sprites: https://imgur.com/a/I61nBMo

Thank you so much for any advice, you guys are the best! ^.^

I'm currently hunting down an issue with a game that we have developed with pixi.js: According to the dev tools in Chrome, the game uses about 53MB memory. On FireFox it uses about 73MB. On Safari it uses anything between 1800 and 3500MB. On an iPad with iOS12 the game crashes before it even starts, both on Safari and Chrome. As I understand it, Chrome on iOS uses webkit (as apposed to chromium?), so I suspect there is something wrong with webkit. But I could be wrong, I haven't really had a need before to dive into that.

Has anyone else experienced memory issues when using pixi on Safari?

I have been trying to use the Safari Web Inspector's Timeline recorder, but it doesn't tell me much - likely because I'm not 100% sure what I'm looking at. It says that the java heap is around 600MB, the 'layers' take up around 1GB and the 'page' another 1GB. Both of these last ones can also go up to 1.5GB, and sometimes go down to about 800GB (I'm guessing when pixi's GC kicks in). I'm not sure what the 'layers' are, the 'page' is 'everything else' (graphics, audio, etc.).

If someone knows about a good reference of how to 'read' the information supplied by the web inspector, that would also be greatly appreciated!

Has anyone ever seen this where my RAF wants to take up the entire frame (~15ms) but the processes within don't take very long (~3ms)? My app is running iOS on Cordova with wkwebview.

Long RAFs: https://imgur.com/a/2KVeKJZ

Processes within one RAF: https://imgur.com/a/CnUNSfk

BUT

When I zoom into the canvas (by doing the two finger swipe on the iPad) and then zoom out, the RAF fixes to take up only ~5ms total. 

After zoom trick: https://imgur.com/a/RSzmrTI

Is the PIXI canvas loosing focus, like as if I went to another tab on the web? I'm not sure what is happening here, thanks for any help! 🙂 

Hi I'm trying to add  onscreen buttons to move my sprite around my website. 

https://alfielytorres.github.io/hackercastle/

right now my code is as follows 

//load keyboard
class Keyboard {
	constructor() {
		this.pressed = {};
	}
	watch(el) {
		el.addEventListener('keydown', (e) => {
			this.pressed[e.key] = true;
		});
		el.addEventListener('keyup', (e) => {
			this.pressed[e.key] = false;
		});

	}



app.loader.load((loader, resources) => {
	// create a new keyboard instance
	let kb = new Keyboard();
	kb.watch(app.view);

.....

});



...

	//Jumping
		if (characterPosition.vy < 0) {
			characterPosition.y += characterPosition.vy;
		}
		if (!kb.pressed.ArrowUp && touchingGround && characterPosition.jumped) {
			characterPosition.jumped = false;
		}
		if (kb.pressed.ArrowUp && touchingGround && !characterPosition.jumped) {

			characterPosition.vy = -19;
			characterPosition.jumped = true;
		}

		//Right
		if (kb.pressed.ArrowRight) {
			characterPosition.direction = 0;
			characterPosition.vx = Math.min(8, characterPosition.vx + 2);
		}
		if (characterPosition.vx > 0) {
			characterPosition.vx -= 1;
		}
		//Left
		if (kb.pressed.ArrowLeft) {
			characterPosition.direction = 1;
			characterPosition.vx = Math.max(-8, characterPosition.vx - 2);
		}
		if (characterPosition.vx < 0) {
			characterPosition.vx += 1;
		}

Hi guys, someone could help me to find a right way to implement slider for increasing or descreasing volume?

i mean vertical slider (sorry i cannot upload screen) like this

https://www.i-programmer.info/news/85-humour-/10847-silly-sliders-compete-to-create-the-silliest-volume-control.html

thanks

Hi,

I'm doing a web configurator based on Pixi and Vuejs.
I've used pixi v5 but for those not support Webgl
and for some automatization (Puppeteer screenshot for example)
I've prefer install pixi-legacy.

My issue is about masking. 
I've got a Graphics (a rectangle with backround) and I apply to it a Sprite like mask.
In Pixi v5 it works well but in pixi-legacy it doesn't.
I use simply 

where instance is the ref of my 

If you have some suggestion I'm glad!

Thanks in advance and regards,

Davide

Hello, I am a Korean developer.

I play animation through pixi-spine.

The problem is, I want to turn off anti-aliasing because my spine is low resolution

 When you false antilias to an option on canvas,

other objects look like pixels, but spines don't.

What should I do?

Even if the translation is unstable, please understand.

Hello, I have around 15 spines on screen. FPS in chrome is in the 20s, firefox and canary are rock solid 60 fps. Removing spines (or swapping them for static images) will make Chrome hit 60 fps. I believe this has been recently (3 months ago or so) introduced in one of chrome updates. Using PIXI 4.8.8,  Pixi-spine 1.5.16,  and chrome  75.0.3770.142 64 bits.

Anyone else encountered this issue?

Hi everyone,

I began looking for ways today to recreate this affect:

Theres a red image, a blue image, and the black is where the overlap. I wanted a draggable canvas where the black area appeared as you dragged the blue image around over the red one.

I immediately thought to use pixijs and began looking into masking the black image.

Here is what I came up with: https://www.pixiplayground.com/#/edit/7~KRCG4gBR_GmsYZVSUsn  (The transparent images appear to have problems in pixiplayground but they are working in my project's implementation).

All 4 image links, the red, blue, black(black version of red) and mask(black version of blue) can be found in the playground above.

If I apply a Graphic mask of just a black rectangle it works fine - but shows all of the black image of course. But if I use a black version of the blue image as a mask, the black image just never appears.

Should I be masking this for a sprite mask with transparency a different way?

Any help is appreciated. 

I'm following the directions in the documentation to the T here, and I'm just not getting why this isn't working.

 

 var state, bunny, sheet;
// Create our application instance
var app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0x2c3e50
});
document.body.appendChild(app.view);

// Load the bunny texture
PIXI.Loader.shared.add("sprites/spritesheet.json")
    .load(spriteSetup)
    .load(startup);

function spriteSetup(){
    sheet = PIXI.Loader.shared.resources["sprites/spritesheet.json"].spritesheet; 
}

function startup()
{

    bunny = new PIXI.Sprite(sheet.textures["bunny.png"]);
}

with this I'm getting "TypeError: sheet is undefined"

Why..? The directions on the documentation say:

 

PIXI.Loader.shared.add("images/spritesheet.json").load(setup);

function setup() {
  let sheet = PIXI.Loader.shared.resources["images/spritesheet.json"].spritesheet;
  ...
}

What am I missing here?... Why is sheet coming up undefined for me? Particuarly, in the console the part where it comes up "undefined is at the very end, that "spritesheet" bit. That property/method just isn't there.

I'm wanting to blow past this here, but PIXIv5 has been giving me a lot of little issues like this. I used to be able to create new applications so easily, now I'm getting hung up forever over the dumbest things.

 

Hi guys, I'm having an issue with PIXI and IE11, my sprite are not rendering... I'm using like that : 

var texture   = new PIXI.Texture.fromImage(url);

            // Create three Sprite for each mask
            var sprite = [];
            for(var i =0;i<3;i++) {
                sprite[i]     = PIXI.Sprite.fromImage(url);

                sprite[i].width = app.screen.height;
                sprite[i].height = app.screen.height;

                // Add the sprite to the container           
                imageContainer.addChild(sprite[i]);

            }

I'm using PIXI v4, and based on the example from the website... I'm maybe missing something.

when I use a background colour it's showing, it's just not rendering the image. It's working on Chrome and Firefox.

Cheers !!

I downloaded https://pixijs.io/examples/#/sprite/video.js and of course it worked fine. I'd like to play an m3u8 though, such as https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8. I tried modifying the texture creation in a few different ways:

    const texture = PIXI.Texture.from('https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8');
    const texture = PIXI.VideoBaseTexture.fromUrl('https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8');
    const texture = PIXI.VideoBaseTexture.fromUrl({ src: 'https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8', mime: 'application/vnd.apple.mpegurl' });

None of these worked though (using Chrome in Windows), so how should I modify the sample program to get it to play this m3u8?

I tried to draw a rectangle like this:

graphics.lineStyle(2, 0xFF00BB, 1);
graphics.beginFill(0xFF00BB, 0.25);
graphics.drawRoundedRect(150, 450, 300, 100, 15);
graphics.endFill();

But it does not show up on my screen. I use pixi layers and I guess it is on the lowest layer so it gets covered by my background image.

How can I make it be drawn on top ? Can I assign a pixi parentgroup as well?

I have to use filter of pixi js like AdjustmentFilter. I got an issue with MAC, I initailised canvas, then I put effects when canvas is loaded. After adding green in filter variable I tied to export my canvas. I got a bad image as you can see bellow

// Basic image

// Exported canvas

//Some code

var W = window.innerWidth


$(document).ready(function() {

    const app = new PIXI.Application({
        width: W,
        height: W / 2
    });

    document.body.appendChild(app.view);

    // Inner radius of the circle
    const radius = 100;

    // The blur amount
    const blurSize = 32;

    app.loader.add('grass', 'grass.jpeg');
    app.loader.load(setup);

    function setup(loader, resources) {
        var containerBG = new PIXI.Container()  
        var containerBlur = new PIXI.Container()

        app.stage.addChild(containerBG);
        app.stage.addChild(containerBlur);

        const background2 = new PIXI.Sprite(resources.grass.texture);
        app.stage.addChild(background2);
        background2.width = W;
        background2.height = W / 2;
        containerBG.addChild(background2);

        var filter3 = new KawaseBlurFilter()
        filter3.blur = 12
        filter3.quality = 5

        var filter4 = new AdjustmentFilter()
        filter4.green = 5

        const background = new PIXI.Sprite(resources.grass.texture);
        background.width = W;
        background.height = W / 2;
        containerBG.addChild(background);
        background.filters = [filter4]

        var circle = new PIXI.Graphics()
            .beginFill(0xFF0000)
            .drawCircle(500, 500, radius)
            .endFill();

        containerBlur.addChild(circle)
        background.mask = containerBlur;

        var exportCanvas = app.renderer.plugins.extract.canvas(containerBG)
        console.log(exportCanvas.toDataURL("image/jpeg"))


        app.stage.interactive = true;
        app.stage.on('mousemove', pointerMove);

    }

})

If you need more details, I can gie you more, thank you in advance !

Hi

I am trying to move a Graphic out of its Container and add it into the main stage, but once it's done, the position, angle, and scale of the Graphic are reset back to whatever was the default info of the Graphic before it was added to the Container.

The container is interactive, can be moved, scaled and rotated.

Is there a way to preserve that information, most importantly the angle (or rotation) of the Graphics after they are moved to another container, in this case, the main stage?