tweaked rendering order
This commit is contained in:
parent
c47225da43
commit
5a004981a9
6 changed files with 13 additions and 13 deletions
|
|
@ -186,8 +186,8 @@ export class ButtonGenerator {
|
||||||
centerY: this.canvas.height / 2
|
centerY: this.canvas.height / 2
|
||||||
};
|
};
|
||||||
|
|
||||||
// Apply effects in order: transform -> background -> border -> text/text2 -> general
|
// Apply effects in order: transform -> background -> background-animation -> text/text2 -> border -> general
|
||||||
const renderOrder = ['transform', 'background', 'border', 'text', 'text2', 'general'];
|
const renderOrder = ['transform', 'background', 'background-animation', 'text', 'text2', 'border', 'general'];
|
||||||
|
|
||||||
// Save context once before transforms
|
// Save context once before transforms
|
||||||
this.ctx.save();
|
this.ctx.save();
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,9 @@ export class AuroraEffect extends ButtonEffect {
|
||||||
super({
|
super({
|
||||||
id: "bg-aurora",
|
id: "bg-aurora",
|
||||||
name: "Aurora",
|
name: "Aurora",
|
||||||
type: "general",
|
type: "background-animation",
|
||||||
category: "Background Animations",
|
category: "Background Animations",
|
||||||
renderOrder: 55,
|
renderOrder: 10,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,9 @@ export class BubblesEffect extends ButtonEffect {
|
||||||
super({
|
super({
|
||||||
id: "bg-bubbles",
|
id: "bg-bubbles",
|
||||||
name: "Bubbles",
|
name: "Bubbles",
|
||||||
type: "general",
|
type: "background-animation",
|
||||||
category: "Background Animations",
|
category: "Background Animations",
|
||||||
renderOrder: 55,
|
renderOrder: 10,
|
||||||
});
|
});
|
||||||
|
|
||||||
this.bubbles = [];
|
this.bubbles = [];
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,9 @@ export class FireEffect extends ButtonEffect {
|
||||||
super({
|
super({
|
||||||
id: "bg-fire",
|
id: "bg-fire",
|
||||||
name: "Fire",
|
name: "Fire",
|
||||||
type: "general",
|
type: "background-animation",
|
||||||
category: "Background Animations",
|
category: "Background Animations",
|
||||||
renderOrder: 55,
|
renderOrder: 10,
|
||||||
});
|
});
|
||||||
|
|
||||||
this.particles = [];
|
this.particles = [];
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,9 @@ export class RainBackgroundEffect extends ButtonEffect {
|
||||||
super({
|
super({
|
||||||
id: 'bg-rain',
|
id: 'bg-rain',
|
||||||
name: 'Rain Effect',
|
name: 'Rain Effect',
|
||||||
type: 'general',
|
type: 'background-animation',
|
||||||
category: 'Background Animations',
|
category: 'Background Animations',
|
||||||
renderOrder: 55 // After background, before other effects
|
renderOrder: 10
|
||||||
});
|
});
|
||||||
|
|
||||||
// Initialize raindrop positions (persistent across frames)
|
// Initialize raindrop positions (persistent across frames)
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,9 @@ export class StarfieldEffect extends ButtonEffect {
|
||||||
super({
|
super({
|
||||||
id: "bg-starfield",
|
id: "bg-starfield",
|
||||||
name: "Starfield",
|
name: "Starfield",
|
||||||
type: "general",
|
type: "background-animation",
|
||||||
category: "Background Animations",
|
category: "Background Animations",
|
||||||
renderOrder: 55,
|
renderOrder: 10,
|
||||||
});
|
});
|
||||||
|
|
||||||
this.stars = [];
|
this.stars = [];
|
||||||
|
|
@ -42,7 +42,7 @@ export class StarfieldEffect extends ButtonEffect {
|
||||||
type: "range",
|
type: "range",
|
||||||
label: "Twinkle Speed",
|
label: "Twinkle Speed",
|
||||||
defaultValue: 1,
|
defaultValue: 1,
|
||||||
min: 0.1,
|
min: 1,
|
||||||
max: 3,
|
max: 3,
|
||||||
step: 0.1,
|
step: 0.1,
|
||||||
showWhen: "animate-starfield",
|
showWhen: "animate-starfield",
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue