Search the Community

Hello! I'm new to this forum but I had a burning question that I can't seem to solve and was hoping to get some sort of help. I'm trying to write a function to animate a bezier curve that changes styles (color and weight). I'm splitting up the curve into many straight line segments so that I can apply a style to each line segment to get an illusion of a gradient. I'm doing this by using two graphics objects (A and B), where A that animates the "head" or leading segment of the bezier curve (the one that's moving), and B renders the lasting tail segments that I want to persist after the animation is done. For reference, here is the drawing line segments code. lineStyle is not applied anywhere else in the codebase. static drawSegments(graphics, camera, segments, startIndex) { for (let i = startIndex; i < segments.length; i++) { const segment = segments[i]; //Prevents edges from appearing too thin. //Increasing threshold will make small lines larger, vice versa. const THRESHOLD = 0.5; const strokeWeight = Math.max(segment.u.weight, THRESHOLD / camera.getZoomFactor().x); const color = ColorUtilities.hsv2rgb(segment.u.hue, segment.u.sat, 100); const hexColor = ColorUtilities.rgb2hex(color.r, color.g, color.b); const randomColor = Math.random() * 0xFFFFFF; console.log(color); graphics.lineStyle({ width: strokeWeight, color: hexColor, cap: PIXI.LINE_CAP.ROUND, }); graphics.moveTo(segment.u.x, segment.u.y); graphics.lineTo(segment.v.x, segment.v.y); } } If I clear B every frame (B.clear();), the lineStyle behaves correctly, as you can see in the first photo below, the line smooths from a small indigo line to a larger pink-ish one. However, this isn't great for me performance wise, as I want to have many of these lines, and drawing them from scratch every frame is expensive. Therefore I'm trying to just draw the segments that B hasn't already drawn yet. So every frame B will draw more and more lines. However, if I do it this way I get a strange result. In the second case, the color of the line doesn't transition correctly, or at all really. The weight transitions fine, but the color stays either constant or varies very slightly (as shown in the third picture). Perhaps more bizarrely, if I set the color instead to be a random color, the lineStyle seems to adjust correctly (although the colors don't seem nearly random enough. Additionally, if I set the color to be some aspect of the index of the loop I'm drawing in (like setting the hue to be (i * 20 % 360)), I get these weird color bands that seem to want to jump back to previous colors. I stepped through the batching code and could not figure out for the life of me where these colors were disappearing. I would love some help as to figuring out this problem because I am completely stumped. I'm using the development build of Pixi v6.0.1.

Hey. I would like to know about drawCalls and their optimization. For example, there is an atlas, one of the pictures with additive blending mode. - Can we do it all in 1 drawCall. (If possible, explain why it is impossible and how it would be possible). The second question, is the developer Yggdrasil in his games uses sequence, an atlas filled with sequences. My developers said that the sequence in Pixi js is bad, and it is better not to use them because of optimization. But Yggdrasil normally uses them and is not afraid of it. Do they use webgl instances? with vertex shader? Can you tell me?

I tried multitexture batching using Richard tutorial with hopes that the performance will be improved https://phaser.io/tutorials/advanced-rendering-tutorial/part4 I made the test on my demo using phaser 2.8.2 https://github.com/Tembac/ChimangoGamesDemo (Demo is not updated with multi texture batching yet) Draw calls are a lot less now but I don't see any performance improvement. On some devices that I tested it is is also showing graphical glitches with several of the sprites. Canvas is still the faster render option on all the devices I try phaser on. Why is this? Maybe I'm doing something wrong? I tested on Ipad 3 and Nexus 6p. I made other tests on the past with slower android devices and canvas is always the best option.

I have some images as small as 32x32 and some as large as 512x512. Is there any reason to not put all of my images in the same sprite sheet? I want to take full advantage of sprite batching and my current understanding is that if all textures come from the same sprite sheet there will be huge performance gains? Jordan

hi all, I've been trying to improve performance on mobile devices. For that, I'm watching draw calls with a plugin I found on this forum ( can't seem to be able to find it again though ) What I've learn by testing it is that mutliple tilesprites using the same texture are inducing a draw call each. Is that something to be excpted? Does sprite batching only work for sprites? Thanks

Hi, Is there a way to batch sprites together to save precious drawcalls (mainly on devices) when they originate from the same sprite sheet? From what I see it seems atlases are used only as sources of bitmaps, they don't batch sprites together. Or am I wrong? Is there any other way in Phaser? Sorry if I missed it somewhere in docs, examples or here on forum, but I completely failed to find any bit of the information. Thanks!