nkellenicki/momentumengine
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Started fire example, added gulp tasks for all, moved all examples into build process

Browse Source
This commit is contained in:
Nathan Kunicki 2016-03-02 11:31:29 -05:00
parent d409b2f232
commit d0eec1412e
8 changed files with 234 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
examples/fire/fire.js Normal file
View File

@ -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();
};

10
examples/fire/index.html Normal file
View File

@ -0,0 +1,10 @@
<!doctype html>
<html>
<head>
<title>Fire - MomentumEngine</title>
<script type="application/javascript" src="./dist/fire.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

3
examples/pong/index.html
View File

@ -2,8 +2,7 @@
<html> <html>
<head> <head>
<title>Pong - MomentumEngine</title> <title>Pong - MomentumEngine</title>
<script type="application/javascript" src="../../dist/es5.js"></script> <script type="application/javascript" src="./dist/pong.js"></script>
<script type="application/javascript" src="./pong.js"></script>
</head> </head>
<body> <body>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>

8
examples/pong/pong.js
View File

@ -1,11 +1,13 @@
"use strict"; "use strict";
import MomentumEngine from "../../src/es6";
let KeyConsts = MomentumEngine.Consts.Input.Keys;
window.onload = function () { window.onload = function () {
var KeyConsts = MomentumEngine.Consts.Input.Keys;
var width = 640, var width = 640,
height = 360, height = 360,
baseSize = width / 64; baseSize = width / 64;

3
examples/snowflakes/index.html
View File

@ -2,8 +2,7 @@
<html> <html>
<head> <head>
<title>Snowflakes - MomentumEngine</title> <title>Snowflakes - MomentumEngine</title>
<script type="application/javascript" src="../../dist/es5.js"></script> <script type="application/javascript" src="./dist/snowflakes.js"></script>
<script type="application/javascript" src="./snowflakes.js"></script>
</head> </head>
<body> <body>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>

8
examples/snowflakes/snowflakes.js
View File

@ -1,11 +1,13 @@
"use strict"; "use strict";
import MomentumEngine from "../../src/es6";
let KeyConsts = MomentumEngine.Consts.Input.Keys;
window.onload = function () { window.onload = function () {
var KeyConsts = MomentumEngine.Consts.Input.Keys;
var width = 640, var width = 640,
height = 360; height = 360;

79
gulpfile.js
View File

@ -6,6 +6,31 @@ var gulp = require("gulp"),
webpack = require("webpack"); 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) { var build = function (options, callback) {
let plugins = []; let plugins = [];
@ -25,16 +50,13 @@ var build = function (options, callback) {
} }
webpack({ webpack({
entry: { entry: options.entry,
"es5": path.join(__dirname, "src", "es5.js"),
"particles": path.join(__dirname, "examples/particles", "particles.js")
},
bail: !options.watch, bail: !options.watch,
watch: options.watch, watch: options.watch,
devtool: "source-map", devtool: "source-map",
plugins: plugins, plugins: plugins,
output: { output: {
path: path.join(__dirname, "dist"), path: options.path,
filename: "[name].js" filename: "[name].js"
}, },
module: { module: {
@ -78,34 +100,37 @@ var build = function (options, callback) {
}; };
gulp.task("move", () => { examples.forEach((example) => {
gulp.src([
"./dist/particles.*"
], { let entry = {};
base: "./dist" entry[example] = path.join(__dirname, "examples", example, `${example}.js`);
}).pipe(gulp.dest("examples/particles/dist"));
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) => { gulp.task("examples", examples.map((example) => { return `${example}-example`; }));
build({
watch: false,
minify: false
}, callback);
});
gulp.task("build", (callback) => { gulp.task("build", (callback) => {
build({ build({
watch: false, entry: {
minify: true "es5": path.join(__dirname, "src", "es5.js")
},
path: path.join(__dirname, "dist"),
watch: watch,
minify: minify
}, callback); }, callback);
});
gulp.task("watch", () => {
build({
watch: true,
minify: false
});
}); });

57
src/classes/color.js
View File

@ -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;
}
} }