i've found that a graphics have more than 300 graphicsData will be slow performance.

But if seperate it to 3 graphics( a graphics have 100 grapchisData), it will be good. But why?

Quote

yeah, batches, add into container. Just assume that every Graphics is an extra drawcalls, and for PC i recommend 200 drawcalls max. At the same time, each update uploads whole graphics, so 1 Graphics is as bad as 10000.

seems it explain why, but i didn't get it.

]]>42270Thu, 21 Feb 2019 02:54:54 +0000Displacement Filter causing Sprite Jumphttp://www.html5gamedevs.com/topic/42269-displacement-filter-causing-sprite-jump/
I'm having trouble replicating this, but on some machines (OS X), in Firefox (latest), the mouseover interaction (see codepen) is causing the stage (the image grid) to jump a few pixels. Any insights as to why this is happening? Should I not be handling filters in the manner that I am?

I'm working on an avatarbuilder and would like to use Spine for the animations. The avatar is made up of several parts (head, body, arms etc) that can be changed in order to get the desired combination. Now, I've been looking at using skins, but I'm not sure if I'm going the right direction. Since it's not a complete skin that needs to be swapped, but just a part of it.

The avatarbuilder will be made in Haxe using Pixi and Spine.

My main questions are:

1) Would it be possible to use skins in order to only change the head, or the body for instance?

2) Am I moving in the right direction using the skin feature of Spine?

I'm quite new to web development, so I'm quite lost regarding to make VS Code Intellisense work for PixiJS. I'm currently using Webpack 2 and I'm able to run PixiJS examples, but only because I've included this in my index.html file:

<scripttype="text/javascript"src="libs/pixi.min.js"></script>

So, my code works, but I don't get any autocomplete in VS Code because I don't know how to import Pixi classes and methods into my .js project files. Can someone give me pointers or a small tutorial about that?

Thanks a lot

]]>30187Wed, 03 May 2017 14:04:53 +0000Draggable regionhttp://www.html5gamedevs.com/topic/42243-draggable-region/
What would be the best way to go about making containers/objects draggable without having to add the code for every single individual object/container

I've been researching, but hitting a roadblock. I know it likely would utilize bubbling/interaction manager in some way to do so with listeners.

]]>42243Mon, 18 Feb 2019 08:01:49 +0000How to get correct fragment shader UV in Pixi 5.0 RC0?http://www.html5gamedevs.com/topic/42235-how-to-get-correct-fragment-shader-uv-in-pixi-50-rc0/
I have a few shaders I've created using Pixi 5.0.0-beta.3. To get the correct 0...1 UV for a position I'd normally do this, since vTextureCoord is not normalized:

I've tried checking the diff between versions, but it's not very clear what has changed there. I've tried using outputFrame, inputSize, and inputPixel (I've seen that in some other examples) but to no avail.

Any help in the right direction is appreciated!

]]>42235Sun, 17 Feb 2019 16:36:23 +0000How to make PixelateFilter take effects in a specific area of a PIXI.Sprite?http://www.html5gamedevs.com/topic/42199-how-to-make-pixelatefilter-take-effects-in-a-specific-area-of-a-pixisprite/
I have a huge sprite that contains many sub sprites, I want to add mosaic to a specific area of this sprite. I have tried the PixelateFilter but it takes effect on the whole sprite.

Developing a children's book with Pixi.js and cordova. I just want to reach out to the pros to get some input on my approach on things. Current approach is depending on the type i am resizing all the sprites stretching it positioning where they should be all using body.clientHeight body.clientWidth and some math. All non interactable sprites is as big as the background most of if is transparency to avoid playing around with positioning not sure if this is good.... All working in order as expected, everything looked stretched though. All this I'm doing is without consideration of how do deal with retina and pixel density.

I attached one of the frame of a sprite. As you can see the frame takes the whole layout.

Should I be doing this any different? The artist draws on photoshop on a canvas 2048 x 1536 pixels should i be setting the pixi application width height to that?. Whats the approach to maintain aspect without stretching and maybe just get a black bar on either vertical or horizontal side and center the image. Supporting retina?

I played a little bit with Pixijs, started a small game (added a char, some floor tiles, collision, movement, a node server which provides all level and char information by Json etc.).

So now the basics are running and I need some advice to go further:
I've seen different GUI tools like pixi-ui and EZGUI, but the github repos are quite old and I don't know if they are still supported, and much more important if they are compatible with pixi v5?

