Halcyon

I'll give this a try in a codepen tonight and see if I have the same problem. Thanks!

I'm looking for some ideas to use a large (2000x1000) world map inside of a small container (1024 x 768). I set the wrapper as the "bounds" and this worked great in Chrome, but I noticed that Firefox didn't like this and had weird bounds behavior (basically tries to force the map inside the smaller wrapper, but fails). I think Firefox doesn't like that the world map is bigger than something it's supposed to be bound inside of. What I need is sort of like bounds, but not exactly. I need it to disallow dragging the map edges "within" the parent wrapper. That way I can pan all over the map without showing any "dead space" inside of the container. Any ideas?

Nice one. I used force3D: false and it made the blurriness go away on a large SVG map. Thank you!

Bumping for a similar license question: If I work for a government contractor and I wanted to use Greensock on a project for a government system, do we need the Business Green license? Initially, I didn't think it applied, but technically we are getting paid by the government to develop with it. But I was thinking it meant more like microtransactions to a multiple commercial end-user.

Thanks, Carl, I appreciate the support. I have spent more than 30 months developing this game. It could have been finished faster, but I'm married, I have three kids, and I work full-time, which means I have precious few hours to work on this project. It would be interesting to see what kind of game a small team of full-time professionals could pull off using GSAP and EaselJS. Nonetheless, Nevergrind stands as a good example of what is possible using a mix of DOM UI elements and canvas elements. The trailer gives a pretty good idea of how many elements can be flying around the screen without breaking a sweat. I figure I would mention a little about the technical aspects of the game: Built with a combination of JQuery, GSAP, and EaselJS. JQuery to simplify common tasks like event delegation and AJAX. GSAP for timers and tweening. EaselJS for canvas. Built without using a conventional game loop, yet you can pause the game thanks to the delayedCall method. Game actions are event driven. Built using a mixture of DOM elements for the UI and canvas elements for most animations, monsters, "special effects", particles, etc. I took care to minimize the number of DOM elements. I believe a $.length returns about 350, though it grows if the chat log is enabled. There's significant room left to optimize, so it could definitely run even more smoothly if I had time to make those adjustments. It still runs very smoothly on most desktops and laptops I have seen. That's all that comes to mind right now. If anyone has any questions about its development, I'd be happy to discuss it.

Using easelJS you could use a looping interval on a function like this one: function blur(e, blurAmount){ var blurFilter = new createjs.BlurFilter(blurAmount, blurAmount, 1); e.filters = [blurFilter]; var bounds = blurFilter.getBounds(); e.cache( e.x + bounds.x, e.y + bounds.y, e.image.width + bounds.width, e.image.height + bounds.height ); } Note that blurring operations can create a lot of strain. I saw it work best in Opera, Chrome, and Firefox (best in my experience). I disabled it for other browsers and entirely on mobile because real-time blurring wasn't fast enough on some larger images (1000x600). I also only did a single blur operation at a time to help avoid noticeable hiccups.

In the end I avoided filtering 5 times at once and instead did a logic check whether the image has been filtered yet as needed. For example if the monster has not been hit by an ice attack yet, it would filter (blue) a second hidden version of the image on the first hit, but subsequent hits would work instantly because I could just set the alpha channel of that image. This worked well enough for Opera, Firefox, and Chrome, but Safari and even IE11 choke on this operations. So I disabled color filtering in those browsers. I may consider making a video about this as it sort of appears to be lightly treaded territory.

Is there a way to reduce the strain on the processor when tinting or colorizing large images with EaselJS? I set the tint on the same image 5 times, but this can cause noticeable delay, particularly on large images. I tried staggering this operation using setTimeout, but it is still noticeable in some browsers (IE and even Chrome). For some reason Firefox handles it without any lockup. The lockup is brief (less than a second), but it is noticeable with large images (1000x600 for example). Just curious if there's any way to be more efficient about this.

I don't think it matters. Scaling any parent scales all children also. If it didn't this technique wouldn't work at all and I'd be forced to animate using percentages instead of pixels.

Thanks for the feedback. Quick question: how is scaling a div container any different from the html element? Aren't they both just block elements?

