Skip to content

feat: Add HueEffect and HueDecorator#3852

Merged
spydon merged 13 commits intoflame-engine:mainfrom
s1r1m1r1:main
Mar 19, 2026
Merged

feat: Add HueEffect and HueDecorator#3852
spydon merged 13 commits intoflame-engine:mainfrom
s1r1m1r1:main

Conversation

@s1r1m1r1
Copy link
Contributor

@s1r1m1r1 s1r1m1r1 commented Mar 8, 2026

Description

This PR adds a new
HueEffect
to the Flame effects library. This effect allows animating the hue shift of a component's paint over time.

Checklist

  • I have followed the Contributor Guide when preparing my PR.
  • I have updated/added tests for ALL new/updated/fixed functionality.
  • I have updated/added relevant documentation in docs and added dartdoc comments with ///.
  • I have updated/added relevant examples in examples or docs.

Breaking Change?

  • Yes, this PR is a breaking change.
  • No, this PR is not a breaking change.

Related Issues

@s1r1m1r1 s1r1m1r1 changed the title feat: Add HueEffect feat: Add HueEffect , add HueDecorator Mar 8, 2026
@spydon spydon changed the title feat: Add HueEffect , add HueDecorator feat: Add HueEffect and HueDecorator Mar 8, 2026
Copy link
Member

@spydon spydon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Docs and examples are missing, other than that it looks good!

@s1r1m1r1
Copy link
Contributor Author

s1r1m1r1 commented Mar 8, 2026

⚠️ Performance Warning: Decorators vs. Effects

This PR provides two ways to apply visual transformations: Decorators and Effects. It is crucial to understand their performance profiles:

Decorators (e.g., HueDecorator): This use canvas.saveLayer() to isolate the component's rendering and apply filters.

Pros: Highly flexible; supports complex chaining of multiple effects; works on any custom draw logic.
Cons: Significant performance overhead. Each saveLayer requires an off-screen buffer allocation and a GPU context switch. In high-density benchmarks (100+ sprites), this can be up to 20x slower than direct paint manipulation.

Effects (e.g., HueEffect): These modify the component's Paint(specifically colorFilter) directly.
Pros: Extremely fast. Hardware-accelerated directly in the fragment shader with zero memory allocation overhead.
Cons: Less flexible for complex layering; only works on components that expose a Paint.

Recommendation: Always prefer Effects for simple color/hue shifts on large numbers of units. Use Decorators only when you need complex visual composition or when targeting raw canvas drawing that isn't governed by a single

@spydon
Copy link
Member

spydon commented Mar 8, 2026

⚠️ Performance Warning: Decorators vs. Effects

This PR provides two ways to apply visual transformations: Decorators and Effects. It is crucial to understand their performance profiles:

Decorators (e.g., HueDecorator): This use canvas.saveLayer() to isolate the component's rendering and apply filters.

Pros: Highly flexible; supports complex chaining of multiple effects; works on any custom draw logic.
Cons: Significant performance overhead. Each saveLayer requires an off-screen buffer allocation and a GPU context switch. In high-density benchmarks (100+ sprites), this can be up to 20x slower than direct paint manipulation.

Effects (e.g., HueEffect): These modify the component's Paint(specifically colorFilter) directly.
Pros: Extremely fast. Hardware-accelerated directly in the fragment shader with zero memory allocation overhead.
Cons: Less flexible for complex layering; only works on components that expose a Paint.

Recommendation: Always prefer Effects for simple color/hue shifts on large numbers of units. Use Decorators only when you need complex visual composition or when targeting raw canvas drawing that isn't governed by a single

This should be a general comment on decorators in the docs, if it's not already in there.

@s1r1m1r1 s1r1m1r1 force-pushed the main branch 13 times, most recently from ec21f96 to 1a1bbe5 Compare March 10, 2026 15:55
spydon and others added 4 commits March 18, 2026 18:40
- Fix description string indentation (remove leading spaces)
- Fix codeLink path in decorators.dart
- Remove unused Decorator.update() method
- Restore Decorator.apply dartdoc formatting
- Move performance note from Decorator base to HueDecorator
- Extract hueMatrix to top-level hueRotationMatrix() function
- Update has_paint _updateColorFilter to also apply to paintLayers
- Fix trailing whitespace in docs
- Fix 2*tau to 2*pi in color_effects.md
- Fix HueToEffect _angle initializer to use 0.0
- Add HueToEffect tests
- Inline _buildItem and center ember in decorator example
Copy link
Member

@spydon spydon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your contribution!

@spydon spydon enabled auto-merge (squash) March 19, 2026 11:49
@spydon spydon merged commit f393f12 into flame-engine:main Mar 19, 2026
68 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants