canvasengine 2.0.0-beta.13 → 2.0.0-beta.15

package/dist/index.js

@@ -959,135 +959,11 @@ var Scheduler = class extends Directive {
 };
 registerDirective("tick", Scheduler);
 
-// src/directives/ViewportFollow.ts
-var ViewportFollow = class extends Directive {
-  onInit(element) {
-  }
-  onMount(element) {
-    this.onUpdate(element.props, element);
-  }
-  onUpdate(props, element) {
-    const { viewportFollow } = element.props;
-    const { viewport } = element.props.context;
-    if (!viewport) {
-      throw error("ViewportFollow directive requires a Viewport component to be mounted in the same context");
-    }
-    if (viewportFollow) {
-      viewport.follow(element.componentInstance);
-    } else {
-      viewport.plugins.remove("follow");
-    }
-  }
-  onDestroy(element) {
-    const { viewportFollow } = element.props;
-    const { viewport } = element.props.context;
-    if (viewportFollow) viewport.plugins.remove("follow");
-  }
-};
-registerDirective("viewportFollow", ViewportFollow);
-
-// src/directives/Sound.ts
-import { effect } from "@signe/reactive";
-import { Howl } from "howler";
-var EVENTS = ["load", "loaderror", "playerror", "play", "end", "pause", "stop", "mute", "volume", "rate", "seek", "fade", "unlock"];
-var Sound = class extends Directive {
-  constructor() {
-    super(...arguments);
-    this.eventsFn = [];
-    this.maxVolume = 1;
-    this.maxDistance = 100;
-  }
-  onInit(element) {
-  }
-  onMount(element) {
-    const { props } = element;
-    const tick2 = props.context.tick;
-    const { src, autoplay, loop: loop2, volume, spatial } = props.sound;
-    this.sound = new Howl({
-      src,
-      autoplay,
-      loop: loop2,
-      volume
-    });
-    for (let event of EVENTS) {
-      if (!props.sound[event]) continue;
-      const fn = props.sound[event];
-      this.eventsFn.push(fn);
-      this.sound.on(event, fn);
-    }
-    if (spatial) {
-      const { soundListenerPosition } = props.context;
-      if (!soundListenerPosition) {
-        throw new error("SoundListenerPosition directive is required for spatial sound in component parent");
-      }
-      const { x: listenerX, y: listenerY } = soundListenerPosition;
-      this.tickSubscription = effect(() => {
-        tick2();
-        const { x, y } = element.componentInstance;
-        const distance = calculateDistance(x, y, listenerX(), listenerY());
-        const volume2 = Math.max(this.maxVolume - distance / this.maxDistance, 0);
-        this.sound.volume(volume2);
-      }).subscription;
-    }
-  }
-  onUpdate(props) {
-    const { volume, loop: loop2, mute, seek, playing, rate, spatial } = props;
-    if (volume != void 0) this.sound.volume(volume);
-    if (loop2 != void 0) this.sound.loop(loop2);
-    if (mute != void 0) this.sound.mute(mute);
-    if (seek != void 0) this.sound.seek(seek);
-    if (playing != void 0) {
-      if (playing) this.sound.play();
-      else this.sound.pause();
-    }
-    if (spatial) {
-      this.maxVolume = spatial.maxVolume ?? this.maxVolume;
-      this.maxDistance = spatial.maxDistance ?? this.maxDistance;
-    }
-    if (rate != void 0) this.sound.rate(rate);
-  }
-  onDestroy() {
-    this.sound.stop();
-    this.tickSubscription?.unsubscribe();
-    for (let event of EVENTS) {
-      if (this.eventsFn[event]) {
-        this.sound.off(event, this.eventsFn[event]);
-      }
-    }
-  }
-};
-var SoundListenerPosition = class extends Directive {
-  onMount(element) {
-    element.props.context.soundListenerPosition = element.propObservables?.soundListenerPosition;
-  }
-  onInit(element) {
-  }
-  onUpdate(props) {
-  }
-  onDestroy() {
-  }
-};
-registerDirective("sound", Sound);
-registerDirective("soundListenerPosition", SoundListenerPosition);
-
-// src/directives/Drag.ts
-import { effect as effect2, isSignal as isSignal3 } from "@signe/reactive";
-import { Rectangle, Point } from "pixi.js";
-import { snap } from "popmotion";
-
-// src/hooks/addContext.ts
-var addContext = (element, key, value) => {
-  element.props.context = {
-    ...element.props.context ?? {},
-    [key]: value
-  };
-};
-
 // src/hooks/useProps.ts
