Jump to content
Search Community

Using EaselJS to tint large images without lockup

Halcyon test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

Hm, that's more of an EaselJS question because that's where the filter is actually getting applied whereas GSAP is just tweening the values and sending them back to EaselJS to actually render. From my understanding, those calculations aren't exactly cheap (every pixel is getting fed through the pipeline). I don't have time to dig into the source code of EaselJS to look for ways to optimize things, sorry. I wish I had an easy answer for ya. 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...