Ianmh

I'm building a tile based game, and I'm generating a lot of tiles with drawShape and polygon data and then adding them all to a container. Every tile is generated. Right now if I go larger than about 150 x 150 the app crashes with a webGL failure. Do I need to convert these to sprites or something else? Any suggestions? Also, even though there are many tiles there are a much smaller amount of variations, is there a way to copy and reuse already generated tiles? I might want to change the colour so they can't be of the same instance.

Is it possible with or without pixi.js to calculate the number of transparent or solid pixels for a given x/y position? My use case is that I have random trees and I want to calculate the width of their trunk at the base of the tree.

Found them. PIXI.loader.resources.trees.data.frames

I've loaded a large sprite sheet of trees and I want to iterate through them all so I can grab random trees. Up until now I've always just used them by name, so I'm not sure how to do this. loader.add('trees', 'trees.json') .on('progress', this.loadProgress) .load(this.done);

You mean a texture atlas? I am using one.

I have an isometric grid set up, but I'm not sure what size the tiles should be. In another question I asked about scaling and learned about mipmapping. How does this apply to isometric tiles? Should the width be 128 or the height? I don't think it's possible to make both a power of 2. Or does this even matter? Is the solution to package multiple texture sizes of each tile. Also once I get the size figured out how do I get ride of the grid lines from the aliased edges, do you overlap the tiles slightly?

Thanks for the info, really wish I had of asked sooner, graphics look so much better. How does this apply to texture packed images, I assume it would be the dimensions of each individual image and not the whole sheet?

I have been messing around trying to get Anti-aliasing working for a few days now. I was using a very large image, over 2000px wide and had scaled it to about 200px. It was constantly aliased no matter what I tried. By chance I changed the scale and brought it up to .5 and immediately things started looking better. Is this normal?

So I spent a lot of time figuring out how to load a JSON file with polygon data. It's now working when using PIXI.loader. When I first searched how to load JSON with pixijs I got all kinds of conflicting results. Things like jsonLoader, and other loaders. Are these legacy implementations and is the current loader a more flexible model that can load anything?

Ah, I did know about this, but I've read it's not a great option as it can lead to errors. Lots of info about it here. https://basarat.gitbooks.io/typescript/content/docs/tips/outFile.html

Thanks for all the great info guys. @ivan.popelyshev when you say easier to manage with an IDE, does this mean it can bundle into a single file too? I use Visual Studio Code, but I've only ever seen it build mulitple files.

I'm actually using Browserify. I've tried to wrap my head around webpack on web projects but have failed to so far so I won't be much help. I like Browserify a lot, but I'm still not sure how the module bundling works, although it's on my list of things to learn. Thanks for the suggestions though, I went for a custom method, here is my code. this.parent = event.currentTarget.parent; // Current container this.collection = this.parent.parent.children; // All containers this.parent.active = true; this.collection.find((container: any, index: number) => { if(container.active) { // Move the container to the front. this.collection.splice(this.collection.length - 1, 0, this.collection.splice(index, 1)[0]); this.parent.active = false; } }); This seems to be working well. I get the parent container because the actual click event is on a sprite converted from a polygon and it's a group of sprites from the polygon shapes. Edit: For some reason the code keeps losing it's formatting when I save.

Probably a silly question, but how do you import pixi-display in TypeScript? I've fairly new to TypeScript, but this works for Pixi.js. import { Application, ApplicationOptions, Container, Graphics, Sprite } from "pixi.js"; But this does not for pixi-display. import { DisplayGroup } from "pixi-display"; Also is pixi-display the preferred way of sorting or is there another way I should be sorting containers? I basically want to be able to add multiple containers to the view and if you click on one behind another it will come to the front and stay there.

I still couldn't get this to work the way I want. It would also be great if some of the examples could be in TypeScript. I think my issues might be around that and the 'this' context with callbacks.

I'm trying to figure out how to drag something from the point at which it was clicked. Even in this demo you get a popping effect. http://pixijs.github.io/examples/#/demos/dragging.js If you click the bunnies ear and start to drag, the cursor pops to his belly. Is there a way to drag from the point that was clicked?