Jump to content

Search the Community

Showing results for tags 'performance'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





  1. 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 the
  2. 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
  3. 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 conta
  4. [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, t
  5. 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 e
  6. 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
  7. 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?
  8. 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 w
  9. 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 s
  10. 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 stay
  11. 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 performan
  12. 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.
  13. I've loaded two animations in Pixi with spritesheets. I wanna swap to second animation right after the first animation is finished. However, (It's happen with a 3840x1080 resolution, and the GPU memory usage is mainly fall between 90%-99%) 1. there's a significant lag of the transition between these two animations in the first time. 2. After the first play, if I remove and add the animatedSprite from the stage immediately, the transition is very smooth. 3. After the first play, If I remove the 2 animatedSprite from the stage, wait for ~2-3 minutes and add the 2 animate
  14. Hi, I have problem with phaser performance. The phaser CPU usage is too high. Configuration : - game is on phaser 3 with vue - main page is on vue with game in iFrame this.gameInstance = new Phaser.Game({ width: properties.width, height: properties.height, resolution: PIXEL_RATIO, "callbacks.postBoot": function() { document.getElementsByTagName("canvas")[0].style.width = properties.width + "px" document.getElementsByTagName("canvas")[0].style.height = properties.height + "px" }, scaleMode: 0,
  15. Hi everyone, I'm new with PIXI, and I'm wondering this situation. I want to make a rectangle, and its border can be changed when we hover. I tried search on Google and almost people say I should redraw the rectangle everytime mouse over or out the rectangle to change its border. Like this: But then I ask myself why don't create another rectangle on top of the first rectangle, set it the color we want, make it invisibe and only show it when hover. By doing this we don't have to redraw the original rectangle everytime mouse hover. This is good for optimization, I think.
  16. When I run my game in Firefox, after a few minutes of gaming or even just rotating the camera, the FPS in the game starts periodically drops. Of the stable 60 FPS drops by about a couple of seconds to 20-30 or even just stops. And it starts to happen more and more often. To fix this i need to reboot the browser, nothing else helps. I researched in the performance devtools in the browser and found that this is due by "Cycle Collection" process. ( Note: when I start recording performance, all FPS drops disappear, as if I restarted the browser. And I have to wait again for a while before the
  17. I am troubleshooting a rendering performance problem with PIXI. I have an 1920 x 1080 image slideshow. The images fill the entire window and are scaled up if needed. Once an image has loaded, I load another image on top of that image (with alpha = 0) then fade it in. When the new image is faded in, the previous one is removed from the PIXI.Container. All this works 100% awesome on my brand new MacBook Pro. 60fps, very low memory consumption. It's great! But when I load it onto a BrightSign player (basically a ROKU box made specifically for Digital Signage) it has TERRIBLE perfor
  18. TL;DR - How can I programmatically detect slow / choppy animation? My company uses pixi.js to create animations for digital signage (screens in waiting rooms, train stations, airports, billboards, etc). Our clients use a wide variety of hardware to display our animated content. Some of them are high powered, but most of them are pretty crappy. Most of our animations are rendered at HD (1920x1080) or 4K (3840x2160) and often have large images in them (news photo with headline). I have noticed on really low-end hardware when we animate the images using a ken-burns effect or
  19. I'm writing a 2D space shooter. It started as a single player Phaser2 game a couple of years back, and now it's multiplayer with socketcluster.io providing the back end on node.js. The game is at the point where performance is starting to matter (and degrade), and I'm having a bad time rendering the slither.io-quantity of sprites on the screen. I'm probably just writing bad code, and I'm quite happy to work through that myself, but I'm not sure that I'm using the right frameworks underneath, and I'd like some help sorting that out before I start working through the problems I am havi
  20. Hello, So I need to add like 500 images and this is How I'm doing it: class CreateP extends PIXI.Container { constructor(id, x, y, width, height) { super() this.id = id this.bla = PIXI.Sprite.fromImage(`blabla.png`) //images/textures are not same this.bla.anchor.x = 0.5; this.bla.anchor.y = 0.5; this.bla.x = x this.bla.y = y this.bla.width = width this.bla.height = height this.addChild(this.bla) } } module.exports = CreateP this.blas = new PIXI.Container(); this.stage.addChild(this.blas);
  21. Hi everyone, first post here, but quite an active reader. I'm working with PIXI.js for about a year. Right now I have the issue that the framerate of my game drop drastically when I fade in a sprite as a screen overlay. What I do: The game consists of multiple layers (PIXI.Container), the layer on top is used as overlay and contains a sprite. When the player takes damage, this sprites alpha is tweened from 0 to 1 within a second. What's the problem: The first time this tween/transition happens, the FPS of the game drop harshly (on my windows test system from stable 60 fps t
  22. I'm rendering the content of some PNG's via a 4096 by 4096 RenderTexture, to cram all of it in the GPU memory, for scrolling usage. As each column should be 1024 pixels wide I can store a maximum of 16384 pixels of height to scroll through. I use 4096 as width and height because of http://webglstats.com/webgl/parameter/MAX_TEXTURE_SIZE But what to do if I want more than 16384 pixels to scroll through in one go? Suddenly realised: Should I just use some extra texture(s) of 4096 by 4096? It looks like a maximum of 8 textures is a safe bet: http://webglstats.com/webgl/parameter/MAX_TE
  23. Hello everyone What is the most powerful and performance way to extends a PIXI class? Example from my side, I need the native PIXI.Container class but with more methods and properties, and here's how i proceed. PIXI.ContainerData = (function () { class ContainerData extends PIXI.Container { constructor() { super(); this.Sprites = {}; // others custom proprety for game obj }; get d() { return this.Sprites.d }; // return diffuse sprites get n() { return this.Sprites.n }; // return normals sprites //TODO: spine no
  24. Hi, I wanted to know if someone ever faced difficulties using Babylon.js to make Facebook Instant Games. When I boot my game using a custom python server, the games run well and is very fluid. However, when I start my game on Messenger App using the same build (uploaded to the Facebook Developer Platform), the game starts to lag, and has continuous lag spikes. My issue only happens with Messenger App, does not happen with Messenger in Chrome or Facebook. Anyone has an idea? Best regards!
  25. Hi again ! So with the recent fix on executeOnAllControls, I wanted to push the boundaries but hit a wall almost immediately. Not entirely sure which is the culprit here but I repro'ed in PG: https://www.babylonjs-playground.com/#XCPP9Y#581 On my screen, the perf is still fairly smooth with 100 textblocks. If I set it to 1000 in the for loop, the pg slows down incredibly. Is this the case for html5 ? I'm just curious where the bottleneck might be and how can I still obtain smooth redraw past 1000 gui elements ?
  • Create New...