At the moment I try to do everything in basic typescript, to keep dependencies quite small, which is fine so far. I thought to use Angular on top, but I don't see the advantage at the moment to use angular or react here.

So my questions are:
1 .are the above mentioned GUI tools still up-to-date/compatible with pixi V5? Or are there any alternatives?

2. Concerning frameworks like Angular etc: I see that you can use it to create DOM elements in front of the canvas, but I tend to add everything to the canvas itself and don't use any extra DOM elements . Are there are any suggestions concerning handling/performance/use cases where extra frameworks make sense etc. (for sure it is easier to add DOM elements instead of elements in canvas...)

I have no problem to create some basic elements (button, textbox etc.) myself, but I think this work has already be done and I want to safe time, but at the moment I've lost the overview a little bit which makes sense or not.

Any idea/advice would be helpful even as I know that it depends on game type!

Works perfect everywhere, except iOs Safari browser. Loading time from 300 ms on desktop Chrome to 1600 ms on old Droid phone (Chrome and Default browser). But mobile Safari loading time is awfull - 35000 ms.

Tried to load files separatelly, one by one before using them (don't need them all at once). And still works everywhere except mobile Safari - in this case files didn't load at all.

Don't know what I'm doing wrong. But I really tired in this war against Apple gadgets.

Thank you!

P.S. : iOs versions 10.1.x and 12.1.x

]]>42209Thu, 14 Feb 2019 10:11:00 +0000Pointerevents on unclosed polygonhttp://www.html5gamedevs.com/topic/42201-pointerevents-on-unclosed-polygon/
Last week I finished a paint brush tool (like in the good old MS paint ) and in order to get it running quite fast I am using a renderTexture print basically a path of circles such that it looks like a line. As soon as the user releases the pan-move, the tool emits the path (array of coordinates) which in turn gets rendered via the drawPolygon method of a pixi graphics (it looks much nicer and I is more performant than using circles again in a graphic). I totally avoid using beginFill()... basically only using the lineStyle before drawing the polygon. However, it seems that this is more or less only a border-decoration and cannot handle pointer-events (to let the user select these polylines and maybe remove them). Are there any solutions to this problem? A quickfix would be a trail of lineTo movements but since there is no lineCap, this looks pretty ugly

Thanks in advance

]]>42201Wed, 13 Feb 2019 00:18:55 +0000Pixi.js Showcasehttp://www.html5gamedevs.com/topic/494-pixijs-showcase/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:

]]>494Fri, 03 May 2013 13:26:42 +0000Extract WebGL pixels with offset positionhttp://www.html5gamedevs.com/topic/42163-extract-webgl-pixels-with-offset-position/
When using extract pixels it seems that only content is extracted that starts from the origin and ignores the negative part of the axis. This is currently an issue for me as my indoor map is (approximately) centered at (0,0); So it will always reside partially in the negative coordinate areas. The container holding the map (a sprite with scale.y =-1 and some position offset) and some other shapes (graphics) live in the pixi.viewport container (awesome plugin btw) and my first guess was that temporarily shifting the position of the viewport might help but I think this transform is somehow only relative to the stage. When passing the stage to extract, the result is just all black

Thank you very much

]]>42163Wed, 06 Feb 2019 00:02:59 +0000Sprite not added to the stage when game is overhttp://www.html5gamedevs.com/topic/42193-sprite-not-added-to-the-stage-when-game-is-over/
Hy everyone,

My game ends when the player and the enemy collides. Detecting the collision works fine, the issue is not caused by it. When the game ends I stop the ticker with the .stop() function, is that why I cannot add sprites any more to the stage? (I dont think so because I tested it but still asking).

After I stop the ticker I want to add the game-over.png as a sprite which I see in chrome debugger that it is loaded, but it does not appear on the stage.

My question is about the hitArea of a sprite. First of all I am not quite sure if I understood the definition correctly, so I would really appreciate a clear explanation about it.

What I want to do is: I have sprites in my game and I would test collision between them, but the sprite's width and height is not perfectly accurate to its 'actual appearance' so I would reduce the hitArea to improve my collision detection algorithm (but sometimes setting the hitArea is making it worse than using just the regular .getBounds() function).

Later I found out that it is because the enemy that I am checking the collision against, is not being compared to my player object, but the initial coordinates of the PIXI.Rectangle that I use to modify hitArea with.

I have found out that if I want to compare the player.hitArea of the current position of my player object to enemy.getBounds(), in my game loop I update the hitArea of player like:

