Search the Community

Hello! I upgraded my engine to use PIXI v6 instead of v4 and noticed a significant increase in the drawing time (especially pronounced in iPad 6th Gen). Left is V6 and Right is V4, in the same scene. I originally thought it was a problem with the getLocalBounds call in spines that I had in the render loop and managed to improve the scripting time by about 10% but I then noticed that the rendering and painting had increased dramatically... the same game that runs at 30-40fps with V4 runs at 15-25fps with V6 in an iPad. Weirdly though, the draw calls in V4 were about 170 and in v6 dropped to about 60 (checked with spector.js chrome extension) which would indicate to me that the fps would be better but they are not, sadly. Setting 'transparent' to true or false when creating the PIXI.Renderer does nothing 😕 Is this a known thing? I searched for days and could not find anything about this EDIT: I can send the Spector.js reports for V4 and V6 if it helps but they are too big to be embedded here!

Hi Everyone, I'm working on a Guitar Hero / Rocksmith like game in Pixi.js: a song plays and some boxes scroll towards a cursor that lets a guitarist know how to play along. Website if anyone is interested: aimusiclessons.com. I'm running into performance issues, specifically with stutter and after 1.5 weeks going through PIXI issues and HTML5 dev forums and trying a bunch of different approaches I'm completely lost with what to do next. The stutter really impacts UX and my sanity. Any help/guidance would be greatly appreciated. There's no crazy animations, filters, or massive amounts of sprites, so it should be running smooth even on a crappy device. For the experiments below I removed all the microphone monitoring and processing, it's just straight up PIXI and Howler (playing the mp3 file). Example video of stutter issue (sorry for Justin Bieber - I'm sorry too, it's been my test song for 1.5 weeks). app_stutter_example.mp4 I'm developing in Chrome (other browsers affected as well): dev tools says 60fps and no dropped frames, all render ticks are happening well within 16.6ms acceptable bounds. Mobile performance has stutter too, and lower fps ~40fps. I've tried 2 different approaches to drawing boxes (boxes are variable width, so need to be scalable). There's max 15 boxes on screen at a time and max maybe 3000 boxes total in a 3.5min song. Each box is Pixi.Container containing a graphics object drawing roundedRect for the foreground, roundedRect for the background shadow, Pixi.Text for the number. I read there's a potentially a bunch of performance issues with Pixi.Graphics so I've also tried calling cacheAsBitmap on each box after assembling it when loading the stage to try to speed up rendering later on: seems to be a bit more stable in terms of stutter than my other attempts but still noticeably bad. I also don't love this approach because I need to change the box tint realtime and then need to disable cacheAsBitmap then re-enable which seems inefficient. ^ this is a frame that takes longer to render (some take 2ms, some 9ms like this one). With this approach, relatively low GPU usage (GPU tasks are each under 1ms), 60fps (we don't drop a frame), but stutter exists I think because variability in length of time to render frame. Don't appear to have bad GC calls. I found this post that Ivan responded to that suggests a sprite for the left of rounded rect, sprite for middle, and sprite for right of rounded rect. I created images in a sprite sheet for the left, middle (1px), and right of the boxes (sprite for each) and then setting .width on the middle sprite (tried both Sprite and TilingSprite) to have variable width boxes. Instead of using Pixi.Text, load image of text number from spritesheet. Stutter still exists. No bad GC calls. ^ with this approach all the frame renders seem to be much shorter (<2.5ms each). In other performance snapshots I saw longer GPU tasks in bad stutter sections (some up to 10ms long), but can't recreate that today. Edit: was able to recreate it this morning, here's the performance snapshot (see the bunch of grey peaks in the timeline corresponding with long GPU tasks): Here's Spector.js rendering out a frame I've tried 2 different approaches to scrolling, culling: Putting all the boxes into one Pixi.Container. Changing the x position of the Container every tick to scroll all the boxes over. Culling algorithm runs every mod 15 frames that sets .visible/.renderable on off-screen boxes. Pooling: constructing a pool of 20 boxes on load and request/releasing them in culling algorithm when they would be on screen. Swap texture for text number I need. Set width (stretch) middle sprite to have the correct width box. Scroll by changing x position of each active box on stage directly: ~15 DisplayObject position updates per frame. Other things I've tried: Seemingly every combination of PIXI.settings (antialiasing, resolution, GC_MODE, ROUND_PIXELS, etc.) https://github.com/pixijs/pixijs/issues/7771: I do subclass PIXI containers and Sprites in my OOP code. I painstakingly changed that structure and it didn't help. Removing every object/widget on the screen except for the background guitar fretboard and the scrolling note boxes. Still stutter. Using pixi preloader (although I think loading BaseTexture from sprite atlas loads up the GPU anyways so redundant). POT spritesheet to enable MIPMAP. I ran into a bunch of issues with artifacts on the screen, but still didn't help stutter. Disabling all browser extensions running There's no transpiling happening with Babel, etc. I just want this thing to run smoothly. It should be able to and that's why I'm frustrated (and length of time debugging this). I created a CodePen with a minimal example that demonstrates the stutter: https://codepen.io/gburlet/pen/QWqxxLE. This uses @ivan.popelyshev's idea of rendering variable length boxes with 3 sprites and culls using a Sprite pool. If you sit and watch the movement, sometimes it's smooth and then stutters here and there, and sometimes gets into bad sections of stutter then recovers, at least on my macbook, mac pro, iPad, iPhone (all > 2017 devices). On my beefy gaming computer with nvidia card seems to run OK. Any suggestions, guidance, advice, help? Thanks!