-import { isSignal as isSignal2, signal } from "@signe/reactive";
+import { isSignal as isSignal2, signal as signal2 } from "@signe/reactive";
 
 // src/engine/reactive.ts
-import { isSignal } from "@signe/reactive";
+import { isComputed, isSignal, signal } from "@signe/reactive";
 import {
   Observable,
   Subject,
@@ -1116,11 +992,11 @@ function destroyElement(element) {
   }
   element.propSubscriptions.forEach((sub) => sub.unsubscribe());
   element.effectSubscriptions.forEach((sub) => sub.unsubscribe());
+  element.effectUnmounts.forEach((fn) => fn?.());
   for (let name in element.directives) {
     element.directives[name].onDestroy?.(element);
   }
   element.componentInstance.onDestroy?.(element.parent);
-  element.effectUnmounts.forEach((fn) => fn?.());
 }
 function createComponent(tag, props) {
   if (!components[tag]) {
@@ -1285,11 +1161,16 @@ function createComponent(tag, props) {
   return element;
 }
 function loop(itemsSubject, createElementFn) {
+  if (isComputed(itemsSubject) && itemsSubject.dependencies.size == 0) {
+    itemsSubject = signal(itemsSubject());
+  } else if (!isSignal(itemsSubject)) {
+    itemsSubject = signal(itemsSubject);
+  }
   return defer(() => {
     let elements = [];
     let elementMap = /* @__PURE__ */ new Map();
     let isFirstSubscription = true;
-    const isArraySignal = (signal8) => Array.isArray(signal8());
+    const isArraySignal = (signal9) => Array.isArray(signal9());
     return new Observable((subscriber) => {
       const subscription = isArraySignal(itemsSubject) ? itemsSubject.observable.subscribe((change) => {
         if (isFirstSubscription) {
@@ -1341,6 +1222,29 @@ function loop(itemsSubject, createElementFn) {
             el.destroy();
             elementMap.delete(change.index);
           });
+        } else if (change.type === "update" && change.index !== void 0 && change.items.length === 1) {
+          const index = change.index;
+          const newItem = change.items[0];
+          if (index >= elements.length || elements[index] === void 0 || !elementMap.has(index)) {
+            const newElement = createElementFn(newItem, index);
+            if (newElement) {
+              elements.splice(index, 0, newElement);
+              elementMap.set(index, newElement);
+            } else {
+              console.warn(`Element creation returned null for index ${index} during add-like update.`);
+            }
+          } else {
+            const oldElement = elements[index];
+            oldElement.destroy();
+            const newElement = createElementFn(newItem, index);
+            if (newElement) {
+              elements[index] = newElement;
+              elementMap.set(index, newElement);
+            } else {
+              elements.splice(index, 1);
+              elementMap.delete(index);
+            }
+          }
         }
         subscriber.next({
           elements: [...elements]
@@ -1481,11 +1385,11 @@ var useProps = (props, defaults = {}) => {
   const obj = {};
   for (let key in props) {
     const value = props[key];
-    obj[key] = isPrimitive(value) ? signal(value) : value;
+    obj[key] = isPrimitive(value) ? signal2(value) : value;
   }
   for (let key in defaults) {
     if (!(key in obj)) {
-      obj[key] = isPrimitive(defaults[key]) ? signal(defaults[key]) : defaults[key];
+      obj[key] = isPrimitive(defaults[key]) ? signal2(defaults[key]) : defaults[key];
     }
   }
   return obj;
@@ -1521,7 +1425,7 @@ var useDefineProps = (props) => {
           validatedValue = value;
         }
       }
-      validatedProps[key] = isSignal2(validatedValue) ? validatedValue : signal(validatedValue);
+      validatedProps[key] = isSignal2(validatedValue) ? validatedValue : signal2(validatedValue);
     }
     return {
       ...useProps(rawProps),
@@ -1549,6 +1453,143 @@ function validateType(key, value, types) {
   }
 }
 
+// src/directives/ViewportFollow.ts
+var ViewportFollow = class extends Directive {
+  onInit(element) {
+  }
+  onMount(element) {
+    this.onUpdate(element.props.viewportFollow, element);
+  }
+  onUpdate(viewportFollow, element) {
+    const { viewport } = element.props.context;
+    if (!viewport) {
+      throw error("ViewportFollow directive requires a Viewport component to be mounted in the same context");
+    }
+    if (viewportFollow) {
+      if (viewportFollow === true) {
+        viewport.follow(element.componentInstance);
+      } else {
+        const options = useProps(viewportFollow, {
+          speed: void 0,
+          acceleration: void 0,
+          radius: void 0
+        });
+        viewport.follow(element.componentInstance, {
+          speed: options.speed(),
+          acceleration: options.acceleration(),
+          radius: options.radius()
+        });
+      }
+    } else {
+      viewport.plugins.remove("follow");
+    }
+  }
+  onDestroy(element) {
+    const { viewportFollow } = element.props;
+    const { viewport } = element.props.context;
+    if (viewportFollow) viewport.plugins.remove("follow");
+  }
+};
+registerDirective("viewportFollow", ViewportFollow);
+
+// src/directives/Sound.ts
+import { effect } from "@signe/reactive";
+import { Howl } from "howler";
+var EVENTS = ["load", "loaderror", "playerror", "play", "end", "pause", "stop", "mute", "volume", "rate", "seek", "fade", "unlock"];
+var Sound = class extends Directive {
+  constructor() {
+    super(...arguments);
+    this.eventsFn = [];
+    this.maxVolume = 1;
+    this.maxDistance = 100;
+  }
+  onInit(element) {
+  }
+  onMount(element) {
+    const { props } = element;
+    const tick2 = props.context.tick;
+    const propsSound = props.sound.value ?? props.sound;
+    const { src, autoplay, loop: loop2, volume, spatial } = propsSound;
+    this.sound = new Howl({
+      src,
+      autoplay,
+      loop: loop2,
+      volume
+    });
+    for (let event of EVENTS) {
+      if (!propsSound[event]) continue;
+      const fn = propsSound[event];
+      this.eventsFn.push(fn);
+      this.sound.on(event, fn);
+    }
+    if (spatial) {
+      const { soundListenerPosition } = props.context;
+      if (!soundListenerPosition) {
+        throw new error("SoundListenerPosition directive is required for spatial sound in component parent");
+      }
+      const { x: listenerX, y: listenerY } = soundListenerPosition;
+      this.tickSubscription = effect(() => {
+        tick2();
+        const { x, y } = element.componentInstance;
+        const distance = calculateDistance(x, y, listenerX(), listenerY());
+        const volume2 = Math.max(this.maxVolume - distance / this.maxDistance, 0);
+        this.sound.volume(volume2);
+      }).subscription;
+    }
+  }
+  onUpdate(props) {
+    const { volume, loop: loop2, mute, seek, playing, rate, spatial } = props.value ?? props;
+    if (volume != void 0) this.sound.volume(volume);
+    if (loop2 != void 0) this.sound.loop(loop2);
+    if (mute != void 0) this.sound.mute(mute);
+    if (seek != void 0) this.sound.seek(seek);
+    if (playing != void 0) {
+      if (playing) this.sound.play();
+      else this.sound.pause();
+    }
+    if (spatial) {
+      this.maxVolume = spatial.maxVolume ?? this.maxVolume;
+      this.maxDistance = spatial.maxDistance ?? this.maxDistance;
+    }
+    if (rate != void 0) this.sound.rate(rate);
+  }
+  onDestroy() {
+    this.sound.stop();
+    this.tickSubscription?.unsubscribe();
+    for (let event of EVENTS) {
+      if (this.eventsFn[event]) {
+        this.sound.off(event, this.eventsFn[event]);
+      }
+    }
+  }
+};
+var SoundListenerPosition = class extends Directive {
+  onMount(element) {
+    element.props.context.soundListenerPosition = element.propObservables?.soundListenerPosition;
+  }
+  onInit(element) {
+  }
+  onUpdate(props) {
+  }
+  onDestroy() {
+  }
+};
+registerDirective("sound", Sound);
+registerDirective("soundListenerPosition", SoundListenerPosition);
+
+// src/directives/Drag.ts
+import { effect as effect2, isComputed as isComputed2, isSignal as isSignal3 } from "@signe/reactive";
+import { Rectangle, Point } from "pixi.js";
+import { snap } from "popmotion";
+
+// src/hooks/addContext.ts
+var addContext = (element, key, value) => {
+  element.props.context = {
+    ...element.props.context ?? {},
+    [key]: value
+  };
+};
+
 // src/directives/Drag.ts
 var Drop = class extends Directive {
   constructor() {
@@ -1577,12 +1618,18 @@ var Drag = class extends Directive {
     this.viewport = null;
     this.animationFrameId = null;
     this.lastPointerPosition = new Point();
+    this.pressedKeys = /* @__PURE__ */ new Set();
+    this.pointerIsDown = false;
     this.onDragMoveHandler = () => {
     };
     this.onDragEndHandler = () => {
     };
     this.onDragStartHandler = () => {
     };
+    this.onKeyDownHandler = () => {
+    };
+    this.onKeyUpHandler = () => {
+    };
     this.subscriptions = [];
   }
   onInit(element) {
@@ -1590,6 +1637,8 @@ var Drag = class extends Directive {
     this.onDragMoveHandler = this.onDragMove.bind(this);
     this.onDragEndHandler = this.onDragEnd.bind(this);
     this.onDragStartHandler = this.onPointerDown.bind(this);
+    this.onKeyDownHandler = this.onKeyDown.bind(this);
+    this.onKeyUpHandler = this.onKeyUp.bind(this);
   }
   onMount(element) {
     const { rootElement, canvasSize, viewport, tick: tick2 } = element.props.context;
@@ -1614,6 +1663,9 @@ var Drag = class extends Directive {
     instance.on("pointerdown", this.onDragStartHandler);
     this.stageRef.on("pointerup", this.onDragEndHandler);
     this.stageRef.on("pointerupoutside", this.onDragEndHandler);
+    const keysToPress = dragProps.keyToPress ? dragProps.keyToPress : [];
+    window.addEventListener("keydown", this.onKeyDownHandler);
+    window.addEventListener("keyup", this.onKeyUpHandler);
     this.subscriptions = [
       tick2.observable.subscribe(() => {
         if (this.isDragging && this.viewport) {
@@ -1628,7 +1680,8 @@ var Drag = class extends Directive {
     const options = useProps(drag?.value ?? drag, {
       snap: 0,
       viewport: {},
-      direction: "all"
+      direction: "all",
+      keyToPress: []
     });
     options.viewport = useProps(options.viewport, {
       edgeThreshold: 300,
@@ -1674,10 +1727,17 @@ var Drag = class extends Directive {
     }
     this.lastPointerPosition.copyFrom(event.global);
     const { x: xProp, y: yProp } = propObservables;
-    if (xProp !== void 0 && isSignal3(xProp)) {
-    }
-    if (yProp !== void 0 && isSignal3(yProp)) {
-    }
+    const updatePosition = (prop, value) => {
+      if (isComputed2(prop)) {
+        prop.dependencies.forEach((dependency) => {
+          dependency.set(value);
+        });
+      } else if (isSignal3(prop)) {
+        prop.set(value);
+      }
+    };
+    if (xProp !== void 0) updatePosition(xProp, instance.position.x);
+    if (yProp !== void 0) updatePosition(yProp, instance.position.y);
   }
   /**
    * Moves the viewport if the dragged element is near screen edges
@@ -1731,7 +1791,8 @@ var Drag = class extends Directive {
    * Handles drag end event and stops viewport movement
    */
   onDragEnd() {
-    if (!this.isDragging || !this.elementRef) return;
+    this.pointerIsDown = false;
+    if (!this.isDragging) return;
     const dragProps = this.dragProps;
     this.isDragging = false;
     dragProps?.end?.();
@@ -1739,16 +1800,61 @@ var Drag = class extends Directive {
       this.stageRef.off("pointermove", this.onDragMoveHandler);
     }
   }
+  onKeyDown(event) {
+    this.pressedKeys.add(event.code);
+    this.pressedKeys.add(event.key.toLowerCase());
+    if (this.pointerIsDown && !this.isDragging && this.areRequiredKeysPressed()) {
+      this.startDrag();
+    }
+  }
+  onKeyUp(event) {
+    this.pressedKeys.delete(event.code);
+    this.pressedKeys.delete(event.key.toLowerCase());
+    if (this.isDragging && !this.areRequiredKeysPressed()) {
+      this.onDragEnd();
+    }
+  }
+  areRequiredKeysPressed() {
+    const keyToPress = this.dragProps.keyToPress ? this.dragProps.keyToPress : [];
+    if (!keyToPress || keyToPress.length === 0) {
+      return true;
+    }
+    return keyToPress.some((key) => {
+      if (this.pressedKeys.has(key)) {
+        return true;
+      }
+      if (key.toLowerCase() === "space") {
+        return this.pressedKeys.has("Space") || this.pressedKeys.has(" ");
+      }
+      if (key.toLowerCase() === "shift") {
+        return this.pressedKeys.has("ShiftLeft") || this.pressedKeys.has("ShiftRight");
+      }
+      if (key.toLowerCase() === "control" || key.toLowerCase() === "ctrl") {
+        return this.pressedKeys.has("ControlLeft") || this.pressedKeys.has("ControlRight");
+      }
+      if (key.toLowerCase() === "alt") {
+        return this.pressedKeys.has("AltLeft") || this.pressedKeys.has("AltRight");
+      }
+      return false;
+    });
+  }
   onPointerDown(event) {
     if (!this.elementRef?.componentInstance || !this.stageRef || !this.elementRef.componentInstance.parent) return;
+    this.pointerIsDown = true;
     const instance = this.elementRef.componentInstance;
     const parent = instance.parent;
-    const dragProps = this.dragProps;
     const parentLocalPointer = parent.toLocal(event.global);
     this.offsetInParent.x = parentLocalPointer.x - instance.position.x;
     this.offsetInParent.y = parentLocalPointer.y - instance.position.y;
-    this.isDragging = true;
     this.lastPointerPosition.copyFrom(event.global);
+    if (this.areRequiredKeysPressed()) {
+      this.startDrag();
+    }
+  }
+  startDrag() {
+    if (this.isDragging || !this.stageRef) return;
+    this.isDragging = true;
+    const dragProps = this.dragProps;
     dragProps?.start?.();
     this.stageRef.on("pointermove", this.onDragMoveHandler);
   }
@@ -1769,8 +1875,12 @@ var Drag = class extends Directive {
       this.stageRef.off("pointerup", this.onDragEndHandler);
       this.stageRef.off("pointerupoutside", this.onDragEndHandler);
     }
+    window.removeEventListener("keydown", this.onKeyDownHandler);
+    window.removeEventListener("keyup", this.onKeyUpHandler);
     this.stageRef = null;
     this.viewport = null;
+    this.pressedKeys.clear();
+    this.pointerIsDown = false;
   }
 };
 registerDirective("drag", Drag);
@@ -1814,12 +1924,12 @@ export * from "@signe/reactive";
 import { Howler } from "howler";
 
 // src/components/Canvas.ts
-import { effect as effect4, signal as signal4 } from "@signe/reactive";
+import { effect as effect4, signal as signal5 } from "@signe/reactive";
 import { Container as Container3, autoDetectRenderer } from "pixi.js";
 import { loadYoga } from "yoga-layout";
 
 // src/components/DisplayObject.ts
-import { effect as effect3, signal as signal3 } from "@signe/reactive";
+import { effect as effect3, signal as signal4 } from "@signe/reactive";
 import { DropShadowFilter } from "pixi-filters";
 import { BlurFilter, ObservablePoint } from "pixi.js";
 var EVENTS2 = [
@@ -1909,8 +2019,8 @@ function DisplayObject(extendClass) {
         0
       );
       this.isCustomAnchor = false;
-      this.displayWidth = signal3(0);
-      this.displayHeight = signal3(0);
+      this.displayWidth = signal4(0);
+      this.displayHeight = signal4(0);
       this.overrideProps = [];
     }
     get yoga() {
@@ -2206,14 +2316,14 @@ registerComponent("Canvas", class Canvas extends DisplayObject(Container3) {
 var Canvas2 = async (props = {}) => {
   let { cursorStyles, width, height, class: className } = useProps(props);
   const Yoga = await loadYoga();
-  if (!props.width) width = signal4(800);
-  if (!props.height) height = signal4(600);
+  if (!props.width) width = signal5(800);
+  if (!props.height) height = signal5(600);
   const renderer = await autoDetectRenderer({
     ...props,
     width: width?.(),
     height: height?.()
   });
-  const canvasSize = signal4({
+  const canvasSize = signal5({
     width: renderer.width,
     height: renderer.height
   });
@@ -2229,7 +2339,7 @@ var Canvas2 = async (props = {}) => {
     height: height?.()
   };
   if (!props.tick) {
-    options.context.tick = options.tick = signal4({
+    options.context.tick = options.tick = signal5({
       timestamp: 0,
       deltaTime: 0,
       frame: 0,
@@ -2326,12 +2436,16 @@ var CanvasGraphics = class extends DisplayObject(PixiGraphics) {
   onInit(props) {
     super.onInit(props);
     if (props.draw) {
-      effect5(() => {
+      this.clearEffect = effect5(() => {
         this.clear();
         props.draw?.(this);
       });
     }
   }
+  onDestroy() {
+    this.clearEffect.subscription.unsubscribe();
+    super.onDestroy();
+  }
 };
 registerComponent("Graphics", CanvasGraphics);
 function Graphics(props) {
@@ -2505,6 +2619,7 @@ function ParticlesEmitter(props) {
 }
 
 // src/components/Sprite.ts
+import { Howl as Howl2 } from "howler";
 import { computed, effect as effect7, isSignal as isSignal4 } from "@signe/reactive";
 import {
   Assets,
@@ -2515,10 +2630,10 @@ import {
 } from "pixi.js";
 
 // src/engine/animation.ts
-import { effect as effect6, signal as signal5 } from "@signe/reactive";
+import { effect as effect6, signal as signal6 } from "@signe/reactive";
 import { animate as animatePopmotion } from "popmotion";
-function isAnimatedSignal(signal8) {
-  return signal8.animatedState !== void 0;
+function isAnimatedSignal(signal9) {
+  return signal9.animatedState !== void 0;
 }
 function animatedSignal(initialValue, options = {}) {
   const state = {
@@ -2527,8 +2642,8 @@ function animatedSignal(initialValue, options = {}) {
     end: initialValue
   };
   let animation;
-  const publicSignal = signal5(initialValue);
-  const privateSignal = signal5(state);
+  const publicSignal = signal6(initialValue);
+  const privateSignal = signal6(state);
   effect6(() => {
     const currentState = privateSignal();
     publicSignal.set(currentState.current);
@@ -2826,6 +2941,12 @@ var CanvasSprite = class extends DisplayObject(PixiSprite) {
     }
     const sound = this.currentAnimation.data.sound;
     if (sound) {
+      new Howl2({
+        src: sound,
+        autoplay: true,
+        loop: false,
+        volume: 1
+      });
     }
     this.update({
       deltaRatio: 1
@@ -2910,7 +3031,7 @@ var Sprite2 = (props) => {
 };
 
 // src/components/Video.ts
-import { effect as effect8, signal as signal6 } from "@signe/reactive";
+import { effect as effect8, signal as signal7 } from "@signe/reactive";
 function Video(props) {
   const eventsMap = {
     audioprocess: null,
@@ -2935,7 +3056,7 @@ function Video(props) {
     volumechange: null,
     waiting: null
   };
-  const video = signal6(null);
+  const video = signal7(null);
   const defineProps = useDefineProps(props);
   const { play, loop: loop2, muted } = defineProps({
     play: {
@@ -3005,12 +3126,12 @@ function Video(props) {
 import { Text as PixiText } from "pixi.js";
 
 // src/engine/trigger.ts
-import { effect as effect9, signal as signal7 } from "@signe/reactive";
+import { effect as effect9, signal as signal8 } from "@signe/reactive";
 function isTrigger(arg) {
   return arg?.start && arg?.listen;
 }
 function trigger(globalConfig) {
-  const _signal = signal7({
+  const _signal = signal8({
     config: globalConfig,
     value: 0,
     resolve: (value) => void 0
@@ -3467,6 +3588,7 @@ var RadialGradient = class {
 
 // src/index.ts
 import { isObservable } from "rxjs";
+import * as Howl3 from "howler";
 export {
   Canvas2 as Canvas,
   Circle,
@@ -3476,6 +3598,7 @@ export {
   Easing,
   Ellipse,
   Graphics,
+  Howl3 as Howl,
   Howler,
   NineSliceSprite,
   ParticlesEmitter,