diff --git a/compiled/radium.js b/compiled/radium.js index b87c0b6..6a12889 100644 --- a/compiled/radium.js +++ b/compiled/radium.js @@ -1322,12 +1322,16 @@ var ResourceManager, ResourceManager = (function() { function ResourceManager(base_path) { this.base_path = base_path != null ? base_path : ""; - this.preload = __bind(this.preload, this); + this.load = __bind(this.load, this); this.prepare = __bind(this.prepare, this); + this.do_preload = __bind(this.do_preload, this); + this.updateProgress = __bind(this.updateProgress, this); this.getImage = __bind(this.getImage, this); + this.addDataFiles = __bind(this.addDataFiles, this); this.addSounds = __bind(this.addSounds, this); this.addScripts = __bind(this.addScripts, this); this.addImages = __bind(this.addImages, this); + this.addDataFile = __bind(this.addDataFile, this); this.addScript = __bind(this.addScript, this); this.addSound = __bind(this.addSound, this); this.addImage = __bind(this.addImage, this); @@ -1388,6 +1392,17 @@ ResourceManager = (function() { } }; + ResourceManager.prototype.addDataFile = function(path, first_stage) { + if (first_stage == null) { + first_stage = false; + } + if (first_stage) { + return this.resources.stage1_data.push(this.joinPath(path)); + } else { + return this.resources.data.push(this.joinPath(path)); + } + }; + ResourceManager.prototype.addImages = function(paths, first_stage) { var path, _i, _len, _results; if (first_stage == null) { @@ -1427,37 +1442,62 @@ ResourceManager = (function() { return _results; }; + ResourceManager.prototype.addDataFiles = function(paths, first_stage) { + var path, _i, _len, _results; + if (first_stage == null) { + first_stage = false; + } + _results = []; + for (_i = 0, _len = paths.length; _i < _len; _i++) { + path = paths[_i]; + _results.push(this.addDataFile(path, first_stage)); + } + return _results; + }; + ResourceManager.prototype.getImage = function(path) { console.log("objs", this.resource_objects); console.log("path", path); return this.resource_objects.images[this.joinPath(path)]; }; - ResourceManager.prototype.prepare = function(finished_callback) { - if (finished_callback == null) { - finished_callback = (function() {}); - } + ResourceManager.prototype.updateProgress = function(event) { return pass; }; - ResourceManager.prototype.preload = function(progress_callback, finished_callback) { - var image, obj, _i, _len, _ref; - if (progress_callback == null) { - progress_callback = (function() {}); - } - if (finished_callback == null) { - finished_callback = (function() {}); + ResourceManager.prototype.do_preload = function(stage, progress_callback, finished_callback) { + var image, images, obj, scripts, sounds, _i, _len; + if (stage === 1) { + images = this.resources.stage1_images; + scripts = this.resources.stage1_scripts; + sounds = this.resources.stage1_sounds; + } else { + images = this.resources.images; + scripts = this.resources.scripts; + sounds = this.resources.sounds; } - _ref = this.resources.images; - for (_i = 0, _len = _ref.length; _i < _len; _i++) { - image = _ref[_i]; + for (_i = 0, _len = images.length; _i < _len; _i++) { + image = images[_i]; obj = document.createElement("img"); obj.src = image; this.resource_objects.images[image] = obj; } + console.log("done stage " + stage); return finished_callback(); }; + ResourceManager.prototype.prepare = function(finished_callback) { + if (finished_callback == null) { + finished_callback = (function() {}); + } + return this.do_preload(1, (function() {}), finished_callback); + }; + + ResourceManager.prototype.load = function() { + var _ref, _ref1; + return this.do_preload(2, this.updateProgress, (_ref = (_ref1 = this.onLoad) != null ? _ref1.bind(this) : void 0) != null ? _ref : (function() {})); + }; + return ResourceManager; })(); @@ -1469,6 +1509,7 @@ Scene = (function() { function Scene(engine, name) { this.engine = engine; this.name = name; + this.destroySelf = __bind(this.destroySelf, this); this.changeScene = __bind(this.changeScene, this); this.createInstance = __bind(this.createInstance, this); this.checkMouseCollisions = __bind(this.checkMouseCollisions, this); @@ -1478,6 +1519,11 @@ Scene = (function() { this.removeTargetSurface = __bind(this.removeTargetSurface, this); this.handleClick = __bind(this.handleClick, this); this.addTargetSurface = __bind(this.addTargetSurface, this); + this.reset = __bind(this.reset, this); + this.reset(); + } + + Scene.prototype.reset = function() { this.instances = {}; this.surfaces = []; this.dirty = true; @@ -1486,8 +1532,25 @@ Scene = (function() { this.width = 800; this.height = 600; this.last_width = 800; - this.last_height = 600; - } + return this.last_height = 600; + }; + + Scene.prototype.callEvent = function(name, data) { + var event_map, _ref; + if (data == null) { + data = {}; + } + event_map = { + load: this.onLoad + }; + switch (name) { + case "destroy": + this.destroySelf(); + return typeof this.onDestroy === "function" ? this.onDestroy(data) : void 0; + default: + return (_ref = event_map[name]) != null ? _ref.bind(this)(data) : void 0; + } + }; Scene.prototype.addTargetSurface = function(surface) { this.surfaces.push(surface); @@ -1551,7 +1614,14 @@ Scene = (function() { }; Scene.prototype.checkActive = function() { - return this.active = this.surfaces.length > 0; + var active_now; + active_now = this.surfaces.length > 0; + if (this.active && !active_now) { + this.callEvent("destroy"); + } else if (!this.active && active_now) { + this.callEvent("load"); + } + return this.active = active_now; }; Scene.prototype.iteration = function() { @@ -1646,6 +1716,10 @@ Scene = (function() { return pass; }; + Scene.prototype.destroySelf = function() { + return this.reset; + }; + return Scene; })(); @@ -1794,11 +1868,7 @@ util = { } } }; - -window.ResourceManager = ResourceManager; - -window.Engine = Engine; -})(); +; window.ResourceManager = ResourceManager; window.Engine = Engine; })(); /*! * jQuery JavaScript Library v2.1.1 * http://jquery.com/ diff --git a/gemswap/core.coffee b/gemswap/core.coffee index 54ff3de..edd93e0 100644 --- a/gemswap/core.coffee +++ b/gemswap/core.coffee @@ -29,69 +29,90 @@ $(-> "sfx/swap.wav" ]) ### - - manager.prepare() - manager.preload(null, -> + + manager.prepare -> + # Set up the engine engine.addCanvas($("#gamecanvas")); + + engine.setPreloadScene(engine.createScene("loader")) + engine.setInitialScene(engine.createScene("main")) + + manager.onLoad = -> + # Game asset initialization... + engine.createSprite("cursor", "images/cursor.png") - scene = engine.createScene("main") + engine.createSprite("diamond", "images/diamond.png") + engine.createSprite("diamond_inverted", "images/diamond_inverted.png") + engine.createSprite("diamond_shimmer", "images/diamond_shimmer.png") - engine.createSprite("cursor", "images/cursor.png") - - engine.createSprite("diamond", "images/diamond.png") - engine.createSprite("diamond_inverted", "images/diamond_inverted.png") - engine.createSprite("diamond_shimmer", "images/diamond_shimmer.png") + engine.createSprite("yellow", "images/yellow.png") + engine.createSprite("yellow_inverted", "images/yellow_inverted.png") + engine.createSprite("yellow_shimmer", "images/yellow_shimmer.png") - engine.createSprite("yellow", "images/yellow.png") - engine.createSprite("yellow_inverted", "images/yellow_inverted.png") - engine.createSprite("yellow_shimmer", "images/yellow_shimmer.png") - - engine.createSprite("blue", "images/blue.png") - engine.createSprite("blue_inverted", "images/blue_inverted.png") - engine.createSprite("blue_shimmer", "images/blue_shimmer.png") + engine.createSprite("blue", "images/blue.png") + engine.createSprite("blue_inverted", "images/blue_inverted.png") + engine.createSprite("blue_shimmer", "images/blue_shimmer.png") + + # Object definitions + cursor = engine.createObject("cursor") + cursor.sprite = engine.getSprite("cursor") + + cursor.onStep = -> + $("#debug").html("Mouse coords: #{@scene.mouse_x} / #{@scene.mouse_y}
Frameskip: #{@engine.frameskip}") + + diamond = engine.createObject("diamond") + diamond.sprite = engine.getSprite("diamond") + diamond.draw_sprite = false + + diamond.onCreate = -> + @fade_value = 0.3 + @shimmer_value = @engine.ease.circInOut(0, 0.8, engine.random.number(200, 350), null, true, true) + @gem_type = @engine.random.pick("diamond", "yellow", "blue") - cursor = engine.createObject("cursor") - cursor.sprite = engine.getSprite("cursor") - - diamond = engine.createObject("diamond") - diamond.sprite = engine.getSprite("diamond") - diamond.draw_sprite = false - - diamond.onCreate = -> - @fade_value = 0.3 - @shimmer_value = @engine.ease.circInOut(0, 0.8, engine.random.number(200, 350), null, true, true) - @gem_type = @engine.random.pick("diamond", "yellow", "blue") - - diamond.onStep = -> - return true - - diamond.onDraw = -> - @engine.getSprite(@gem_type).draw(@x, @y) + diamond.onStep = -> + return true + + diamond.onDraw = -> + @engine.getSprite(@gem_type).draw(@x, @y) + + @engine.getSprite("#{@gem_type}_inverted").draw(@x, @y, { + alpha: @fade_value + }) + + @engine.getSprite("#{@gem_type}_shimmer").draw(@x - 14, @y - 14, { + alpha: @shimmer_value + }) + + diamond.onMouseOver = -> + @fade_value = @engine.ease.quadInOut(0.3, 0.7, 10, @engine.ease.bounceOut(0.7, 0.3, 65)) + + cursor = @engine.getObject("cursor").getInstances()[0] + cursor.x = @engine.ease.quadInOut(cursor.x, @x - 9, 8) + cursor.y = @engine.ease.quadInOut(cursor.y, @y - 9, 8) - @engine.getSprite("#{@gem_type}_inverted").draw(@x, @y, { - alpha: @fade_value - }) + # Scene configuration + engine.getScene("loader").onLoad = -> + # Loading screen + loader = engine.createObject("loader") + + loader.onStep = -> true + loader.onDraw = -> + engine.draw.rectangle(0, 0, 800 * manager.file_progress, 64, {fillColor: "#CCCCCC"}) + engine.draw.rectangle(0, 64, 800 * manager.total_progress, 128, {fillColor: "#AAAAAA"}) + + @createInstance(loader, 0, 0) + + engine.getScene("main").onLoad = -> + # Actual game initialization + @createInstance(cursor, 0, 0) + + for x in [10 .. 728] by 80 + for y in [10 .. 550] by 80 + @createInstance(diamond, x, y) - @engine.getSprite("#{@gem_type}_shimmer").draw(@x - 14, @y - 14, { - alpha: @shimmer_value - }) + # Let's go! + engine.start() - diamond.onMouseOver = -> - @fade_value = @engine.ease.quadInOut(0.3, 0.7, 10, @engine.ease.bounceOut(0.7, 0.3, 65)) + manager.load() - cursor = @engine.getObject("cursor").getInstances()[0] - cursor.x = @engine.ease.quadInOut(cursor.x, @x - 9, 8) - cursor.y = @engine.ease.quadInOut(cursor.y, @y - 9, 8) - - for x in [10 .. 728] by 80 - for y in [10 .. 550] by 80 - scene.createInstance(diamond, x, y) - - cursor.onStep = -> - $("#debug").html("Mouse coords: #{@scene.mouse_x} / #{@scene.mouse_y}
Frameskip: #{@engine.frameskip}") - - scene.createInstance(cursor, 0, 0) - - engine.start() - ) ) diff --git a/gemswap/gemswap.js b/gemswap/gemswap.js index 88005f6..b4da8e8 100644 --- a/gemswap/gemswap.js +++ b/gemswap/gemswap.js @@ -18,59 +18,88 @@ "sfx/swap.wav" ]) */ - manager.prepare(); - return manager.preload(null, function() { - var cursor, diamond, scene, x, y, _i, _j; + return manager.prepare(function() { engine.addCanvas($("#gamecanvas")); - scene = engine.createScene("main"); - engine.createSprite("cursor", "images/cursor.png"); - engine.createSprite("diamond", "images/diamond.png"); - engine.createSprite("diamond_inverted", "images/diamond_inverted.png"); - engine.createSprite("diamond_shimmer", "images/diamond_shimmer.png"); - engine.createSprite("yellow", "images/yellow.png"); - engine.createSprite("yellow_inverted", "images/yellow_inverted.png"); - engine.createSprite("yellow_shimmer", "images/yellow_shimmer.png"); - engine.createSprite("blue", "images/blue.png"); - engine.createSprite("blue_inverted", "images/blue_inverted.png"); - engine.createSprite("blue_shimmer", "images/blue_shimmer.png"); - cursor = engine.createObject("cursor"); - cursor.sprite = engine.getSprite("cursor"); - diamond = engine.createObject("diamond"); - diamond.sprite = engine.getSprite("diamond"); - diamond.draw_sprite = false; - diamond.onCreate = function() { - this.fade_value = 0.3; - this.shimmer_value = this.engine.ease.circInOut(0, 0.8, engine.random.number(200, 350), null, true, true); - return this.gem_type = this.engine.random.pick("diamond", "yellow", "blue"); + engine.setPreloadScene(engine.createScene("loader")); + engine.setInitialScene(engine.createScene("main")); + manager.onLoad = function() { + var cursor, diamond; + engine.createSprite("cursor", "images/cursor.png"); + engine.createSprite("diamond", "images/diamond.png"); + engine.createSprite("diamond_inverted", "images/diamond_inverted.png"); + engine.createSprite("diamond_shimmer", "images/diamond_shimmer.png"); + engine.createSprite("yellow", "images/yellow.png"); + engine.createSprite("yellow_inverted", "images/yellow_inverted.png"); + engine.createSprite("yellow_shimmer", "images/yellow_shimmer.png"); + engine.createSprite("blue", "images/blue.png"); + engine.createSprite("blue_inverted", "images/blue_inverted.png"); + engine.createSprite("blue_shimmer", "images/blue_shimmer.png"); + cursor = engine.createObject("cursor"); + cursor.sprite = engine.getSprite("cursor"); + cursor.onStep = function() { + return $("#debug").html("Mouse coords: " + this.scene.mouse_x + " / " + this.scene.mouse_y + "
Frameskip: " + this.engine.frameskip); + }; + diamond = engine.createObject("diamond"); + diamond.sprite = engine.getSprite("diamond"); + diamond.draw_sprite = false; + diamond.onCreate = function() { + this.fade_value = 0.3; + this.shimmer_value = this.engine.ease.circInOut(0, 0.8, engine.random.number(200, 350), null, true, true); + return this.gem_type = this.engine.random.pick("diamond", "yellow", "blue"); + }; + diamond.onStep = function() { + return true; + }; + diamond.onDraw = function() { + this.engine.getSprite(this.gem_type).draw(this.x, this.y); + this.engine.getSprite("" + this.gem_type + "_inverted").draw(this.x, this.y, { + alpha: this.fade_value + }); + return this.engine.getSprite("" + this.gem_type + "_shimmer").draw(this.x - 14, this.y - 14, { + alpha: this.shimmer_value + }); + }; + diamond.onMouseOver = function() { + this.fade_value = this.engine.ease.quadInOut(0.3, 0.7, 10, this.engine.ease.bounceOut(0.7, 0.3, 65)); + cursor = this.engine.getObject("cursor").getInstances()[0]; + cursor.x = this.engine.ease.quadInOut(cursor.x, this.x - 9, 8); + return cursor.y = this.engine.ease.quadInOut(cursor.y, this.y - 9, 8); + }; + engine.getScene("loader").onLoad = function() { + var loader; + loader = engine.createObject("loader"); + loader.onStep = function() { + return true; + }; + loader.onDraw = function() { + engine.draw.rectangle(0, 0, 800 * manager.file_progress, 64, { + fillColor: "#CCCCCC" + }); + return engine.draw.rectangle(0, 64, 800 * manager.total_progress, 128, { + fillColor: "#AAAAAA" + }); + }; + return this.createInstance(loader, 0, 0); + }; + engine.getScene("main").onLoad = function() { + var x, y, _i, _results; + this.createInstance(cursor, 0, 0); + _results = []; + for (x = _i = 10; _i <= 728; x = _i += 80) { + _results.push((function() { + var _j, _results1; + _results1 = []; + for (y = _j = 10; _j <= 550; y = _j += 80) { + _results1.push(this.createInstance(diamond, x, y)); + } + return _results1; + }).call(this)); + } + return _results; + }; + return engine.start(); }; - diamond.onStep = function() { - return true; - }; - diamond.onDraw = function() { - this.engine.getSprite(this.gem_type).draw(this.x, this.y); - this.engine.getSprite("" + this.gem_type + "_inverted").draw(this.x, this.y, { - alpha: this.fade_value - }); - return this.engine.getSprite("" + this.gem_type + "_shimmer").draw(this.x - 14, this.y - 14, { - alpha: this.shimmer_value - }); - }; - diamond.onMouseOver = function() { - this.fade_value = this.engine.ease.quadInOut(0.3, 0.7, 10, this.engine.ease.bounceOut(0.7, 0.3, 65)); - cursor = this.engine.getObject("cursor").getInstances()[0]; - cursor.x = this.engine.ease.quadInOut(cursor.x, this.x - 9, 8); - return cursor.y = this.engine.ease.quadInOut(cursor.y, this.y - 9, 8); - }; - for (x = _i = 10; _i <= 728; x = _i += 80) { - for (y = _j = 10; _j <= 550; y = _j += 80) { - scene.createInstance(diamond, x, y); - } - } - cursor.onStep = function() { - return $("#debug").html("Mouse coords: " + this.scene.mouse_x + " / " + this.scene.mouse_y + "
Frameskip: " + this.engine.frameskip); - }; - scene.createInstance(cursor, 0, 0); - return engine.start(); + return manager.load(); }); }); -})(); +})(); \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 6e5e8a1..08aa1b9 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -9,6 +9,7 @@ var cache = require('gulp-cached'); var remember = require('gulp-remember'); var header = require('gulp-header'); var footer = require('gulp-footer'); +var plumber = require('gulp-plumber'); /* Engine build tasks */ engine = { @@ -23,12 +24,13 @@ engine = { gulp.task('dev-engine', function() { return gulp.src(engine.source) + .pipe(plumber()) .pipe(cache("engine-coffee")) .pipe(coffee({bare: true}).on('error', gutil.log)).on('data', gutil.log) .pipe(remember("engine-coffee")) .pipe(concat("radium.coffee.js")) .pipe(header('(function () {')) - .pipe(footer('})();')) + .pipe(footer('; window.ResourceManager = ResourceManager; window.Engine = Engine; })();')) .pipe(addsrc(engine.external)) .pipe(concat("radium.concat.js")) .pipe(rename(engine.target.name)) @@ -55,6 +57,7 @@ gemswap = { gulp.task('dev-gemswap', function() { return gulp.src(gemswap.source) + .pipe(plumber()) .pipe(cache("gemswap-coffee")) .pipe(coffee({bare: true}).on('error', gutil.log)).on('data', gutil.log) .pipe(remember("gemswap-coffee")) diff --git a/package.json b/package.json index 785271e..c321c01 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "gulp-remember": "0.2.x", "gulp-header": "1.0.x", "gulp-footer": "1.0.x", + "gulp-plumber": "0.6.x", "coffee-script": "1.7.x" } } diff --git a/radium/resource-manager.coffee b/radium/resource-manager.coffee index ebe90a7..ef94d61 100644 --- a/radium/resource-manager.coffee +++ b/radium/resource-manager.coffee @@ -33,6 +33,12 @@ class ResourceManager @resources.stage1_scripts.push(@joinPath(path)) else @resources.scripts.push(@joinPath(path)) + + addDataFile: (path, first_stage = false) => + if first_stage + @resources.stage1_data.push(@joinPath(path)) + else + @resources.data.push(@joinPath(path)) addImages: (paths, first_stage = false) => @addImage(path, first_stage) for path in paths @@ -43,21 +49,41 @@ class ResourceManager addSounds: (paths, first_stage = false) => @addSound(path, first_stage) for path in paths + addDataFiles: (paths, first_stage = false) => + @addDataFile(path, first_stage) for path in paths + getImage: (path) => # FIXME: Do properly when PreloadJS is added console.log("objs", @resource_objects) console.log("path", path) return @resource_objects.images[@joinPath(path)] - prepare: (finished_callback = (->)) => - # This performs a stage 1 preload, loading the initial assets required for displaying the preload screen. + updateProgress: (event) => pass - - preload: (progress_callback = (->), finished_callback = (->)) => - # This performs the stage 2 preload; it will load the actual game assets. - for image in @resources.images + + do_preload: (stage, progress_callback, finished_callback) => + if stage == 1 + images = @resources.stage1_images + scripts = @resources.stage1_scripts + sounds = @resources.stage1_sounds + else + images = @resources.images + scripts = @resources.scripts + sounds = @resources.sounds + + for image in images obj = document.createElement("img") obj.src = image @resource_objects.images[image] = obj - finished_callback() \ No newline at end of file + console.log("done stage " + stage) + finished_callback() + + prepare: (finished_callback = (->)) => + # This performs a stage 1 preload, loading the initial assets required for displaying the preload screen. + @do_preload(1, (->), finished_callback) + + load: () => + # This performs the stage 2 preload; it will load the actual game assets. + @do_preload(2, @updateProgress, @onLoad?.bind(this) ? (->)) + \ No newline at end of file diff --git a/radium/scene.coffee b/radium/scene.coffee index ae6ba3b..c3ac0e8 100644 --- a/radium/scene.coffee +++ b/radium/scene.coffee @@ -1,5 +1,8 @@ class Scene constructor: (@engine, @name) -> + @reset() + + reset: => @instances = {} @surfaces = [] @dirty = true # Triggers first draw @@ -10,6 +13,16 @@ class Scene @last_width = 800 @last_height = 600 + callEvent: (name, data = {}) -> + event_map = + load: @onLoad + + switch name + when "destroy" + @destroySelf() + @onDestroy?(data) + else event_map[name]?.bind(this)(data) + addTargetSurface: (surface) => @surfaces.push(surface) @engine.updateCanvasSize(surface, @width, @height) @@ -53,7 +66,16 @@ class Scene @checkActive() checkActive: => - @active = (@surfaces.length > 0) + active_now = (@surfaces.length > 0) + + if @active and not active_now + # Deactivated + @callEvent("destroy") + else if not @active and active_now + # Activated + @callEvent("load") + + @active = active_now iteration: => if @width != @last_width or @height != @last_height @@ -104,3 +126,6 @@ class Scene changeScene: (scene) => # This will change to a different scene, but inherit the target surfaces pass + + destroySelf: => + @reset diff --git a/radium/zzz_exports.coffee b/radium/zzz_exports.coffee deleted file mode 100644 index 87c171d..0000000 --- a/radium/zzz_exports.coffee +++ /dev/null @@ -1,2 +0,0 @@ -window.ResourceManager = ResourceManager -window.Engine = Engine \ No newline at end of file