https://github.com/pixijs/pixi.js/pull/2414

I made a very scary PR for pixiv4, stil work in progress. It takes care of multiple things:

1. No need to calculate matrices for objects every tick: only when they position/scale or something else was changed
2. Same with bounds
3. Same with interaction
4. Sprite size doesnt change scale
5. Camera projection doesnt change transforms. Object transform wont be re-calculated if camera was scrolled or rotated.
6. DisplayObject can have pre-calculated local bounds that will be used to speed up interaction process.

Things that I'm preparing right now:

1. Z-indices, displayorder for camera. 
2. culling based on bounds for camera
3. 3d transforms. See that gif at https://www.kickstarter.com/projects/chimeraco/lux-a-survival-mmorpg-pc-mac-xb1-ps4 ? Its pixi-flip.
4. new version of pixi-spine that will use all that stuff.

I need people who understand WTF is I am doing and who can tell me what can go wrong with it, because that's one of the most sofisticated things that I've made in my life.

I recently upgraded to pixi v4.0.1 from pixi v3.x.x.  Since then some simple code that was just rendering a colored square has stopped working when using the WebGLRenderer.  Relevant code below:

var PlayerObject = function(uniqueId, world, x, y, velx, vely, clientPlayerObj) {
    // ...

    var color = Math.floor(Math.random() * 0xFFFFFF);
    this.renderObject = new PIXI.Graphics();
    this.renderObject.beginFill(color, 0xFF);
    this.renderObject.drawRect(x * 16, y * 16, 32, 32);

    // ...
};

World.prototype.addGameObject = function(gameObj) {
    // ...

    if (gameObj.renderObject != null) {
        this.renderRoot.addChild(gameObj.renderObject);
    }
};

I'm simply creating a PIXI Graphics object, drawing a rectangle and then adding the Graphics object as a child to my PIXI Container.  The render loop simply calls render on the PIXI Container, of course thus rendering all the Container's children as well.

In the CanvasRenderer this works exactly as expected, a 32x32 randomly colored rectangle being drawn at a random point (the x and y coordinates are randomly generated).  In the WebGLRenderer however nothing happens at all, they are never rendered despite all the same processes seemingly occurring when I step through the code (might have missed something).  Everything else that should be rendered displays properly.

Any idea what's up here?  Was there something specific to Graphics objects that changed which could be causing this to stop working in pixi v4?

Hi.
I have a question about texture batching in pixi v4. I'm developing mobile game with great amount of different skins (more than 200).
I have expirience with gl frameworks (starling), and as usually I put textures to different texture atlaces according to scene layers. This approach allows to batch sprites from one atlas layer by layer.
Is it suitable approach for pixi? As I read here Pixi4 automatically batch sprites. But how it detects which one should be batched? Could I disable autobatching and control this process manually?
Which way to split textures to atlaces to maximize performance in pixi4? Any restrictions exists for atlases sizes?
Also drawcount property disappeared from renderer in v4. I've add it to sources as i can (before each gl.drawElements call), but it's not very comfortable to add. Hope to see this parameter again in next versions

Hi, I've got some problem here.

I'm making prototype of document rendering solution and now i'm stuck because of rendering performance issue.

Shortly:

I've got opentype.js, that loads font and parses it. Then, when i want to render some word, i'm creating TextContainer, that extends pixi.Container and filling it with Glyph instances (one for each symbol).

Every Glyph is extended pixi.Graphics and looks like this

class GlyphRenderModel extends pixi.Graphics {
    constructor(font, char) {
        super();

        this.meta = {
            width: 0
        };

        this._fillGlyph(font, char);
    }

    getInstance() {
        return new GlyphRenderModelInstance(this);
    }

    _fillGlyph(font, char) {
        let charCode = char.charCodeAt(0);
        let glyphIndex = font.tables.cmap.glyphIndexMap[charCode];

        if (!charCode || !glyphIndex) {
            return;
        }

        let glyphModel = font.glyphs.glyphs[glyphIndex];
        let renderModel = font.getPath(char, 0, 0, DEFAULT_FONT_SIZE);

        this._convertPathToGraphics(renderModel);
        this.meta.width = glyphModel.advanceWidth / glyphModel.path.unitsPerEm * DEFAULT_FONT_SIZE;
    }

    _convertPathToGraphics(path) {
        // some convert from opentype format
        // creating GraphicsData here (lineTo, bezierCurveTo, quadraticCurveTo)
    }
}

GlyphRenderModelInstance here is simplest thing on earth: 