Hello everyone, I'm suggesting using pixi (v5) for a component on a really bloated site, and its bringing too much weight to the final bundle. We don't need everything the library offers, so I was wondering if we can import what we need and maybe minimize the impact on the final bundle weight. Has anyone encountered a similar issue? How did you manage it?

Hi, I'm on Pixi current days. I was so amazed when I saw this animation : https://art4globalgoals.com/en So, I tried to clone the brush masking effect. I succeed to make a mask, make brush effect. The problem is that, I can't remove current brush sprite. I tried to console log my app, stage, renderer, but I can't find where my sprite is registered (sorry for the terminology, Im wondering im using right terminology).... Also, is there any way to trigger dragging event? , above the link, there seems to appear brush scratch effect automatically, but is there any idea about this? ```` import * as PIXI from 'pixi.js'; import { Point } from '@pixi/math'; const screenSize = { width: window.innerWidth, height: window.innerHeight }; let brushWidth = (window.innerHeight / window.innerWidth) * 150; let brushHeight = (window.innerHeight / window.innerWidth) * 200; const app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, resolution: window.devicePixelRatio, autoDensity: true }); document.body.appendChild(app.view); app.loader .add('background', '/jpeg/mask.jpeg') .add('mask', '/png/effel-gray.png') .add('bristle1', '/png/brush6.png') .add('bristle2', '/png/bristle2.png') .load(() => { setup(); }); const setup = () => { const brushTexture = app.loader.resources.bristle1.texture; const brush = new PIXI.Sprite(brushTexture); brush.width = brushWidth; brush.height = brushHeight; brush.anchor.set(0.5,0.5); const backgroundTexture = app.loader.resources.background.texture; const maskTexture = app.loader.resources.mask.texture; const background = new PIXI.Sprite(backgroundTexture); background.x = app.renderer.screen.width / 2; background.y = app.renderer.screen.height / 2; background.anchor.x = 0.5; background.anchor.y = 0.5; background.width = window.innerWidth; background.height = window.innerHeight; const mask = new PIXI.Sprite(maskTexture); mask.width = app.renderer.screen.width; mask.height = app.renderer.screen.height; mask.x = app.renderer.screen.width / 2; mask.y = app.renderer.screen.height / 2; mask.anchor.x = 0.5; mask.anchor.y = 0.5; mask.width = window.innerWidth; mask.height = window.innerHeight; app.stage.addChild(mask); app.stage.addChild(background); const renderTexture = PIXI.RenderTexture.create(app.screen.width, app.screen.height); const renderTextureSprite = new PIXI.Sprite(renderTexture); app.stage.addChild(renderTextureSprite); background.mask = renderTextureSprite; app.stage.interactive = true; app.stage.on('pointerdown', pointerDown); app.stage.on('pointerup', pointerUp); app.stage.on('pointermove', pointerMove); let dragging = false; const originVector = new Point(1, 0); let vector; function pointerMove(event) { if (dragging) { brush.position.copyFrom(event.data.global); const originPos = { x : event.data.global.x - window.innerWidth / 2, y : -(event.data.global.y - window.innerHeight / 2) } const vx = originPos.x; const vy = originPos.y; vector = new Point(vx, vy); vector = normalizeVector(vector); const dotProd = (vector.x * originVector.x) + (vector.y * originVector.y); const angle = Math.acos(dotProd); const rotationMatrix = new PIXI.Matrix() rotationMatrix.rotate(angle); brush.rotation = angle; app.renderer.render( brush, { renderTexture, clear: false }, false, null, false ); } } function pointerDown(event) { dragging = true; pointerMove(event); } function pointerUp(event) { dragging = false; brush.width = brushWidth; console.dir(app.renderer) app.renderer.managedTextures[4].destroy(); } window.addEventListener('resize', () => { screenSize.width = window.innerWidth; screenSize.height = window.innerHeight; app.renderer.resize(window.innerWidth, window.innerHeight); app.renderer.stage.width = window.innerWidth; app.renderer.stage.height = window.innerHeight; }); }; const getMagnitude = (x , y) => { return Math.sqrt(x*x + y*y); } const normalizeVector = (vector) =>{ const magnitude = getMagnitude(vector.x , vector.y); vector.x /= magnitude; vector.y /= magnitude; return vector; } `````

