Procedural animation effects for playlab goal objects#4786
Conversation
… for mapping names to filters.
|
cc @cpirich, and @caleybrock and @bcjordan in case this is useful in the tutorials you guys are working on. |
There was a problem hiding this comment.
this seems important. what happens if it's not a no-op in ie9?
|
This is really cool: nice code, and nice effects too. I'm concerned around the IE9 incompatibility for all effects and all-IE incompatibility for some of them. We've seen classrooms with a mixed range of devices, e.g. a bunch of portable Surfaces with IE but also a bunch of desktops running Chrome, and I'm worried about inconsistencies between what different students are seeing, let alone between what a teacher sees/demos and what the students see. It seems as though we could achieve a number of these effects with a simple spritesheet which would be functional everywhere, and not too burdensome for a content partner to produce. So my inclination is to maybe hold off on committing this until we know we're going to use it in production. But it's also a great feature, so if somebody else finds a use for it now, that would be a vote in favour of getting it in production. |
|
Sounds good; I'll hold onto this at least until I get the animation working in a way that is IE10+ compatible. I feel like having a little library of these is so useful, at least for prototyping, that the graceful degradation cost is worth it. Sure, the effects are simple and a partner could/should easily bake them in, but I don't want to make them do that for every sprite when we can code it once and have it available for any image in playlab. Besides, having a little framework for the filters system is so powerful - we could build up to things like the 'weathered text' effect here: http://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/ Maybe the answer is we keep these around for prototyping (like the "scale" feature) but try to get everything baked before we release anything? |
Conflicts: apps/src/studio/studio.js
For GlowFilter, this also cancels its animation interval.
|
The goal effects now play on goals when the level loads, and are removed the first time the student presses Run. @breville @cpirich please take another look. I've removed all SMIL animation and replaced it with JS-driven animation of the filter attributes, so the animations are now supported in IE10+. I still need to do the filter feature-detection so we ensure this work is skipped in IE9. The effects are using their own |
|
seems reasonable to me. all the usual caveats about compatibility etc. :) |
|
Added SVG filter feature-check. |
Procedural animation effects for playlab goal objects
224dc67 Merge pull request #4786 from code-dot-org/pulse-item (Brad Buchanan) d619792 Automatically built. (Continuous Integration) 8403a32 Merge pull request #4920 from code-dot-org/testfixes (Elijah Hamovitz) 0ff348c Temporarily removing funOMeter test (Elijah Hamovitz) b457e24 Merge pull request #4916 from code-dot-org/ie10tests (Bjvanminnen) 5b89e35 more IE10 (Brent Van Minnen) 1876a7f o Merge branch 'staging' of github.com:code-dot-org/code-dot-org into staging (Trevor Berg) 541fdc5 Fix issues with JSONFileDataAdapter (Trevor Berg) 0f13914 iOS requires directly-bound click events and 'cursor: pointer' style for click events to work (Elijah Hamovitz) 5b6b40f Feature-check SVG filter support before creating/applying a filter. (Brad Buchanan) 656f7c2 Merge pull request #4877 from code-dot-org/bundle_install_frontends (Will Jordan) b7be14d Automatically built. (Continuous Integration) 16bc449 Merge pull request #4903 from code-dot-org/only_setup_local_pegasus_db (philbogle) 7460930 Merge pull request #4911 from code-dot-org/remerge-project-expect-channel (Josh Lory) f53452b start running applab tests on IE 10 (Brent Van Minnen) 4907658 Merge pull request #4915 from code-dot-org/revert-4723-ajax_sign_in (philbogle) c266d62 Revert "Render the sign-in/sign-out button in the Dashboard header using Ajax" (philbogle) 0dc2fb9 Header (and 'Remix' button) doesn't show up on mobile [ci skip] (Josh Lory) 7317599 Merge pull request #4913 from code-dot-org/all-responses (Laurel) 3130e6c Merge remote-tracking branch 'origin/staging' into pulse-item (Brad Buchanan) e28f355 Deduplicate functions and remove last SMIL TODO comment. (Brad Buchanan) 9ac35c2 Merge pull request #4723 from code-dot-org/ajax_sign_in (philbogle)
debbe71 Merge pull request #4919 from code-dot-org/ia-round2 (Caley Brock) 22108b6 Automatically built. (Continuous Integration) 224dc67 Merge pull request #4786 from code-dot-org/pulse-item (Brad Buchanan) 34e9f9e Merge branch 'staging' into ia-round2 (caleybrock) d619792 Automatically built. (Continuous Integration) 8403a32 Merge pull request #4920 from code-dot-org/testfixes (Elijah Hamovitz) 0ff348c Temporarily removing funOMeter test (Elijah Hamovitz) b457e24 Merge pull request #4916 from code-dot-org/ie10tests (Bjvanminnen) 5b89e35 more IE10 (Brent Van Minnen) 1876a7f o Merge branch 'staging' of github.com:code-dot-org/code-dot-org into staging (Trevor Berg) 541fdc5 Fix issues with JSONFileDataAdapter (Trevor Berg)
We wanted a way to 'pulse' or 'flash' goal objects to draw attention to them and help them stand out from the rest of the level. Here, I introduce an image effect system using SVG filters with three starter effects: "pulse", "glow" and "shine."
Note: For GIFs below I've manually added the effect to a hazard "item" sprite, since our circle placeholder "goal" sprites don't do the effects justice 😁. Also, GIF compression doesn't show some of these so well - they are much smoother when rendered.
Pulse
A brightness increase to pure white and back.
Glow
A white glow outline that appears and fades.
Shine
A spotlight that sweeps across the object from top-left to lower-right.
There are two major caveats to this new feature.
ImageFilterbase class and turn itsapplyTomethod into a no-op for IE9 users.Otherwise, take these and run with it! Have fun!