class GlyphRenderModelInstance extends pixi.Graphics {
    constructor(glyphRenderModel) {
        super();
        this.renderModel = glyphRenderModel;
    }

    renderWebGL(renderer) {
        // plugin, that renders this.renderModel with transformations of current object
        let renderPlugin = renderer.plugins[RENDER_PLUGIN]; 

        renderer.setObjectRenderer(renderPlugin);

        renderPlugin.render(this);
    }

    getWidth() {
        return this.renderModel.meta.width * this.scale.x;
    }
}

It gets link to GlyphRenderModel and renders in directly to parent with transformations:

let textModel = new TextRenderModel(); //extended pixi.Container

textModel.setFill(fill);
textModel.setFontSize(fontSize);
textModel.position.set(x, y);

let letterX = 0;

for (let index = 0; index < charsCount; index++) {
    let char = chars[index];
    let glyph = this.getGlyph(font, char).getInstance();

    if (index) {
        letterX += glyphs[index - 1].getWidth(); //position without kerning
    }

    glyph.x = letterX;
    glyphs[index] = glyph;

    textModel.addChild(glyph);
}

This solution is good for memory, but has poor performance. Here is example for 1 page, on 20 pages it freeze:

Most of time takes calling webGL's binding and drawElements. (VectorArrayObject.active and VectorArrayObject.draw)

In my case I can't create sprites, because I need to have smooth scaling and vector paths is only solution. 

Also i can't create full copy of original Glyph, because it will eat a lot of memory, only link.

My question is - can i merge few Graphics elements into one or draw some Graphics in one draw call?

It looks weird, that i can't batch draw requests into one, because it's only case, when GPU can be very fast.

Hi,

I'm developing a multiplayer 2D shooter game with pixi.js and there's a few questions I have (more will follow in the future :-p).

1. I'm having issues making the view follow the user (the game area spans beyond the view portal). I've tried adjusting the stage pivot point to the target (player) position, but this gives very bad results (e.g. messes up the coordinates, is laggy, etc):

this.stage.pivot.x = (this.user.position.x - window.innerWidth/2);
this.stage.pivot.y = (this.user.position.y - window.innerHeight/2);

2. When creating a Text instance, I can give x and y coordinates to it, but I want to position it fixed at top-right corner. How can I do this without having to recalculate and reposition the text every time?

Is it possible to change the size of the particle container after it has been created? I have a situation where I need to render different amount of objects depending on the size of the canvas (which changes for example when entering fullscreen).

Maybe there is way to load tiled map or other map that have map editor with pixi.js?

So, I have set up my first shaders which just change colours.

Now I wanted to make a gradient shader but it won't work right.

It says: vTextureCoord is between 0 and 1. It is not. I apply the shader to some 16x16 Images, scaled to 2, and coords are way under 0.5.

To get the ALMOST right coordinate, I had to multiply it with 16. But also then, the gradient was a few pixels away from where they should be.

With x, it works "almost" right, but with y it works...not right. It's 1 in about the first quarter. (with *16.0, else it is black)

Can anyone explain that to me? PS: The screen is in a div with varying size (x) and 400px height.

It SHOULD work with that one, but if I copy that code, the above behaviour is given.

http://codepen.io/anon/pen/ORgkgY (not from me)

Thanks for your reply. Code is at work place, I will post it soon.

Alright, so as a little background knowledge, I started my days as a 2D game developer with flixel, so I'm used to how they did things.

How do animated sprites/Movieclips/idk work? I'm wanting to have a sprite with several animations (walking left, walking right, etc), and yet cannot seem to find a way to pack these images and then play certain frames.

If possible, I would like to not use the json format at all, because I'm using a more manual way (exporting frames from blender and merging them in gimp).

Ayaaaa

Thanks

Hi there,

I'm new to pixi, just started with a simple tutorial about building a parallax effect and directly ran into the first problem.

Using the TilingSprite, the resulting image has a flickering line where the edges touch. 

The problem only occurs using the WebGl Renderer.

Heres a Fiddle: https://jsfiddle.net/67rszmxb/1/

Here's a pic of how it looks on my screen:

I used the current pixi-release, version 4.0.2

Did I miss something, or is it a bug ?

Help is appreciated, thanks.

Hi there.
I'm new to PIXI.js - started few days ago by reading whole step-by-step guide on the official github.
Basically I tried to render my tiled map and got stuck.

