I am getting this error in my game only on IOS with Cordova on PIXI 5.1.1 with Webgl 2.0 (It works on Google Chrome perfectly fine). All my sprites and graphics get loaded to the screen but when the RAF should start it gets this error and doesn't continue. https://imgur.com/a/lqVDzdA

Maybe it's something my IOS with Cordova is lacking from the requirements for Webgl 2.0 Specifications? https://www.khronos.org/registry/webgl/specs/latest/2.0/#3.4

Thanks for any advice! 🙂

Hello,

today I am trying to implement extracting images that certainly exceed the per-texture memory. So tiling is probably the only solution to this issue. I was thinking how to actually solve this and came up with asing the renderer to render tile-wise to texture. However, the code below doesnt really work. I am not sure how the texture vs. container transforms are intended to work

private _extractTiles(app: PIXI.Application, container: PIXI.DisplayObject, maxTileWidth: number, maxTileHeight: number) {
    const bounds = container.getBounds();
    const width = bounds.width;
    const height = bounds.height;
    console.warn('Bounds', width, height)
    const numRows = Math.ceil(width / maxTileWidth);
    const numCols = Math.ceil(height / maxTileHeight);
    console.log(numRows, numCols)

    for (let tileX = 0; tileX < numRows; tileX++) {
      for (let tileY = 0; tileY < numCols; tileY++) {
        // const tileWidth = Math.min(tile)
        const tileWidth = Math.min(maxTileWidth, width - tileX * maxTileWidth);
        const tileHeight = Math.min(maxTileHeight, height - tileY * maxTileHeight);
        console.warn('Before tilingTexture', tileWidth, tileHeight)
        const tileTexture = PIXI.RenderTexture.create({ width: tileWidth, height: tileHeight });
        const dX = tileX * maxTileWidth;
        const dY = tileY * maxTileHeight;

        const tf = container.transform.localTransform.clone();

        app.renderer.render(container, tileTexture, true, tf )

        // Debug Sprite :)
        const sprite = new PIXI.Sprite(tileTexture);
        sprite.x = 100;
        sprite.y = 100;
        app.stage.addChild(sprite)

        // Using the extract module later on...
        // TODO
      }
    }

  }

I was looking through the Loader class, and it seems that in order to load an asset, I need to name each file, like in:
loader.add('example-sprites', 'example-sprite-sheet.json');

Is it possible to load all of the files in a folder without specifying each one by name? I know that I'd like to cache all the files within a specific folder, but I don't actually know what the filenames are prior to loading. 

If this isn't possible, what would be the best practice for this sort of situation when the files aren't known?

Really appreciate any advice on this-- thanks in advance!

From the Example of Pixijs SpineBoy, is there a way that SpineBoy can Follow Mouse Movement, i want his gun to follow mouse movement. can i control that using his json file? is there any other way around?

Hello, 

I work at a startup that makes games for Children with special needs. I'm currently designing a coloring book app, and I set my mind on using Pixi.js for the task but I kinda am lost right now.