Hello I have an application where i need to display approximately 1000 elements (with 5 main shapes and dynamic colors). I have think at several different approach : - Using only Graphics but as it is says in the documentation (Using 300 or more graphics objects can be slow, in this instance use sprites, if you can create a texture to share between them.) - Using Sprites from Textures from Graphic (the problem of this approach it that i have elements colored dynamically, and i'm not able to generate a Texture from a Graphic => I don't want to use either @pixi/canvas-graphics) - Using Shaders I don't have any overview regarding shaders performances. Is it better than Sprites ? than Graphics ? I would like to make the right decision in terms of performances and good practices. Thank you in advance. Have a good day !

I'm working on an application which allows to make image processing, so I used Javascript and PixiJS library to make it possible. I wanted to update cursor image when canvas was hovered first solution I tried to use cursor: url(cursor1.png) 4 12, auto; but I can't resize cursor. The default size is 64px and I can't set another value. second solution I decided to add into DOM <img src=""> and update x,y position using Javascript but I got latency. third solution was to integrate cursor inside my canvas. last solution I tried to split actions into 2 canvas. The first deals with image processing and the second is my cursor. With all propositions made before I got loss of FPS when canvas is hovered excepted the first one. Init canvas for cursor update when mouse hover it function _initMainCanvas(imgData) { let newCanvas = new PIXI.Application({ width: imgData.width, height: imgData.height, transparent: true }); let blurContainer = new PIXI.Container(); filters.initFilters(); // ---------------------------------------------------------------------------------------- // Normal Sprite // ---------------------------------------------------------------------------------------- let bg = main.createSprite({ from: imgData.img, interactive: true, filters: [filters.getFilterSharpen(), filters.getFilterAdjustment()], width: imgData.width, height: imgData.height }); newCanvas.stage.addChild(bg); //$(".blur_cursor").remove(); // ---------------------------------------------------------------------------------------- // Blur Sprite // ---------------------------------------------------------------------------------------- let bgBlured = main.createSprite({ from: imgData.img, interactive: false, filters: filters.getFilters(), width: imgData.width, height: imgData.height }); blurContainer.addChild(bgBlured); blurContainer.mask = containers.getBlurs(); newCanvas.stage.addChild(blurContainer); newCanvas.stage.addChild(blurContainer); select.initSelectionRect(); newCanvas.stage.addChild(select.getSelectionRect()); canvas.addMainCanvas(newCanvas); document.getElementById("container").appendChild(newCanvas.view); } Init canvas for cursor update when mouse hover it function _initCursorCanvas(imgData) { let cursorCanvas = new PIXI.Application({ width: imgData.width, height: imgData.height, transparent: true }); _fillCursorCanvas(cursorCanvas); canvas.addCursorCanvas(cursorCanvas); document.getElementById("container").appendChild(cursorCanvas.view); } function _fillCursorCanvas(cursorCanvas) { // emptySprite allows to bind events let emptySprite = new PIXI.Sprite(); emptySprite.interactive = true; emptySprite.width = cursorCanvas.screen.width; emptySprite.height = cursorCanvas.screen.height; cursorCanvas.stage.addChild(emptySprite); emptySprite .on("pointerdown", canvasEvents.handlerMousedown) .on("pointerup", canvasEvents.handlerMouseup) .on("pointermove", canvasEvents.handlerMousemove) .on("pointerout", canvasEvents.handlerMouseout); const scale = W / canvas.getWidth(); const cursorTexture = new PIXI.Texture.from( urlManager.replace("index.php/", "") + "assets/images/cursor_img/50.png" ); let circle = new PIXI.Sprite(cursorTexture); circle.width = 50 / scale; circle.height = 50 / scale; cursorCanvas.stage.addChild(circle); } Mousemove event const x = e.data.global.x; const y = e.data.global.y; cursor.updatePosition(x, y, W); Sorry I can't show you an example like codesandbox because my browser but my browser was not responding. However I can send you github repo if you want. Will anyone know how to optimize FPS on mouse flying, thank you in advance !

