Hi guys, i'm using pixi.js (ver 3.0.7) with plugin pixi-spine.js (version 2.1), everything works fine but when I tried this:
var test = new PIXI.spine.Spine(res.spine.spineData);
test.animationSpeed = 2;
it doen't work. 
I was wondering if the API has been changed....hmm,anyone knows how to speed up/down the animation speed (or maybe frame rate) of an instance of the PIXI.spine.Spine?
Hope you guys can give me a hand,it would be great help 
Hi,
I am making a game that requires the pointerover event, but on mobile devices its not working, I have tried touchMove but its behavior is really weird on the browsers and seems like there's a bug in the library, can anyone provide a second thought on this?
Thank you.
Pixi usually performs really well even with heavy scenes. I can put hundreds of objects, even thousands of particle sprites and get 60 FPS on mobile.
I typically only use a single masked object in a scene but recently needed to use more and I was surprised at how badly Pixi performed with masked objects. For every masked sprite, I lost about 5 FPS on mobile (both Android and iOS on old and new phones, newer phones actually performed worse in some cases). By the time I added 4 masked sprites, I was down to 40 FPS, adding 10-20 masked sprites dropped to 20 FPS with really bad stuttering. As soon as I switch the mask off by removing the assignment, it goes from 20 FPS to 60 FPS, even with 200 of the same sprites.
It doesn't seem like it should take so much resources to do masking given all the other effects that are possible. Tinting for example, adds a value to every pixel and costs nothing. Masking is just checking a pixel in one object and setting the equivalent pixel in the other object.
Is there a faster alternative to using object.mask = mask? Is there a graphics buffer I can use to set the pixel values myself, e.g if I could create an array of pixel values and generate a texture buffer from that. Javascript is pretty fast with arrays.
The main thing that bothers me is that the low performance happens with static masks. I could understand the performance hit when the sprite is animating relative to the mask but not when they are both static. Why doesn't it buffer the masked sprite and use that over and over like a normal sprite?
I found a thread that describes the same issue, unfortunately I'm stuck on v3 for now:
https://github.com/pixijs/pixi.js/issues/2163
I just found the following with a possible alternative using multiply blending:
https://github.com/pixijs/pixi.js/issues/3735
To isolate it, it suggests using a voidfilter. Is this the fastest way to do masking in Pixi? If so, is there example code for this?
Say that I did at some point want to draw a texture pixel by pixel, one way would be to draw a tinted 1x1 pixel sprite into a render texture. Is there a better way than this e.g set values in a buffer and convert it to a texture?
Is there a way to read a pixel color/alpha value from a sprite or texture. There seems to be an extract function for WebGL and Canvas but it looks like this extracts the viewport. It would be good to be able to render sprites to a rendertexture and be able to read the pixel values of that texture using pixel co-ordinates.
Hi everybody,
I'm struggling with performance issues using pixijs.
I just have to slide few rectangles using a mask and animating borders and tinting after sliding animation.
It should be simple and easy to reach high FPS even on mobile, in fact it easily slows down
this is the profiler result during an animation: 
It seems the call ticker.update() is eating up a lot. I've changed my code, stopped ticker and called only when needed but the results is that on mobile devices it slows down even under 15fps
I'm managing fps my self trying to complete the slide in 200ms and animations in the following 200ms. so I start calling requestAnimationFrame 12 times and reducing if it takes longer than 200ms.
during each step I change position of all tiles on one column/row and call ticker.update() (I believe is something really basics that should not slow down at all)
I use a mask to hide some tiles in some places of the board, could be the mask an issue?
Someone can give me some hint? the following video shows how the animation works (I'm not going to advertise here, I've already posted my game in the right section)
the game is already playable online: http://unfoldedtorus.com (in case a live sample would be better)
thanks in advance
Michele
The chart that is built on PIXI had sharpness problems and those sharpness problems were solved after avoiding half-integers and linestyle alignment. But now chart has some dark spot when plotting a diversified data in a large number of a dataset and for a small dataset, can't see any dark spot on the chart. I am not sure changes that have done for solving sharpness is causing this problem. Kindly support me to solve this problem.
hi guys,
How can I make a spine keep checking onComplete Event while losing tab focus?
As I tested, if I run several spine animations(different length) at the same time, then switch to another tab immediately,
the onComplete events won't fire, but they will fire at once when the tab get focus again.
Slightly unusual question: I'm porting a game to PIXI (from Haxe), most of which will move quite easily except my buttons.
The buttons are created from 2 textures, one is a background image (a circle) the second is an icon. I make a copy of the circle shape, apply a colour to it, and then remove the icon (all of this is with bitmapdata operations.) I then add an effect to the final output (a glow).
I can think of a couple of ways of reworking this for PIXI, but am keen to make as few changes as possible from the original.
So is there a way of manipulating a texture as you can BitmapData (as per Flash AS3, Phaser2, Haxe)??
Could you please explain me the difference between rendering through renderCanvas() and through renderer.render()
There is nothing about specific differences on the doc's page , so it seemed they must work in the same way , but in fact they does not
for example ...
var r = new PIXI.CanvasRenderer( {width:600,height:800,backgroundColor: 0x1099bb,});
document.body.appendChild(r.view);
var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines');
richText.x = 30;
richText.y = 180;
//r.render(richText); // - working as expected, the text stands at 30,180
richText.renderCanvas(r) // -- not really the same, the text stands at 0,0
after this I started wondering , maybe it works in this way because the text has no parent object ... ( because as said in the docs the X and Y are relative coordinates to the parent )
and then I tryed this :
var r = new PIXI.CanvasRenderer( {width:600,height:800,backgroundColor: 0x1099bb,});
document.body.appendChild(r.view);
var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines');
richText.x = 30;
richText.y = 180;
var stage = new PIXI.Container();
stage.addChild(richText);
//r.render(stage); // - working as expected, the text stands at 30,180
stage.renderCanvas(r) // again, the text stands at 0,0
the result is the same , nothing works as expected
Hello again.
Please help me , how to proper use a mask inside a sprite. I'v made a codepen https://codepen.io/clf/pen/NzQgbg , when mask is on and object is moving, his borders starts twitching. But If i disable mask the object moves correctly.
So what i do wrong? How to move object with mask without shaking his border? And is it possible to make moving more smoothly?
Thanks😃
Maybe this is an old subject but nowdays I'm trying implementation of box2d/pixijs HTML5 game to mobile. Everything was working okay until android 6+ appeard. Crosswalk was solving most problems but i had new releases and cordova 8.0 , crosswalk, android 7.0 and pixi just give poor performance. Game runs smoothly on desktop, and ok on mobile browser, but Native (cordova) runs @21 fps.
Has anyone facing same problems?
Is there a easy solution to replace cordova with some other framework ?
How do you pack pixijs to Native ?
Thanks, 3ojan
Hi,
I'd like to develop some automated UI tests for my PixiJS application (PixiJS 4.8.1). My test procedure should look something like this later:
const test = new UITest()
test.click({x: 100, y: 80})
test.drag({x: 100, y: 80}, {x: 120, y: 40})
test.dblClick({x: 200, y: 120})
etc.
For this I have to trigger events. I know that the InteractionManager and DisplayObject inherit from EventEmitter. Which option is the best way to trigger events?
1. directly on the canvas element?
const originalEvent = new MouseEvent('click', {
bubbles: true,
cancelable: true,
...
})
app.view.dispatchEvent(originalEvent)
2. or via app.renderer.plugins.interaction.onPointerUp (originalEvent) for example?
3. or via app.renderer.plugins.interaction.emit(originalEvent)
Unfortunately, I have not yet managed to trigger an event with these three ways 😞
What already worked was to call the emit method directly on a PIXI.DisplayObject, but I needed to create a PIXI.InteractionEvent object myself, which was quite expensive ...
Thanks in advance!
Siddi
I am new to pixijs development.
I am trying display some text using Font.js
var font = new Font();
font.onload = function() {
var title = new PIXI.Text("This is a test", {
fontFamily: "48px A.C.M.E. Secret Agent"
});
title.position.set(100, 100);
gameScene.addChild(title);
};
font.onerror = function(err) {
console.log("font error " + err);
};
font.fontFamily = "A.C.M.E. Secret Agent";
font.src = "fonts/acmesa.ttf";
But I am getting a warning
Failed to decode downloaded font: data:application/x-font-
OTS parsing error: post: Failed to parse table
And the text is not getting displayed with the correct ttf font.
Can someone post a simple example showing how to use pixijs with Font.js?
I just want to calculate shader once and use texture that applied shader.
is there any way to solve it?
https://github.com/pixijs/pixi.js/wiki/v4-Tips,-Tricks,-and-Pitfalls#resizing-renderer
Seems this is a common issue, and it has not properly handled in the engine,
what I want is first recalculate the position, and when resize the whole UI
my whole UI is in the rootContainer.
When the window change from a larger size to a small, the UI will be outside of screen.
This is the setUp code for UI
public setup() {
this.topbar = new PIXI.Sprite(
PIXI.utils.TextureCache["topbar.png"]
);
// this.topbar.scale.set(0.8, 0.8);
this.topbar.anchor.set(0.5, 0.5);
this.topbar.y = -window.innerHeight/2 + 10 + this.topbar.height/2;
this.container.addChild(this.topbar);
this.avatarMaskLeft = new PIXI.Sprite(TextureCache["mask.png"]);
this.avatarMaskRight = new PIXI.Sprite(TextureCache["mask.png"]);
this.avatarMaskLeft.anchor.set(0, 0.5)
this.avatarMaskRight.anchor.set(1.0, 0.5)
this.avatarMaskRight.x += this.topbar.width/2;
this.avatarMaskLeft.x -= this.topbar.width/2;
this.topbar.addChild(this.avatarMaskRight);
this.topbar.addChild(this.avatarMaskLeft);
this.initCountDownText();
this.initScoreText();
Event.instance().fire("UILoadFinish");
}
the topbar is added to the container, same as avatarMaskRight
But when I scale the topbar, use code:
this.topbar.scale.set(0.8, 0.8);
the children will not be at the right position, WTF ? all children is set use the relative position , so if I scale the parent, I would expect all children at the right position.
update: I use code this.container.scale.set(0.8, 0.8); after topbar has added to container, it works fine, all children will stay the right position
so, how do I recalculate the position, and resize the whole UI ??
update: why do I need resize my UI ? because I developed my game in PC, and in the PC browser , the UI looks fine, but when I open My game on mobile , the UI looks HUGE relative to others
We have just released RevoltFX - a framework to create stunning particle effects.
You can create particle emitters and time based effect sequences and nest them all together.
Check out some samples
https://samples.revoltfx.electronauts.net/
Get the library on Github
https://github.com/bma73/revolt-fx
To create your own effects use the RevoltFX online editor
https://editor.revoltfx.electronauts.net/
Get the editor on Github
https://github.com/bma73/revolt-fx-editor
Hi,
I want to allow the user to either scroll to document bound borders endlessly i.e Infinitely drag on the canvas. Please help!!!
Ex:
A canvas created with 1000*1000. And Enabled PAN and Zoom on the canvas. Draw a rectangle on the canvas and move the rectangle with mouse to the edge of the boundaries( top,right, bottom, left) it should scroll the the rectangle to the end of the canvas.
Right now my issue is I can drag the rectangle till the browser boundaries. I need to allow the rectangle to drag beyond the content so that I can use the full canvas. I can PAN the canvas to move around the browser.
Please refer the link https://gojs.net/latest/samples/scrollModes.html where user can start dragging the rectangle to the boundaries, scrolls automatically towards the mouse pointer.
Thanks,
Naveen.
I'm facing a frustrating conflict between client prediction and smooth movement that hopefully someone can help me out with.
Every 15ms, the client gets a target from the mouse position and sends it off to the server and immediately simulates the effects. I'll call this the input tick. When an update is received from the server, the client compares its current state with the server's state + any unacknowledged input. They should usually match pretty closely and in my implementation they do. Because the details of that interaction are out of the scope Pixi, that's all I'll say about that. Just know that it currently works as expected.
My issue is that when the client simulates the effects of each movement, it is moving across relatively large amounts of pixels very quickly, leading to understandably jittery movement. Each input tick, the player needs to move upwards of 8 pixels which seems small but is very noticeable if it isn't smooth. Here is my movement code...
const distance = getDistance(this.local.pos.x, target.x, this.local.pos.y, target.y);
this.local.direction = Math.atan2(distance.y, distance.x);
/* speed = 8 */
this.local.pos.x += speed * Math.cos(this.local.direction);
this.local.pos.y += speed * Math.sin(this.local.direction);
The movement works as intended but in a jittery fashion. So I tried instead setting the player velocity like so...
/* speed = 8 */
this.local.vel.x += speed * Math.cos(this.local.direction);
this.local.vel.y += speed * Math.sin(this.local.direction);
Then in Pixi's ticker, update the position like so...
this.local.pos.x = this.local.vel.x * delta;
this.local.pos.y = this.local.vel.y * delta;
The delta here is the ticker's deltaTime which should make for smooth frame rate independent movement. And it does!😁 Except it throws the whole prediction-reconciliation aspect out of whack.😩 This is because now the player is moving with the animation loop and at a different speed due to the delta.
I also tried lerping between the current position and the predicted position but I think that since the input tick rate is so low, the lerp function is only interpolating between a couple states. I tried doing this in the Pixi ticker loop...
/* this is reset every 15ms with each input tick */
sincePrediction += app.ticker.elapsedMS;
const smoothPeriod = 15;
const delta = sincePrediction / smoothPeriod;
manager.interpolate(_.clamp(delta, 1));
Then in the "manager.interpolate" method using the lerp function to interpolate between the previous and next state. But as I said, I think since 15ms is so low, lerping essentially just jumps to the next state here.
So, I need a way to smoothly move to the new position up until the next prediction tick hits in 15ms.
Sorry for the long question, I wanted to be thorough. Please let me know if any more info is needed. Any suggestions, advice, and help is appreciated
Hi,
I'm an animator and I have no knowledge regarding coding and programming. recently our parent company (game developer) told us we could use pixie particles online editor for creating particles in HTML5 games and the asked us to go to the "http://pixijs.io/pixi-particles-editor/" and create an emitter so they could use that particle in our designs. I realized it would be better if I could make an HTML file to preview the particle. a very simple animation to send the particle spawning point around a square. like this http://www.html5gamedevs.com/topic/34892-pixi-particles-emitter-how-to-make-it-move-from-point-to-point/
the problem is, the deeper I go the darker it gets!!! the problem is I don't even know what I have to learn before attempting to make it work!!! is it HTML? is it java? do you call it Scripting ???
is the place to go to get information?
so far I think I need to create a server?
install Pixi js (i don't know how)
install npm ?? (I don't know why?)
this is very confusing write know
hi everyone, i want to manual render game object without using stage. In basic example, i didnt add bunn sprite into stage, and add render call in update (app.renderer.render(bunny)), but nothing show :(.
here is my try: https://jsfiddle.net/7k9znhwy/3/
thanks you all
hi,
I found out that the anchor.y is inaccurate for BitmapText. When I set it to 0.5, it doesn't align to center,
but if I set anchor.y to 0 and add half of it's height to y, it will correctly locate at center.