Search the Community

i am trying to figure out why assets sometimes “double” when character moves quickly. i think it’s probably a problem in gameLoop() or draw() but i can’t figure out where. i want the player to move whenever the user presses a key, but the monster movement is on a timer (1x per second, or less depending on difficulty level). the requestAnimationFrame(renderViewport) call is inside draw(). draw() is called whenever character moves, but gameloop() only runs 1x/second (or per .5 second, etc) for monster movement, and there is a draw() call in there too. is there a better way to do this? front end: anti-fascist-heroine-addiction.surge.sh code: https://github.com/rifkegribenes/anti-fascist-heroine-addiction

Is there a way to have Pixi only redraw as needed? For example, in the RenderTexture sample, the GPU is at 20% but nothing is moving. http://pixijs.github.io/examples/index.html?s=basics&f=render-texture.js Can I tell items not to redraw if they are idle? Or how can I implement a "needsUpdate" flag? In my app, the screen does not change frequently, and it sits idle on a big screen for long periods of time. Over time the machine heats up and the fan kicks in with the GPU so high, in my case over 50%. I have looked at the requestAnimationFrame loop, and I need this because I do want to animate sometimes ... just wondering where can I hook in to Pixi to improve this. Thanks --Andy

Hey everyone, So Im new to game development, although Im a full stack JS dev for general sites and apps. I started getting into canvas animation and now Im here trying to learn some game animation stuff. My question is this: Do you generally do just about all animation in the game loop with requestAnimationFrame()? Or can you simply have renderer.render(stage) called in the game loop while outside of it you use GSAP or some other tweening mechanic to change the positioning props on objects/sprites? Iv tried it and it works, I just would like to know if its dumb or nonperformant. I also tried using my regular js tweening library to call `renderer.render(stage);` in its update callback and it looks the same (im just doing a simple animation generating snow-like particles that float down). I know that the supported game loop in PIXI has stuff for velocity and whatever but I really like my animation library's (http://animejs.com/) easing and elasticity options. Will calling renderer.render(stage) in the game loop while tweening outside the loop still be 60FPS? Or do I need to be updating in the game loop? If I have to do it in the game loop, does anyone have any tips/references for easing and all of that? Because I dont want to have to write my own easing functions to update in the game loop (and I suspect most people arent), and rather use an animation API for that. Im also brand new to PIXI and maybe it has its own easing and whatever that works inside the game loop. Cheers

Running the instance Demo both from the babylonjs.com website and locally: I see potential FPS in debug overlay showing ~60 FPS. Actual FPS is ~15 FPS. I tested this in both Chrome and Firefox on both Linux and OSX. I tried removing various parts of the code. Reducing instance count to 10, removing collision tests from all objects. The FPS rises somewhat but the problem persists. I tried checking out the v2.5.0 tag in case something in latest was causing the problem. The problem persists. I think this may be due to BabylonJS depending soley on requestAnimationFrame for update/draw logic (which creates several problems actually, but I created a separate post to address that). I assume there must be something wrong in the update logic, but I am new to BabylonJS. Is anyone else seeing a low FPS number on the babylon website? See attached screenshot where render and frame are only 5ms and 8ms (potential FPS is 128) yet FPS is only 40!

I'm new to BabylonJS but one of the first things I notice is that almost all of the demos run slow (20-30 FPS is typical) on the same machine that is running three.js stuff fast. It seems like update/draw is not being called as often as it could be, as according to the debug overlay update and draw frame time is only 10ms in these same demos (so potential FPS is 100). Additionally I think BabylonJS suffers from timing flaws that other JS engines do, see this article: https://www.isaacsukin.com/news/2015/01/detailed-explanation-javascript-game-loops-and-timing In three.js I am using Mainloop.js to control update/draw timing logic. I think I would like to do the same in babylon.js, unless I am missing something. To expand further, physics should ideally be at a 30hz update rate in my game, but draw calls and other update logic should be at 60hz. Also update logic should be called at a very consistent 60hz, where draw can vary a bit from 40-60fps without real harm. (Draw lag spikes are permissible but update lag spikes should be dealt with by calling update twice to catch up and make game logic and especially physics have predictable behavior and equal time per step.) Is there a way without forking Babylon to override the update/draw timing logic? I notice the functions beginFrame() and endFrame() are public. Can I just call beginFrame, do my render calls, and then call endFrame? Will this break anything? What should "do my render calls" look like? Again I would prefer to not modify babylon.js itself, and instead just override its behavior because I don't want to maintain a fork.

I'd like to encapsulate my PIXI rendering in a JavaScript Prototype Object-Oriented fashion. The problem I'm running into is that there is no 'this' object when my animate method is invoked as the callback from requestAnimationFrame(). Can someone suggest a means to do this? I realize this is likely just a general JavaScript issue, as opposed to something related to PIXI, so sorry if this is trivial. Thank you in advance of any help you can provide! Here is what I believe is the minimal code needed to demonstrate the issue: var FFT = function() { this.renderer = PIXI.autoDetectRenderer(600, 800, {antialias: true}); document.body.appendChild(this.renderer.view); this.stage = new PIXI.Container(); this.stage.interactive = true; this.graphics = new PIXI.Graphics(); this.stage.addChild(this.graphics); }; FFT.prototype.renderLines = function() { // todo render lines here }; FFT.prototype.renderLoop = function() { // when this method is invoked via the requestAnimationFrame // callback there is no 'this' object bound, so this.graphics // is undefined. my goal is to avoid adding global functions, // if possible. this.graphics.clear(); this.renderLines(); this.renderer.render(this.stage); requestAnimationFrame(this.renderLoop); }; FFT.prototype.start = function() { this.renderLoop(); }; var fft = new FFT(); fft.start();

Trying to learn Pixi i created this small file: PixiRenderer.js define(["references/pixi"], function(PIXI) { var PixiRenderer = function(){ var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0x1099bb}); document.body.appendChild(renderer.view); // create the root of the scene graph var stage = new PIXI.Container(); // create a texture from an image path var texture = PIXI.Texture.fromImage("assets/bunny.png"); // create a new Sprite using the texture var bunny = new PIXI.Sprite(texture); stage.addChild(bunny); renderer.render(stage); } return new PixiRenderer();});My html: index.html <html> <head> <script data-main="scripts/PixiRenderer" src="scripts/Require.js"></script> </head> <body> </body></html>I can see the canvas added to the DOM and the blue background is rendered but the bunny is missing ! There are no errors in console, everything seems to be working alright And im using local Node.js server to get the files so the bunny.png saved locally on my machine but my browser can still access it now if i replace renderer.render(stage);with animate();function animate() { requestAnimationFrame(animate); renderer.render(stage);}everything works. Can anyone tell me what is the problem ?

Hi, Today I've faced with issue in the Chrome, that was discovered several yeas ago - requestAnimationFrame leaks. Pity but true. A brief post about my investigation is on the site: http://www.elvarion.com/garbage-collection-in-the-game-loop-chrome-failure/ What other eags our great web-platform has?

Do you want custom FPS with smooth animations? I have made a method that makes this possible. The first 1-3 seconds may be buggy, but after that it works smooth. The update() method is called (custom FPS) times per second. The draw() method is called how many times the browser refreshes per second. Here's the code: (mainCanvas is a canvas with the size 800,600) window.requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ) { window.setTimeout(callback, Math.floor(1000 / 60)); };function step(){ for (var i = 0; i < updates.length; i++) { if (updates[i] == tick) { utick++; update(); } } tick++; var cursec = (new Date()).getSeconds(); if (cursec != prevsec) { prevsec = cursec; frametime = tick; tick = 0; uframetime = utick; utick = 0; updates = []; for (var i = 0; i < fps; i++) { var uind = Math.ceil(frametime / fps * i); if (uind >= frametime) { uind = frametime - 1; } updates[i] = uind; } } draw(); requestAnimFrame(step);}function update(){}function draw(){ ctx.clearRect(0, 0, 799, 599); ctx.fillText(uframetime.toString(), 10, 20);}var mainCanvas = document.getElementById("mainCanvas");var ctx = mainCanvas.getContext("2d");var fps = 30;var prevsec = (new Date()).getSeconds();var tick = 0;var frametime = 0;var utick = 0;var uframetime = 0;var updates = [];ctx.font="20px Georgia";step();

is your requestAnimationFrame dated? http://paulirish.com/2011/requestanimationframe-for-smart-animating/http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating (this link doesn't work properly) When reviewinghttp://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision which references High Resolution Timehttp://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HighResolutionTime/Overview.html#sec-extenstions-performance-interface 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 performance.now() (High Resolution Time) methodology.. and discuss mozilla date.now() issues.. 16.7 ms seems to be the ideal timing.. which I suspect is only possible with the HDT precision.

Hi! I'm currently porting my game to mobile devices with CocoonJS. After days with a lot of headaches trying solve the issues, i came with one that i read on the forums that is solved on CocoonJS 1.4.4, but because i'm new with this I don't know what version it's actually being used to compile my project. I'm having this error: Javascript Exception (Line: 7181 Tag: 'requestAnimationFrame'): TypeError: 'undefined' is... Does someone knows this error? How can i fix it? Thanks in advance.