To specify my problem:
I've got an image "tileset.png" that stores tiles (each 32x32 pixels, the whole image is 128x32 which probably doesn't matter).
I've got an JSON file that stores information about each tile (coordinates where to take each tile from - x, y, width, height, and also some other properties).
I've got a regular two-dimensional array that simulates the map. For example:
 

var map = 
[
	[2, 2, 2, 2, 2, 2],
	[2, 0, 0, 0, 0, 2],
	[2, 0, 0, 0, 0, 2],
	[2, 0, 0, 0, 0, 2],
	[2, 0, 0, 0, 0, 2],
	[2, 0, 0, 0, 0, 2],
	[2, 2, 2, 2, 2, 2],
];

I'll skip the init and assignments.
Now I consider the main problem to be my approach (which I also consider very convenient and easy) - in a double "for" loop I read the map array and I add each tile to the stage. The code for that looks something like this:
 

var texture = loader.resources["tileset"].texture;
var s;

for rows
	for cols

		// I frame the texture to get the tile I'm interested in
		// for example air (x: 0, y: 0) or the ground (x: 64, y: 0)
		texture.frame = new PIXI.Rectangle( 64, 0, 32, 32 );

		// create sprite out of the framed texture
		s = new PIXI.Sprite( texture );

		// add the sprite to the stage
		stage.addChild( s );

		// Anakin vs Luke
		texture.frame = new PIXI.Rectangle( 32, 0, 32, 32 );

Now the struggle begins under "Anakin vs Luke" comment. The line is there just for explanations. It basically affects EVERY sprite in the stage. The result is that EVERY tile in the stage has the same sprite as the last tile. I get that it's caused by the sprites having all the same reference to the texture (which then I change, by framing, and affect them all in result). I also get that it's most likely an invalid approach. Here come the questions:

1. Is this approach any near to any solution to render the map? I want the map to be rendered using ONLY one image with my array and my json file.
2. If not, can it be easily done without any other libraries?

Hi,

I've been struggling to create a gradient filter over an sprite using shaders.

I have this and is working fine:

http://codepen.io/rhernando/pen/ORxWwO?editors=1010

On the other hand this code creates a nice gradient:

precision mediump float;

// start and end colors
vec3 color1 = vec3(0.0,0.0,1.0);
vec3 color2 = vec3(1.0,0.5,0.0);

void main( void ) {
    vec2 uvs = vTextureCoord.xy;
    vec3 mixCol = mix( color2, color1, uvs.y );
    gl_FragColor = vec4(mixCol, 1.0);
}

But I can't apply that gradient to the image as the first sample. I tried this, but it still generates a solid color on top of the image:

precision mediump float;

varying vec2 vTextureCoord;
varying vec4 vColor;

// start and end colors
vec3 color1 = vec3(0.0,0.0,1.0);
vec3 color2 = vec3(1.0,0.5,0.0);

uniform sampler2D uSampler;
uniform float customUniform;

void main(){
  vec2 uvs = vTextureCoord.xy;

  vec3 mixCol = mix( color2, color1, uvs.y );

  vec4 fg = texture2D(uSampler, vTextureCoord);

  fg = vec4(mixCol, 0.5);

  gl_FragColor = fg;
}

I'm not very familiar with the Shaders specific stuff, but definitely I'm missing something here. Any help will be appreciated.

Thanks,

Rodrigo.

Hey!, I have started learning Pixi.js.

What I am trying to do is fill the whole screen, but preserve the pixel art style and ratio.

I tried using renderer.resize() but it simply changes the viewport.

Suppose I have a game at 320x240 resolution, and my screen is 1366x768. So my game should zoom 3x and new resolution should be 960x720. But the new screen should use nearest neighbor scaling 

Quite a javascript newbie here so bare with me.

So I'm not sure what the differences are between the two if any. So is it recommended to always reload images with loader rather than using fromImage? 

On a non related note: I get an uncaught type error : cannot set property 'frame' of undefined. When I remove the setup call from the bottom, the error message goes away but I'm not sure why. If it ran again, shouldn't there be no errors? Thanks

let renderer = PIXI.autoDetectRenderer(416,416);

let rootStage = new PIXI.Container();
document.body.appendChild(renderer.view);


class Entity {
    constructor(img,id, type, hp, x, y, height, width, spdX, spdY){
        this.img = img;
        this.id = id;
        this.type = type; //for players it this reffers to player class, monsters is different
        this.hp = hp;
        this.x = x;
        this.y = y;
        this.height = height;
        this.width = width;
        this.spdX = spdX;
        this.spdY = spdY;
    }
    attack() {
        console.log("aatt");
    }
}