I am using Pixi.js to make a 2d graphics editing engine similar to Figma. The demand scenario is that users need to create up to 10k+ graphics in the Container and have free editing, grouping, and sorting functions. Besides, the visual area needs to be moved and zoomed. For the various performance issues that might be involved in this scenario, I searched a lot of existing posts and learned the following optimization measures: I am optimistic about the performance of Pixi.js in this scenario. I believe that algorithm-level optimizations can solve most performance problems, but there are still problems remaining: Finally, even if I am very satisfied with the performance, various out-of-the-box features, and powerful extendibility of Pixi.js, I still want to know, in the scenario of the 2d graphics editing engine: I searched a lot of posts and information, but still have a lot of confusion above, I am very sorry for asking so many questions?! You can cite relevant documents or links to answer my questions as much as possible, and I will learn more about it, which can save you precious time! If possible, I hope that my product will eventually become an excellent example of Pixi.js, and I have confidence in this! I would like to thank the Pixi.js team for their continuous contribution to the WebGL field!

I'm researching about creating a visual " algebra geometry " desktop game-oriented app for students which the user can create 2D primitive shapes and parametric shape patterns with help of numeric-nodes. the similar application would be something like " grasshopper " plugin for " rhino 3d ". In parametric patterns user may create some thing around 1000 to 1500 user-defined shapes which each shape: - has its own animation for vertices, position, rotation - may response to mouse interactions - has its own color or texture and stroke - will be generated dynamically in runtime base on user input also I have to code a mini node base editor . I've seen and study web-techs and precious libs and frameworks like Pixi and searched alot about best practices. I have some questions and I'll be grateful if you help me to find the answers: - is web-techs suitable for the application? - according to what I absorbed from API docs, PIXI.Graphics is designed for none-continues changing shapes so should I instead extend PIXI.Mesh or the Graphics does the job? what is the best way of creating such a shape? - should the custom-shape class be my biggest concern or there are other performance related things I need to take care of? - any further suggestion ? thanks ?

