Search the Community

Showing results for tags 'Performance'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 258 results

  1. 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: 'https://github.com/samme/brunch-phaser-es6', 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
  2. maitrungduc1410

    A little thing about performance

    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.
  3. 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.
  4. jessegavin

    Poor rendering performance, but why?

    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 feed.next(); // 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();
  5. jessegavin

    Adaptive playback

    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
  6. 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 having. What I'm wondering is whether I should persist with Phaser2 and socketcluster.io 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!
  7. 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); . . . 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
  8. 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.
  9. 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_TEXTURE_IMAGE_UNITS Or is there a better approach?
  10. 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() { PIXI.Container.call(this); 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.
  11. 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!
  12. phaselock

    GUI controls limits

    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 ?
  13. 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.
  14. 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?
  15. 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
  16. 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
  17. 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: http://www.babylon.actifgames.com/moveCharacter/ (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.
  18. 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?
  19. 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?
  20. NoxWings

    Possible performance issue?

    Going through the 101 tutorials on the docs, I just opened the one weighted animations example and I happened to open it on my phone. https://www.babylonjs-playground.com/#IQN716 I got really poor performance considering the simplicity of the scene about ~36fps both on chrome and firefox I tried gradually removing elements from the scene, ui, weighted animations etc and I left just the imported model both lights and a basic floor. Even after that fps the scene runs at ~40fps. Then I found a really similar scene on threejs, same lighting (1 hemi, 1 directional), same model (or at least it looks the same), but it runs at butter smooth 60fps. https://www.babylonjs-playground.com/#IQN716#20 https://threejs.org/examples/webgl_loader_fbx.html Any ideas why this could be happening? Edit PS: tested on OnePlus5T
  21. Outfire

    Spine performance

    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
  22. Hi all, Just wanted to share a workaround I made today while trying to increase the performance of tilemaps in my game. My game has maps that could be 2048px X 2048px (64x64 32px X 32px tiles) or maybe even bigger down the road, and contain up to 8 layers for applying detail. The problem I ran into was, when scrolling the camera, I was seeing huge performance drops, even on powerful computers. Turns out, Phaser was redrawing the tilemap every frame you move the camera. My tilemap, after being loaded, never really changes. So I wanted to find an easy way to force Phaser to draw the entire tilemap once and then use it for a static sprite after that. I tried using https://photonstorm.github.io/phaser-ce/Phaser.TilemapLayer.html#cacheAsBitmap, but it didn't seem to work. Not sure if I was missing something there. So my solution was to resize the layer before getting the texture: myLayer.resize(game.world.width, game.world.height); myLayerTexture = myLayer.generateTexture(1, PIXI.scaleModes.DEFAULT, game.renderer); myLayer.visible = false; game.add.sprite(0, 0, myLayerTexture); this way, instead of the tilemap being added as a dynamic thing that gets redrawn constantly, it functions as a static image. But because each layer is still treated as a separate image, I preserve rendering order. In the background, I keep the actual layers hidden to preserve collision data. Unfortunately, if the tilemap were to change ever beyond initial creation, the texture would need to be updated, which would be expensive. But since I'm not really planning on doing that, it seemed like a reasonable solution to me. Hope this helps someone else who has this problem.
  23. Hi ! I precise that my question is only about meshes Should we prefer to load small objects (between 0 and 10 units for example, with a high precision like 5.554) or it does not impact performance at all and we can work with huge numbers as well (10k, 100k) ? I speak about width/height of a box for example. I guess the more important things are the number of vertices/edges/facets and how impostors are used (mesh vs box), but I would like to know regardless of that, if the size of meshes matters. Same for textures : should we prefer a texture repeated 1000 times on a plane or a bigger texture repeated 10 times for example ? Thank you
  24. I'm aware that the client's computer GPU might affect the game's performance (smoothness and freezing). But the game I'm creating now is being affected differently. The client's GPU is literally affecting his player movement speed globally (even on the other player's views, not only locally for him). If you check other .io games like agar.io and diep.io, even with a slow computer, you will notice that the player movement speed is is the same (based on the same player level). It skips a few frames and it isn't smooth at all. But the movement speed is the same. Every player on my game needs to have the same movement speed (that's one of the most important features of my game). I've also noticed that if I'm using the maximized window, the game slows down. But if I use like half browser screen, it comes back to being fast again: https://gyazo.com/59b72ae5d9e2d3e9611a41e9ac8a3f39 It wasn't supposed to happen. If you need further information from me, please let me know. Please help. Thanks in advance.
  25. Hi everyone, i was stuck in performance of game DETAIL: the above picture shows the game with screen zoom is 100 percentage this picture show the screen zoom size with 25 percentage when the zoom size is 100 % the game performance is good but when i change the zoom size of screen to below 50 percentage there is lack of performance(the player will move very very slowly) when screen zoom size is 67 - 100 percentage fps : 60 when screen zoom size is 50 - 67 percentage fps : 45 - 50 when screen zoom size is less than 50 percentage fps : 15 - 20 when on igcnito mode when screen zoom size is 200 - 500 percentage fps : 55 when screen zoom size is 110 - 200 percentage fps : 50 when screen zoom size is 67 - 100 percentage fps : 45 when screen zoom size is 50 - 67 percentage fps : 35 when screen zoom size is less than 50 percentage fps : not running anyone know what is the problem??? and how to make fps 60 for all zoom size of screen??