bQvle
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by bQvle
-
-
Sorry, I haven't had much time to read this post, but from a cursory glance isn't this just a matter of disabling the lagSmoothing feature that's baked into the engine?
TweenLite.lagSmoothing(0);
?
See http://greensock.com/gsap-1-12-0 for more details about the feature.
Hi again
I've now switched the game to using TweenMax.ticker, and its still not perfect. (acceptable but not perfect)
when minimized it actually only runs 1fps, I didnt notice that in the codepen, because I only only logged once pr. second
Is there a way I can make it run more then one fps?
Not that I can't live with it, but it still causes the 3d sound to take huge steps, and it throws my client interpolation a bit off for a short time. but atleast the code is getting excuted
-
Hi Jack,
Brilliant, that did the trick
I didn't know that exsisted.Heres an updated version that shows the result, you can pop out the Developer tool and watch in console whats happening when minimizing etc. and that it indeed keeps ticking now!
See the Pen PqrjVg by anon (@anon) on CodePen
This happends on "Tab Blur"
TweenMax.lagSmoothing(0); TweenMax.ticker.useRAF(false);
And is reversed on "Tab Focus"
TweenMax.lagSmoothing(500,32); TweenMax.ticker.useRAF(true);
@blake, thumbs up for effort
but I'm relieved that I can keep it uncomplicated now -
1
-
-
Ahh okay, sorry about that, I'm not that familiar with GSAP yet, I discovered it just a few days ago. but I'm trying to get up to speed fast.
This would work as a solution, and I really appreciate all your help and time you've given me!
But I'll leave it open a bit for now, I'm pretty "concervative" when it comes to things like this. (I'd rather "fix the core" then taking shortcuts" if you know what i mean).
And in the end, keeping the ticker alive is the best/right solution.
So i hope one of the devs will throw a comment on that matter.
-
Then it would have to be something like this?
deferred = setInterval(function() { var total = (now() - start) / 1000; var tl = TimelineMax.exportRoot(); //move the animations tl.totalTime(total); //do gamelogic and renderer gameloop(1); }, 1000);But that still wouldn't quiet work, because the "start" variable you set is for a single timeline, and doesn't really exsist in this snippet. Then you would need to know when every single animation was started and to calculate the totalTime for each of them.
Lets see if it's possible to keep the Ticker alive. that would be alot less of a headach
-
Hi blake,
Thank you for the info, it was merely for the example, but it's great to know.
That's sort of an solution, but my scenario makes it a bit more complex.
The game will be running all sorts of animations, visual effects, missiles, planes, gui animations etc, with various attached functions. only some of them will be timelines.
With you method I would have to convert everything into timeLineMax and use setInterval to set totalTime of every timeline (which would proberly ignore some onEvents?) it would have to step my gameloop aswell.
It will be alot of work. and I dont feel this is a great solution in my case.
but if just "TweenMax.ticker.useRAF(false);" actually worked in this codepen, That would be a great solution.
See the Pen PqrjVg by anon (@anon) on CodePen
Edit:
I just tried starting it with TweenMax.ticker.useRAF(false);.
And indeed it is working (animation is very choppy). But it still pauses on "tab blur".
this would tell that its actually GSAP thats stopping the ticker when it's not visible?
-
It works in Internet Explorer, but i suspect IE is ignoring RAF and forsing 60fps. My game also runs 60fps in IE, even though i have a 120hz monitor and should be running 120fps.
Chrome and Firefox is the same result, time stops while tabbed.
Lets try summon a Sensei
-
To add to Diaco's great advice
You could detect when the browser tab or browser window gains or loses focus and then pause() and resume() your tweens or timeline.
the below example uses the HTML5 Visibility API to detect browser tab / window focus:
See the Pen sxgJl by jonathan (@jonathan) on CodePen
and then do as Diaco had suggest to toggle useRAF
just a suggestion
I don't want animations to pause, thats what I'm trying to avoid.
The cruscial point for me, is the integrity of time.
I could however use your codepen to put together an example.
I have stripped window fucus/blur, since that doesn't affect requestAnimationFrame.
And changed it to toggle ticker.useRAF
See the Pen PqrjVg by anon (@anon) on CodePen
(edit: forgot to save, it should be working now)You will see that ActualTime and AnimationTime is instantly desynced when you minimize / change browser tab.
Actually I suspect that it partially works, because you see that it changes back from (not using RAF at 10fps) to using RAF.
Maybe it doesn't call the events(in this case onRepeat) while tabbed. but that would be a problem aswell.
Edit2: the white ball doesn't move while tabbed. so maybe its toggling RAF that isn't working, and only the fps that gets toggled.
-
Hi bQvle
if i understood correctly , you can turning off the requestAnimationFrame ,
pls try this :
TweenLite.ticker.useRAF(false);
Thanks, but when the windows is active, I want to use RequestAnimationFrame (for smoothness).
I could then detect if the loop is running, and toggle useRAF, but that would require me to do the oposite detection when they return to enable "RAF" which might not be as easy.
and the biggest "no no" is that I would still lose control over the delta-time. when I detect that the ticker is no longer running, i need to push it forward with the time elapsed since it stopped.
-
Hi Again,
I had a thread a couple days ago about using the GSAP Ticker for my game. You actually told me that it wasn't possible to manually step the ticker. but I'll share my concerns, and hear you out.
The problem with "RequestAnimationFrame/Your-ticker" is that when you "blur/change browser tab/minimize" it isn't getting called anymore. the result of this is that all animations pauses.
This might not be a problem for banners/website animations, or for that sake, singleplayer games.
But in my case, it's a problem. I'm creating a browser MMO(serverside) top down wargame, and this is some of the conciquenses i face when the animationloop stops.
1. Animations freezes and no longer represents whats actually going on, serverside.
2. 3d sound positions freezes, because they are relative to the gameobjects current position. (gives you the feeling of a game crashing).
3. Ability cooldowns pauses. (getting desynced with the acutual cooldowns running serverside)
4. since theres always thrown new animations at the client, they stack up. (and if you are tabbed for 10 minutes and return, the amount of pending animations will crash the game or atleast make an inferno)
The solution i had with my own gameloop, was that I timestamped every run, if it got more than 1000 ms old, i manually called my gameloop funtion with a delta of 1 (1000 ms). that made sure everything continued in the background, even while minimzing the browser/changing tab.
Do you have any idea how I can overcome this? If not, take this as a feature request
It would be cool with something like TweenLite.ticker.update(delta) that would manually tick with the supplied delta.
og maybe build in an option like "keepAlive" that makes sure the Ticker never stops (even if requestAnimationFrame isn't called).
-
Blake,
I get it!
+1 on the great support and examples! really helpful!Carl,
Thanks, but I think I'm set for now, blake addressed both of my questions very well.
-
2
-
-
Ah, thank you for the clerification and example!
I misunderstod updateTo, I thought it was for manually stepping a tween/timeline. (Thats what you get for mixing questions)
So updateTo will allow me to change the values in a ".to()", but it will only work on tweens/TweenMax and not timelines.
(which answers my enitial question, except I'm using a timeline)
About the tick's I think you misunderstood me to, i wasn't concerned about updating the values between ticks.
But rather make sure that all the "tween ticks" happends before the "render tick" just to avoid visual jitter/tearing because with two "tickers/requestAnimationFrame" i have no idea what is called when. But if i use the TweenLite.ticker, and set priority to -1, hopefully all the tweens will update before the render tick. I assume that all Tweens and Timelines exsist in that ticker with priority 0.
-
No, you only update what you want. You can even update the values while it's tweening.
But if using updateTo, the smartest thing would be not starting the tween. and then call updateTo from somewhere in my gameloop before the renderer right?
I just said it doesn't matter for the tick. The priority is for the callbacks you add.
Yep, but you would think that the currently running timelines and tweens also exsist in that callback stack? and by adding my gameloop/animate with lower priority would make sure tweens happend before renderer.
-
I take it you're using PIXI from your other thread, which means you can use the updateTo method as long as it is not a plugin value.
http://greensock.com/docs/#/HTML5/GSAP/TweenMax/updateTo/
As for the ticker, I don't think that matters since it is called after the engine updates.
Yep I'm using PIXI,
but what you say would require me to iterate through all my tweens/timelines and call the updateTo, correct?
Currently my gameloop is just running on a requestAnimationFrame, so I don't see why i shouldn't just use the built in TweenMax/TweenLite ticker. (if someone could confirm that priority "-1" would put the callback at the end of the stack, to assure all the tweens have been processed before I do the renderer)
-
Thanks Dipscom,
Yes i could actually use that Ticker for my game.. hmm.
//add listener that requests an event object parameter, binds scope to the current scope (this), and sets priority to 1 so that it is called before any other listeners that had a priority lower than 1... TweenLite.ticker.addEventListener("tick", myFunction, this, true, -1);Would priority -1 make sure that the tweens has already animated before "myFunction" is called?
-
I think I found a solution that I'll go with.
If I put every animated object in a gameobject container, I can just rotate/move the that gameobject, then the GameEngine matrix will handle positioning and angle of the animation. and the timeline itself can be with "static" values.
About the Ticker I'm still curious. But i guess it more complicated then so. (I assume you run every timeline-animation on its own ticker, to allow pause/resume/rewind etc.)
If i could just make sure that my gameloop/ticker is the last to get executed. (to assure that all animation has happend, before rendering the canvas)
-
Hi bQvle,
If you just want to avoid doing another new TimelineLite(), I would recommend that you call
animation.clear() //remove all child tweens, timelines, callbacks from timeline
and then add a new tween with the new values
Hi Carl,
Sorry for being paranoid, but wouln't that just leave the "tween" objects to the GC, rather then the whole timeline object?
Also, while I have your attention.
Is there a build in method for stopping the global ticker, and calling the tick event manually? I just want to make sure its perfectly in sync with my renderer.
so i could call the TweenLite/Max "update/animate/tick" function before i do my renderer.
I dont know if its my OCD, but i feel like there is some "sync" jitter in the animations. and that would happend if the rendere sometimes gets called before the tween has happend.
-
Thank you for answering and trying things out
To be honest, if you are updating the animation on the fly, it kind of defeats the point of caching it, no?
Not really, if I'm able to reuse the TimelineLite object (changeing the values) and avoid casting "new" I will be fine.
Everytime you use "new" you abandon an object, that becomes garbage and at some point have the get cleaned up by the gc.
(Its not only the animation I'm caching, its also the sprites and sounds used by the animation. so I'm caching a wrapper object that contains this animation)
This wouldn't be a problem if it wasn't a game.
But because its a game, and over time will play thousands of different animations (never ending), it will unfortunatly start filling up the GC, and it might cause lag's and poor performance (especially on mobile devices).
Lets see if someone can shed some light on this, I really hope its possible!
-
Lets say i have two points for storeing start and end position.
var planeStart = new Point(); var planeEnd = new Point(); planeStart.x = 0; planeStart.y = 0; planeEnd.x = 1000; planeEnd.y = 1000;
then i make my animation.
var animation = new TimelineLite() .fromTo(plane.position, 30, { x: planeStart.x, y: planeStart.y }, { x: planeEnd.x, y: planeEnd.y, });When the animation is done, i cache it (reuse everything to avoid memory overhead).
Problem:
Now i want to start the animation again, but with new planeStart and planeEnd positions.
Changing the reference objects before playing the animation doesn't work
planeStart.x = 0; planeStart.y = 500; planeEnd.x = 1000; planeEnd.y = 500;
Repeating the instantiation with updated reference objects doesn't work
animation.fromTo(plane.position, 30, { x: planeStart.x, y: planeStart.y }, { x: planeEnd.x, y: planeEnd.y, });Creating a new timeline with updated references DOES work
animation = new TimelineLite() .fromTo(plane.position, 30, { x: planeStart.x, y: planeStart.y }, { x: planeEnd.x, y: planeEnd.y, });But that kinda negates the purpos of caching in the first place.
Edit:
I need to use timelines, because it's a multiplayer game, and when people join, all running animations will jump to their current state.
i have tried .invalidate() and .kill() without success.
-
-
Except my parashoot is top-down
I could probertly solve it by just hardcoding individual keys/tweens. but I'm curious if it can be solved with an easier method.
The main scale for the falling, and something else for the wiggle effect. (blue square in my codepen)
Edit:
Combining Scale and width is not a solution. I'm not going to use this with CSS, but on Sprites in PIXI.js. so I only have scale.x and scale.y to work with.
-
-
Hi,
I recently discovered GSAP and it looks amazing. I'm currently developing a game, and I want to change my hardcoded animations to use GSAP.
I have an Air drop animation. (plane fly from from A to C, and drop parashoot at B
Currently its all handled with an animate function thats called every frame with a delta-time. And i have all the control in the world. but its just alot of work and time for simple animation).
My problem converting to GSAP:
When the parashoot is dropped, it starts with a scale of "1.2" in both x and y. and over 5 seconds the scale animates to "0.4".
This is not a problem.
But I want some soft "noice" to it, to make the parashoot seem more alive. some random soft variation in X and Y scale.
In my hardcoded animation i just used Math.cos / Math.sin and applied it to the elapsed duration. and appied that as a factor to my scales, after the scales had already been lerped between its Start and Target scale.
I also want to wiggle the parashoots rotation on its way down. But I guess that could easily be solved with a seperate "yoyo" timeline.
Solution?
I guess one solution would be to make a CustomEase and use that on the "main" scale tween.
But is there a way of achieving this without using CustomEase?
Stepping the Ticker manually
in GSAP
Posted
But I am actually toggeling useRAF aswell, if i didn't do that time would actually stop (not even run 1 fps)
So the 1fps is setTimeout()-driven.
Edit:
I just did some testing.
with
TweenMax.ticker.useRAF(false);
it runs 1 fps (1000ms)
and with
TweenMax.ticker.useRAF(true);
it runs 0.33fps (3000ms)