Search the Community

Hey all, I have a PIXI.Graphics line with about 500k points. Draws fine, I added PIXI-Viewport for zoom and pan. When I zoom in the line resolution is not good. 2 questions. Main Question, how to fix the sharpness of the line on zoom-in Second question, how can I limit the zoom and pan to the min and max of this line I've drawn? Thanks! pixi-graph.mp4

I'm trying to make a cellular automaton using Pixi.js, and so I want it as fast as possible. Each 2 by 2 square is a unit called a bug that looks like this: (without the outline). The top right and bottom left will always be the same color, so on start I currently create 3 sprites based on a white square, put one that covers the whole bug and then one in the upper and lower corner on top of it, create a new container, put these 3 sprites in it, and run a loop that does this and puts each new container in a 2d array that represents the board. Then on each update cycle, I cycle thru the array and for each bug that needs to change, I get its 3 children by id and change their tint. I am very new to Pixi, and to javascript for that matter. I've read thru the pixi API a lot trying to understand how it all works, but I'm not sure if I'm missing something in my methodology that may make it run faster. Any advice?

I need to improve the smoothness of the curved lines which are drawn using PixiJS. When I set the antialias=true, the rendered application would be handy with the smooth lines. Though when I download the rendered segment it seems that the curved lines are not smooth as the rendered one in the web page. Is there a way to improve the smoothness of curved lines in downloaded image. I use following method to download image this.renderTexture = PIXI.RenderTexture.create( { width: this.pixiApp.screen.width, height: this.pixiApp.screen.height, resolution: this.pixiApp.renderer.resolution }); this.pixiApp.renderer.render(this.pixiApp.stage, this.renderTexture); return this.pixiApp.renderer.plugins.extract.image(this.renderTexture, 'image/jpge', 1);

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.

Hi, I just joined this form and am very new to the webgl development, so my apologies in advance if this is a question that does not really make sense. I am currently trying to use PIXI.js with a third party data visualization library. One of the classes in this third party library provides a way to customize the way it renders graphics. In the sample application, they do this by writing a raw webgl but I would love to do this using PIXI.js if possible. This class passes webgl context (this.context) so we can do something like below. const gl = this.context; // webgl context used by the third party library const vs = gl.createShader(gl.VERTEX_SHADER); ... So to use this context in PIXI.js, I tried const renderer = new PIXI.Renderer({ context: this.context, clearBeforeRender: false }) ... However, after I called renderer.render(stage), I see some graphics (what I drew using PIXI.Graphics) for an instance and I lost all of them.. I see a bunch of error logs in the developer console. 2core.js:6180 unsupported index buffer type: uint32 push../node_modules/@pixi/core/dist/esm/core.js.GeometrySystem.draw @ core.js:6180 push../node_modules/@pixi/graphics/dist/esm/graphics.js.Graphics._renderDrawCallDirect @ graphics.js:2962 push../node_modules/@pixi/graphics/dist/esm/graphics.js.Graphics._renderDirect @ graphics.js:2947 push../node_modules/@pixi/graphics/dist/esm/graphics.js.Graphics._render @ graphics.js:2861 push../node_modules/@pixi/display/dist/esm/display.js.Container.render @ display.js:1797 push../node_modules/@pixi/display/dist/esm/display.js.Container.render @ display.js:1800 push../node_modules/@pixi/display/dist/esm/display.js.Container.render @ display.js:1800 push../node_modules/@pixi/core/dist/esm/core.js.Renderer.render @ core.js:10290 tilesChanged @ data.ts:122 a.<computed> @ Accessor.js:5 update @ BaseLayerViewGL2D.js:5 processUpdate @ LayerView2D.js:5 _updateLayerView @ FrameTask.js:5 forEach @ Collection.js:5 update @ FrameTask.js:5 (anonymous) @ scheduling.js:5 forAll @ PooledArray.js:5 x @ scheduling.js:5 j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 5 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 6 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 7 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 8 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 9 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 10 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 11 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 12 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 13 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 14 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 15 Unfortunately, even after searching an answer in google for a few hours, I don't still understand what these errors indicate.. If somebody could give me any advise or insight, it would be highly appreciated. Thank you very much.

