fadeIn() now uses opacity to figure out the final opacity to fade into (

#844)

* make fadeIn have a final opacity setting

* fadeIn uses the opacity component to check what opacity its set to and fades into it

* fix fadeIn to actually work and prep for push

Changed fadeIn to use opacity so it can fade into 0.5 for example
Changed Contributing.md because there was "" around linebreak style and that isnt correct
Added fadeIn example so you can learn fadeIn
Changed JSDoc to have a fadeIn example

* fix issues from comments

CONTRIBUTING.md

@@ -1,12 +1,12 @@
 ## Developing Kaboom
 
 1. `npm install` to install dev packages.
-1. `npm run dev` to start dev server.
+2. `npm run dev` to start dev server.
    ~ _to run npm run dev on Windows:_ change `"dev": "NODE_ENV=development node scripts/dev.js"` to `"dev": "set NODE_ENV=development& node scripts/dev.js"`. **Make sure to change back to original before commit**.
-1. Go to http://localhost:8000/
-1. Pick on example to test and edit the corresponding `/examples/[name].js`, or create a new file under `/examples` to test anything you're working on.
-1. The source entry point is `src/kaboom.ts`, editing any files referenced will automatically trigger rebuild. **Make sure not to break any existing examples**.
-1. Before commit `npm run check` to check typescript, `npm run lint` to check eslint before commit, or use `npm run fmt` to auto format with eslint ~ _to run npm run lint on Windows:_ change `"linebreak-style": "[ "error", "unix" ]"` to `"linebreak-style": "[ "error", "windows" ]"`. **Make sure to change back to original before commit**.
+3. Go to http://localhost:8000/
+4. Pick on example to test and edit the corresponding `/examples/[name].js`, or create a new file under `/examples` to test anything you're working on.
+5. The source entry point is `src/kaboom.ts`, editing any files referenced will automatically trigger rebuild. **Make sure not to break any existing examples**.
+6. Before commit `npm run check` to check typescript, `npm run lint` to check eslint before commit, or use `npm run fmt` to auto format with eslint ~ _to run npm run lint on Windows:_ change `"linebreak-style": [ "error", "unix" ]` to `"linebreak-style": [ "error", "windows" ]`. **Make sure to change back to original before commit**.
 
 ## Documentation
 

examples/examples.json

@@ -5,6 +5,7 @@
 		"collision",
 		"gravity",
 		"sprite",
+		"fadeIn",
 		"text",
 		"audio",
 		"level",

examples/fadeIn.js

@@ -0,0 +1,19 @@
+kaboom()
+loadBean()
+
+// spawn a bean that takes a second to fade in
+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
+])
+
+// 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)
+])

src/kaboom.ts

@@ -4783,19 +4783,21 @@ export default (gopt: KaboomOpt = {}): KaboomCtx => {
 	}
 
 	function fadeIn(time: number = 1): Comp {
+		let finalOpacity
 		let t = 0
 		let done = false
 		return {
 			require: ["opacity"],
 			add(this: GameObj<OpacityComp>) {
+				finalOpacity = this.opacity
 				this.opacity = 0
 			},
 			update(this: GameObj<OpacityComp>) {
 				if (done) return
 				t += dt()
-				this.opacity = map(t, 0, time, 0, 1)
+				this.opacity = map(t, 0, time, 0, finalOpacity)
 				if (t >= time) {
-					this.opacity = 1
+					this.opacity = finalOpacity
 					done = true
 				}
 			},

src/types.ts

@@ -667,7 +667,8 @@ export interface KaboomCtx {
 	): StateComp,
 	/**
 	 * Fade object in.
-	 *
+	 * 
+	 * Uses opacity for finding what to fade into and to set opacity during fade animation.
 	 * @since v3000.0
 	 */
 	fadeIn(time: number): Comp,