I feel like this is a poor solution that I have came up with. Is there a better way of always updating hitArea coordinates to the player object's current coordinates?

]]>42185Sat, 09 Feb 2019 21:18:41 +0000I want to ask some usage about pixiplayground?http://www.html5gamedevs.com/topic/42150-i-want-to-ask-some-usage-about-pixiplayground/
I saw the playground on Pixi at https://github.com/ivanpopelyshev/playground.

I have learned that he is using typescript language and running on nodejs. Since I am not familiar with ts and nodejs, I can only access it through http://localhost:8080 after npm dev startup. Now I want to put him. Deployed to the web server on my window so that he can access it on the public network. May I do this?

]]>42150Sun, 03 Feb 2019 12:32:09 +0000Apply tween on group of imagehttp://www.html5gamedevs.com/topic/42178-apply-tween-on-group-of-image/
I am developing a game in which i have to click an image .after click it will flip and show prize after that i have to move this image and prize towards prize-board.during this movement i have to scale these images to fit into prize-board slot .how to solve this problem. please help
]]>42178Fri, 08 Feb 2019 11:46:17 +0000Collision between one and multiple objecthttp://www.html5gamedevs.com/topic/42173-collision-between-one-and-multiple-object/
Hello Everybody

Trying to make a collision detection between two object.

I have one object there is going to catch another object. Theres a new obejct to catcht every 10 seconds, and every thing goes fine when i catchs one object at time. But when theres multiple object on stage, something going wrong:

Every things goes fine as long as there is only one object "living" on stage, but as soon I have multiple object on stage it cant allways recognize the intersection. Is it my Hittest.js class that fails om multiple object? Hope someone can help me.

]]>42173Thu, 07 Feb 2019 13:50:55 +0000Is Pixi.js a good solution for my project ?http://www.html5gamedevs.com/topic/42160-is-pixijs-a-good-solution-for-my-project/I'm in an early phase of a new project and I'm considering using Pixi for it.I think it's a good idea to ask the community before going further..

Basically, I have multi-layered maps with many different models (up to 12)the top layer is interactive, and when I click on a zone I can choose what map model to display for this zone.

Outside Pixi :1 - I choose one of the available map model to display.2 - I click on an element of a transparent SVG that is placed above the canvas.3 - I Get back informations about this element (path description, bbox, etc...)

In Pixi1 - I ask pixi to create and display a sprite with the chosen map model and the SVG element as a mask.2 - I can, eventually, choose to apply a filter to this element.

Do you think that pixi.js can handle something like this ?Is it a good idea to use pixi for this ?Does using pixie will help with the speed over a vanilla DOM/SVG solution ?

Thanks in advance to the experts !;)

]]>42160Tue, 05 Feb 2019 15:25:48 +0000Displacement filters causing loss of resolution?http://www.html5gamedevs.com/topic/42169-displacement-filters-causing-loss-of-resolution/
I'm working on a website, that has images that will use displacement filters for some interactivity. As soon as I add them to my container, the images get blurry, even though I've got the filters scaled to 0.

I'm on a MacBook Pro (Retina).

Here's a CodePen of the issue:
https://codepen.io/elegantseagulls/pen/NowKgG?editors=0010

I am starting with Pixisjs and getting a small performance issue with something that should be really simple to process:
when I draw a triangle (moveTo, lineTo) on each mousemove event with one of the points which is the mouse position, it performs well at the beginning, but the more i follow on with mouse move, the worse get the performance. After a minute, the FPS ist really low.

I made a pen to illustrate it:
https://codepen.io/daviddarx/pen/MLEbvE

If I clear the graphic at the beginning of each mouse move event (//graphics.clear();), the performance stays good all the time.
But unfortunately, it given't the effect that I will reach anymore :( .

Am I missing something? Should I try another approach to draw elements on the stage on high frequency without erasing the stage first?

I have a huge spritesheet which I load with `PIXI.loader.add('descriptor.json')`. It works great, however, I want to release memory after I used it and I can't find the right method for it. I can access it (and it's base texture) via `PIXI.loader.resources` dictionary and run `.destroy(true)` on every texture, and then delete values from the hash. However, I'm not sure that this is intended approach and I have OCD that I'm doing things wrong. So, what's the right way?

Any advice would be highly appreciated!

PS: If I understand how things work, this spritesheet will be collected automatically by PIXI GC after some time; however, I use PIXI.settings.GC_MODE = PIXI.GC_MODES.MANUAL, so... yeah.