I'm working on a custom data-visualization for large data sets. I originally have been building it with svg, but I'm hitting a peformance bottle-neck quickly with the number of elements I can render and animate. I need to have thousands of elements rendered, animating periodically for key transitions, and support zoom eventually. Only a fraction of the total elements rendered will ever need to animate with dynamic geometry at any given time. Everything else will animate via fadeIn/fadeOut. So for an estimated medium sized data-set case, if I have ~ 1000 data objects, I need to render ~ 3000 objects, all needing animations, but only about 1000 of those will ever need to dynamically update their geometry at a given time, simultaneously. Whenever I see advice for performance, I always see pointers to using textures and sprites. Unfortunately, I don't think I can use textures or sprites here instead, because I'm not just doing simple transforms on the geometries, but changing fundamental parameters of the geometries (ie: one custom path to another). I cannot share my project code unfortunately, but here is a sandbox with n number of randomly placed circles, each of which has its r animating. If you change n to 300 in App.js, things start getting pretty janky... While this is a contrived example, the fundamental requirements are accurate: large number of dynamic geometries animating simultaneously. Thanks in advance for any guidance / advice / direction / tutelage. Note - I am very new to webgl, and it seems very daunting, which is why I'm currently opting to use react-pixi. I'm not opposed to digging into webgl deeper to get what I need, but I have no idea where to start...

Hello ! My objective is to create geometry for meshes. until now I used quad so it wasn't too hard to model. Now I want to model some more complex shapes in 2D, polygons, cones etc. Since I'm familiar with the tools exposed in the PIXI.Graphics object, I thought to myself, "Hey! I'm going to draw a shape, and reuse the geometry contained in the Graphics object." Here is my playground: https://www.pixiplayground.com/#/edit/jGD8JtmKkkbseor6FklBg But after a few tests, it doesn't look so easy. What did I miss? Thanks for your help!