I couldn't seem to find a clear solution online that would apply to me anywhere but if this has been discussed elsewhere feel free to link me there. My game's fps dips after running for only a few minutes. Shortly after my os slows down because my game uses up all the memory of the browser. I suspect the culprit is how I currently draw sprites because my "game" currently only involves placing a few sprites/text on the screen. I have my custom game framework setup to only really use Pixi.js primitives like PIXI.Texture, PIXI.Sprite, PIXI.Text, etc. My Spritesheet class currently contains a single texture attribute that refers to the texture of the entire spritesheet. When it's time to take a single sprite from the Spritesheet, the Spritesheet object creates a copy of its texture attribute and creates a new PIXI.Sprite object using that copy. I create a copy of the texture because changing rect of the Spritesheet's texture attribute would affect all sprites that use that Spritesheet. Drawing involves only adding the PIXI.Sprite object to the stage and clearing just removes all children from the app stage (I don't currently use containers). Here's the method that creates a sprite from the Spritesheet: SpriteSheet.prototype.getSprite = function(index_X, index_Y){ let rect = this._getRectFromIndex(index_X, index_Y); let texture = new PIXI.Texture(this.texture); texture.frame = rect; return new PIXI.Sprite(texture); }; this._getRectFromIndex is just an internal calculation that returns the PIXI.Rectangle object for the frame Here's the draw method: Renderer.prototype.draw = function(child){ this.app.stage.addChild(child); }; And here's the clear method: Renderer.prototype.clear = function(){ this.app.stage.removeChildren(); }; I'm pretty sure creating new Textures/Sprites every frame and only clearing the stage is the cause so I'm wondering what's the best way to improve performance with what I've given. Would just iterating and destroying these textures in clear every frame suffice?

[SOLVED] We finally found out the culprit, I set the antialias to true in PixiJS while createJs didn't. My player reported that after turning off the antialias, it works better than the createJs. Hello everybody, my name is Draco. I am the creator of a web game called stabfish.io My game was built using createJS with Animate export plugin. Unsatisfied with the performance, recently I convert the whole game using PixiJS v5, with pixi-animate plugin. After revamping the game, the performance of the game on my computers has a significant boost. However, there are reports by 2-3 players that the performance has dropped after the update. I would like to know if you have any insight into what might be causing this. In case you guys interested to compare, these are the link: createjs: https://stabfish.io/old pixiJs: https://stabfish.io/pixi I had a debug session with the player who has a performance issue where I try to gather some information and try something to see if the performance improves, these are some clues: 1. The frame rate is dropping significantly when he is playing in full screen in a bigger resolution. (10fps he said) 2. He has 60 fps with createJs version. 3. Both versions have the same amount of displayed object. No special culling in either version. 4. The scripting part (logic/cpu) seems to run smoothly, as I have a built-in detection using setInterval to detect whether the game update frequency is not reaching 60 updates per sec 5. I asked him to turn off the 'hardware acceleration' in the chrome browser to fallback to canvas2d purposely, where he reported no significant change, however, it shows that the logic update is affected immediately in my log Please tell me if you know what's the difference between createJS and PixiJS that could cause such issue. Thank you .

Hi, I've created text in PIXI, and have masked it because I want to allow scrolling. I'm using the latest version of pixi (5.3.0). However when the text loads with the mask, it appears differently on different browsers. I've attached an image for reference. I've tested it using Edge, Firefox and Chrome and all 3 show the text masked differently. Please help me understand why this could happen. Also, when I create a graphic for masking the text, the coordinates and size appear very different to how it functions as a mask. In the image below, the white rectangle is the position and size of a graphic which is used for masking the text below it. As a graphic, the mask(white rectangle) appears small. However when applied to the text behind, it appears bigger and position also changes.

I've been playing around with pixi-layers for a few days now and I've noticed 2 things: The layer.on("sort", ...) callback is being called continuously (on each tick if I had to guess). Each elements within layers have an updateOrder attribute that's continuously incrementing: Screen Recording 2020-06-04 at 21.38.49.mov All of that lead me to believe that layers are being continuously re-sorted (I may be mistaken), and I was wondering what was the point of doing such thing? Wouldn't be better to listen for an element's zOrder to change? This behavior can be observed on the example files as well.

I'm just curious what are regarded as best practices to avoid the dreaded GC pauses that can mess with the framerate of your game. I've only made some really simple games so I don't really have that much experience with this. Generally the way I've made objects when outside gamedev type situations is pretty close the Crockford-style way of making objects by have a factory function that returns an object literal with functions that closures that refers to variables inside functioning as private variables. (Technically I use TypeScript, but I don't really need to get into the types for this discussion.) const createObject = (someArg) => { let variable = someArg; return { changeVariable: (change) => { variable += change; }, getVariable: () => variable, }; }; const o = createObject(42); o.getVariable(); // 42 o.changeVariable(3); o.getVariable(); // 45 From a purely programming ergonomics perspective this is the way of writing objects I find the most comfortable (not trying to convince anyone else here, this is just my preference). However, I've read many places that aspects of this can be bad for performance (even Crockford admits this about his own pattern). in typical JavaScript programming this seems fine to me, but for games I worry that I'm limiting myself in performance which can lead to slowness or limits to for exampe how many objects I can have running in my game. This has made me think that I maybe ought to be using ES6 classes (or something else that uses prototypes) instead of my closure based approach. Also, maybe I should use object pools? Or hell, maybe even entity-component-systems? Suddenly this stuff seems really complicated (I'm _almost_ wishing I could just use malloc and free, haha). How do you people deal with this? How do you balance ease of testing out ideas while having an reasonable path towards optimization if needed be? I'm generally thinking of using Pixi.js for graphics (hence why I posted in this forum), and Matter.js for the times I want a dedicated physics engine. Sorry for the long post! I'll be very grateful for any thoughts on this!

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?

Hi all, I have a backdrop for a little game that I'd like to split into layers (with some particles between) nothing major probably 2-3 layers at max. The game is for mobile and file sizes have got to be as low as possible. The backdrop in question is not something that can be tiled or recreated with an atlas so I'll need to split it into a few largish images. png 32s' tend to be too heavy, 8 bit will probably lose too much colour information. I was wondering about instead using a larger jpg (eg the backdrop is 1920x1080) but maybe extending it to a square 2k, then using that with alpha masks from (colourless pngs) as an alternative (if that makes sense). I thought this way I could drop the size of the jpg more without as much degradation as a png would have (& have finer control). Hoping the colourless pngs wouldn't make as big of a hit essentially just being an alpha map.. Sounds a long way around a small problem, just theorizing atm & wondering if anyone had tried anything similar, noticed any peformance hits using masks v png or even found a nicer alternative? Cheers for any advice!

I have written a simple demo to render 8000 cubes in BabylonJS. But found out it's quite slower than in ThreeJS. Demo in BabylonJs: https://jsfiddle.net/6ng7usmj/ Demo in ThreeJS: https://jsfiddle.net/pofq4827/ It does not make sense, because BabylonJS supports more performance related features like vao. Any help would be greatly appreciated.

Is it possible to use a "stroke" as a mask?

Hi there. First, I'm trying to make an FB Leader board like this image https://prnt.sc/owv7q4. I captured it from Caro - an instant game. And I'm new in Phaser 3. I know how to create circle image by using mask. But my problem is i can't use mask for a child in a container. I spent whole day to search solution on GG Let me tell you how i make Leader board. I use greate UI plugin of Rex, Scroll panel contains a sizer, that sizer contain many containers as row of rank. In container i want to create an circle image and i didn't success with mask Then i changed my solution to using sizer instead of container. Failed again. Please help me find better solution. If i need to post my code here, please tell me. Thanks so much

So I've been looking into the new updates to Phaser CE (2.7.0+) and what has caught my eye the most is the updates to the way Phaser handles textures. It now seems to have the ability to handle texture compression formats for WebGL which is exciting! Previous to this, all the games I had worked in were just loading PNG RGBA data into the graphics card and having come from other engines that support texture compression for GPU RAM optimizations, it was definitely a feature I missed. I've branched on an old project I had in order to test this new compression system but I'm not sure how it would work with atlases. I was already using Texture Packer before to generate Texture Atlases for the game but they were just PNG atlases. I came across this Advanced Rendering Tutorial where it explains how to set up your Texture Packer project. I've gone ahead and done that but the examples only show the ability to load an image with those compression settings. Here is a doc reference to the load image function. Currently, I am using this.game.load.atlasJSONHash('key', 'texturePNGURL', 'jsonURL'); It seems the new update only supports the following two calls this.game.load.image('factory', { etc1: 'assets/factory_etc1.pkm', s3tc: 'assets/factory_dxt1.pvr', pvrtc: 'assets/factory_pvrtc.pvr', truecolor: 'assets/factory.png' }); this.game.load.texture('factory', { etc1: 'assets/factory_etc1.pkm', s3tc: 'assets/factory_dxt1.pvr', pvrtc: 'assets/factory_pvrtc.pvr', truecolor: 'assets/factory.png' }); How would I go about loading my atlases with the accompanying JSON information using the new compression system?

Hey I am trying to build a round minimap. I do not want to duplication rendering of all game objects, so I decided to add a second Camera. My Issue: Is there any way to get the Camera Object in a round shape? The game is an endless generated Map getting chunk data from a nodejs server. So the minimap should stay quite flexible. A camera fits my needs but the shape issue still exists. I would appreciate help a lot

I have canvas 1920 x 1080 and 5 different Spine animations that uses a lot of textures. Add 20 animations of every type all over the screen Test performance in two ways. For this I use GPU-Z and check GPU load parameter 1) Every animation has its own atlas with images and json file - GPU Load 47% 2) Every animation has its own json file but uses the same atlas with images - GPU Load 61% Made the same tests with sprites as well, total amount of sprites is 180, 10 of each type. 1) Each sprite has its own download link - GPU Load 90 % 2) All textures are in the same spritesheet - GPU Load 63% Why tests with Spine have opposite results? PC config is Google Chrome v65, Windows 10, AMD Radeon HD 7450, Intel Xeon x5650

