Search the Community

Showing results for tags 'raf'.

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

  1. 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!
  2. Android stock browser has a bug that causes the RAF to freeze when it loses focus, even it the tab gains focus again. I created a workaround for this, forcing raf.stop(); and raf.start(); everytime the tab gains focus. This workaround worked fine until I updated some games to version 2.3, then it crashes games with the following error: Uncaught TypeError: Property 'cancelAnimationFrame' of object [object DOMWindow] is not a functionI checked the RequestAnimationFrame update history, and nothing has changed there in version 2.3, but the same game doesn't have this bug with older versions. Any idea on why this may be happening just with 2.3?
  3. mrBRC


    is your requestAnimationFrame dated? (this link doesn't work properly) When reviewing which references High Resolution Time The paul irish blog seems to have posted some revisions.. removing the o and ms vendor tags.. but it isn't reflected in his git distribution.. and some of the year old comments make reference to the (High Resolution Time) methodology.. and discuss mozilla issues.. 16.7 ms seems to be the ideal timing.. which I suspect is only possible with the HDT precision.