I've noticed a small visual bug with the menu I have. When I startup the game for the first time in the browser (in a private window with no cookies), the "label" objects have their fonts properly display but the "button" objects do not. The buttons appear to display the default font instead. However, once I have refreshed the page at least once, all fonts display properly for every subsequent refresh. So this has me thinking that the font is not loading into the button object fast enough before it's drawn the first time and I'm wondering how I can fix that. Here's some relevant code: This function is responsible for creating the PIXI.Text for my custom label class. Renderer.prototype.setLabelGraphic = function(label){ let message = label.text; let style = this.textStyles[label.textStyle]; let text = new PIXI.Text(message, style); label.graphic = text; }; This function is responsible for creating the PIXI.Text and Rectangle for my custom button class. Renderer.prototype.setButtonGraphic = function(button){ let minimumWidth = 150; let minimumHeight = 50; let container = new PIXI.Container(); // Create label component. let message = button.text; let textStyle = this.textStyles[button.textStyle]; let text = new PIXI.Text(message, textStyle); // Create button component. let rectangle = this.configureButtonRect(button.style); let rectangleWidth = (text.width < minimumWidth) ? minimumWidth : text.width; let rectangleHeight = (text.height < minimumHeight) ? minimumHeight: text.height; rectangle.drawRect(0, 0, rectangleWidth, rectangleHeight); rectangle.endFill(); // Center text within containing rectangle. let center = [(rectangleWidth / 2) - (text.width / 2), (rectangleHeight / 2) - (text.height / 2)] text.position.set(center[0], center[1]); // Combine them into the container. container.addChild(rectangle); container.addChild(text); button.graphic = container; }; The configureButtonRect in the previous: Renderer.prototype.configureButtonRect = function(buttonStyle){ let rectangle = new PIXI.Graphics(); let colour; if(buttonStyle === "default"){ colour = 0xFFBF75; rectangle.lineStyle(2, 0xCA826C, 1); } else console.error(`Error configuring button rectangle: {buttonStyle} is not a valid button style.`); rectangle.beginFill(colour); return rectangle; }; Drawing of either object is simply add their respective graphic attribute to the stage. I feel that the solution is to simply just have the game wait for the fonts load before adding to the container via promises or callbacks, but I'm not exactly sure which part of the code would be responsible for the delay.

Hello, my name is Alejandro. I'm an indie developer, I work also as freelancer. My portfolio is http://www.noisechip.com/, my rate is 10-15$ hour. Here are some examples of my work: You can also reach me by mail [email protected] and discord noisechip#8773. Thanks.

Is there a way to scale a Graphics without getting the linewidth scaled as well? For instance: var stage = new PIXI.Container(); var graphics = new PIXI.Graphics(); // Set a fill and line style. var linewidth = 10; graphics.beginFill(0xFF3300); graphics.lineStyle(linewidth, 0xffd900, 1); // Draw a shape. graphics.moveTo(50, 50); graphics.lineTo(250, 50); graphics.lineTo(100, 100); graphics.endFill(); // Now, scale this Graphics. var scale = 5; graphics.scale.set(scale, scale); // all lines now have width linewidth * scale In the example above, the vector "shape" gets properly scaled by a factor of 5. Unfortunately, so does the linewidth. I am trying to render Graphics vector data on top of Google Maps (typically polygons over countries), and when the map gets zoomed in, I want to rescale the data without getting enormous boundaries.

Hello I saw two different methods of generating textures from graphics object in pixi 5 WebGL: graphics.generateCanvasTexture() renderer.generateTexture(graphics) How those methods differ from each others? And which one should I use in which cases? Documentation doesn't explain it exactly. Thank you in advance for help!

Hello! I have a custom font that I create and I want to test it before being downloaded as an archive. At the moment of the test, I do not have a font file to load it using the BitmapText(text, OPTIONS) functionality. I was wondering if I can load it directly from an xml data string or blob or data url. I checked the official documentation (BitmapFont, BitmapFontLoader), but it is unclear to me if that will work. I would greatly appreciate an example, handling custom fonts is scarce on the internet. Thank you!

Since graphic sprites have no anchors, the only way to position a texture used with BeginTextureFill is the defaultAnchor of the texture. However, changing the defaultAnchor seems to have no effect. I've tried every combination of anchoring and positioning and this is the consistent result (below). Both texture and sprite are the same dimensions (400 x 400).

I want to draw a rounded rectangle. I've seen a function to draw this but i'm new in phaser and i have no idea how to use it and in documentation there isn't examples. http://phaser.io/docs/2.3.0/RoundedRectangle.html ¿Someone can help with and example? Thanks!

Hi, I created a Graphics object and draw in it behind the coordinates of the mouse. I use moveTo (), lineTo () and strokePath (). I would like to fill the object inside the line and use fillPath (), however the shapes can be drawn with different patches. Are there any ideas how I can fill in shapes drawn from different patches? In the image, an example - line numbers is the order in which they are drawn. Thanks for any ideas!

Why does the method arcTo not work? http://codepen.io/anon/pen/VvjWZz?editors=101 P.S. v 3.0.7 P.P.S. arc also does not work.. P.P.P.S. bezierCurveTo works, but for some reason it closes (end connects to the beginning)...

Hi all.I am a beginner of pixi.js, and using PIXI.Graphics to create a circular progress bar that will move over time, the effect is like the one below: https://codepen.io/saadeghi/pen/IBhfJ More specifically, the circular progress bar moves over time. So, the graphics is modified constantly, this caused a very serious performance problem and even caused the iOS system to crash. My question is what should I do to implement such a circular progress bar in pixijs? My English is poor, thank you for reading.

I have a image, it should not be displayed on the screen. But I need the color values of certain pixels. Exists in pixi analog getPixel from as3? If pixi doesn't exist a worthy counterpart, then the second question is how to translate a color value from a context.getimageData().data in the format 0x00000000, suitable for graphics.beginFill() ?

Hi! So I want to make a circle with multiple colors. The colors and angles will change dynamically so sprites or images aren't a solution. But when I draw the circle by chaininc 4 calls to Graphics#arc this happens (on Firefox, Chrome and mobile versions) : My code is basically : class extends Graphics { constructor() { // ... this.lineStyle(this.thickness, color1) this.arc(0, 0, this.radius, start1, end1) this.lineStyle(this.thickness, color2) this.arc(0, 0, this.radius, start2, end2) // etc ... } // ... } No other calls to any draw method or anything (math hidden for reading convenience ?). Any ideas what that could be from ? My current fix is to draw all the arcs 0.1rad longer and then redrawing the first arc to overlap the last unnecessary bit but it's `// ewww`...

Hi, I've encountered a strage problem while building a little, mostly static mobile game using Intels XDK, Cordova and Phaser (2.4.6). It's targeted at Android and uses the Crosswalk web runtime. I basically followed Matt McFarlands menu tutorial, and created States to do stuff like booting up, loading all assets, showing a splash screen, showing a menu, the levels etc. I'm using one Phaser.Graphics object per State to draw on (my game only needs a few geometric items). Additionaly I'm using the SaveCPU plugin to avoid unnecessary render cycles. Unfortunately removing it doesn't seem to remove the flashing problem. The stage.background is set to white, in the HTML part backgroud colors are also set to white. When moving from one State to the next I nevertheless get strange black flashes after entering the new State. Sometimes they cover the whole viewable area, sometimes they seem to be a black rectangle originating at the canvas center and covering only the lower right quadrant. I only get those flashes on mobile devices, they don't happen in a browser on a PC. I also observed that they seem to appear only after I add the Graphics object to a State, States whithout Graphics objects don't flash. Unfortunately I wasn't able to find out when exactly a flash occurs, but it seems to be either in or before/after init(), preload() or create(). The typical structure of my States looks like that: MyState = function () {} MyState.prototype = { init: function () { game.stage.backgroundColor = "#FFFFFF"; this.graphics = game.make.graphics(0, 0); // do some more stuff, initialise variables etc. }, preload: function () { this.graphics.alpha = 0; this.graphics.width = game.global.canvasWidth; this.graphics.height = game.global.canvasHeight; // do some more stuff }, create: function() { // do some more stuff game.add.existing(this.graphics); // do some more stuff, set up input handlers etc. // graphics fade in game.add.tween(this.graphics).to({alpha: 1}, 1000, Phaser.Easing.Quadratic.Out, true); // rendering was set to 60 FPS in the previous state (probably unnecessarily), // as long as there are active tweens forceRender() of the SaveCPU plugin is called in update() game.global.saveCpu.renderOnFPS = 0; }, update: function () { if (game.global.saveCpu.renderOnFPS === 0 && game.tweens.getAll().length > 0) game.global.saveCpu.forceRender(); }, render: function () { this.graphics.clear(); // draw stuff like menu buttons game pices etc using graphics drawing methods }, // [ ... more methods for state specific stuff ... ] moveToNextState: function (stateName) { // fade out the graphics and move on to the next state game.global.saveCpu.renderOnFPS = 60; var theEndTween = game.add.tween(this.graphics).to({alpha: 0}, 1000, Phaser.Easing.Quadratic.Out, true); theEndTween.onComplete.add(function () { game.state.start(stateName, true, false); }, this); } } So I wonder if anybody has an idea about what causes the flashes and how I may avoid them?

I am using PIXIJS Canvas Renderer and trying to apply a graphics polygon as mask in a sprite. When add graphics polygon as sprite.mask, i am getting blank canvas. Am i missing something or its just stupid idea? JSFiddle code: https://jsfiddle.net/Lk2fjmn3/8/

Hey guys! I've got one main question, with a few follow ups.. here goes I was wondering if there was a way draw an image onto the PIXI.Graphics (object thingy)? I'm aware I can add sprites to the stage and other containers. But I'm currently drawing polygons, and images (with a dynamic render order), So this seems like a good way to do that. Is there a way of doing this, similar to the plain/vanilla canvas way: var canvas = Dom.get('canvas');var context = canvas.getContext('2d');context.drawImage(source, x, y, w, h, ...); I've tried: var context = pixiRenderer.context;.. but this only returns the following: CanvasRenderingContext2D {} And now for the follow ups: Is the context (2d), unique to the Canvas? Would drawing imaged to the graphics object limit me to the CanvasRenderer, or could I still use PIXI.autoDetectRenderer and PIXI.WebGLRenderer ? Thanks in advance!

I am using the "camera.main.shake()" function How to do make sure that certain graphics like the UI ignore the shake? For example if had this box var newGraphic = this.add.graphics({ lineStyle: { width: 2, color: 0x555555 }, fillStyle: { color: 0xeeeeee } }); var rect = new Phaser.Geom.Rectangle(); rect.width = 500; rect.height =500; rect.x = 0; rect.y = 0; newGraphic.strokeRectShape(rect); Thanks

I'm using Phaser2 to make a simple game. When I set the game width and height to these: var Screen_Width = window.innerWidth * window.devicePixelRatio; var Screen_Height = window.innerHeight * window.devicePixelRatio; The game runs really slow on my iPhone. What is the problem?

I'm finding the graphics examples very impressive, but it is the simple things that are tripping me up. I know I must be missing something simple, but is there a simple way to draw a rounded rectangle in Phaser 3?