Halcyon
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Halcyon
-
Non-detailed answer before I head to work: I think you are looking for .updateTo
-
I wasn't 100% sure what you were trying to do, but this should help you solve this: http://codepen.io/maelfyn/pen/ogvydL A few notes: - As Jamie pointed out, your background size was only 1278px, not 1920px. I added a CSS rule to fix this. - I used TweenMax instead of TimelineMax.
-
This is awesome... thanks for spelling this out. When I get enough time, I am going to replace all of my setTimeout and setIntervals with Tweens to implement a pause feature in my web game. I think this is so cool because my game is purely event-driven and it has no game loop.
-
Is there a simple way to repeat delayedCall? I have avoided using it in many cases because I couldn't use it to replace setInterval. Otherwise I've been using TweenMax with onRepeat. jamiejefferson: didn't know about that... awesome!
-
Check Diaco's commented code. It doesn't have to be a Timeline. As a follow-up question: how do you Tween the globalTimeScale? I figured I could just make a function to slowly increment the .globalTimeScale, but it would be nice if I could do this using a single tween such as in Diaco's example. http://codepen.io/maelfyn/pen/uehGg#0
-
Thanks Carl. I think this post is a sanity check more than anything. Greensock's has a lot of performance nuances, so I like to check on these details. This video helps a lot. Thanks!
-
In the tests I have run, it seems JavaScript is a bit faster, but I'm wondering if it's possible to do this faster. So let's say I am repeatedly setting the width of health/mana/status bars and I want to do this as efficiently as possible. Should I use element.style.width or should I use Tween.to over a brief duration of half a second? In my tests if I Tween using 0 duration (or .set) it takes about twice as long as element.style.width. If I use a half second Tween, my test reports that Tweens are much faster (8ms vs 43 ms), but this isn't a fair comparison because the test is only measuring how long it takes for the Tween to start. This makes me wonder if using Tweens are magically somehow faster in practice in terms of perceived performance... like maybe there's less initial performance load? Or is element.style.width always faster no matter what? Thoughts? Edit: made a codepen to make this easier to test. http://codepen.io/maelfyn/pen/KelFk/ -
Here's an alternate method: TweenMax.fromTo(element, 2, { rotation:0 },{ rotation: 360, yoyo: true, ease: Sine.easeInOut, repeat: -1 });
-
Nice one! I just felt my brain get bigger.
-
I'd use a function that calls two tweens repeatedly. I'm sure there's a more elegant way to do it, but this will work: function doit(){ TweenMax.to(element, 2, { startAt:{ left:0 }, left:200 }); TweenMax.delayedCall(10, doit); } doit();
-
I started out using JQuery and was using that for about a year until I discovered Greensock. At that point I converted every single animation to GSAP and boy was it worth it! It was quite a conversion that had multiple stages. I started just using the jquery plugin, but eventually I realized that was a half measure. So I started using TweenMax which was great, but then I realized I should be animating pure javascript elements, not JQuery objects. So I had to convert all of that, too. There were a lot of little tricks here and there that helped make it better that I discovered along the way.
-
Hey, greensockers. I am back with the demo that I promised. Check it out and see what you think. The video is sped up slightly to make it more entertaining, but I think you get the idea of what is possible using Greensock, even without a single canvas tag. Feedback? Thoughts? Comments?
-
Thanks... I don't know what the deal is with that website, but I often get very different test results when I run my tests in the console versus the same thing on their website. I think I'll stick with Firebug console tests. And back to the original question, I have never seen a workflow with canvas that didn't seem painful so I have kind of avoided using it. I would never finish my game if I tried to use canvas. Everyone seems to believe it is the best choice for games, and the crowd is probably correct, but I just can't get into it. I really enjoy creating DOM-based animations and I've had good success with it. Perhaps a canvas guru could show us a good workflow with greensock, but until then I think I will stick to using the DOM. The most obvious limitations of using the DOM is it's very hard, or even impossible, to achieve some fancy image effects like blurring, masking, rippling, color izing/desaturating, filtering, etc. Honestly, I dream of the day when I do image processing on any DOM object: TweenMax.to(monsterImage, 1, { blur:5, colorize: '#ff0000' });
-
I noticed that test you ran comparing DOM vs Canvas. I just thought it would be worth mentioning that if you're not styling anything or doing any actual HTML, using .textContent is much faster because it doesn't have to interpret the value at all. I use this in cases where I know it's just going to be a simple value like an integer or a string (score, name).
-
After I finish up a round of optimization I think I will release a GreenSock "stress test" video to demonstrate how many elements can fly around the screen using these techniques.
- 9 replies
-
- 1
-
-
- animation
- optimization
- (and 2 more)
-
Using autoAlpha and visibility sounds like a great way to handle it. Good idea! I hate using onComplete:function(){} because it's so much typing... could we change this to something shorter... like done:function(){} ????
-
Yes, one of my javascript files currently has over 60k lines of code. Yes, I am weird. I have no build process. I just upload files to my website. I don't even minify because I am truly that lazy and honestly it barely matters as my site loads pretty quickly anyway. I may start minifying after 1.0 is released, though. I never use ternary operators because I find them to have poor readability. My opinion. Yes, that's a good point that while loops are a bit faster... about 10-15% from what I can measure. Honestly, none of my bottleneck operations in my game are performing tight loops. The longest loop I ever perform is 125 loops like when I update the images in my bank. And most of these longer loops are performed outside of combat like initializing the images of the bank. Stuff that is only run once. To even notice 1 millisecond of difference I would have to run about 10000 loops (3 vs 4 ms). This game is completely event driven and has no game loop. Saving the easings to a variable isn't a bad idea to save some memory. There are a lot of performance-related optimizations that I'd like to address first. Oh yeah, and I'd like to actually release the game some day, too If you dig in my code, you'd start to question my sanity quite a bit, but this is my first web game and I'm not a professional developer so that goes a long way toward explaining many of my bizarre practices.
- 9 replies
-
- 1
-
-
- animation
- optimization
- (and 2 more)
-
The closest thing that comes to my mind is Bootstrap, though it sounds like you're looking for something more like templates. But to answer your question I don't think there's any equivalent to GSAP for CSS.
-
Ah, interesting point about the immediateRender. I was not aware of that distinction. Also, can you elucidate what seems to make using startAt:{} so much better than positioning with javascript .style.left/top? I didn't think I would be able to optimize beyond javascript's .style.left/top. So how does Greensock position elements under the covers? It's requestAnimationFrame, right? If that's so much better, why don't they just make .style.left a one-frame animation? LOL, I just don't understand it.
-
Hey all. Not sure if this sort of post is welcome here, but I made a video summarizing some of my accumulated wisdom during my time using Greensock. It's mainly focused on HTML5 game developers that want to use the DOM. I believe I have achieved very good results using Greensock and it seems there are not many pushing the envelope in this area. For example, as of late my game now runs very smoothly even on mobile devices like the iPad2 and the Kindle Fire HDX. In fact at this time I am continuing to optimize the animations further so it is exciting to see what Greensock's full potential will be.
- 9 replies
-
- 3
-
-
- animation
- optimization
- (and 2 more)
-
I like working with JQuery. It has worked great in tandem with Greensock to create my DOM-based game. There's hardly ever a moment when I feel like there's something I can't do.
-
Yeah, I was particularly interested in rendering particle effects using canvas since that would seem to be a good choice. I have no real need to reference a particle using id or anything. They're pretty much fire-and-forget animations that last a certain amount of time. There are a lot of them and they all animate independently. Seems like a good choice. I'll try to get around to experimenting with this and report my findings.
-
Up to this point I have animated everything as a DOM element, but I always want to push the performance of my game more and more, so I have started to look closer at canvas. I am curious about what kind of performance gain I can expect from animating a cached javascript element vs an element on a canvas. Any resources, insights, or experiences on this topic would be greatly appreciated.
-
Might be worth mentioning here... JQuery UI has an "explode" effect like this: http://jqueryui.com/effect/ Personally, I don't really like how it is implemented because it always gave me problems and wasn't very flexible. It's probably better to just write your own function in a loop like Rodrigo describes. I always thought it was a cool effect for my personal game project because I could make it look like a monster exploded. It's not an effect you see around the web often.
-
Yes, that does help. I think the best answer for me would simply be to get rid of anonymous functions. Naming every timer would be too onerous for me because I'd have to initialize them all, kill them, etc. If I just give it a function name, TweenMax.pauseAll() will work.