Search the Community

No matter what I try or how I implement things, I keep getting some jittery scroll movement. I was using the <canvas> tag before this, without PixiJS and it was a lot of jittery movement. Just one drawImage call per rAF-call would take far more than 16,6 ms. I used the <canvas> for drawing frames. But I also used the transform CSS property for instance. With and without CSS transitions. But currently I'm using PixiJS with a RenderTexture and the scrolling still seems somewhat jittery to me, though maybe less jittery. I'm not drawing vector graphics. I'm drawing images (PNG files actually). When an image has loaded I add it to a somewhat large RenderTexture (4096x4096). Because width of the images don't exceed 1024 pixels, I now store the images inside four columns of 1024 by 4096 pixels. I then have a sprite for which I create a Texture (which I recently found out to be just a reference to a BaseTexture combined with a certain frame). Each time I scroll I create a new Texture pointing to the same RenderTexture but using a different frame. Though at a certain point it seems I need two sprites with textures both pointing to the same RenderTexture but with different frames. Because, let's say, when the first frame starts at 4000 and I need about 800 pixels from the image (e.g. 800 could be window height or screen height) I need to have a frame pointing at the last 96 pixels of the first column within the RenderTexture and a frame which points to the other column, getting the remaining 704 pixels. Should this be a proper way of handling this? Or is there a faster way to handle this somehow? Maybe I could make sure to make the height of the columns within the RenderTexture are dividable by the current window height. Though then it would mean some column height would go unused (but then this would probably be true for all columns, so maybe not such of a big deal). And this reordering would then need to happen each time a resize occurs. I guess a large screen size (regarding height) would not work very well with how I'm handling this now? Any advice would be much appreciated By the way, I'm also using a small easing function which I call via setTimeout when there is movement. But the actual drawing takes place currently in the ticker function. It just calculates current scrolling speed, does not draw anything.

When using the VRDeviceOreintedFreeCamera on my mobile using VR headset (Himido V2)... When i turn he head... Has ALOT of Jitter... Is there any settings i need to handle to take care of that jitter... Also ... what is the optimism vertical and horizontal settings ... the default VRCamerMetrics uses 1280 x 720 ... Is that right for mobile VR???

Ok so Ill start with a quick example: https://i.gyazo.com/8ff58e047c8938dcf508b63bc18147bb.mp4 I start the example with a stationary swing and then proceed to swing while spinning. The station swing is perfect and smooth with zero jittering. The swing while rotating creates a horrible jitter effect. Right now the character is as follows: Base empty sprite holding everything. This only moves x and y. Bodyholder sprite is holding the characters body and is child of the base LeftArmHolder sprite is holding the left arm and is a child of the base RightArmHolder sprite is holding the right arm and is a child of the base I have tried a tweening the arm holders, which works well for static swings, but creates jittering while the character spins and swings. I have tried grabbing the body holders angle and applying the swing angle on top of that (body.angle + requiredSwingAngle). The result is the same as the tween. I have also tried creating an addition arm holder to act the base for both arms and make it a child of the body holder. The result is the same as the tween. Does anyone have any ideas on how to create a nice smooth sprite orbiting animation (backwards and forwards) whilst the parent sprite is rotating?

This is my first post here and to begin with, I'd like to give big congratulations to Babylon.js team ! Your framework is really impressive and the best yet for my use case (pedagogical web game about simple astronomy facts) Now, my problem: http://babylonjs-playground.com/#1QJOWT#1 I can't find a way for positioning the camera correctly according to the computed scene graph before the render... so the sphere at the center is jittering, and it gets worse if we increase the speed parameter. The complete system looks like this: http://babylonjs-playground.com/#1QJOWT#3 I want the camera to stay at earth position and to center on the moon. I've tried fiddling with scene.beforeCameraRender with no success... I guess I don't understand something about the internal priorities used before rendering each frame. c.f. the not working: http://babylonjs-playground.com/#1QJOWT#2 I've searched the forum but couldn't find any solution. Maybe it's related to: or ? http://www.html5gamedevs.com/topic/5509-how-do-you-guys-write-your-timestep-stuff-any-advice/ Thanks a lot for any help if anyone has a clue ! Thanks anyway to the babylon engine community !

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!

Hello everyone! I have a big map with a tilesprite in the background (repeating mountains). When I want to hide them, the first time I do background.alpha = 0, I notice a huge stutter. I can go back to alpha = 1 and alpha = 0 as much as I want later on, no issue. Only the first alpha = 0 causes the game to lag terribly. I have tried with visible, renderable, exists etc. : same result! I have also tried to create a tilesprite with different frames and switch between them, but the impact on performance was dreadful (lost 50FPS!). How could I avoid that? What's the cause of this stutter? Thanks a lot!

Hi, i've a quick question. Is it possible to move a group of sprites in a smooth way. Velocity of 300, for moving from right to left. Every few seconds i've created a group of sprites from 16 - 128. But in movement i can see a jittering. Tested on Chrome and Cocconjs. I've tried a lot of different thinks. - Not velocity. X and y of the sprite directly in the update function - this.game.renderer.renderSession.roundPixels = true; - create one sprite with arcade physic and all other only as childs. - Super small image May be someone has an idea to move sprites in a smoother way. In the game jetpack joyride, there are also groups of a lot of sprites (coins)..... Regards, Chris

Hi, I'm working on a simple game and have a remark and a question. 1. I have downloaded the phaser 1.1.4 from the dev branch to see if it would work, though I know it's still under development, I can see already that sprite jitter upon rapid movement is significantly bigger than it is with the 1.1.3 release. This is more of a remark rather than a question as I don't expect you to know why that would be. I thought I'd mention it anyway. 2. I'm trying to display score in my game using the bitmapText function, though I can't figure out how to make the text fixed to camera and I haven't seen a single example that would have it implemented. I have tried setting the fixedToCamera flag. This is party the reason why I downloaded the 1.1.4 version, to see if it would work then, but it still didn't. Any help would be greatly appreciated.