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. I've got a situation my physics simulation is running at high framerate (60fps), but some devices my app runs on cannot run the graphics (PIXI) at 60fps without causing the physics simulation to stutter and jump, causing undesired artifacts. So, in pursuit of performance, I shoved the physics simulator (in my case, matter.js) into a web worker, but then still found that some devices couldn't handle updates at 60fps in the main thread. So I started setting an interval to apply updates from the simulation to PIXI at a fixed rate - 30 fps to start. However, sometimes even on some devices that was unsustainable. So, the question came down to - what FPS *should* my app run at? And when I say "run", I'm talking about changing the position of PIXI objects base on updates from the physics simulation, not about changing the speed of the PIXI's ticker. Since the speed at which I could apply updates from the physics simulation and still achieve sustainable render speeds without lagging varied from device to device, I decided the best way to decide on the FPS to run at would be ... let the app itself decide at run time. So instead of coding a fixed FPS, or giving the user a slider to adjust, I let my app measure and adjust it's FPS based on what it measures as sustainable while it's running. Enter my solution for my app, FpsAutoTuner: - contributed here to the community in case it may help someone else solve a similar problem. It's framework-agnostic, no external dependencies, written as an ES6 class, but could easily be rewritten as a ES5 if you wanted. FpsAutoTuner works by measuring the FPS (which you tell it by calling `countFrame()`) and then every so often (at `tuningInteval`ms), it compares that measured FPS to the `fpsTarget`. When the measured FPS goes below `fpsTarget` less `tuningMargin`, the `fpsTarget` will be decreased by `tuningRate` and the `callback` will be execute with the new `fpsTarget`. Likewise, when the measured FPS exceeds `fpsTarget` less `tuningMargin`, then `fpsTarget` will be increased by `tuningRate` and `callback` will be called with the new target. Example usage: // Somewhere at the top of your file import { FpsAutoTuner } from './FpsAutoTuner'; // Then later in your code, probably in your constructor of your game object this.fpsAutoTuner = new FpsAutoTuner({ fsTarget: 30 callback: fps => this.setFpsTarget(fps) }); This assumes that you have a function called `setFpsTarget()` on your class, probably that does something like this: // This is just an example method, on your own class... setFpsTarget(fps) { clearInterval(this._fpsTid); this._fpsTid = setInterval(this._render, 1000 / fps); } Then later in the rendering portion of your code: // inside the render loop of your code, call: this.fpsAutoTuner.countFrame(); That's it! Your app will now automatically adjust it's FPS as needed when it detects lower/higher frame rates available. (FpsAutoTuner automatically starts it's auto-tuning timer in it's constructor.) There are plenty of options you can pass to FpsAutoTuner to tweak it - they are all documented at the top of the gist. Specifically of interest, you can set `tuningInterval` (default 5000ms) to change how often it measures/changes the FPS. This all has just been a humble attempt to give back to the community. Use and enjoy. Contributions/changes/suggestions to the gist are welcome! Download FpsAutoTuner from GitHub here.
  2. Greetings! I am working on a horizontal scrolling rhythm game in React that uses Pixi for generating sprites. I want to use PIXI.ticker.elapsedMS to determine when a new sprite should be created and how far it should move its x position to stay in time with the song. My issue is that ticker.elapsedMS is taking longer than the expected millisecond value for a single frame at 60 fps. Is this expected behavior for ticker.elapsedMS to fall behind in a simple example like this? import React, { PureComponent } from "react"; import { css } from "react-emotion"; import * as PIXI from "pixi.js"; import "pixi-layers"; export default class PixiHighway extends PureComponent { constructor(props) { super(props); this.pixi_container = null; this.expectedFPS = 60; //assuming we're at 60 FPS this.expectedMSPerFrame = 1/this.expectedFPS*1000 //roughly 16.67 = new PIXI.Application({ width: 1200, height: 800, transparent: true, backgroundColor: 0xffffff });; = new PIXI.display.Stage(); = true; this.startSongTime = 0; } updatePixiCnt = element => { // the element is the DOM object that we will use as container to add pixi stage(canvas) this.pixi_container = element; //now we are adding the application to the DOM element which we got from the Ref. if (this.pixi_container && this.pixi_container.children.length <= 0) { this.pixi_container.appendChild(; } }; update = delta => { = new Date().getTime(); const songElapsedTime = - this.startSongTime; if ( > this.expectedMSPerFrame) { console.log( "WARNING Under 60fps! elapsedMS:",, "deltaTime:",, "Dropped frame this far in ms through the song:", songElapsedTime ); } }; startTheTicker = () => {, () => {; }); this.startSongTime = new Date().getTime();; }; render() { return ( <div> <button className={css` position: absolute; top: 900px; `} onClick={this.startTheTicker} > Start animation </button> <div className={css` position: absolute; z-index: 2; `} ref={element => { this.updatePixiCnt(element); }} /> </div> ); } } Here's the result of the console.log when > this.expectedMSPerFrame. Is the log just slow or is my ticker being run incorrectly? Thanks for your time!
  3. 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.
  4. Hi, I've noticed that switching between states or entering next state causes frame drop in my game. First off all I need to say that I'm using Phaser.State in a little bit different way. I've split my game in multiple sections, like: IdleState, MovingState, AnimatingState, BonusGameState, etc....I was testing the game on my desktop PC, disabled practically all my code and also hidden all display objects. The only thing left in my game was testing the state switching, which resulted to be the main issue for the frame drop. It happens only twice, once you enter a new state. First frame drop (from 60FPS -> 20FPS) happens almost at the entering phase, and the 2nd happens always around 2.3s later. And this is super annoying especially because you can notice flicker in Moving & Animating state, even though we're talking here only about two occasions of frame drop per state. I would like to know what could be the most expensive method/command inside StateManager -> clearCurrentState() and StateManager -> setCurrentState(key) ? I wouldn't like to break everything apart now, just because of this. Is there a way to optimize anything here?
  5. My first BabylonJS project is a whacky multiplayer first person shooter featuring, well, eggs, of course! It's in very early development and still fairly rough around the edges, but it's super easy to jump in quickly and play. It's just been made public, so finding people to shoot may be a little hit and miss (pun intended). Enjoy! Facebook: Twitter:
  6. Hi there, I have a "more o less basic" game and now that is almost finished, I realized that the performance on iOS is ridiculously bad. Running the game on old Android devices I get easyly 60 fps, everything runs smoothly, but the same game, running on an iPhone 7 (and obviusly on older devices) it´s gettting 15 fps, being and easy game on a much more powerfull device (good one, Apple). The thing is, I read that maybe tilesprites (I´m using one) could "help" to this poor performance, but this is not the case, even without that tilesprite I´m still getting 15 fps... Can anyone point to things to check? Stuff that affects only iOS? I´m not finding how to fix this...
  7. 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
  8. Hello, Since some day, firefox turn phaser game slow. All game i have created and even litle game downgrade fps. (60FPS to 30FPS) I dont know where is the problem. i have try use phaser but no change. You can try with this example : if you wait some seconds the animation down to 30fps. this problem is only on firefox (i suppose since v57). All others browsers working fine. Have you an idea where is the problem? Thank you
  9. Hello, everyone! I have been struggling with some strange universal camera behaviors. A simple scene with an arcRotateCamera in the air (left) and a universalCamera (right) on the ground, like this: The arcRotateCamera rotates very smoothly. No problem with that. The universalCamera, on the other hand, behaves a bit wierd. The walking (using arrow keys to move about) is pretty smooth, but the panning (click and drag mouse to look around) gets 'sticky' around the center of the screen, especially when looking at more objects, like the screen capture above. By 'sticky' I mean the camera is reluctent to rotate, as if there is a big fps drop. However, engine.getFps() shows no obvious fps drop. I am wondering: 1. If anyone has met similar situations and how to solve it? 2. Does the camera have some sort of inertia property that might result in this? Hope someone can point me to the right direction. Thanks a lot!
  10. Hi, While it should be an easy question, I can't get a fixed movement speed. By "fixed" I mean frame rate independent. According to the manuals it could be done inside update function like this: function update(time, delta) { ... container.body.setVelocityX(speed * delta); ... } .. where "container" is a normal Phaser 3 container and "speed" is predefined. The problem is that I still get noticeably different speeds (for example, small vs big canvas). I check it by measuring a time to get from point A to point B. How can this be improved/fixed? Do I need to turn on something that is turned off by default?
  11. Hi, I'm pretty new to Babylon.js, only started using it a few days ago, but really enjoy it, great work! I encountered some odd behavior with using deterministic lockstep on my setup, when running the example from the Animation page ( on my laptop's display (120Hz) the animation is twice as fast as on my connected monitor (60Hz) - tried with both Latest and Stable version, with both Cannon and Oimo plugins. My first guess would be that the algorithm is only prepared to handle low FPS, and does not take into account possible higher values. Also tried to dig in to the project on GitHub, but since I'm not that familiar with the structure, sadly I did not find the sources responsible for the behavior. Could some expert please verify my finding? Thank you, keep up the good work, cheers!
  12. I've noticed random drops of FPS in Chrome during a simple movement of a simple sphere. So I made a profile and the drop is clearly visible (suddenly down at 27 FPS). However, I have no idea what caused this to happen. There is nothing unusual to me within this profile. What can I do to dig deeper and eventually solve this problem? I doubt that it this is related with Babylon.js itself nor with my code... It's probably a Chrome issue - and it doesn't happen in Safari.
  13. Hi Guys. I did some test on my notebook, and the phaser doesn't reach 60FPS, just 40FPS. As this said, I've been having some problem working with the ARCADE physics, considering that it works on a 60FPS constant. The following implementation was a try to solve the problem: var game = new Phaser.Game(960, 540, Phaser.CANVAS); var GameState = { init: function () { = true; = || 60; ... }, update: function() { = || 60; = 400; } } Would it be a bad practice fulfill this implementation? Would it be more correct to set aside physics and increase position using the delta time?
  14. Hi!, i working in a proof of concept with phaser 3, and i see that is working very fine ! but i want to access to the current frame rate to show it in the game screen. i don't find any examples or documentation about it, there is any way to get the current frame rate in phaser 3? Thanks!!
  15. The playground from runs at 10fps on my Razor Blade laptop with nVidia GTX 1060. Is that normal?
  16. Just a quick little demo of something I thought would be fun to create. No smoothing groups or textures and dirty animations. PoC PoC PoC. All separate weapon parts are weighted to bones, so they can be positioned, scaled and rotated individually, to create endless weapons(Only 4 in this example), all from a single mesh. I've chosen to do it in 3Ds Max, although it can be done in code as well.
  17. Hi everyone, I'm working on a web app that must change position of a mesh on (almost) every frame in time like a video. I know I can manage coordinates for this but I dont know how to set the fps to 30 and how to apply the new coordinates according to each frame. Can anybody show me a basic example to achieve this? Thank you all.
  18. Hi guys, I am currently working on a game where you control a person throught a maze. It's my first babylon js application so i'm learning on the go. I managed to create a good base for the game, a character that you can move around on a world, with a good camera management ect.... My next step is to make the game multiplayer, with NodeJS and The thing is that I noticed that my application can be quite slow sometimes and I think it will be bad for the following of my project. After some recherch I came accross some SceneOptimization tutorials and I applied them, without much results... I also tried to remove every shadows on the game but there is still some major fps drops Thats why I finally come to you with the hope that someone can help me. The current version of the game is available at this link : I also attach the sources with this message. I know it's not a very good practice to throught a big chunk of code and ask for help, but at this point I really don't know what to do (maybe there is nothing to do) FPS.7z
  19. Hi, probably I dont fully understand how phaser engine works. For my test I inicialize 10k sprites and than immediately kill them ( sprite.kill() ). Unfortunately I have 15FPS, but I render nothing.. Why I have I have this FPS drop, I need kill sprites and revive it when I need them so I dont need any sprites's update, render, postupdate... functions. The debug plugin says slow around 20ms on preUpload-stage and 20ms postUpdate-stage. Can you someone help me please? Thank you very much Daniel
  20. Is there a simple way to show fps in PIXI.js?
  21. Hello, I'm back, this is a new version of the demo I implemented, and you can see it in the babylonjs engine. github: Technical details: Babylon-navigation-mesh: babylonjs: video: A previous demonstration:
  22. Hi, I'm a total noob at Babylonjs, but I'm playing around with remaking a previous raw Threejs project in Babylonjs. It's a physics based stacking game, and is really very simple (nothing but boxes), but I still seem to get really bad framerates. The thing is, when I made this in Threejs I had no such problems. I’m using 3.1.0-beta3 (which seems to be the default through NPM). I’ve tried switching to the previous release but that gives me the error TypeError: Cannot assign to read only property 'RGBA16F' of object '#<WebGL2RenderingContext>'. I’ve also played around with anti-aliasing and adaptToDeviceRatio on/off but that seems to make little difference. Also SceneOptimizerOptions causes a bug in CSG for me, where it errors out on finding position of null of my mesh. My project consists of 2 files, scene.js and app.js (sorry about the formatting, why isn't here a code tag) // app.js import { Vector3, Animation, MeshBuilder, CSG, PhysicsImpostor, StandardMaterial, Color3 } from "babylonjs" import { scene } from "./scene" const stack = [] function makeGround() { var ground = MeshBuilder.CreateBox('ground1', { height: 40, depth: 35, width: 35, subdivisions: 1 }, scene) ground.position.y = -22.5 ground.physicsImpostor = new PhysicsImpostor(ground, PhysicsImpostor.BoxImpostor, { mass: 0 }) stack.push(ground) } function makeBox() { let top = stack[stack.length - 1] var boundingBx = top.getBoundingInfo() let boundingBox = boundingBx.boundingBox var box = MeshBuilder.CreateBox('box1', { height: 5, depth: boundingBox.extendSize.z * 2, width: boundingBox.extendSize.x * 2, subdivisions: 1 }, scene) box.position = boundingBx.boundingBox.centerWorld.clone() box.position.y = (stack.length - 1) * 5 box.material = new StandardMaterial("xx", scene) box.material.diffuseColor = new Color3(Math.random(), Math.random(), Math.random()) box.physicsImpostor = new PhysicsImpostor(box, PhysicsImpostor.BoxImpostor, { mass: 0 }) stack.push(box) animateBox(box) } function makeFirstBox() { var box = MeshBuilder.CreateBox('box1', { height: 5, depth: 35, width: 35, subdivisions: 1 }, scene) box.position.y = 0 box.physicsImpostor = new PhysicsImpostor(box, PhysicsImpostor.BoxImpostor, { mass: 0 }) stack.push(box) animateBox(box) } function animateBox(box) { let lefty = (stack.length - 1) % 2 == 0 let prop = lefty ? "x" : "z" var animation = new Animation("anm", "position." + prop, 60, Animation.ANIMATIONTYPE_FLOAT, Animation.ANIMATIONLOOPMODE_CYCLE) var keys = [ { frame: 0, value: 60 }, { frame: 200, value: -60 }, { frame: 400, value: 60 } ] animation.setKeys(keys) box.animations = [animation] box.animation = scene.beginAnimation(box, 0, 400, true) } function match() { let top = stack[stack.length - 1] top.animation.stop() top.position.y -= 5 let a = CSG.FromMesh(top) let b = CSG.FromMesh(stack[stack.length - 2]) let intersection = a.intersect(b) let subtraction = a.subtract(b) if (!intersection.polygons.length) { top.physicsImpostor.setMass(5) top.position.y += 5 console.log("Missed - game over!") } else { let box = intersection.toMesh("s", top.material, scene, false) let leftover = subtraction.toMesh("ss", top.material, scene, false) box.position.y += 5 box.physicsImpostor = new PhysicsImpostor(box, PhysicsImpostor.BoxImpostor, { mass: 0 }) leftover.position.y += 5 leftover.physicsImpostor = new PhysicsImpostor(leftover, PhysicsImpostor.BoxImpostor, { mass: 5 }) stack.splice(stack.length - 1, 1) stack.push(box) top.dispose() makeBox() } } document.addEventListener("click", () => { match() }) makeGround() makeFirstBox() // scene.js import { Engine, FreeCamera, Scene, CannonJSPlugin, HemisphericLight, Vector3, Camera, Color3, PointLight } from "babylonjs" const frustumSize = 100 const aspect = window.innerWidth / window.innerHeight const canvas = document.getElementById("app") const engine = new Engine(canvas, false, { deterministicLockstep: true, lockstepMaxSteps: 4 }, false) const scene = new Scene(engine) const camera = new FreeCamera("camera", new Vector3(-45, 45, -45), scene) const light = new HemisphericLight('light1', new Vector3(0, -1, 0), scene) const physEngine = new CannonJSPlugin(false) physEngine.setTimeStep(1/60) scene.enablePhysics(new Vector3(0, -9.81, 0), physEngine) scene.gravity = new Vector3(0, -9.81, 0) camera.mode = Camera.ORTHOGRAPHIC_CAMERA camera.orthoTop = frustumSize / 2 camera.orthoBottom = frustumSize / - 2 camera.orthoLeft = frustumSize * aspect / - 2 camera.orthoRight = frustumSize * aspect / 2 camera.setTarget(Vector3.Zero()) light.groundColor = new Color3(0, .5, 0) light.diffuse = Color3.White() light.intensity = .4; engine.runRenderLoop(() => scene.render()) window.addEventListener('resize', () => { const aspect = window.innerWidth / window.innerHeight camera.orthoTop = frustumSize / 2 camera.orthoBottom = frustumSize / - 2 camera.orthoLeft = frustumSize * aspect / - 2 camera.orthoRight = frustumSize * aspect / 2 engine.resize() }) export { scene, camera }
  23. I need A very simple Javascript raycasting map editor with source code I am very new to raycasting and I need a code example to be able to make my own map editor....
  24. 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.
  25. Ever since I updated to iOS 11, I’ve noticed phaser games now seem to be stuck on 33fps on my iPhone 7. I wondered if it was just the games I made then I tested the bunny mark link below and it was the same. Has anyone experienced this?