let gUpdate = () =>{
    //setInterval(gUpdate, 1000/20);
    renderer.render(rootStage);
};


let z;
let setup = () =>{
    let e = PIXI.utils.TextureCache[player.img];
    let rectangle = new PIXI.Rectangle(0,0, 32,32);
    e.frame = rectangle;
    z = new PIXI.Sprite(e); //PIXI.loader.resources[player.img].texture

    rootStage.addChild(z);
    gUpdate();
}

let player = new Entity("img/aa.png","p","pyro",100,0,0,32,32);

PIXI.loader.add(player.img).load(setup);
setup();

Is it possible to prepare spritesheet assets for PIXI that utilize multiple images, but a single json file.  I come from an extensive easelJS background and was able to accomplish this, but can't seem to figure it out for PIXI.

My app dynamically loads one of many possible sets of assets, so I never know how many json files I need to load for any chosen set. If the vehicle Juke is chosen, there could be juke0.json, and juke1.json.  If Altima is chosen, there could be altima0.json, altima1.json, and altima2.json..... and so on..... 

My gut says to just loop like 10 times and wrap some sort of try around each .add() call, but I don't want to go there if I don't need to.

Thanks for any help!  I really don't want to go back to easel...

Hi, I have some (limited) experience with libgdx, and I'm currently experimenting with PixiJS v4.

I'm trying to create (and possibly update in time) a Texture/Sprite from raw RGB data (e.g. UInt8Array), please lmk if this is possible?

Thanks!

Is there a way to get coordinates from 0...1 in filters that map to the actual viewing area rather than the texture size.

For example I want to tint an object so that it gradually changes color based on the distance from center point.

Doing that with this:

varying vec2 vTextureCoord;

uniform sampler2D uSampler;

void main(void)
{
	float dist = length(vTextureCoord - vec2(0.5, 0.5));
	gl_FragColor = dist * texture2D(uSampler, vTextureCoord);
}

Provides wrong results (sometimes correct) as the actual display area might not be in the 0-1 area.

One way to fix this would be to pass an uniform with the position and dimensions of current display. But I'm wondering if there's something that's built in to pixi already.

Hi all,

I have a sprite sheet, I want to make many sprites from this sprite sheet. Here is my implementation:

var ASSET_PATHS: string[] = [
  "assets/roguelikeSheet_transparent.png",
  "assets/roguelikeChar_transparent.png"
]

PIXI.loader.add(ASSET_PATHS).load(hasLoaded);

var texture1 = PIXI.utils.TextureCache["assets/roguelikeSheet_transparent.png"];

var rect1 = new PIXI.Rectangle(0*17,0*17,16,16);

texture1.frame = rect1;

var sprite1 = new PIXI.Sprite(texture);



var texture2 = PIXI.utils.TextureCache["assets/roguelikeSheet_transparent.png"];

var rect2 = new PIXI.Rectangle(3*17,5*17,16,16);

texture2.frame = rect2;

var sprite2 = new PIXI.Sprite(texture);

The code above is me trying to load two different sections of the same sprite sheet and make sprites from those sections. What happens is that:

texture2.frame = rect2;

overwrites sprite1's texture, thus both sprites become rect2's section.

For my Pixi Project, i need to display 4 short numbers:  15, 30, 45 and 60  over 200 times on my stage.

Also, on window resize - the text will get resized not based on linear window dimensions.

Because of this, i think it is a good strategy to create textures for those 4 numbers and use them when i create the sprites.

var minute = new PIXI.Sprite(minute_30_texture);

My Problem: i am not able to create Sprites from PIXI.Text("30").texture;

var texture = new PIXI.Text("30").texture;

var sprite = new PIXI.Sprite(texture);

the rendered sprite will not show anything. (using pixi 4.0.3)

Anyone with the same problem?

var mySpriteSheetImage  = PIXI.BaseTexture.fromImage("img/mySpriteSheet.png");

var spriteTexture1 = new PIXI.Texture(mySpriteSheetImage, new PIXI.Rectangle(x:0, y:0, width:32, height:32));

var spriteTexture2 = new PIXI.Texture(mySpriteSheetImage, new PIXI.Rectangle(x:32, y:0, width:32, height:32));

var spriteTexture3 = new PIXI.Texture(mySpriteSheetImage, new PIXI.Rectangle(x:64, y:0, width:32, height:32));

var mySprite = new PIXI.Sprite(spriteTexture1);

stage.addChild(mySprite);

The code above loads many sprites from a sprite sheet. This code was found here. Is there a better way to get the same functionality?