Search the Community

Hello, I'm a developer at Colonist.io and we are looking to increase the game performance on all devices. To test performance, we run multiple instances to force our computer to work harder. We noticed that one of the biggest FPS word is the Player Container View which only displays content and it has zero animations. When we hide it using PIXI.JS Developer Tools, FPS increase by ~15 on all instances. We already started optimizing by using `cacheAsBitmap`, however it is not possible to cache the whole container as content inside it changes from time to time (text and colors). We tried enabling `cacheAsBitmap` by default, disable it on every change, and enable it again after that, however it has some issues such as not being able to listen for `onClick` and a small but noticeable jitter. Some notes: - We are using PIXI.JS 5.3.12 - Spector.js only reports 9 draws - Attached is the structure of every single player container and what we are optimizing - We are aware that all GUI should be made with raw HTML and CSS but we want that to be our last resort. - Sprites are loaded and rendered with the following logic: // This gets run before the game starts export function loadImages() { for(const img of getImagesToPreload()) { const imgPath: string = UIImagePathController.getImagePath(img.name + img.extension) PIXI.Loader.shared.add(img.name, imgPath, {crossOrigin: true}) } PIXI.Loader.shared.onProgress.add(loadProgressHandler) PIXI.Loader.shared.load(assetsFinishedLoading) } // This is an example of how we load a texture static getTextureForCard(cardEnum: CardEnum): PIXI.Texture { const cardData = CardDataController.getCardDataForCard(cardEnum) if(cardData == undefined) { logError('getTextureForCard', [cardEnum]) return PIXI.Loader.shared.resources.card_rescardback.texture } return PIXI.Loader.shared.resources[cardData.imageFileName].texture } I don't really know what the approach here should be. Any help is appreciated. Thanks!

Hello community! Unfortunately I have a game-breaking issue that troubles me a lot recently and I'm running out of ideas. In my game I have built a frontend using React and embedded a Pixijs canvas on one page. While the game is running and the game loop (requestAnimationFrame() with a modest 50 ticks per second, additionally some "interpolation" code that renders interpolated position updates between the ticks to make the game look very smooth) updates the scene, React handles a scoreboard and a chat right next to it. Now for example, whenever someone writes a new chat message, the virtual DOM is getting updated to push a new <div> on the page, which is displayed right next to the Pixijs game. The game itself is extremely smooth and runs perfectly. But when the elements of the page change (new chat message, new scoreboard results) it causes a small visual freeze in my Pixijs game. The loop still updates everything correctly as there is no desync between the server-side state of the game and the client-side state of the game, but visually there is a small freeze. I believe that my Pixijs code is pretty optimized and I tried everything on the React side of things aswell. I managed already that React does not re-render the whole page but only the parts that actually update (the chat, the scoreboard). But it did not solve the issue. The weird thing is this: I tried a little experiment where I "spammed" many automatic updates (multiple every second) to the player scoreboard and chat using server messages that emulates the same behavior as when players manually type messages. And the game did not freeze much. But whenever I play the game with a couple of players and players write in the chat or automatic chat messages appear (e.g. informing everyone that a player left the game) or the scoreboard updates, there will be a small freeze frequently. Does anybody have experience with a similar issue and could be of assistance? I'm willing to let you look into my codebase and you can also try out the game if you are interested to experience this issue urself. I would be very glad if someone could help me as this problem seems to make all my efforts in developing this game go to ruin sadly.

Hello! I have got a tiled map using PIXI.extras.TilingSprite and a player with simple animation using PIXI.extras.AnimatedSprite, which is moving to the right corner of the screen automaticly ( like player.position.x++ ), then player position.x > window.innerWidth, player startes again on the start position. Game updates using requestAnimationFrame function. Just playing with PIXI... But after a 15-20 seconds of player movement a noticed FPS FAILING. I have NO ideas why it happens. Can you help me?

I found that games made in v2.6.2 have a huge better perfomance on mobile devices than in v2.9.4 CE (early versions too) checked the changelog, and don't see the major updates in something that may impact on this.. does anyone know why is this happening?

Hi, On some Android devices canvas renderer works better and stable than Web GL Some games may crash in Web GL mode when in canvas mode all games stable. I want to ask is there any way how can we detect it ? Maybe some benchmarks exist ?

Hi all! I made map with buildings and trees. The map using 15 textures 512x512. What better for performance? Using 15 textures 512x512? Or combine all map textures in one big texture 2048x2048? and what the max size of the texture babylon is supports? Thank!

for better loading speed, i used texture packer to change multiple sprites to some json atlas. sometime, fps drop from 45-50 to 2-3, especially when use tween or when user other object as modal popup in states. The "sprites" version working fine with 45-50 fps. It happened on "canvas" render mode, the "opengl" render mode is fine with 25-30fps. But i need to use canvas mode for capture screenshot button (canvas2image), and it give better fps (45-50 when uses pure sprites). Does anyone have a solution for this, please help. p/s: sorry for my bad english!

Hi! I have a strange behavior: when I start game first time on mobile browser (with clear cache) it runs very slow. But when I reload page it performs much better. May be someone faced with similar. [EDIT] I've tested on chrome & safari, it occurs only in chrome. [EDIT2] Oh, looks like this is random thing, depends on device's processor loading..