I've found some strange behavior in interactivity events of display object inside a masked container. Not sure if this is a bug or just a questionable decision; anyway, it poses some problems. Generally interactive display objects receives events such as "pointermove" or "pointerupoutside" at any time, whether pointer is over them or not. Same applies to masked display objects, by the way. But if you place an interactive display object inside a masked container, events fire only when pointer is over masked area. All events, including "pointerupoutside", so there's no way to keep track of pointer position and button state. Look at this codepen. Have anyone faced this problem? I guess I can assign event listeners to the stage container or nearest parent without mask, and it will probably work, but seems a little bit dirty to me. Is there a better solution?

Hi everybody, 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? Thank you a lot for your support! David

I have a heavy load Babylon scene (all meshes are optimized), which runs sufficiently well on desktops and tablets. The same site is slugish, slow or does not run at all on many mobiles when accesing through the mobiles browsers. I guess this is pretty normal since mobile GPUs are not as powerful as let's say tablets' GPU. So I guess the best thing to do is to test if the site is being accessed by a mobile device and divert the user to a mirror site where the textures are of lesser quality and the mesh sizes are smaller. Is that a correct solution? Is there any other ways of boosting performance Secondly, will wrapping the site into a Mobile app such as Cordova boost performance as compared to accessing the site through the mobiles' browser? Has anybody had experience with Windows apps running Babylon.js and were there any performance gains?

Hey! Did anybody compare Phaser and pixi for performance? We're going to make isometric game. bottom line is about objects you could render per screen. What do you think? What to choose? Phaser 2, PIXI, or maybe Phaser 3? Need the canvas renderer of course, not webgl. Update: I've the same question in the phaser slack channel. It seems that the PIXI would be better for isometric game then Phaser 2.