Hi all! Attempting to create a marquee tool ala photoshop. Traditionally this tool uses "marching ants" (example) to indicate to the user that they are making a selection. This Link confirms that Pixi doesn't overtly support dashed lines. Shame. I just tried to use a tilingsprite as a mask. no such luck.
Does anyone have any suggestions here?
Hello,
after upgrading to win 10, PIXI started behave strange on my computer with WebGL renderer on Chrome. Simplest example is this:
Instead of clear static black shape i see the shape blinking, like if only every lets say 5th drawing cycle something is shown and everything, what should be drawn after this shape (another lines or sprites, which are above this path on the stage) is not drawn (except the moment when it blinks - then everything is shown). Strange thing is, If i remove one point from the path, it starts to work normally and the black shape is shown without blinking.
Probably its because some problem with graphics driver, ( Intel HD 4000 graphics) - webGL is not working at all at Firefox ( IE is ok though). It wouldnt be so big deal if i had to use canvas renderer instead of WebGL on the few computers, where its not working well, but i dont know, how could I detect that there is some problem, because no exceptions are shown at all. Also, the question is, how many people could experience this problem, if i am the developer and i dont even know, how to solve this problem on my computer? It worked perfectly for me since last summer when i started using PIXI.
Anybody have similar problem or is it just my computer and i can ignore this?
thx
Hi, first time poster here!
I recently started using PIXI for a game project with a tile-based engine. I used the ParticleContainer for a while but had to switch to a regular Container because I need to support several different base textures. I got really excited when I found the post on the blog about multi-texture batching in v4, but soon noticed that the example used a regular Container and that the ParticleContainer is not even present in the latest v4 dev branch (at least PIXI.ParticleContainer is undefined for me). So I'm wondering if this is because you are working on supporting multi-texture batching for ParticleContainers right now, or if they will continue to require all sprites to use the same base texture in the final release of v4. Really hoping for an answer to this as I have to support several different base textures but could really use the performance boost that a ParticleContainer gives.
Thanks for making an excellent engine!
I'm just starting to pick up Pixi and was working on extending the Sprite class for a tree. I've added some functionality to my tree class to allow for variations in the way the tree looks like tint, size, shape, etc. Now I added a shadow to my tree by adding a shadow sprite onto the tree sprite (since a PIXI.Sprite is a PIXI.container) but I don't want the shadow to be tinted when I tint the tree. That's easy enough to do, but now my tree which extends PIXI.sprite feels more like it should extend PIXI.container.
Any feedback on this? Thanks!
Instead of specifying a region I want drawn, I want to specify a "hole" in my sprite. The hole is dynamic (can change every frame).
Performance-wise, it's not feasible to use a regular mask (too expensive to specify a mask that is everything but the hole every frame), I need to use an inverse mask. This (old) thread describes a hack on how to make it work:
https://github.com/GoodBoyDigital/pixi.js/issues/252
It involves changing gl.EQUAL to gl.NOTEQUAL in a certain file, but this hack is obsolete as there's a new WebGLStencilManager.js file in its place.
Any ideas how to get inverse masks working using Pixi (WebGL)? Or another solution? Again, it's a dynamic mask that defines regions *not* to draw.
Made anything cool with pixi.js? Post it up here and share it with the world!
Whether it's a cool game demo, a fully fledged website or some tripped-out crazy experiment, we would all LOVE to see it!
To get the ball rolling, here are some pixi.js projects that exist out on the internets:
games:
http://www.goodboydigital.com/runpixierun/
http://www.theleisuresociety.co.uk/fightforeveryone/
experiments:
http://gametest.mobi/pixi/morph/
http://gametest.mobi/pixi/balls/
http://www.goodboydigital.com/pixijs/bunnymark/
First of all, let me say that I love the apparent philosophy of PixiJS: do rendering well, and let userland be userland. Awesome. 
I'm playing with different ways of handling interactions that originate within the scene graph.
I'm not a fan of declaring interaction logic on sprites themselves (e.g., using the '.on' method and callbacks). Instead, I'd prefer something that functions more like event delegation: a single listener on my scene that pipes out all relevant events for me to slice and dice later.
Currently, I'm experimenting with using the Sprite prototype to feed all events into an RxJS observable. More concretely:
// Create a new observable
var pixiEventStream = new Rx.Subject();
// Hack into Sprite's prototype, redirecting all 'mousedown' and 'mouseup' events into the observable
var toStream = (e) => pixiEventStream.onNext(e);
PIXI.Sprite.prototype = Object.assign(PIXI.Sprite.prototype, {
mousedown: toStream,
mouseup: toStream,
// etc for all events PIXI detects
});
// ...
// Later, I create a bunch of sprites, some with {interactive: true}
// But I *don't* specify any .on callbacks
// ...
// Later, I can deal with the events
// Here, I'm filtering out only the mousedown events for further processing
var mouseDownEvents = pixiEventStream.filter(e => e.type === "mousedown");
mouseDownEvents.subscribe((e) => {
var sprite = e.target;
// do something with a sprite on mousedown
});
Is there a less hacky way of doing this? Has anyone tried something similar?
Cheers!
Patch moves all vertex calculations to the shader.
https://github.com/pixijs/pixi-spine/blob/gpupatch/gpupatch/SkinnedMeshPatch.js
Its work in progress, but its already 33% faster for heavy models which use skinned meshes and FFD animations.
Demos are coming soon.
YES, ITS ONLY FOR SPINE ANIMATIONS.
Hello,
I'm experiencing weird behavior positioning a PIXI.mesh.Rope object using Canvas renderer (PIXI v.3.0.10).
I put the rope object in a new container and position the container to a fixed point. Now, whenever I change the Pixel ratio (chrome dev tools) and reload the game, the Rope object inside the container moves around to a different location.
The position of both the container and the rope object are still the same (debugged it), but visually the rope object inside the container is not in the same place.
Secondly, applying width and height to the rope object will not change anything using Canvas renderer.
can anyone please confirm that they have the same issues, or maybe suggest something that could cause this behavior.
again, all of this does not occur using WebGL renderer
thanks.
Hi,
I remove textures from the cache when I don´t need them any more:
PIXI.Texture.removeTextureFromCache(myTexture).destroy(true);
But when I later try to load them again, I get the following error:
although this:
PIXI.utils.TextureCache[myTexture]
is undefined
Hi all
I was wondering what your thoughts are on how you go about using PIXI in your projects when you need to change / extend the default behaviour of the PIXI classes.
For example, option A could be to have my own repo of PIXI, and make changes to that. So, for example, if I made a change to how Sprites worked, I could make that change directly and within my code still use PIXI.Sprite. Advantages to this is that all use of rendering is to PIXI, and making changes directly within the classes is often easier. The negatives being I would have to manually sync my version of PIXI vs the official version.
Option B could be to create my own wrappers the classes I want to change. So in the example above, I would create my own rendering libs and use MyLibs.Sprite instead of PIXI.Sprite. Advantages here are that the PIXI code stays clean, and it becomes easier to upgrade to the latest PIXI versions. The disadvantages are that some changes are just easier to make within PIXI itself, and unless I wrap all PIXI classes, throughout my code it could be switching between namespaces, say a PIXI.Container adding MyLibs.Sprite, which could be confusing if I had more than one dev helping on the game knowing which namespace to use!
What did you guys go for?
hi..
can i redraw container? this mean draw two by one container(i know this will be not....)
if i use rendertexture, it can....
but it create new texture every frame
so i need other solution...
i wanna draw playable character on equip or other windows efficiantly (this shot is not mine)
give me tips ..please..
Hi guys!
I just want to share with you some plugins i made for my games (pixi.js >= 3.0.8). May be useful for someone.
pixi-animationloop: To manage the requestAnimationFrame, doing the basic time operations, like delta time, total times, stop the loop when the browser's tab lost the focus, etc...
pixi-keyboard: To manage keyboard events easily.
pixi-timer: To create time events, clocks, etc...
pixi-audio: To add audio support using the pixi resource-loader. The plugin use webaudio by default, and fallbacks to HTMLAudio when is needed.
pixi-tween: To create tween animations, tween alongs paths, etc...
Extra: obj-pool this plugin is not for pixi.js per se, but it's useful when we develop games for the memory management.
Extra2: ES6-Webpack-Pixi-bolierplate, a start point to use pixi with ES6.
I have other things in a old engine i made with pixi v2-3, and i will be move it to pixi v3-4 like plugins, for example, scene transitions, particle sys and tools, etc... -> Particle sys tool1, particle sys2
Regards!
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:
Things that I'm preparing right now:
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.
hi..
hi file is 'wiggling' video.
i've not found the reason yet..
do you have tips to resolve this issue?
I thought about using TravisoJS (http://www.travisojs.com/) but I haven't seen any games that use it. Does anyone have experience with it?
Hi guys.
I was working on some shading and discovered a strange behavior. I'm new to all this so maybe I just don't understand something, perhaps you could help - I localized that behaviour in this shader:
fragmentSrc = [ 'precision mediump float;', 'varying vec2 vTextureCoord;', 'uniform sampler2D texture;', 'void main(void) {', ' vec4 ownColor = texture2D(texture, vTextureCoord);', ' gl_FragColor = vec4(1.0, 0.0, 0.0, ownColor.a);', '}' ];
Now it looks to me that my shader should tint a sprite in red, but instead it sorta does but then it also snaps it into screen blending mode whenever alpha is less than 1. I've created this codepen with some colors where you can clearly see screen blending is taking place:
http://codepen.io/waterplea/pen/dMzXje
Can anybody explain to me why it behaves not as I expected it to? The way I see it it should output fully transparent pixels where original sprite had 0 alpha but instead it outputs 100% opaque red pixels in screen blending mode.
Pretty straight forward problem, but I haven't figured out how to solve it.
I have something like this:
...graphics = new PIXI.Graphics();graphics.lineStyle(styles[s].lineWidth, styles[s].lineColor, p.active);graphics.beginFill(styles[s].fillColor, styles[s].fillAlpha);graphics.drawCircle(0,0, p.w/styles[s].radius);graphics.position.x = p.x+size/2;graphics.position.y = p.y+size/2;stage.addChild(graphics);shapes[flower][p.index][s] = graphics;...
And then later I try to change the radius like so:
...shapes[flower][p.index][s].currentPath.points[2] = p.w/styles[s].radius;shapes[flower][p.index][s].currentPath.points[3] = p.w/styles[s].radius;...
Where the value of p.w has changed and therefor the radius should change but it doesn't, perhaps because I'm not suppose to be editing .currentPath to change the radius.
So how do I change the radius?
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 size will always be less the canvas size but it should be zoom-able with the mouse scroll.
