Is it possible in pixi.js to scale the stage from the very center of the stage as there is no anchor available in it. What I basically need is to focus on an object whose position will be canvas centered and its size will always be less the canvas size but it should be zoom-able with the mouse scroll.
Hi there guys.
Say I want to make a filter that does something to original texture after it was blurred with Blur filter. Here's the PIXI blur filter:
BlurFilter.prototype.applyFilter = function (renderer, input, output) { var renderTarget = renderer.filterManager.getRenderTarget(true); this.blurXFilter.applyFilter(renderer, input, renderTarget); this.blurYFilter.applyFilter(renderer, renderTarget, output); renderer.filterManager.returnRenderTarget(renderTarget); };
Is there a way for me to store original input texture and use it as a uniform for my filter, kinda like that:
this.myFilter.originalTexture = input.texture; this.blurXFilter.applyFilter(renderer, input, renderTarget); this.blurYFilter.applyFilter(renderer, renderTarget, input); this.myFilter.applyFilter(renderer, input, output);
I tried getting input.texture however input.texture is an empty WebGLTexture object at that point.
Blogpost by @Mat Groves: http://www.goodboydigital.com/pixi-js-v4/
Release: https://github.com/pixijs/pixi.js/releases
Examples: http://pixijs.github.io/examples/
First issue: https://github.com/pixijs/pixi.js/issues/2436
If you see example with [v3] it means that API was changed and better to look at differences between [v3] and new one.
There is one broken example (pixi-compressed-textures) and two meant for v4.1, which will be available soon for testing.
Known things that are yet incompatible with v4:
1) pixi-spine gpupatch
2) pixi-tilemap
3) pixi-compressed-textures
4) pixi-alpha-map
We're working on it 
So I have an app in progress which 100% works on desktop and in XDK's emulate tab.
When I play the app on my phone, it does not work. I discovered it's crashing when it's trying to load a bitmap font with the loader function. Here is my code:
PIXI.loader.add('thintel', 'thintel.fnt');
PIXI.loader.once('complete',initRooms);
PIXI.loader.load();
The initRooms() function never gets triggered.
Any ideas?
Looks like 'removed' event is not propagating to it's children (and it probably shouldn't). But is there a way to know if the object was removed from the rendering graph (e.g. it's parent (parent's parent (parent's parent's parent (...))) was removed from it's.. parent without recursive checking?
I hope what I just wrote makes sense..
Can pixi read .mov or .m4v files? The VideoBaseTexture docs only show .webm and .mp4 files being loaded, and my simple tests have not worked.
The PIXI.sprite, which is underneath a PIXI.particles.Emitter, has some bound mouse events - mouseover and click... but they are being blocked by the particles. When mousing over the sprite or clicking on it, the event is not fired.
I found someone having the same issue, and his solution was to set the containing PIXI.container's interactive property to false: https://github.com/pixijs/pixi.js/issues/1725
However, in my situation, I require that the container be interactive for dragging and zooming the map.
How can I allow the sprite's mouse events to be fired, regardless of whether a particles emitter (or even another non-interactive sprite) is overlaid on top of it in respect to the z-axis - while still keeping the container's interactive=true?
I wonder if we can use two canvas elements with pixi. As PIXI.container is not associated with a particular canvas renderer.
hi..
i draw 1024*1024 size sprite.
but it scaled to 7168*7168
and than can i control drawarea like 1280*720?
Hi,
I've been using PIXI for a while now - but I've hit an issue with multi touch control in v3 (and looks like it may also apply to v4)?
The older bunny drag demo here will allow you to drag 2 bunnies simultaneously on a touch screen:
http://www.goodboydigital.com/pixijs/examples/8/
However, a more recent demo here does not:
http://pixijs.github.io/examples/index.html?s=demos&f=dragging.js&title=Dragging
Does anyone know if there's a working v3 example of multi touch / multi dragging available anywhere?
Specifically the problem I'm finding is that if I apply either .touchmove or .touchendoutside to 2 different containers, these events seem to get called for both.
So touch container 1, touch container 2. Move finger over container 1, and touchmove gets fired on both. Release finger outside container 1, touchendoutside gets fired on both.
Any help/advice much appreciated.
Can we get the bounds of a rotated sprite into local word? Like converting the top right bounds of the rotated triangle (red circle) into global coordinates system.
Hi,
This may not be a typical use case, but in my project I have some sprites which are created without a texture (in a sprite pool) and later on, those sprites may get destroyed.
The side effect I experienced, is that the PIXI.Texture.EMPTY property is also destroyed.
This will reproduce the problem:
var s = new PIXI.Sprite();
this.addChild(s);
s.destroy(true);
this.addChild(new PIXI.Sprite()); //rte :(
It's easy enough to work around the problem by checking whether the sprite has a texture before destroying it, but I thought I'd write this down in case anyone else gets tripped up by it!
Hello everyone !
I need to know if there is a way in Pixi to add width to the renderer view without scaling the content.
I already tried using renderer.autoResize = false with no success.
For example :
// First I set the height of the view
var h = window.innerHeight-100;
renderer.view.style.height = h + "px";
// Then, I set the width with the good factor to keep everything in a good shape
renderer.view.style.width = (h*2.666) + "px";
// I would like to be able to add width after without affecting the shape of the sprites
renderer.view.style.width+=[missingWidthToFillTheScreen];
Do you think it's possible ?
Hi, just trying to work out the internals of Pixi Graphics.
It appears to me that the `arc` method plots points and draws to a canvas context, rather than just using `context.arc`. Is this correct? How come?
I ask because I can see the curve is not perfect.
Thanks!
Hello everyone, this is my first post on this forum. I have been using Pixi js for about 6 months now. I am using it as my rendering library for a sidescroller game I am developing for my senior project at my university.
I stumbled across a post that mentioned using the sprites "visible" property. I just had a quick question on performance and what you guys would recommend.
While running through my sprite sheets, I was removing the child, and then adding the next sprite image every time my sprite needed to render the next sprite in the spritesheet!
What I have done now is add each sprite to the stage upon initialization of my sprites. I also set the sprites visibility to false upon creation and make sure to only set the active sprite images visibility to true (the one I want to show) instead of deleting and re-adding.
I suppose this will increase performance? Are there betters ways to go about this?
I will post some code examples in the morning when I am on a computer. Just wanted to post it here for now.
Thanks everyone!
See here http://pixijs.github.io/examples/index.html?s=demos&f=dragging.js&title=Dragging
If you scale bunnies to original size
bunny.scale.set(1);
and drag bunny around in even fast speed, you can see that it always falling back some ~20 pixels and snapping precisely when mouse stops.
Any ideas, how to do a code, where dragged sprite would be precisely on mouse position? Like getting mouse pos right before draw call & then adjusting it, or I don't know ?
Hello Guys!
at Grey Rook we had the need to have non-code descriptions of the PIXI stage and animations, you know, like HTML.
So we created POM - PIXI Object Model.
It is JSON and if you know PIXI you know POM:
{
"type":"sprite",
"values": {
"position": {
"x":100,
"y":100
},
"source":"image.png"
}
}
We built all our tooling around this, one of our clients has nearly 3k animations using it,
with over 99% of them sharing the exact same JavaScript and are pure JSON!
We want to share some of the internal tools and helpers we wrote with the PIXI community.
We are starting with POM - the most central piece.
So please let us know if there is interest!
The documentation is a bare minimum and we are going to improve it - let us know what you are looking for!
http://greyrook.github.io/POM/
Details
Our scene is composed of elements, like Containers, Sprites, Graphics, or any other custom element you come up with.
What attributes these elements have is represented as JSON data, like the example above.
All you have to do is pass the data representation to the manager and let it create the scene for you.
It works like a factory, where you can register any custom Element you want, as long as it has the methods for processing the JSON data.
We extracted POM out of our internal source tree and open sourced it.
If there is interest more is to follow, for example our tweenJS-based AnimationManager, that takes JSON data of timelines and creates all the tweens for you,
aswell as synchronize animations that use our custom tweens for controlling videos, and checking their buffering status.
We hope this is useful for others too, so we can build it and make it awesome together.
For a start we have created a minimal project page where you can find the information we have collected so far,
we are currently mostly looking into improving our documentation, test coverage and examples.
Why
We built an online animation editor where users can create (and animate) scenes direcly in the browser and view them again anywhere else in a player.
For this we mostly use PIXI (and TweenJS), the backbone of the project is our PIXI Object Model (POM) and its' manager.
About us
We are Grey Rook Entertainment, a software development and graphic design company from Mülheim an der Ruhr in Germany,
designing and manufacturing interactive HTML5 expieriences, and connecting them with the real world.
Hi, Im very green with PixiJs so excuse any ignorance - I have a few questions about how I can use pixijs to cache repeating canvas animations that are currently drawn frame by frame.
There will be many repeating animations drawn in a native canvas using bezier curves.
I would like to rasterize the frames of the animation to a texture and then display in Pixi in the most efficient way. In the following fiddle I am drawing the animation in the native canvas then copying to a texture to add to a pixi movieclip.
I have a test fiddle here: https://jsfiddle.net/bones/dzd69cq9/
1. Why oh why is the above fiddle not working? It looks like it should but I must be missing magic pixi dust.
2. Is there anyway of capturing a region with Texture.fromCanvas() method or would I have to use an intermediate canvas sized to the minimum bounds?
3. If I capture the series of textures is their any benefit to adding all to one large texture to act as a spritesheet? Could I then display the movieclips in a ParticleContainer for a performance boost?
thanks!
Hello!
I'm attempting to create an isometric scene, which involves rendering NxN tiles along an isometric grid.
I'm trying to implement chunking in order to handle large tile maps. I'm currently adding each tile as an individual sprite along the isometric grid to a 16x16 tile Container for each chunk. Since it's an isometric rendering, this involves rending sprites into the negative X axis. This renders well, and I can scroll horizontally across the map with no issue.
I want to use a RenderTexture as this apparently has some performance gain as the number of tiles increases. For example, I would like to render a single chunk Container to a RenderTexture, and display that as a single sprite instead of 16x16 individual sprites. The problem I'm having is that all tiles with positions x and y > 0 are rendered fine, however when I scroll horizontally across the map, all tiles positioned < 0 along the X axis are clipped. This is not an issue I have when rendering the tiles individually.
What am I doing wrong?
I've attached two screenshots demonstrating the difference between individual tile rendering and RenderTexture when scrolled into an X position along the negative axis.
Hey guys, I've hit some major performance walls using traditional 2d canvas rendering and I've made the decision to switch to PIXI because, well... it's just my style of library and it works like a charm. Before I get going porting my game, I'd like to ask for some advice about how to build up my scene.
The way my game currently works, I load in a Tiled map that represents the level - they're about 4096x4096 in pixels. They also contain several layers - "Base", "Obstacle", and "Top". I go through these layers and build 3 separate images the same size as the map. So I've got 3 4096x4096 images in memory.
When rendering the scene, I also have a Character layer. My render loop looks like this:
preRenderCharacters(); // Builds character sprites from worn equipment data
renderLevelBase(); // Draws a piece of the "Base" layer image, determined by the camera rect
sortCharacters(); // Sort characters by their Y coordinate
for(i in characters)
drawObstacleLayerToCharacter(); // Draw the obstacle image from cameraRect.y (or last character.y) to character.y
drawCharacter(characters[i]); // Draw the actual character
drawLevelTop(); // Draw the top image on top of everything
So I've ultimately got a lot of canvases floating around my code right now.
The approach I'd take with PIXI is to continue using the number of off-screen canvases I'm currently using, and just associate them with Sprite objects instead of calling drawImage() on them all the time.
Am I crazy? Is there a better way to do this with PIXI? I appreciate any assistance you guys can provide :-)