I have got this snippet of gsap code working pretty well to adapt my 1280x768 webgame to almost any mobile viewport size. It's not perfect, but I think it's pretty close. I'm looking for any constructive advice or ways to improve this method as adapting viewport sizes is kind of a pain. // disable all mobile dragging of webpage $("html").on("touchmove", function(e){ // only disable dragging of html element if(e.target===this){ e.preventDefault(); } }); // make html page scaling originate from top-left corner TweenMax.set("html", { transformOrigin:"0 0" }); function resizeWindow(){ var w=window.innerWidth; var h=window.innerHeight; // width less than 1280? if(w<1280){ TweenMax.set("html",{scaleX:w/1280}); }else{ TweenMax.set("html",{scaleX:1}); } // height less than 768? if(h<768){ TweenMax.set("html",{scaleY:h/768}); }else{ TweenMax.set("html",{scaleY:1}); } } $(window).on("resize", function(){ // only do this for mobile devices if(isMobile===true){ // do not resize if focusing on an input or the keyboard will squish the whole webpage if(inputFocus===false){ resizeWindow(); } } });

Thanks, I think the hue description may be correct... I will test this. Worth mentioning that easel plugin's saturation and brightness values don't use this hsla system. Afaik, brightness is 0 to 2 (1 is normal) while saturation is 0 to ... 255? 360? Not sure what the max is.

So what are valid values for hue? I couldn't figure out how this one worked. I was just punching in random numbers and getting a wide variety of results. Great plugin btw! I plan to use it to make monsters appear "frozen", "poisoned" and other fun effects like that.

I'm a bit confused. So you only want them to scale in and out, but continue both rotations? Like this? http://codepen.io/maelfyn/pen/GggxKm Side note: timelines are great, but I personally think they're better for linear timelines rather than dynamic, simple animations. Just my opinion

Not sure if this helps, but I have observed this kind of artifact as well. Though in my case they were horizontal lines. In my case it happened when I scaled wide images using dimensions that were very different from the image's actual dimensions. I edited the image, changed its dimensions, and the problem went away. No idea if that will help in your case as I'm not sure if you're scaling an image or a div full of text. If it's a div, perhaps try overflow:hidden? Just an idea.

I think the main problem was you had 360 in quotes. http://codepen.io/maelfyn/pen/YPPwEd

Jquery animate is garbage. I swapped from using it about a year ago and never looked back. All due respect to Mr. Resig's amazing library, but it's simply not designed for animation. And, yes, if there was any justice in this world, Greensock would be about 50 times bigger than it is. The problem is that a lot of people on the web simply aren't doing anything that demanding and just don't care about animation performance as much as the tweening zealots on this board. Btw, I added several optimizations to my demo. Should look even better now. Animates 300 dots smoothly on my machine.

Thanks for the great explanation. That makes a lot of sense. I am very happy to learn about that auto setting as I think I was hogging up a lot of memory with my object pooling tactics. I vote auto.

I didn't know about "auto" until today. I always used true and false. What's auto do? For what it's worth I have force3D: true sprinkled all over the place in my code. Almost every tween, so it would save me a lot of lines of code.

Thought I'd share my minor variation of Diaco's. I added some bezier animations just to give an idea of what is possible given some effort. http://codepen.io/maelfyn/pen/GgRLbg Edit: Added a little bit of repeat+yoyo action for a more convincing firefly effect This is fun.

Awesome! Yes, I knew there were about a thousand optimizations to be had. This is my first attempt at using this so I wasn't quite sure how everything worked. Thanks for the pointers!

Oh, you know what? I was being special. I was using Raphael and the greensock plugin which I should have mentioned. I don't know what I don't know when it comes to this. In any case, I did some codepen'ing and made a fun demo for you guys. Maybe this will help someone out there. The answer is: use paper.clear() to clear the canvas. http://codepen.io/maelfyn/pen/gbOvbr

So I'm doing some experimentation to see if I can find a use for SVG in my web game. I can tween SVG elements without a problem, but I cannot figure out how to remove them when I'm done. The typical this.target.parentNode.removeChild(this.target) isn't working for Raphael objects... so how do you do it?

Here's my version. This may or may not work for your circumstances. I didn't opt to use a Timeline. Instead I just repeatedly call the same function, adjusting the jumping Tween, while the spacebar is held. There are probably a million valid ways to code this, but here's the version I threw together. Note that this would only work for completely flat surfaces since it Tweens y to 0 every time. Additional logic would have to be added to compensate for that. http://codepen.io/maelfyn/pen/YPzPyd

I'll work on this a bit. Maybe my solution will help.