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
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 199 results

  1. 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?
  2. Hi community, I want to propose you some addition to assetManager and sceneOptimizer. If the solution already exist, said me assetManager : 1. Get loading percent, not on x file loaded but on stream data loaded when it's possible. > for more precision and to show state if you load some big files. 2. Add "abort" function and "onAbort" callback to cancel running tasks and loading files. > Currently "clean" function delete tasks in assetManager but not abort current loads. That mean if you have a big file in loading, it don't stop. sceneOptimizer : 1. Add a starter level to try optimizing render : > I tested the current sceneOptimizer and the problem is it try the best render first. If you have an older device, the website crash and the browser reload page before that sceneOptimizer can downgrade the render. So, it's a loop without ending. 2. Create two steps to optimize render : > First : upgrading. The sceneOptimizer try to reach "x" FPS with the starter level. If it's ok, it upgrade render again until when it can't reach "x" FPS. > Second : dowgrading. If the last try (or the first try with the starter level ) not reach FPS, the sceneOptimizer downgrade until when it can reach FPS. If the sceneOptimizer reach "x" FPS, it stop. > Of course, we keep "trackerDuration" : time in milliseconds between passes. > You will can restart the sceneOptimizer when you add or change something like the current version What do you think about this ? Have a nice day !
  3. Hi, I am trying to make a game for mobile, how can I test my game in terms of its performance, I am trying on devices but it takes my time a lot, testing the game every time. And one other question is what do you think about the phaser's future? I mean, nowadays I read about some performance issues when running phaser games on mobile. Should I choose any other programming language to make mobile games? I like phaser but if it will not good for mobile, I will have to pass any other programming language like java, instead of javascript.
  4. Hi, I'm trying to start sort of a drawing app where you can draw lines and show an image through those lines. Problem is, it is incredibly slow... So I have an "imageToReveal" sprite and mask it with the drawn lines. Now this does work in my project, but I cannot get it to work in JSFiddle. check it out here This should render the drawn shapes to a texture and set to texture to Sprite that's masking the image to reveal I don't know if this is the best way, but the simple way with a masked sprite and shapes as children didn't go well either: see this one So my question is, how do I make the first JSFiddle work? (and is it the best way) And if it is, how can I make it faster? since it drops from 60 to 40 after a single shape is put on stage.
  5. Hi there, i have a problem with the performance of my phaser game after i compiled it with cocoonjs i noticed that my game is so laggy. Is there someone developing games in phaser with cocoonJs that has a good performance after compiling?
  6. I'm surprised I can't find threads about Phaser development for Android and it's horrible performance. Generally the result of my googling is that making HTML5 games for Android is way worse than making Internet Explorer 6 hacks for websites was before. It looks like Phaser and probably most other frameworks are more or less unusable with it, so this is a huge issue. I'm early in development of a game, and after my tests I've noticed it's lagging on Android even with the simplest possible tween for one sprite across the screen (code attached). This applies both to the native Android browser and using CocoonJS with Canvas+, my test device is Galaxy Tab 3. CocoonJS claims the fps to be over 60, but in reality there's the occasional chop in movement every few seconds. On Android's Chrome browser it's ok, but obviously that's not enough. If I use the moveToXY function instead of tweens, it's closer to acceptable, but still far from perfect. Any of the tips provided in the long and pinned CocoonJS thread don't seem to apply to this case, since I suppose it's more about Android than anything else. I'm very interested in hearing people's thoughts about this, have you made not-laggy games for Android with Phaser, and if, how on earth did you succeed? window.onload = function() { var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, 'gameContainer', { preload: preload, create: create }); function preload() { game.load.image('robo', 'img/robo_small.png'); } function create() { var robo = game.add.sprite(0, 0, 'robo'); var tween = game.add.tween(robo); tween.to({x: 1200, y: 600}, 20000, Phaser.Easing.Linear.None); tween.start(); }};
  7. I modified the phaser example named "arcade physics/gourp vs self", I change the number of object to 10000 then , off course , fps is very low But only 14% cpu, and 300m memery be used on my system Is there any performance limit exist in chrome or webkit ? How can I change it?
  8. Hi, I want to offer user to disable reflections in my application so that there is gain in fps if he/she wishes to. I set ReflectionTextureEnabled in standardMaterial to false, the reflection is disabled but there is no performance gain. Removing the reflection texture from the mesh's material does increase the fps count. But I don't want to remove the reflection texture completely as user can toggle this back on again. Any strategies on how to do this? http://www.babylonjs-playground.com/#DHPSEM#1
  9. Hey guys, I'm looking for some advice on canvas scaling. We're working on a PixiJS game and want to have the canvas as big as possible based on a set aspect ratio. I've got it all working fine but when I started testing it on our benchmark devices I noticed the performance has dropped horribly. When I scale the canvas using CSS transform the performance is perfect but then the graphic quality is unacceptable. Does anyone have some advice how to get great scaling on any device (including 4k monitors) while still maintaining performance and good graphic quality? --- Good performance but bad quality scaling method const canvas: HTMLCanvasElement = document.getElementById('game-stage') as HTMLCanvasElement; const width = window.innerWidth; const height = window.innerHeight; const ratio = window.devicePixelRatio * 2; canvas.style.transformOrigin = '0 0'; canvas.style.transform = `scale(${Math.min(width / Constants.FIELD_SIZE.x, height / Constants.FIELD_SIZE.y)})`; this.app.renderer.resize(canvas.width, canvas.height); Good quality scaling but bad performance scaling method const canvas: HTMLCanvasElement = document.getElementById('game-stage') as HTMLCanvasElement; const width = window.innerWidth; const height = window.innerHeight; const ratio = window.devicePixelRatio * 2; canvas.width = width * ratio; canvas.height = height * ratio; canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; if (height / Constants.FIELD_SIZE.y < width / Constants.FIELD_SIZE.x) { this.scene.scale.x = this.scene.scale.y = height / Constants.FIELD_SIZE.y * ratio; } else { this.scene.scale.x = this.scene.scale.y = width / Constants.FIELD_SIZE.x * ratio; } this.app.renderer.resize(canvas.width, canvas.height);
  10. solved

    Hi, sorry for stupid question probably, but is model size affecting performance, lets say I have small model and camera is 3 units from it and big model with camera 100 from it. Will performance be different for them or its doesn't matter how big model is exported fro 3d max.
  11. 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?
  12. Hi, I am making my first mobile HTML5 game using Phaser. Its a very simple tap game where you have to keep your character balanced. I have noticed something that is kind of strange to me. I have tested the game on: -iphone 5c, IOS 10.2.1, safari browser. -iphone 5s, IOS 10.2.1, safari browser. -Samsung Galaxy S4, android 4.4.2. I have tested the game using CANVAS mode and WEBGL mode for comparison. I observed the following: CANVAS mode: Iphone 5c < Iphone5s ---> 30fps vs 60fps avg. -----> expected this.... S4: 60fps. WEBGL mode: Iphone 5c > Iphone5s ---> 60fps vs 30fps avg. -----> did not expect this.... S4: 60fps (same). My expectation was that the 5s would play at 60fps in WEBGL mode, but it is the opposite case. On the samsung s4 it performs the same for both. In CANVAS mode, I have 15-17 draw calls . In WEBGL mode this reduces to 9 draw calls (Most of my objects are on a single atlas). I still have to add audio to the game. I can imagine that it is hard to tell what might be going on, but I can't really find a reasonable explanation for this result and its kind of dissapointing. It seems to me that I can't get a reliable result using WEBGL.... I'm thinking of sticking to CANVAS mode and optimize as much as I can. Would this be the right way to proceed? UPDATE: The Game:
  13. Hello! Does anyone have time to lend a hand with some optimisation please? I've been trying to get some dynamic ring shapes to look good and respond well, and performance seems OK on PC's (I've tested on 3 or 4 PC's with varying specs). On Macs (iMac, recent macbook pro and a mac mini) the CPU shoots up to 99% in Safari, so I'm obviously doing something wrong. Even with texture reflection and refraction turned off and lower detail it's still very jumpy and slow. I updated chrome on the mac, which seemed to help and gave much better performance - but it's still far from the performance of a PC. I have a feeling that Safari might just have a bad implementation of WebGL. The basic playground examples run really slowly too. I'm using a Lathe to create the ring, and I'm aware of the latheTesselation, which shouldn't be too high. The API says that the Lathe can be set to "updatable", and I've tried to use code to update it, but the 2 code examples that I tested just didn't work. I think this is because the update can only move existing points, and not replace them. Any time I want to update the ring parameters I just dispose of it and recreate it. Any tips are well appreciated - And sorry about the shoddy code!! http://tolli.co.uk/babylonjs/rings/
  14. Hey guys.. I have a quick question. So I'm preloading a background texture right, roughly 960 x 540, so not huge in the grand scheme of things. The preloader has finished loading it, and it definitely exists in the cache, however when ever I do this... let bg = new PIXI.Sprite(PIXI.Texture.fromImage('myBG.png')); stage.addChild(bg); It takes a fair while to actually add it to the stage. I've watched the network to see if it IS making another xhr request to get the same image, and it's not Are there any suggestions if I'm doing something wrong? Should I make a custom cache and create all the textures first so I don't have to wait for PIXI.Texture.fromImage to hunt through the texture cache and make it? Cheers!
  15. Hi, I have a very simple playform game Mario style with arcade physics and two small sprites (platform terrein and player, no background). When I set the game to be 100% width and 100% height (my monitor res is 1920x1080) the framerate is 30 in Firefox and 15/20 in Chrome. I use the following code: new Phaser.Game('100%', '100%', Phaser.AUTO); Does anybody know why would it go so slow if it is only using two sprites? I am big fan of fullscreen games as they are more immersive. The reason I am asking is because I was having a look at Construct2 demos and they are very smooth on fullscreen, see this example: https://www.scirra.com/arcade/other-games/lumino-beta-14206 Is Construct using something like Emscripten?
  16. Hey everyone, I have a very simple 2D "minigame" that looks like this (please don't mind the uglyness) : So very simple, only one sprite and a couple of shapes. But my computer (macbook pro) often starts heating up while running the task. So I ran a memory audit (around 700ko increase per minute, that are due to me storing a lot of stuff) and also ran a CPU profile with devtools. Here are the results of the CPU profile: I was wondering if those results seemed ok to you ? @Nockawa Or do you think I might be doing something wrong in the code? (too large to share) When I look at the engine.fps I am at around 60fps, so perfect on that side. The game will be used by around 300 people all over the US with all sort of computers, mine is a high end macbook pro of last year (with of course a shity gpu but still pretty common for macs): 2.2Ghz i7 - 16Gb ddr3 - Intel iris pro 1536 mb - Mac/OS sierra using Chrome Canari Thanks !
  17. Hello all! I'm currently working on a website that has a Babylon.js scene as it's background, and also includes a game created with Babylon.js. I'm trying to keep the scene as simple as possible - I'm only using planes and their clones - and I'm testing on a 2013 ASUS laptop where I'm getting constant 60FPS. But of course, there are users out there with lower graphics performance, and I'm trying to find a way to test and handle that. In my current setup, I monitor the FPS in the first ten seconds, and if it averages under 45FPS, I call scene.dispose(); and set a cookie so the scene won't be loaded next time. Is there a better way to do this? Thanks in advance! BTW, here a video of the submarine-themed game in progress :
  18. Hey guys, just a really quick question on containers. I see that you can use a PIXI.particles.ParticleContainer. In the documentation is says that it doesn't support features such as tinting, alpha, masking etc.. However, as this class is extending from the normal Container, I am curious as to what is different, and how it achieves this. Thanks, Nick
  19. Hi! I am working on my first Phaser-game. I have a performance issue with my collision rendering. I am using tilemaps and an extra layer for my collision. You can see my example on http://wpdev.at/moemax-store-game-collision/ (without rendering collision) and here is the example with rendering collision: http://wpdev.at/moemax-store-game/ Everything is fine on Desktop. Loading time is about 6 seconds. But on mobile devices it takes about 1minute to load. I am using "map.setCollisionByExclusion([], true, this.collisionLayer);" for my collisions. Already tried toreduce the number of layers to a minimum - about 2 layers - does not help. Tried using map.setCollision([8,9..]) - did not render any collision for me. Any suggestions? Thanks for your replies.
  20. So, recently I created my own tweening functionality to overcome some issues I was having with Phaser's ones and make it fit my needs a little better. While doing so I realized Phaser, and apparently many other engines out there, precalculate the tweened values and store them into an array that's later used to update the object's values instead of calculating the value update on every frame. The way I see it, if calculating all the values for a tween that will be played for one second takes, let's say, 1 ms, I would prefer to have those calculations done in 1/60 ms during the whole second, as the impact on performance sounds lower this way than having a CPU intensive frame while the rest are all lower. Is there any good reason to do this that I'm missing? PS: Also, what I was considering is building some sort of tween cache, where I do actually store tween progressions (0-1) for a certain type of tween and time so I can reuse them multiple times, even with different object or values, would be happy to hear if anyone ever used this or if has some interesting thoughts on it.
  21. Hi All, TLDR: i really just want a javascript sprite rendering engine, is Phaser right for me and/or with 3.0 will i be able to just use that part of the engine? I am about half way through my first phaser game and am loving it. Because of the nature of the game, i am using very little of the engine. All I am currently using the engine for is input buttons and sprite rendering. No physics, movement, world updates etc... I am using all my own code for doing movement, collision, updates, etc.. In the current phaser version, i am starting to see some slowdown on mobile browsers. I still have some obvious optimization to do which will help but i am at a point now where i could move things around easily since basically everything is just pure javascript. The hooks are not deep into Phaser at all. I read with 3.0 we would be able to add and remove things from phaser to match what we need, is this still the plan? Would i be able to just use the Sprite Render and Button/Input parts? Is there another engine that might be better (maybe just straight PIXI). Or should i just use Canvas and make my own simple sprite management? Any advice from you guys with experience would be much appreciated.
  22. I know this will pretty vague but "What the Deal With Mobile And BabylonJS". 1... Is mobile in web browser 'performant' enough now to get good play fps 2... Has anyone use the newer IOS WKWebView to package a BJS game and get good fps When i first started playing with BabylonJS a few months ago, using just raw javascript (before i made the toolkit)... I put a few basic boxes and cube and simple rotation with some 1 or two lights... I was getting horrible frame rate (15-18 fps) with just a few static items when i ran on I'm old iPad 2 Air. I searched around the internet and found things like CocoonJS that was supposed to provide and IOS/Android 'native' WebGL emulation layer (or something like that). There file thing was that the state of webgl on IOS and Android devices very poor and required some kinda of native port. So i just forgot about mobile platform and concentrated on the toolkit. But today after talking to @MrVR who is making mobile type VR projects (and gets fair frame rate some of his scenes ... around 30+ fps I think) i decided to re-visit that how mobile thing and just for shits and giggles pointed my IPAD 2 AIR and iPhone 7 at: Test Shooter Scene just to see what frame rate i would get on my test space shooter scene... Keep in mind i am doing all kind of COMPLEX model prefab instantiation for the waves of asteroids... got particles system, physics collisions and movement, detail meshes, collision meshes, tracking dynamic mesh intersections, playing background audio, shot audio, explosion audio in particle system explosion controller start function... All kinda stuff... PLEASE CHECK OUT http://mackey.cloud/games/space/ on your mobile device and tell me what kind of frame rate you get (I having a problem with hand.js on that version so you can't move the ship... but just let it sit there and see the ship and its particle system before it get hit... then just let the waves of asteroids come down the screen and monitor frame rate). Because i am getting a VERY GOOD fps in just the mobile browser (have not checked out in WKWebView yet)... I mean like 56-60 fps (once initial FOS drown when starting scene...down to about 45ps at FIRST FRAME scene show) with all that stuff mentioned above going... How can that be... A few months ago i could get a simple static game to yield good FPS... But now with my toolkit produced game (which ALOT more stuff and apis packed in there) is getting so good fps... or am i tripping Has there been some kind of update (either with IOS WEBGL support or the new BabylonJS 2.6 updates like webgl 2.0 and vertex array object) that explains this... or is my one scene just a fluke and every body get much lower fps... PLEASE... Help a brotha out yo and check out the link on your mobile
  23. Hi Guys, I have multiple game states and one of them is kind of slow on mobile, while it works just fine on desktop. I ran a js profile to find out what could be the potential cause of this and attached it as a reference here. I know this image does probably not give away enough in order to make any clear predictions on what the issue for my fps drop is, but maybe the pattern of the times spent for the functions to execute yields something I could make use of. I commented out most of my update functions of that state to see whether the issue is hiding in there, but no success. The imagery and text I am rendering is also smaller and less than on my working states. I also tried to destroy and null all objects of the previous state. There might be still a couple I haven't captured. This is what I null: this.game = null; this.add = null; this.make = null; this.input = null; this.state = null; this.stage = null; this.time = null; this.world = null; Any suggestion what could go wrong?
  24. Hello, I've recently encountered a very strange behavior on a specific PC. I've been testing about 10 Phaser puzzle games, which use various tweens for visualization. I've played the games on quite a few desktop PCs, including a Mac, and more than 10 different mobile devices, Android and iOS. On only 1 of the PCs all games exhibit an aberrant behavior where tweens seem to be running slower than their duration states. I couldn't find anything in the Internet about what could cause this issue. Even a simple alpha tween with a certain duration, no delay and autostart is acting weird. Phaser 2.4.6 is used. The issue is experienced in Chrome, currently the latest version, but I've noticed this behavior in earlier versions in the past months. On Edge everything runs as intended. If anyone has any idea or solution, please share.
  25. Hy guys, i used instances for my mesh, but it's really laggy Here's the code: var house; BABYLON.SceneLoader.ImportMesh("Cottage_House", "cottage/", "cottage.babylon", scene, function (newMeshes, particleSystems, skeletons) { house = newMeshes[0]; house.scaling = new BABYLON.Vector3(0.09, 0.09, 0.09); house.position = new BABYLON.Vector3(-6, 0, 0); house.checkCollisions = true; var instances = new Array(); for (var i = 0; i < 10; i++) { instances = house.clone('Instance' + i); instances.position.z = 4; instances.position.x = 3; } var houses = BABYLON.Mesh.MergeMeshes(instances);