Search the Community

Showing results for tags 'FPS'.

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 124 results

  1. 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!
  2. I have placed hundreds of static sprites in my game and all goes well. But when I try to add 30 animated sprites (AI players) in the game, the FPS drops from 60 to 30. If I add even more it becomes very slow and unplayable. I have profiled my program on Chrome and found that this method CanvasSpriteRenderer.prototype.render is using too many CPU resources. Is there a way to reduce the CPU consumption and make my game smooth again?
  3. MarvinB

    FPS drop

    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: = null; this.add = null; this.make = null; this.input = null; this.state = null; this.stage = null; this.time = null; = null; Any suggestion what could go wrong?
  4. Hey. What do you think is the best option ? I know there won't be probably a "best" option but what would you guys choose? Babylon seems more complex than playcanvas but that might bring some more advantages to the table as well idk...
  5. Hey guys, first post, started using Babylon Friday, so I may be a little green. I'm done waiting for Unity3D's webgl porting to not be a steaming pile. Really liking everything so far, but I could use some advice on moving forward with an FPS camera. I extended it from the BABYLON.FreeCamera. Nailed down most of it, but realized that the built-in collision the camera uses has no real concept of friction. It's going to be a bit of a problem when I intended on having moving floor platforms. They just slide right out from under you as-is. I'd rather not start from scratch or fall back on TargetCamera because of all the input groundwork that FreeCamera provides. My best guess for moving forward is to dig in and start overriding the collision functions of FreeCamera like _collideWithWorld(), _updatePosition(), etc. and replace them with Oimo compatible logic. I just want to get the problem out there before I go down that rabbit hole. Is this a horrible idea? Or maybe I'm just missing something incredibly obvious about the built-in physics? Thanks in advance for any advice.
  6. Hello, I don't know if this is something that could be merged into github but we had some projects (and therefore customers) that were highly loaded with objects, thus a bit slow in rendering. The camera inertia was then to long lasting to control the camera if you know what I mean. This is what I've changed to handle this: // Inertia var engineDelta = Math.min(this.getEngine().deltaTime,100), inertiaFactor = Math.min(1,16.66666 / engineDelta); if (this.inertialAlphaOffset !== 0 || this.inertialBetaOffset !== 0 || this.inertialRadiusOffset !== 0) { this.alpha += (this.beta <= 0 ? -this.inertialAlphaOffset : this.inertialAlphaOffset) / inertiaFactor; this.beta += this.inertialBetaOffset / inertiaFactor; this.radius -= this.inertialRadiusOffset / inertiaFactor; this.inertialAlphaOffset *= this.inertia * inertiaFactor; this.inertialBetaOffset *= this.inertia * inertiaFactor; this.inertialRadiusOffset *= this.inertia * inertiaFactor; if (Math.abs(this.inertialAlphaOffset) < BABYLON.Engine.Epsilon) this.inertialAlphaOffset = 0; if (Math.abs(this.inertialBetaOffset) < BABYLON.Engine.Epsilon) this.inertialBetaOffset = 0; if (Math.abs(this.inertialRadiusOffset) < BABYLON.Engine.Epsilon) this.inertialRadiusOffset = 0; } // Panning inertia if (this.inertialPanningX !== 0 || this.inertialPanningY !== 0) { if (!this._localDirection) { this._localDirection = BABYLON.Vector3.Zero(); this._transformedDirection = BABYLON.Vector3.Zero(); } this.inertialPanningX *= this.inertia * inertiaFactor; this.inertialPanningY *= this.inertia * inertiaFactor; if (Math.abs(this.inertialPanningX) < BABYLON.Engine.Epsilon) this.inertialPanningX = 0; if (Math.abs(this.inertialPanningY) < BABYLON.Engine.Epsilon) this.inertialPanningY = 0; this._localDirection.copyFromFloats(this.inertialPanningX / inertiaFactor, this.inertialPanningY / inertiaFactor, 0); this._viewMatrix.invertToRef(this._cameraTransformMatrix); BABYLON.Vector3.TransformNormalToRef(this._localDirection, this._cameraTransformMatrix, this._transformedDirection);; } It rotates by the given inertia amount depending on the time that proceeded during the renderings. The var engineDelta = Math.min(this.getEngine().deltaTime,100) is to avoid big camera jumps on frames that last longer than 100ms. In our project the render loop doesn't run continuesly. If someone likes to test this and/or push it into babylon I would be glad to have contributed a small thing :-) If not it's also completely okay as it's only needed in our project(s)! ;-) Best regards Kevin
  7. Hi guys, I'm having a specific issue and I'm looking for some help. I have a big image which I hide at game start. Later on I revive this image to display it. The very first time I do this, it provokes a big jitter, but further attempts provoke no lag at all. So I think it has to do with the fact that at game start the image has never been rendered, and once I render it for the first time, some kind of 'render-loading' might happen and provoke the jitter. For the time being I create the sprite, add it to the game, and then immediately kill it (so that the player doesn't see it). So it's never been rendered (hence the jitter later on). Is there a way for me for do the same thing AND load the texture to the renderer as well, preventing the jitter happening later? Sorry if it makes little sense, I don't know canvas rendering enough to point exactly why the jitter happens. But I assume the images must be somehow transferred from the cache to the renderer, or something like that. Is there any way to force it (and still not display the image)? (Just to confirm my hint, If I do render the image at start, even briefly, and kill it, the next revive won't jitter at all. Also, all I do is use game.add.sprite(), kill() and revive(), if it helps). Thanks a lot!
  8. I've been trying to work out how to set the frame rate for a MovieClip animation. I assume this is where the animationSpeed property comes in, but the API documentation is rather vague: What does this mean in terms of frames per second? If I want an animation to play at, say, 15 FPS, what value should the animationSpeed property be?
  9. Hi, I am having an issue with latest version of BabylonJS (beta version), when loading a page with clean cache the FPS displayed by getFPS stays at 60 fps during 58 frames (seems a constant), meaning that the sceneOptimizers can't get triggered if the FPS is too low (timer gets to 0 before being able to run the optimizer).
  10. Hi All, In my game i am having a emitter which execute when user tap on the object. The emitter is slow in low level android phones. So I am planning to check the fps. If fps < 30 then don't show the emitter ELSE show the emitter. I am going to use the below line in create function so that Phaser will calculate the fps. = true; Will it reduce the performance of the game, because only when the advancedTiming property is set to true Phaser starts calculating fps, which is an additional work for Phaser. Thanks for your help. Joseph
  11. Hello ! There is a free complete course by Victor Mallet. It is about how to create a basic FPS : It is in french but with a translator, you may understand :
  12. My Phaser (v2.6.2) game runs great at 60fps on my iPhone 6S. But then I tested it on a regular 6 and was shocked to see 20fps. I took everything out until nothing was left but an empty scene and it is still just 30fps on iPhone 6 and 10fps on iPad Mini 1. The code below outputs: In Safari on iPad Mini 1 iOS 8.2 -> webgl: true fps: 20 In Safari on iPhone 6 iOS 9.3 -> webgl: true fps: 30 (I even checked this on two different iPhone 6 because I couldn't believe my eyes) In Safari on iPhone 6S iOS 10 -> webgl: true fps: 60 The performance cannot possibly be this bad can it? iPhone 6 is still a modern device. But what could be wrong with my code below? For comparison I also quickly googled html5 game engine and set up a basic scene with Panda JS that just sets the renderer to WebGL and prints out fps and it was running at 60 on all 3 devices listed above. So I think I can rule out device and it must be something down to the Phaser engine, or the way that I am using the Phaser engine. <!doctype html> <html> <head> <script src="./build/phaser.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <script type="text/javascript"> window.onload = function() { var game = new Phaser.Game(360, 640, Phaser.AUTO, '', { init: init, render: render }); function init() { game.time.advancedTiming = true; } function render() { game.debug.text("webgl: " + (game.renderType === Phaser.WEBGL) + " fps: " + game.time.fps, 32, 32); } }; </script> </body> </html>
  13. On certain computers, ones that wouldn't seem like they should lag, movement in my game is slow. When using `game.time.desiredFps = 30;` it also happens. My question is, how can I drop frames instead of making players swim through mud? Instead of looking ugly, it becomes unplayable. I tested this for p2, it also happens with that physics engine.
  14. Hello I am trying to develop a FPS using BabylonJS and CannonJS in TypeScript. My first problem was what type of Impostor to use as the player, end up using a Cylinder with a FixedRotation = true. Now I place the camera on top off the Cylinder on every frame, and apply Impulses to the Cylinder based on keyboard input, and camera target. The algorithm that I came up is the flowing (hero = Cylinder): scene.registerBeforeRender(function () { //Your code here //Step camera.position.x = hero.position.x; camera.position.y = hero.position.y + 1.0; camera.position.z = hero.position.z; let camFront = camera.getFrontPosition(1.0); let vecFront = camFront.subtract(camera.position); vecFront.normalize(); let finalVector = new BABYLON.Vector3(0.0, 0.0, 0.0); if (moveForward) { finalVector = finalVector.add(new BABYLON.Vector3(1.0 * vecFront.x, 0.0, 1.0 * vecFront.z)); } if (moveBackward) { finalVector = finalVector.add(new BABYLON.Vector3(-1.0 * vecFront.x, 0.0, -1.0 * vecFront.z)); } if (moveRight) { let q = BABYLON.Quaternion.RotationAxis(BABYLON.Axis.Y, BABYLON.Tools.ToRadians(90)); let m = new BABYLON.Matrix(); q.toRotationMatrix(m); let vecRight = BABYLON.Vector3.TransformCoordinates(vecFront, m); vecRight.normalize(); finalVector = finalVector.add(new BABYLON.Vector3(1.0 * vecRight.x, 0.0, 1.0 * vecRight.z)); } if (moveLeft) { let q = BABYLON.Quaternion.RotationAxis(BABYLON.Axis.Y, BABYLON.Tools.ToRadians(-90)); let m = new BABYLON.Matrix(); q.toRotationMatrix(m); let vecLeft = BABYLON.Vector3.TransformCoordinates(vecFront, m); vecLeft.normalize(); finalVector = finalVector.add(new BABYLON.Vector3(1.0 * vecLeft.x, 0.0, 1.0 * vecLeft.z)); } finalVector = finalVector.normalize(); hero.physicsImpostor.applyImpulse(new BABYLON.Vector3(15.0 * finalVector.x, 0.0, 15.0 * finalVector.z), hero.getAbsolutePosition()); }); Is there a more effective way to do this ? Thanks in advance.
  15. Hello I have submit a question in the Questions & Answers sections: But I my problem is not in decode but in the BABYLON.JS Resume: The control works but the problem is that the camera/hero doesn't go straight forward all the time. Example if at start I point at the Box at the top left if and only press 'W' it goes straight to the Box, but if I for example go straight 'W' for 1-5 seconds and then point at the Box and press 'W' the camera/hero doesn't go straight to the BOX, it goes sides ways. Can anyone please check this out ?
  16. Hi everyone: I want to know how to limit the FPS that Bjs render. I'm newbie in this framework and i don't understand how to use the SceneOptimizer helper. Any simple sample to do this? Many thanks in advance.
  17. Hello everybody, I'm doing a little game plateform for fun and for the ground management and for more speed, I wondered if was worth better not use (for optimization) : - Tilemap : But I feel that after a certain number of box it starts to slow down... (and i can use player.body.blocked.down to know il player is landing) OR - Objects that define the ground and far fewer (but i loose player.body.blocked.down to know il player is landing) And that's make -> And all mixed -> I manage this with tiled like that -> What is the best practice to design ground and manage ground collision to keep a max of fps ? thank for help and this great forum Here the
  18. trsh

    How can I lock FPS?

    I want to clamp to 30 fps. Not some animation, but the whole rendering. How could I do that?
  19. hi i test some stuff about Texture and see a interested result in a large scene and one time use material with colorfull paint all and keep other effects i see fps between (45 - 60 ) and zero Ram Take and make that scene just with textures (i test DDS and Small Text too ) i see fps between (25 -40) and 2 GB Ram take any way to manage texture in buffer for optimize that? * for samples wait to load complete and see around in first time (it is not have loading or prepare stuff) I really don't understand 2G ram!!! - all my uncompressed texture size is 100mb thanks for your any advise about this .
  20. I cant solve this problem: What i want to do is to create an FSP camera attached to a character and move character + camera with mouse ad keys. PS: I already read all similar posts but nothing really useful. Details (my thoughts): 1) Lock mouse in browser (v) 2) move camera with mouse: Works with free camera, if i parent mesh to camera, but in this way mesh moves not in regular way and i cant apply gravity, etc... I assume i should use FollowCamera, but in this way i cant move it with mouse anymore Maybe i will need create a new type of camera? (Becouse the idea is that the camera should be attached to mesh in some point and should be movable by mouse) 3) Mesh should move forward/backward/left/right accordingly to camera direction 4)If you need, here you are my stupid code: function CharacterController(character, scene){ //keys variables var forwardKey; var backwardKey; var leftwardKey; var rightwardKey; //settings var inAir = true; var speed = 5; var jumpHeight = 300; var runSpeed; var crouchSpeed; //gravity settings var mass; var friction; var restitution; //var controller; var camera; /*LOCAL FUNCTIONS*/ //create new following camera /*var attachCamera = function(target){ //create following camera var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(5, 50, 45), scene); = target; // target any mesh or object with a "position" Vector3 camera.radius = 15; // how far from the object to follow camera.heightOffset = 8; // how high above the object to place the camera camera.rotationOffset = 180; // the viewing angle camera.cameraAcceleration = 0.05 // how fast to move camera.maxCameraSpeed = 20 // speed limit scene.activeCamera = camera; return camera; };*/ var attachCamera = function() { var cam = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 5, -10), scene); cam.attachControl(scene.getEngine().getRenderingCanvas()); // Remap keys to move with ZQSD cam.keysUp = [87]; // W cam.keysDown = [83]; // S cam.keysLeft = [65]; // A cam.keysRight = [68]; // D cam.speed = 1; cam.inertia = 0.5; cam.angularSensibility = 1000; scene.activeCamera = cam; return cam; } //create custom physic settings for character var setCustomPhysicsState = function(newMass, newFriction, newRestitution){ character.setPhysicsState(BABYLON.PhysicsEngine.SphereImpostor, { mass: newMass, friction: newFriction, restitution: newRestitution }); }; //manage inputs var initPlayerActions = function(){ var forward = false; var turnLeft = false; var turnRight = false; scene.actionManager = new BABYLON.ActionManager(scene); scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyDownTrigger, function (evt) { switch(evt.sourceEvent.keyCode){ //space button case 32: //character.jump(); break; //w button case 87: forward = true; break; //a button case 65: turnLeft = true; break; //d button case 68: turnRight = true; break; //s button case 83: //character.moveBackward(); break; } })); scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyUpTrigger, function (evt) { switch(evt.sourceEvent.keyCode){ //space button case 32: //character.jump(); break; //w button case 87: forward = false; break; //a button case 65: turnLeft = false; break; //d button case 68: turnRight = false; break; //s button case 83: //character.moveBackward(); break; } })); scene.registerBeforeRender(function () { if(forward){ //player.position.z += 0.1; /*var forwards = new BABYLON.Vector3(parseFloat(Math.sin(player.rotation.y)) / speed, 0, parseFloat(Math.cos(player.rotation.y)) / speed); forwards.negate(); player.moveWithCollisions(forwards);*/ var posX = Math.sin(character.rotation.y) / speed; var posZ = Math.cos(character.rotation.y) / speed; //console.log(posX, posZ); character.position.x += posX; character.position.z += posZ; } if (turnLeft){ character.rotation.y += 0.1; } if (turnRight){ character.rotation.y -= 0.1 } }); }; var LockMousePointer = function() { // Request pointer lock var canvas = scene.getEngine().getRenderingCanvas(); // On click event, request pointer lock canvas.addEventListener("click", function(evt) { canvas.requestPointerLock = canvas.requestPointerLock || canvas.msRequestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock; if (canvas.requestPointerLock) { canvas.requestPointerLock(); } }, false); // Event listener when the pointerlock is updated (or removed by pressing ESC for example). var pointerlockchange = function (event) { controlEnabled = ( document.mozPointerLockElement === canvas || document.webkitPointerLockElement === canvas || document.msPointerLockElement === canvas || document.pointerLockElement === canvas); // If the user is alreday locked if (!controlEnabled) { camera.detachControl(canvas); } else { camera.attachControl(canvas); } }; // Attach events to the document document.addEventListener("pointerlockchange", pointerlockchange, false); document.addEventListener("mspointerlockchange", pointerlockchange, false); document.addEventListener("mozpointerlockchange", pointerlockchange, false); document.addEventListener("webkitpointerlockchange", pointerlockchange, false); } /*window.addEventListener("mousemove", function () { // We try to pick an object var pickResult = scene.pick(scene.pointerX, scene.pointerY); camera.rotationOffset += scene.pointerX/1000; console.log(scene.pointerX); //console.log(scene.pointerY); });*/ /*END LOCAL FUNCTIONS*/ var init = function(){ mass = 10; friction = 50; restitution = 0; LockMousePointer(); camera = attachCamera(character); character.position.z = 10; character.parent = camera; setCustomPhysicsState(mass, friction, restitution); //initPlayerActions(); }; init(); }
  21. Hi All, I have developed an android game using Phaser and Cocoonjs. Here it is: I used simple ARCADE physics and there are no big assets. But there is a performance problem. I have tried my game on many android devices. All of my tries have same performance problem that is FPS dropping randomly. Also the problem occurs when I run the game on Chrome web browser. I tried 'render' to see FPS like below: render: function() { game.time.advancedTiming = true; game.debug.text(game.time.fps, 15, 25, "#00ff00"); } It says that the FPS is 60 always. But sometimes the game is choppy and sometimes the game runs smoothly. I googled it for days but I could not find any valuable solution for it. Can anyone help me to solve the problem? Regards.
  22. Hi guys I'm working on a game developed with phaser.JS (and phonegap), and i'm facing a surprising problem. FPS is pretty good (it's between 55 and 60) but the avatar moves are not smooth. So i guess it's caused by the use of phaser feature. You can see the problem on the video here : Have you ever met this problem ? Do you have some idea to improve that ? Thanks for your time ! Dorian
  23. OMAR


    Can I lock the FPS of my Babylon.js app so it has 30 FPS instead of 60? -Thanks
  24. My first project in PlayCanvas. I am creating a version of Counter-Strike 1.6 Web Browser. Not much, in fact almost anything yet because I have difficulty in exporting models / textures / etc for PlayCanvas. My other difficulty is the lack of knowledge on the subject. But it is practicing what you learn. Page:
  25. Hello! When I create empty project and load assets, fps = 60, ok. After adding about 15 images to stage (game.add.image(0, 0, atlasKey, frameName)), fps jumps between 35 and 55. (All Images have: 208x208px, about 50KB, and keep in 1 xml atlas) Please, help to solve this problem. Thanks.