Hey everyone... I'm trying to understand the difference between Pixi's `anchor` and `pivot`
This is what I've been able to deduce so far...
Anchor shifts the origin point of the sprite's image texture, using a 0 to 1 normalized value.
Pivot shifts the origin of the sprite's x and y point, using pixel values.
Is this correct - or brain-dead? 
Hello, I have done a simple simple code example to hilight some default behaviour that seem abnormal to me.
var renderer = PIXI.autoDetectRenderer(800, 600);
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
var text = new PIXI.Text('0', { font: '35px Snippet', fill: 'white', align: 'left' });
text.position.set(20);
stage.addChild(text);
this.ind = 0;
requestAnimationFrame(animate);
function animate() {
renderer.render(stage);
var remove = stage.removeChildAt(0);
//remove.destroy(true);
var text = new PIXI.Text(++ind, { font: '35px Snippet', fill: 'white', align: 'left' });
text.position.set(20);
stage.addChild(text);
requestAnimationFrame(animate);
}
If you don't explicitly call the destroy method, you consume 3 mbytes of memory per seconds!
Seem weird to me that destroy method is not automatically called by garbage collector when there is no more reference on the text ?
Can someboy confirm the problem, or tell me where I am wrong?
Thank you!! Bruno
Hi, I've experimented, googled and read the API and I still can't figure this out even though it is extremely simple 
I want my image to remain in the center of my canvas as it becomes larger.
function init() { stage = new PIXI.Stage(0x66FF99); renderer = new PIXI.autoDetectRenderer(512, 384, document.getElementById("game-canvas")); var midTexture = PIXI.Texture.fromImage("resources/mid2.png"); mid = new PIXI.TilingSprite(midTexture, 256, 384); stage.addChild(mid); requestAnimFrame(update); } function update() { mid.scale.x *= 1.001; mid.tilePosition.y += 1.21; // I want it to remain centered as it gets larger, this attempt does not work: mid.position.x = (512 - mid.width) / 2 ; renderer.render(stage); requestAnimFrame(update); }Any help would be appreciated, I have already spent way too long trying to figure this out 
hi.
this is normal shot. loaded all and everything ok
this is not normal. because not loaded basetexture or not updated to basetexture to gpu
this image will be show like upper image. but very short time, under image can see.
so i want not drawing under image. if i can't check correct.. i wanna dray empty image.
many big images is loaded at starting time. and i updated to gpu by updateTexture function of renderer object;
and than i see under breaking texture for very short time(during not updated to gpu )
do you have any good idea please tell me..
Hey Everyone,
I am very new to Pixi and graphics programming in general... so I apologize in advance if this is elementary. But I am struggling to understand what is going on. I the 'stage' which is a PIXI.Container and to that, I am adding a "bgGraphics" (PIXI.Graphics) container where I am adding a grid pattern across the UI. Then I am adding another glyph (PIXI.Graphics) where I am drawing this using native shapes (right now just a rounded rectangle).
All was moving along great until I put to two together. See below
So I was thinking that if I drew the grid, then the rectangle, then the rectangle would "draw over" but they seem to be blending. I did stumble across blendMode but the description in the API docs didn't seem to help any. I am attempting to manually set the zOrder (grid to 5, rectangle to 10) but that didn't help.
Can anyone point me in the right direction? I'm at a total loss at this point.
I make some PIXI.Graphics objects and put it on my stage, which contains a TilingSprite as background, then I scale my background and my Graphics objects. They look nice because they all scale to the same point. Then I put the PIXI.Graphics in Sprites and add the sprites onto my stage, scale them again. This time only the background scales. Sprites don't scale with the background. What happens? The Graphics and Sprites objects are at the same position. But they behave differently during scaling. I hope I use the right way to create sprites.
My code:
const array = new Array(COUNT);
for (let i = 0; i < COUNT; i++) {
const x = randomInt(50, 100);
const y = randomInt(50, 100);
array[i] = new Graphics();
array[i].beginFill(0xD48CFA);
array[i].lineStyle(0);
array[i].drawCircle(x, y, 10);
array[i].endFill();
stage.addChild(array[i]);
}
for (let i = 0; i < COUNT; i++) {
const x = randomInt(50, 100);
const y = randomInt(50, 100);
const g = new Graphics();
g.beginFill(0xD48CFA);
g.lineStyle(0);
g.drawCircle(10, 10, 10);
g.endFill();
const rt = RenderTexture.create(g.width, g.height);
renderer.render(g, rt);
array[i] = Sprite.from(rt);
array[i].anchor.set(0.5);
array[i].position.set(x, y);
stage.addChild(array[i]);
}
First of all, sorry for my english.
I just started with Pixi and was studying tilemaps, but I'm having gaps between the tiles whenever I scale by the factor of 0.01.
Yes, i'm using PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST;
Here's what I I've got:
PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST;
PIXI.loader
.add('tileset', 'img/tileset.json')
.load(setupMap);
function setupMap() {
var mapData = []; // Omitting bidimensional array with tiles for the sake of the example
var map = new Container;
var tilemap = new PIXI.tilemap.CompositeRectTileLayer(0, [], true);
for(var coll = 0; coll < 100 * 48; coll++) {
for(var row = 0; row < 100 * 48; row++) {
if(mapData.hasOwnProperty(coll) && mapData[coll].hasOwnProperty(row)) {
tilemap.addFrame(tileset.textures[mapData[coll][row]], coll*48, row*48);
} else {
break;
}
}
}
map.addChild(tilemap);
stage.addChild(map);
}
// This fucks up everything
document.addEventListener('mousewheel', mousewheel, false);
document.addEventListener('DOMMouseScroll', mousewheel, false);
function mousewheel(e) {
var zoomOut = e.wheelDelta <= 0;
map.scale.set(map.scale.x + (zoomOut ? -0.01 : 0.01));
}
Hi everyone,
I'm extremely excited to share my latest side project with you. I call it aape. It is my version of an Adobe Animate PixiJS exporter.
Here are two demos of exported animations:
davidochmann.de/content/html/aape/aape.html
davidochmann.de/content/html/aape/runner.html
How it works:
The project is split into two parts. A JSFL script to export your current Animate timeline and a few JS classes to download and display the animation.
Your animation is build as usual. The only difference being that you have to explicitly tell aape which part of the animation should be exported as Bitmap. This is done by selecting the MovieClip in your Animate library and changing it to a Graphics object.
MovieClip labels and comments are also exported and can be used by executing the familiar gotoAndStop / gotoAndPlay methods.
After building your scene you execute aape form the toolbar. The export starts with the currently open MovieClip as root element.
A simple export generates three files. A PNG Atlas + JSON file containing image locations and a JSON object that describes the exported timeline (the library).
The files can than be loaded and added to the aape.Timeline object. It's prototype is the PIXI.DisplayObject. So you can easily add it to your existing display list.
The exporter currently doesn't parse vector graphics.
The tool is not yet finished. I'm still working on the Animate user interface and export options as well as a proper documentation.
I also haven't decided how I'm going to publish aape yet.
What du you think? Is this workflow still relevant to you? I'd love to get your feedback.
Cheers,
David
Hello dear PixiJS community,
finally i began to love pixijs 
now I want to
a ) outline a sprite (from a png file as a texture)
like ive done it here with canvas:
https://twitter.com/InsOp_de/status/514917023839944704
b ) change a certain color into another one (usually magenta or pink)
again, like in my example the blue square.
that way i dont have to make a sprite for every color, but use only one and
manipulate the image data.
With canvas i did it like that
// getting Stuff var imgData = game.canvasForegroundContext.getImageData(x, y, imageSize, imageSize); var data = imgData.data; //height of the image section var row = imgData.data.length/imageSize; var sur = { nw:-row-4,n:-row,no:-row+4, w:-4, o:+4, sw:+row-4,s:+row,so:+row+4 }; for (var i = 0; i < data.length; i += 4) { //surroundings if(data[i+3]!=255){ for(var key in sur){ j = i+sur[key] //ignore shadows, check if isnt already an outline if(data[j+3]>100 && data[j] != rgba.r && data[j + 1] != rgba.g && data[j + 2] != rgba.{ data[i] = rgba.r; data[i + 1] = rgba.g; data[i + 2] = rgba.b; data[i + 3] = rgba.a; } } } }and this was pretty ugly. is there already a filter or a function for this? or perhaps is there something like "imgData.data;" ?
So I think I'm running into a WebGL renderer bug, and I wanted to confirm that I'm not missing something stupid before I make an issue on the Github. Basically, when I use the WebGLRenderer, everything renders twice as big as when using the CanvasRenderer (see attachments). I suspect it might be an issue with setting the `resolution` to `window.devicePixelRatio`, which I did in the following way:
PIXI.settings.RESOLUTION = window.devicePixelRatio;
PIXI.loader.add([
"../static/img/mountain.png",
"../static/img/crown.png",
])
.load(function() {
window.renderer = new PIXI.CanvasRenderer(
$(window).width()/window.devicePixelRatio - 50,
$(window).height()/window.devicePixelRatio - 50,
{resolution: window.devicePixelRatio, antialias: true}
);
// etc.
}
I'm using a Macbook Pro (which has a devicePixelRatio on Chrome of 2), and swapping the `CanvasRenderer` with `WebGLRenderer` causes the blowup below. I'm using an @2x image for the mountain below, but not for another similar image. Am I doing something wrong?
While this isn't a huge issue for me right now, I would like to be able to use WebGLRenderer because I'm anticipating adding a lot of extra sprites to the screen and wouldn't mind performance.
Thanks!
I hope it also work in CanvasRenderer too because my game aims to play in HTML 5 canvas. Do you do that with PIXI.filters?
Hi,
I want to make an 2d topdown game that will have 3d buildings/depth.
Similar to GTA2.
What is the best way to build an 3d building?
I have found an 3d box that is made with PIXIjs V1.5
But I don't really understand their code. It's in the attachment. (force render in canvas to make it work)
I have never worked with 3d or 3d engines.
Can it be made with PIXI.js and also being able to render in canvas and WebGL?
Kind regards
To start, lets create a Graphics object.
const clip = new PIXI.Graphics();
clip.clear();
clip.beginFill(0xAAAAAB, 0.3);
clip.lineStyle(0);
clip.drawRect(0, 0, 80, 60);
clip.endFill();
There are getBounds() method and getLocalBounds() method in the PIXI.Graphics class. I guess one of these two methods are used to get a Rectangle bounds from the Graphics object. But which one? Is it getLocalBounds()? I find this one to be the nearest answer. So now we can use the `contains` method of PIXI.Rectangle to test if a point is in that rectangle.
What if my rectangle rotates to a certain angle? like:
clip.rotation = randomFloat(-Math.PI, Math.PI);
randomFloat(min, max) {
return min + Math.random() * (max - min);
}
Does my rectangle's getLocalBounds returns the correct bounds that rotates a angle? Say I want to build something like a radar that can scan dots around it. I use a very long rectangle and its pivot point is in one end and the other end just spin around the pivot point. Does the rotating rectangle's clip.getLocalBounds().contains(x, y) detect the scanned dots as it rotates? One step further, if my Graphics object also moves with a camera, which means the pivot point and the starting (x,y) of the rectangle changes all the time, I can still use this method right?
I see this referenced in everything:
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
How do I access these with PIXI?
Is it renderPIXI.gl.canvas and renderPIXI.gl.canvas.getContext?
So...
I'm playing around with pixi-tilemap and so ar it was the best performance implementation to render tiles 48x48. Unfortunately, when I implemented zoom support for the map I started dealing with something like 70k+ tiles for the screen (1920x1080 screen with stage.scale 0.1). And we're talking just one layer.
I've read alot about this idea but I would like to hear what you all have to say and suggest, and maybe some examples.
Relevant reads I've already looked
- http://gamedev.stackexchange.com/questions/15612/howd-they-do-it-millions-of-tiles-in-terraria
- http://evilmousestudios.com/optimizing-javascript-games/
- http://www.html5gamedevs.com/topic/6901-large-tile-maps/
- http://www.html5gamedevs.com/topic/16001-how-should-i-render-a-tile-map/
I know its retarded to render everything over and over again, juts want some help to point me to the right direction.
I also tryed to add chunk support for the update function, trying to make a chunk texture so I would not need to loop through all of tiles once they have already been genereated (procedurally). Unfortunately, my implementation was garbage and I was not able to make it work.
So far, I have sothing like this for the draw
/* Not tested, exemplifying */
var stage = new DisplayObjectContainer();
var map = new DisplayObjectContainer();
var tilemap = new PIXI.tilemap.CompositeRectTileLayer(0, [], true);
stage.scale.set(0.1);
for(var y = 0; y < 500; y++) {
for(var x = 0; x < 500; x++) {
tilemap.addFrame(noisedTexture, x*48, y*48 );
}
}
map.addChild(tilemap);
Greetings
I'm new to Pixi and I was under the impression that ios 8-9 can play inline video with webgl render texture. However everything works in desktop but in ios it still opens up native fullscreen video player. Is there any css styles or settings I'm missing?
Thanks
Is Pixi.js going to be getting a typescript definition file anytime soon?
Hi!
I'm using pixi.js to distort a sprite by manipulating it's vertexData (Like Photoshop's perspective transform).
It's working! But I'm using a canvas texture as source, and as soon as I render the scene after updating the texture, the vertexData resets itself! I need to update the canvas because I'm rendering some animation on it.
Some of the code I'm using:
this.image = new PIXI.Sprite(PIXI.Texture.fromCanvas(canvas));
function render() {
var self = this;
this.image.texture.update(); //Everything works fine if I comment this line
for (var i = 0; i < this.handlers.length; ++i) {
//The handlers are some other sprites I'm using as control points
this.image.vertexData[i * 2] = this.handlers[i].position.x;
this.image.vertexData[(i * 2) + 1] = this.handlers[i].position.y;
}
this.renderer.render(this.stage);
requestAnimationFrame(render);
}
render();
It there any way to prevent the vertexData to reset? Or is there a better way to achieve the same effect?
Thank you so much!
Hello
I would like to know if there's any technique or method to use an animated sprite as a mask. It seems as though you can mask an object with an animated sprite but you loose the animation ability there for end up with a sprite. Any ideas? Thanks
Hey, im using PixiJS 4 in a plattform that uses a java WebView on some plattfroms to display the Game.
It all seeems to work fine ,i allready made some small games and they are all working well.
But when i try to use the blend Mode "ADD" for some effects, then the rendering is broken anyhow, i made some images of the cases:
Anyone ever had this problem? anyone knows a solution?