The game should pretty much work like the scratchcard example(https://pixijs.io/examples/#/demos-advanced/scratchcard.js) except for when the user changes the current brush, the image to reveal should change but changing its texture directly changes the previously scratched parts, they should remain the previous image to reveal, so basically what I'm trying to do is to copy the current state of the canvas to the background and change the image to reveal but somehow I couldn't manage to pull off the task although it sounds fairly easy. I couldn't find my way out of the documentation either, so maybe if someone knows how to tackle this issue, I'd be very glad. The code I came up with so far is here,

import { Point } from "../types/types";
import * as PIXI from "pixi.js";
import { tsParenthesizedType, thisExpression } from "@babel/types";

export default class Drawer2 {
  group: any;
  currentColor: string;
  currentWidth: number;
  onShape: boolean = false;

  //PIXI RELATED STUFF
  pixiApp: PIXI.Application;
  brush: PIXI.Graphics;
  renderTexture: PIXI.RenderTexture;
  historyRenderTexture: PIXI.RenderTexture;
  renderTextureSprite: PIXI.Sprite;
  historyRenderTextureSprite: PIXI.Sprite;
  renderContainer: PIXI.Container;
  dragging: boolean = false;
  imageToReveal: PIXI.Sprite;
  background: PIXI.Sprite;
  resources: any;

  constructor(color: string, width: number) {
    this.currentWidth = width;
    this.currentColor = color;
    this.pixiApp = new PIXI.Application({
      width: window.innerWidth,
      height: window.innerHeight,
    });
    console.log(this.pixiApp.stage);
    document.body.appendChild(this.pixiApp.view);
    this.brush = new PIXI.Graphics();
    this.brush.beginFill(0xffffff);
    this.brush.drawCircle(0, 0, 50);
    this.brush.endFill();
    this.pixiApp.loader.add("t2", "/textures/wrapping.jpeg");
    this.pixiApp.loader.add("t1", "/textures/white.jpg");
    this.background = new PIXI.Sprite();
    this.imageToReveal = new PIXI.Sprite();
    this.renderTexture = PIXI.RenderTexture.create();
    this.historyRenderTexture = PIXI.RenderTexture.create();
    this.renderTextureSprite = new PIXI.Sprite();
    this.historyRenderTextureSprite = new PIXI.Sprite();
    this.renderContainer = new PIXI.Container();
    this.pixiApp.loader.load(this.preparePixi.bind(this));
  }

  convertFromHexToNumericColor(color: string) {
    return parseInt(`0x${color.replace(/#/g, "")}`);
  }

  changeColor(color: string) {
    this.imageToReveal.tint = this.convertFromHexToNumericColor(color);
    this.brush.clear();
    console.log(color);
    this.brush.beginFill(this.convertFromHexToNumericColor(color));
    console.log(`Hex color:${this.convertFromHexToNumericColor(color)}`);
    this.brush.drawCircle(0, 0, 50);
    this.brush.endFill();
  }

  changeWidth(width: number) {
    this.currentWidth = width;
    this.brush.width = this.currentWidth;
    this.brush.height = this.currentWidth;
  }

  pointerMove = (event: any) => {
    if (this.dragging) {
      this.brush.position.copyFrom(event.data.global);
      this.pixiApp.renderer.render(
        this.brush,
        this.renderTexture,
        false,
        undefined,
        false
      );
      console.log("pointerMove");
    }
  };

  pointerDown = (event: any) => {
    this.dragging = true;
    this.pointerMove(event);
    console.log("pointerDown");
    console.log(`Current brush with is ${this.brush.width}`);
  };
  pointerUp = (event: any) => {
    this.dragging = false;
    console.log("pointerUp");
    this.snap();
  };

  snap() {
    this.historyRenderTextureSprite.texture = this.renderTexture.clone();
    this.renderTexture = PIXI.RenderTexture.create({
      width: this.pixiApp.screen.width,
      height: this.pixiApp.screen.height,
    });
    this.renderTextureSprite = new PIXI.Sprite(this.renderTexture);
    this.historyRenderTexture.update();
    this.renderTexture.update();
  }

  preparePixi(loader: any, resources: any) {
    this.resources = resources;
    this.background = new PIXI.Sprite(this.resources.t1.texture);
    this.background.name = "background";
    this.imageToReveal.tint = this.convertFromHexToNumericColor(
      this.currentColor
    );
    this.pixiApp.stage.addChild(this.background);
    this.background.width = this.pixiApp.screen.width;
    this.background.height = this.pixiApp.screen.height;

    this.imageToReveal = new PIXI.Sprite(this.resources.t1.texture);
    this.imageToReveal.name = "imageToReveal";
    this.pixiApp.stage.addChild(this.imageToReveal);
    this.imageToReveal.width = this.pixiApp.screen.width;
    this.imageToReveal.height = this.pixiApp.screen.height;

    this.renderTexture = PIXI.RenderTexture.create({
      width: this.pixiApp.screen.width,
      height: this.pixiApp.screen.height,
    });

    this.historyRenderTexture = PIXI.RenderTexture.create({
      width: this.pixiApp.screen.width,
      height: this.pixiApp.screen.height,
    });

    this.renderTextureSprite = new PIXI.Sprite(this.renderTexture);
    this.historyRenderTextureSprite = new PIXI.Sprite(
      this.historyRenderTexture
    );
    this.pixiApp.stage.addChild(this.historyRenderTextureSprite);
    this.pixiApp.stage.addChild(this.renderTextureSprite);
    this.imageToReveal.mask = this.renderTextureSprite;
    this.pixiApp.renderer.render(
      this.historyRenderTextureSprite,
      this.historyRenderTexture
    );

    this.pixiApp.stage.interactive = true;
    this.pixiApp.stage.on("pointerdown", this.pointerDown);
    this.pixiApp.stage.on("pointerup", this.pointerUp);
    this.pixiApp.stage.on("pointermove", this.pointerMove);
  }
}

I have created a small game using Pixi js  ...I'm facing a problem of character movement.. I want my character to jump when I press up arrow to avoid an obstacle..the position of my character is manually set like

Quote

 

 

 

 

Quote

character = new Sprite(resources["c.png"].texture);

character.width = 50;

character.height = 80;

character.x = 60;

character.y = 255;

character.vx = 0;

character.vy = 0;

game.addChild(character);

using keyboard function

When i press up arrow..character suddenly goes up  until i release a button..when i release a up arrow it comes down in a fraction of seconds ..i need help regarding smooth jump...new in pixi js..thanks

Hello.
I started learning pixi a week ago. I easily managed to create sprites, but couldn't set up event handlers. Now I think that the problem is in latest release of pixi.

Example:
http://pixijs.github.io/examples/index.html?v=v4.0.3#/demos/interactivity.js - sprites are clickable
http://pixijs.github.io/examples/index.html?v=v4.1.0#/demos/interactivity.js - only 'mouseover' events are working

Should I switch to previous version, or set up handlers differently?

Hello all,

Does anybody know if it is possible to detect when a video that is loaded has completed? Or even some basic detection and control (onComplete, onStart, play, stop). I am trying to create a media slideshow that supports images and mp4's. I have built a similar slideshow in the past with Timeline Max but it appears that there is no support for videos in the JS version. This is what I have so far (Just a quick prototype to build on).

let renderer;
let stage =  new PIXI.Container();
let button;
const loader = PIXI.loader;

renderer = new PIXI.CanvasRenderer(1024, 768);
document.body.appendChild(renderer.view);

load();


function load()
{
    loader.add('box', 'assets/yellowBox.png')
        .add('movie', 'assets/testVideo.mp4')
            .load((loader, resource) =>
            {
                onAssetsLoaded(resource);

            })


}


function onAssetsLoaded(resource)
{
    console.log('loaded');

    // Video stuff
    let videoData = resource['movie'].data;

    let videoBaseTexture = PIXI.VideoBaseTexture.fromVideo(videoData);

    let videoSprite = PIXI.Sprite.from(videoBaseTexture);
    stage.addChild(videoSprite);
}

Hi guys,

After skimming through the forum, I really couldn't find any sound information about the mobile game development with PixiJS. I used Starling before and had success with it. I don't want to use Unity for my next game as it feels somewhat overkill for a word game I'm going to create and coding the game with TypeScript / JavaScript sounds really nice. 

Some questions come to my mind are:

1. What are you guys use to publish your WebGL games to Google Play Store / AppStore?

2. How's the performance of the games, are you happy with it? Are you able to provide near native feel to your players?

3. I see that CocoonJS was a popular option to publish the games to devices but as it's gone and no more an option, how do you create native apps, Cordova?

4. Do you have any experience with In App Purchases with Cordova? Is it a seamless work or did you have headaches trying to implement iap?

Thanks for the help

Hi Everyone!

`const loader = PIXI.loader;` is giving me a deprecation warning, but `const loader = PIXI.loader.shared` is coming up `undefined`.

Can anyone tell me where the loader is hiding in v5?

Thanks!

Hi Everyone,

Just letting you know I'm busy updating my old Pixi game loop, Smoothie, from Pixi v3 to v5:

https://github.com/kittykatattack/smoothie/tree/dev

I'd appreciate any contributions or improvements. 

Feel free to PR minor tweaks, but for any feature changes or major refactoring let's discuss those in the Issues.

Thanks!!!

kk.

First time HTML5 dev here ... but I do have a background making games for other platforms. I'm currently establishing some foundational parts so I can build my first game. The current part I'm working on is handling resizes to the window. During this process, I was using one texture. I noticed that the image was drawing larger than it should. My code to create the application is:

const app = new PIXI.Application({
    width: gameArea.width,
    height: gameArea.height,
    view: <HTMLCanvasElement> document.getElementById('game-canvas'),
    antialias: true,
    transparent: false,
    backgroundColor: 0xFFFFFFFF,
    forceCanvas: canvasType == "canvas",
    resolution: window.devicePixelRatio});

As you can see, I am using `devicePixelRatio` for the resolution. I'm on a Mac, so this is 2. I realized the issue was needing an `@2x`. Once I did this, the image rendered at the correct size.

I recall reading that some Android devices have non-integer `devicePixelRatio` values. In these particular cases, what is the proper `@` suffix to use? For example, do you round down? Or does texture loading support modifying the resolution scale upon load or after it's been loaded? I'm trying to decide if I'm better off setting the resolution to 1 and handling resolution scaling myself. I've done that for other projects.

Another possible issue I could see was that I was going to probably have different scaled versions of assets depending on the overall size of the window. Let's call them lo, med, and high. Would this also imply I'd need extra sets (eg. @2x, @3x, @4x) of these sizes? 

Thanks!

Hi Everyone,

Just letting you know I'm busy updating SpriteUtilities to Pixi v5:

https://github.com/kittykatattack/spriteUtilities/tree/dev

PRs and bug fixes welcome!

Is it possible to tell pixi to render children which are not in Container.children array? They are in separate  Content.array  Thanks!

Hello, in my project i need to create a lot of sprites (we talking about 500 + something) every frame and destroy in next but alas, it seems that i dont dispose them properly and framerate drops extremely quickly, albeit at start it seems okayish

I add each to some sprites container and clear it with

sprites_container.removeChildren();

i dont keep references to sprites

Id appreciate help regarding this issue

I'm working on a project in PIXI v4, using AdvancedBloomFilter. It works great after it loads. But right when it first renders, there's a performance hit. Chrome Devtools shows the delay in AdvancedBloomFilter's apply function, which deeper down has a long call to getShaderParameter. My understanding is that this is happening at compilation time for the shader, querying for success. What's the best approach to improve performance here? What could be causing the delay? Is it expected? This delay is causing stutter at a crucial moment. If the delay is unavoidable, is there a strategy for pre-loading? Should I set the stage, add the filters, and just keep it at alpha=0 until I'm ready for it? Any advice greatly appreciated.

I have some sprites, I want to overlay one of them with a picture,  looks like multiply blendModel,  but without affecting the other sprites.

I tried use mask，but it makes the sprite transparent. Is there any way can do this？

https://gyazo.com/4a44909a40952ac6f5182d328f55d754

I've spent more time than I care to admit figuring it all out. I'm calculating a convex hull around a sprite and then slicing it up into matterjs driven little orc pieces.

I'm not very happy with one thing yet. Each of these pieces is a separate Sprite and it has it's own Graphics object as a mask. I feel that if I were to have a couple of these going at the same time rendering could get expensive. 
Teach me to do better I should be learning react or something to get a dev job, but here I am cutting up orcs.

Please tell me, what is the best physics library for Pixi.js or commonly used and do they all work with pixi.js v5?

I'm prototyping code to draw menus. Essentially the menu is a rounded rect with stroke lines. The interior rows are the individual menu items. Menu items are based on a colored rectangle backing with icon and/or text. Each menu item as well as the menu panel can have their own colors.

This menu is generated "programmatically" based on metadata. As part fo the process, the max required width for each menu item is computed. The overall size of the menu panel is based on this.

In my tests, the menu panel and the menu items use different colors. Thus it's easy for me to see gaps.

I have noticed that my expectations of what the panel size should be doesn't match. What I'm seeing is the menu items width are "smaller" than the interior of the fill of the panel. I see this by seeing a leading and trailing gap between the menu item and the stroke lines of the rounded rect.

Code to create the panel looks like the following:

            this.panel = new PIXI.Graphics();
            this.panel.lineStyle(this.menuDef.panel.stroke.thickness, this.menuDef.panel.stroke.color.color, this.menuDef.panel.stroke.color.alpha);
            this.panel.beginFill(this.menuDef.panel.backgroundColor.color, this.menuDef.panel.backgroundColor.alpha);
            this.panel.drawRoundedRect(0, 0, details.width + this.extendedWidthCorr + this.menuDef.panel.stroke.thickness * 2, details.height + this.extendedHeightCorr, details.radius);
            this.panel.endFill();
            this.root.addChild(this.panel);

Current thickness is 4 and details.width is 190.

You can ignore the "extended*Corr" items. They are effectively 0 right now and will be used later since I plan on allowing the panel to be anchored to an edge, and in that case, I don't want to see the rounded corners along the edge. Also, ignore the inconsistency of width and height. I'm currently focusing on why the width is not proper.

Note that when I create the application I have been using a resolution of 1. I'm on a Mac, so the devicePixelRatio is actually 2. I've also as a test set this to window.devicePixelRatio and have the same results.

When I define stroke thickness, is that "pixel accurate" or or rather pixel close enough? It does not appear that is the case. The scale ratio of fill to stroke lines are different by roughly a factor of 2.

Observationally I have found that if I have the menu item width and the width used to create the panel be the same:

- If there is no lineStyle, then the width of both the panel and menu item is the same (they properly overlap which in this case means the widths are identical and overlap)

- If I use lifeStyle, the menu panel is slightly larger than the menu item. It looks like it is close to one lineStyle width (which also then seems to confirm my "roughly a factor of 2" from above). I also noticed that even though the menu items are drawn at x = 0 (anchor is upper left), when line styles are drawn, and even though the panel is also at 0, 0 ... The starting draw positions are not the same. They should be aligned properly. What I see in this case is that the menu item background is slightly smaller than the menu panel and the menu panel appears to be offset slightly in the draw, even though the x/y of the panel is 0, 0 just like the menu items (they are all children of the same container).

I was going to attach an example, but I get an error indicating can't create some directory for uploads and to contact for assistance.