refactor: added fadeIn to opacityComp

examples/fadeIn.js

@@ -5,15 +5,17 @@ loadBean();
 const bean = add([
     sprite("bean"),
     pos(120, 80),
-    opacity(), // opacity() component gives it opacity which is required for fadeIn
-    fadeIn(), // fadeIn() component makes it fade in
+    opacity(1), // opacity() component gives it opacity which is required for fadeIn
 ]);
 
+bean.fadeIn(1) // makes it fade in
+
 // spawn another bean that takes 5 seconds to fade in halfway
 // SPOOKY!
 let spookyBean = add([
     sprite("bean"),
     pos(240, 80),
     opacity(0.5), // opacity() component gives it opacity which is required for fadeIn (set to 0.5 so it will be half transparent)
-    fadeIn(5), // fadeIn() component makes it fade in (set to 5 so that it takes 5 seconds to fade in)
 ]);
+
+spookyBean.fadeIn(5) // makes it fade in (set to 5 so that it takes 5 seconds to fade in)

src/components/draw/opacity.ts

@@ -1,7 +1,6 @@
 import { getInternalContext, getKaboomContext } from "@/kaboom";
 import type { OpacityComp, TweenController } from "@/types";
 
-// TODO: fadeIn here?
 export function opacity(a: number): OpacityComp {
     const k = getKaboomContext(this);
     const internal = getInternalContext(k);
@@ -12,6 +11,15 @@ export function opacity(a: number): OpacityComp {
         inspect() {
             return `${internal.toFixed(this.opacity, 1)}`;
         },
+        fadeIn(time = 1, easeFunc = k.easings.linear): TweenController {
+            return k.tween(
+                0,
+                this.opacity,
+                time,
+                (a) => this.opacity = a,
+                easeFunc,
+            );
+        },
         fadeOut(time = 1, easeFunc = k.easings.linear): TweenController {
             return k.tween(
                 this.opacity,

src/types.ts

@@ -772,6 +772,7 @@ export interface KaboomCtx {
      *
      * @since v3000.0
      * @group Components
+     * @deprecated since v3001.0
      */
     fadeIn(time: number): Comp;
     /**
@@ -5137,21 +5138,10 @@ export interface ColorComp extends Comp {
  */
 export interface OpacityComp extends Comp {
     opacity: number;
+    fadeIn(time?: number, easeFunc?: EaseFunc): TweenController;
     fadeOut(time?: number, easeFunc?: EaseFunc): TweenController;
 }
 
-/**
- * @group Component System
- */
-export interface OpacityOpt {
-    /**
-     * Fade in n seconds when object is added to scene.
-     *
-     * @since v3000.0
-     */
-    fadeIn?: number;
-}
-
 /**
  * @group Component System
  */

tsconfig.json

@@ -19,4 +19,4 @@
     "src/**/*",
     "scripts/**/*"
   ]
-}
+}