Search the Community

Showing results for tags 'performance'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • 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





Found 260 results

  1. 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'key', 'texturePNGURL', 'jsonURL'); It seems the new update only supports the following two calls'factory', { etc1: 'assets/factory_etc1.pkm', s3tc: 'assets/factory_dxt1.pvr', pvrtc: 'assets/factory_pvrtc.pvr', truecolor: 'assets/factory.png' });'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?
  2. 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
  3. 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: 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
  4. 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?
  5. 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.
  6. 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 animatedSprite into the stage again, the transition is lagging again. I wanna know the proper way of swapping two animation in Pixi and also the reason of this phenomenon.
  7. 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, type: Phaser.CANVAS, parent: document.getElementById('game'), title: '☕️ Brunch with Phaser and ES6', // 'My Phaser 3 Game' url: '', version: '0.0.1', banner: { background: ['#e54661', '#ffa644', '#998a2f', '#2c594f', '#002d40'] }, fps: { min: 10, target: 60, forceSetTimeout: true, }, loader: { path: 'static/phaser/', }, physics: { default: 'arcade', arcade: { debug: false, gravity: { y: 300 }, }, }, scene: [ LoaderScene, BootScene, DefaultScene, GameOverScene, ], }); CPU usage: - Phaser = 40% - Phaser with vue = 80-90% - main page without iframe = 5-10 % - main page with iframe = 100% js heap size: - Phaser = 50 - 70 MB - Phaser with vue ~ 70 - 100MB - main page without iFrame ~ 50 - 80 MB - main page with iFrame ~ 100 - 150 MB The game is equipped with 20-30 icons, 10 atlases, 19 mp3 sounds and 5 background image, with total size of assets about 3MB. Thank you in advance
  8. 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. Does anyone can explain me this is good or bad? Thank you for your answer.
  9. 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 they start. ) Has anyone else experienced this issue? What could it be? Another Firefox's WebGL bug? In Chrome and Edge i have no problems.
  10. 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 performance. I was able to attach a chrome debugger to the chromium instance on the player and found that it's running around ~10 fps on average. The thing I don't understand is why each frame takes ~120ms. It looks like the CPU time for each frame is only around ~8ms max, sometimes a lot less. Does anyone here know what might be causing this? Here's my code in case it's helpful. // Begin PixiPlugin Hack ////////////////////////////// // // This is the only way to force PixiPlugin to be included in the bundle // import PixiPlugin from "gsap/PixiPlugin"; var b = PixiPlugin; console.log(b != null ? "PixiPlugin Loaded" : ""); // End PixiPlugin hack ////////////////////////////// import { TimelineMax } from "gsap"; import { NewsFetcher, NewsItem } from "../data"; import { isWebGL, getScreenSize } from "../layout"; import { scalePhoto } from "../layout"; let fetcher = new NewsFetcher(window.model); let begin = async () => { const screenSize = getScreenSize(); const w = screenSize.width; const h = screenSize.height; let app = new PIXI.Application({ width: screenSize.width, height: screenSize.height, antialias: true, forceCanvas: !isWebGL(), backgroundColor: 0x0 }); document.body.appendChild(app.view); const photoLayer = new PIXI.Container(); app.stage.addChild(photoLayer); let index: number = 0; let content: NewsItem; const feed = fetcher.feed; const next = async () => { // The next() function will download the image and store it in the texture cache // if it is not already in the texture cache. content = await; // getImage() returns a new PIXI.Sprite using the texture from the cache let photo = content.getImage(); scalePhoto(photo, screenSize); photo.position.set(w / 2 - photo.width / 2, h / 2 - photo.height / 2); photoLayer.addChild(photo); var tl = new TimelineMax({ onComplete: () => { if (index > 0) { // Remove previous photo after new photo has faded in on top of it. photoLayer.children[0].destroy(); } index++; next(); } }); // This just fades in the photo tl.from(photo, 1, { pixi: { alpha: 0 } }, 0); }; next(); }; begin();
  11. 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 a slide-in effect, the animation is VERY choppy, even for devices which support WebGL. We want to be able to programmatically detect choppy playback and use that info to adapt the animation. Here's some psuedo code... if (isLowQuality()) { // Show content without animation effects } else { // Use high-quality animation effects (filters, cross-fades, etc) } Does anyone here have advice how I could implement the isLowQuality() function? Do I measure average ticker.FPS over a few seconds? If so, what's the best way to do that? I am new to PIXI. Any help is appreciated
  12. 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 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 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 having. What I'm wondering is whether I should persist with Phaser2 and and debug my performance issues here (Chrome dev-tools reckons that most of my time is being spent in drawImage or textaImage2D in Phaser2), or if I should first upgrade from Phaser2 to something else like Phaser3 or PIXI4? Perhaps socketcluster is not as important as I once thought? Can anyone give me a kick in the right direction on this? Thanks!
  13. 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() = 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); . . . this.blas.addChild(new CreateP(id, x, y, width, height)) now it kinda effects on performance pretty a lot, well I know this is a big number but I was wondering if there are some ways to improve the performance? maybe there is a better way to add these images? this doesn't seems normal to me. is this updateTransform and GC normal here? I mean I'm not changing anything about those sprites. they are already added BTW the sprites never move or change or any thing. they just get destroyed after a while. Could RenderTexture help here? I read the docs but honestly couldn't understand what is the purpose of it Thanks
  14. 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 to about 12 or even less fps). The second time the transition happens, everythings runs silky smooth. What I tried: Replace usage of PIXI.Sprite.alpha with a PIXI.filter.AlphaFilter. But the effect remains exactly the same. I assume the issue is that the first time a sprite with a specific alpha is rendered, it needs to calculated and is than buffered. If that's the case, I have two questions: Does this buffer remain until the page is reloaded? And how could I fill this buffer before the game starts? If there's no buffering or my whole approach is faulty, I would be very grateful for improvement suggestions.
  15. 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 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: Or is there a better approach?
  16. 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 normal are arrays }; ContainerData.prototype.createJson = function(dataValues) { }; ContainerData.prototype.asignJson = function(dataValues) { }; //END return ContainerData; })(); I also know another way to extends functional prototyping. example: function ContainerData() {; this.initialize(); }; ContainerData.prototype = Object.create(PIXI.Container.prototype); ContainerData.prototype.constructor = ContainerData; ContainerData.prototype.initialize = function () { this.Sprites = {}; }; I wondering about the cleanest and most efficient techniques to properly extend a class pixi? But especially on the most optimal way, knowing that JS need scan all the prototypes from the bottom to the top! The first technique worries me a little because in my console, Is look like that all the prototypes are cloned by reference and duplicate! So, i am interested in different techniques and advice. I am therefore looking for the most equitable approach between performance (speed) but also the readability for debugging. Thanks in advance.
  17. 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!
  18. 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: 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 ?
  19. 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: Demo in ThreeJS: It does not make sense, because BabylonJS supports more performance related features like vao. Any help would be greatly appreciated.
  20. Let's say I make a game in Phaser that: contains just a single scene on that scene there is a giant tilemap loaded with collisions set with ,setCollisionBetween() or similiar there are multiple sprites scattered all across the map, they collide with the player How does Phaser handle the tilemap, the sprites and collision in this case? Does it update the entire tilemap wherever the player is or only the chunk that is currently within the camera bounds? Does it check collisions with tiles and sprites that are only within the camera bounds or everywhere on the map despite the player not even being there? Is everything built for me internally or do I have to implement my own tile,sprite and collision loading to not waste performance?
  21. Hi, Which is the most efficient way when you need to deal with many text to display (mobile/pc) ? Because i spent times on forum and didnt find a clear answer (sometimes Phaser.Text, but often BitmapText) : Thanks
  22. I am working on a project where I am trying to create an animation of a watercolor effect to 'paint' in an image. The image is dynamic, so rather than using a simple video, I have created a video to use as an alpha mask to apply to the image via Pixi. The area around the visible image needs to be transparent, so I needed to use an alpha mask rather than just covering the image with white pixels. I have attached a full example file with all of the code that I have set up for this, but here's a quick summary of what I've done: Create a texture from video Create a sprite from image Add the image sprite to a container Set 'mask' property of container to be the video texture This worked beautifully, but the one concern that I have is of performance, as there will be other things going on on the page at the same time. A performance audit of the page while the animation is running shows that the main thread is being used for scripting for almost 100% of the time of the entire duration of the animation, which is slightly degrading the performance of things such as scrolling on the page while that is happening. I'm certainly willing to accept that this is simply a very performance intensive animation and that it doesn't get much better than what I've got, however this is my first time using Pixi, so I wanted to seek out some advice about whether I have done this the best way that I can, or if there is anything that I can do to help make this a bit more efficient. Thanks in advance for any help that anyone can offer! If I need to provide any more information or anything like that, just let me know, and I will do my best watercolor-test.html
  23. How do we improve performance for collisions versus a heightmap or mesh or just large numbers of floors+walls? I'm not looking for true physics (or at least, I don't think that I am). I'm looking to be able to support a few hundred entities all of whom are in contact with a large terrain mesh. Somewhere in the realm of 30-120 players, and 50-1000 npcs or items that had been dropped on the ground would be the ballpark performance goal. Here is a demo that shows the desired behavior more or less: (use mouse look and and Z to walk around). Both this demo and my own attempts at something very similar use `moveWithCollisions` which seems to eat quite a bit of CPU. One to three players is enough to max out the cpu. I presume it results in a collision check between the moving meshes and every triangle of the terrain mesh (just guessing though, not sure how it actually works). Left to my own devices I'd probably compare the entity positions against the heightmap value at their x,z and just always make sure the y of their feet never slips under the heightmap -- I imagine this optimization could scale to several hundreds or thousands of entities and wouldn't involve a true mesh collision. It also wouldn't work for overhangs or caves, but I don't have any of those yet. As for collisions with walls or floors or large numbers of other objects that aren't part of the heightmap.. I'm not sure what I'd do. Maybe I'd partition the world up into large cubes and then dice up the existing collision code such that objects were only checked against their nearer spatial neighbors...(the other meshes that occupy the same cube as them)? But before I go reinventing wheels, I'd figure I'd ask here.
  24. I have two questions. 1. On the first screenshot, why do I have such enormous "idle" time? It seems that it is even longer than the "render" function itself. How can I improve that? 2. On the second screenshot, it seems that PBRBaseMaterial is too much time-consuming. How can I reduce that? Is this time related to frequent shader program switch?
  25. I have a game with a lot of containers and sprites. I used GPU-Z for testing. After I replaced all containers and sprites with 2D, GPU load decreased on 20% What is the reason of that? What is the difference between container / sprites and container2d / sprite2d?