From d0eec1412e94150bfd426a5c3eef3174f036597d Mon Sep 17 00:00:00 2001 From: Nathan Kunicki Date: Wed, 2 Mar 2016 11:31:29 -0500 Subject: [PATCH] Started fire example, added gulp tasks for all, moved all examples into build process --- examples/fire/fire.js | 103 ++++++++++++++++++++++++++++++ examples/fire/index.html | 10 +++ examples/pong/index.html | 3 +- examples/pong/pong.js | 8 ++- examples/snowflakes/index.html | 3 +- examples/snowflakes/snowflakes.js | 8 ++- gulpfile.js | 79 +++++++++++++++-------- src/classes/color.js | 57 +++++++++++++++++ 8 files changed, 234 insertions(+), 37 deletions(-) create mode 100644 examples/fire/fire.js create mode 100644 examples/fire/index.html diff --git a/examples/fire/fire.js b/examples/fire/fire.js new file mode 100644 index 0000000..74d63bc --- /dev/null +++ b/examples/fire/fire.js @@ -0,0 +1,103 @@ +"use strict"; + +import MomentumEngine from "../../src/es6"; + +let KeyConsts = MomentumEngine.Consts.Input.Keys; + +let black = new MomentumEngine.Classes.Color(0, 0, 0), + fireParticleWidth = 150, + fireParticleHeight = 150; + + +let startColour = new MomentumEngine.Classes.Color(250, 218, 68, 1), + startColourRandom = new MomentumEngine.Classes.Color(62, 60, 60, 0), + finishColour = new MomentumEngine.Classes.Color(245, 35, 0, 0), + finishColourRandom = new MomentumEngine.Classes.Color(60, 60, 60, 0); + + +class RandomColor extends MomentumEngine.Classes.Color { + + constructor (initialColor, deltaColor) { + + let r = initialColor.r + (deltaColor.r * RandomColor._rand()), + g = initialColor.g + (deltaColor.g * RandomColor._rand()), + b = initialColor.b + (deltaColor.b * RandomColor._rand()), + a = initialColor.a + (deltaColor.a * RandomColor._rand()); + + super(~~r, ~~g, ~~b, ~~a); + + } + + static _rand () { + return (Math.random() * 2 - 1); + } + +} + + +class FireParticle extends MomentumEngine.Classes.Entity { + + constructor (x, y) { + super(x, y); + this.timeToLive = 10000; + this.startColor = new RandomColor(startColour, startColourRandom); + this.finishColor = new RandomColor(finishColour, startColour); + this.deltaColor = startColour.clone().subtract(finishColour); + } + + update (delta) { + this.startColor.a = this.startColor.a - (delta * 0.0001); + } + + render () { + + var gradient = this._game.context.createRadialGradient( + this._calculatedPos.x + fireParticleWidth / 2, + this._calculatedPos.y + fireParticleHeight / 2, + fireParticleWidth / 10, + this._calculatedPos.x + fireParticleWidth / 2, + this._calculatedPos.y + fireParticleHeight / 2, + fireParticleWidth / 2 + ); + + gradient.addColorStop(0, this.startColor.toString()); + gradient.addColorStop(1, "rgba(0, 0, 0, 0)"); + this._game.context.fillStyle = gradient; + this._game.context.fillRect(this._calculatedPos.x, this._calculatedPos.y, fireParticleWidth, fireParticleHeight); + + return true; + + } + +} + + +window.onload = function () { + + let width = 640, + height = 360, + baseSize = width / 64; + + let fireDemo = new MomentumEngine.Classes.Game({ + canvas: document.getElementById("canvas"), + width: width, + height: height, + fixRatio: true, + desiredFps: 60, + inputs: { + keyboard: true + } + }); + + let mainScene = new MomentumEngine.Classes.Rect(0, 0, width, height, black); + fireDemo.addChildEntity(mainScene); + + let fireEmitter = new MomentumEngine.Classes.Emitter(width / 2 - (fireParticleWidth / 2), height / 2 - (fireParticleHeight / 2), 250, new MomentumEngine.Classes.Vector2D(0.02, 0.02), FireParticle); + mainScene.addChildEntity(fireEmitter); + + fireEmitter.setParticleParent(mainScene); + fireEmitter.emitting = true; + + fireDemo.start(); + +}; \ No newline at end of file diff --git a/examples/fire/index.html b/examples/fire/index.html new file mode 100644 index 0000000..82f9532 --- /dev/null +++ b/examples/fire/index.html @@ -0,0 +1,10 @@ + + + + Fire - MomentumEngine + + + + + + \ No newline at end of file diff --git a/examples/pong/index.html b/examples/pong/index.html index b0456ca..a086423 100644 --- a/examples/pong/index.html +++ b/examples/pong/index.html @@ -2,8 +2,7 @@ Pong - MomentumEngine - - + diff --git a/examples/pong/pong.js b/examples/pong/pong.js index ac9451c..babc423 100644 --- a/examples/pong/pong.js +++ b/examples/pong/pong.js @@ -1,11 +1,13 @@ "use strict"; +import MomentumEngine from "../../src/es6"; + +let KeyConsts = MomentumEngine.Consts.Input.Keys; + + window.onload = function () { - var KeyConsts = MomentumEngine.Consts.Input.Keys; - - var width = 640, height = 360, baseSize = width / 64; diff --git a/examples/snowflakes/index.html b/examples/snowflakes/index.html index e23ac9d..63d1ace 100644 --- a/examples/snowflakes/index.html +++ b/examples/snowflakes/index.html @@ -2,8 +2,7 @@ Snowflakes - MomentumEngine - - + diff --git a/examples/snowflakes/snowflakes.js b/examples/snowflakes/snowflakes.js index 8a35266..2e3af33 100644 --- a/examples/snowflakes/snowflakes.js +++ b/examples/snowflakes/snowflakes.js @@ -1,11 +1,13 @@ "use strict"; +import MomentumEngine from "../../src/es6"; + +let KeyConsts = MomentumEngine.Consts.Input.Keys; + + window.onload = function () { - var KeyConsts = MomentumEngine.Consts.Input.Keys; - - var width = 640, height = 360; diff --git a/gulpfile.js b/gulpfile.js index 57067f6..43c593e 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -6,6 +6,31 @@ var gulp = require("gulp"), webpack = require("webpack"); +let minify = true, + watch = false, + examples = [ + "fire", + "particles", + "pong", + "snowflakes" + ]; + + +process.argv.forEach((arg) => { + + if (arg == "--dev" || arg == "-d") { + minify = false; + gutil.log("[Momentum Engine] dev flag passed, enabled"); + } + + if (arg == "--watch" || arg == "-w") { + watch = true; + gutil.log("[Momentum Engine] watch flag passed, enabled"); + } + +}); + + var build = function (options, callback) { let plugins = []; @@ -25,16 +50,13 @@ var build = function (options, callback) { } webpack({ - entry: { - "es5": path.join(__dirname, "src", "es5.js"), - "particles": path.join(__dirname, "examples/particles", "particles.js") - }, + entry: options.entry, bail: !options.watch, watch: options.watch, devtool: "source-map", plugins: plugins, output: { - path: path.join(__dirname, "dist"), + path: options.path, filename: "[name].js" }, module: { @@ -78,34 +100,37 @@ var build = function (options, callback) { }; -gulp.task("move", () => { - gulp.src([ - "./dist/particles.*" - ], { - base: "./dist" - }).pipe(gulp.dest("examples/particles/dist")); +examples.forEach((example) => { + + + let entry = {}; + entry[example] = path.join(__dirname, "examples", example, `${example}.js`); + + + gulp.task(`${example}-example`, (callback) => { + + build({ + entry: entry, + path: path.join(__dirname, "examples", example, "dist"), + watch: watch, + minify: minify + }, callback); + }); + + }); -gulp.task("build-dev", (callback) => { - build({ - watch: false, - minify: false - }, callback); -}); +gulp.task("examples", examples.map((example) => { return `${example}-example`; })); gulp.task("build", (callback) => { build({ - watch: false, - minify: true + entry: { + "es5": path.join(__dirname, "src", "es5.js") + }, + path: path.join(__dirname, "dist"), + watch: watch, + minify: minify }, callback); -}); - - -gulp.task("watch", () => { - build({ - watch: true, - minify: false - }); }); \ No newline at end of file diff --git a/src/classes/color.js b/src/classes/color.js index 59ecebd..b213580 100644 --- a/src/classes/color.js +++ b/src/classes/color.js @@ -23,6 +23,63 @@ class Color { } + clone () { + return new Color(this.r, this.g, this.b, this.a); + } + + + add (color) { + + if (color instanceof Color) { + this.r += color.r; this.g += color.g; this.b += color.b; this.a += color.a; + } else { + this.r += color; this.g += color; this.b += color; this.a += color; + } + + return this; + + } + + + subtract (color) { + + if (color instanceof Color) { + this.r -= color.r; this.g -= color.g; this.b -= color.b; this.a -= color.a; + } else { + this.r -= color; this.g -= color; this.b -= color; this.a -= color; + } + + return this; + + } + + + multiply (color) { + + if (color instanceof Color) { + this.r *= color.r; this.g *= color.g; this.b *= color.b; this.a *= color.a; + } else { + this.r *= color; this.g *= color; this.b *= color; this.a *= color; + } + + return this; + + } + + + divide (color) { + + if (color instanceof Color) { + this.r /= color.r; this.g /= color.g; this.b /= color.b; this.a /= color.a; + } else { + this.r /= color; this.g /= color; this.b /= color; this.a /= color; + } + + return this; + + } + + }