diff --git a/app/Game/Client/Loader/Level.js b/app/Game/Client/Loader/Level.js index df5ba5e..fc4e28a 100755 --- a/app/Game/Client/Loader/Level.js +++ b/app/Game/Client/Loader/Level.js @@ -2,10 +2,11 @@ define([ "Game/Core/Loader/Level", "Game/Config/Settings", "Lib/Utilities/NotificationCenter", - "Lib/Vendor/Pixi" + "Lib/Vendor/Pixi", + "Game/Client/View/Abstract/Layer" ], -function (Parent, Settings, Nc, PIXI) { +function (Parent, Settings, Nc, PIXI, AbstractLayer) { function Level (uid, engine, gameObjects) { Parent.call(this, uid, engine, gameObjects); @@ -13,7 +14,6 @@ function (Parent, Settings, Nc, PIXI) { Level.prototype = Object.create(Parent.prototype); - Level.prototype.loadLevelDataFromPath = function (path, callback) { var self = this; var xhr = new XMLHttpRequest(); @@ -90,7 +90,7 @@ function (Parent, Settings, Nc, PIXI) { Level.prototype.createItems = function(options) { - var layerName = "items"; + var layerName = AbstractLayer.ID.ITEM; Nc.trigger(Nc.ns.client.view.layer.createAndAdd, layerName); options.layer = layerName; @@ -99,7 +99,7 @@ function (Parent, Settings, Nc, PIXI) { Level.prototype.createTiles = function(options) { - var layerName = "tiles"; + var layerName = AbstractLayer.ID.TILE; Nc.trigger(Nc.ns.client.view.layer.createAndAdd, layerName); options.layer = layerName; diff --git a/app/Game/Client/View/Abstract/Layer.js b/app/Game/Client/View/Abstract/Layer.js new file mode 100644 index 0000000..45e80f8 --- /dev/null +++ b/app/Game/Client/View/Abstract/Layer.js @@ -0,0 +1,33 @@ +define([ + "Lib/Utilities/Abstract", +], + +function (Abstract) { + + function Layer(name, z, parallaxSpeed) { + this.name = name; + this.parallaxSpeed = parallaxSpeed; + } + + Object.defineProperty(Layer, 'ID', { + value: { + TILE: 'tile', + ITEM: 'item', + SPAWN: 'spawn' + } + }); + + Abstract.prototype.addMethod.call(Layer, 'show'); + Abstract.prototype.addMethod.call(Layer, 'hide'); + Abstract.prototype.addMethod.call(Layer, 'createMesh', ['texturePath', 'callback', 'options']); + Abstract.prototype.addMethod.call(Layer, 'createAnimatedMesh', ['texturePaths', 'callback', 'options']); + Abstract.prototype.addMethod.call(Layer, 'addMesh', ['mesh']); + Abstract.prototype.addMethod.call(Layer, 'removeMesh', ['mesh']); + Abstract.prototype.addMethod.call(Layer, 'updateMesh', ['mesh', 'options']); + + Layer.prototype.getName = function() { + return this.name; + }; + + return Layer; +}); \ No newline at end of file diff --git a/app/Game/Client/View/Views/AbstractView.js b/app/Game/Client/View/Abstract/View.js similarity index 80% rename from app/Game/Client/View/Views/AbstractView.js rename to app/Game/Client/View/Abstract/View.js index 38e5636..cac8550 100755 --- a/app/Game/Client/View/Views/AbstractView.js +++ b/app/Game/Client/View/Abstract/View.js @@ -14,15 +14,7 @@ function (Abstract, DomController, Settings, Exception, Nc) { this.debugMode = false; this.ncTokens = [ - Nc.on(Nc.ns.client.view.layer.createAndAdd, this.createLayer, this), - - Nc.on(Nc.ns.client.view.mesh.create, this.createMesh, this), - Nc.on(Nc.ns.client.view.animatedMesh.create, this.createAnimatedMesh, this), - Nc.on(Nc.ns.client.view.mesh.add, this.addMesh, this), - Nc.on(Nc.ns.client.view.mesh.remove, this.removeMesh, this), - Nc.on(Nc.ns.client.view.mesh.update, this.updateMesh, this), - Nc.on(Nc.ns.client.view.mesh.addFilter, this.addFilter, this), - Nc.on(Nc.ns.client.view.mesh.removeFilter, this.removeFilter, this), + Nc.on(Nc.ns.client.view.layer.createAndAdd, this.createAndAddLayer, this), Nc.on(Nc.ns.client.view.fullscreen.change, this.onFullscreenChange, this), Nc.on(Nc.ns.client.view.debugMode.toggle, this.onToggleDebugMode, this), @@ -43,12 +35,7 @@ function (Abstract, DomController, Settings, Exception, Nc) { } Abstract.prototype.addMethod.call(AbstractView, 'render'); - Abstract.prototype.addMethod.call(AbstractView, 'createAndAddLayer', ['name']); - Abstract.prototype.addMethod.call(AbstractView, 'createMesh', ['texturePath', 'callback', 'options']); - Abstract.prototype.addMethod.call(AbstractView, 'createAnimatedMesh', ['texturePaths', 'callback', 'options']); - Abstract.prototype.addMethod.call(AbstractView, 'addMesh', ['mesh']); - Abstract.prototype.addMethod.call(AbstractView, 'removeMesh', ['mesh']); - Abstract.prototype.addMethod.call(AbstractView, 'updateMesh', ['mesh', 'options']); + Abstract.prototype.addMethod.call(AbstractView, 'createAndInsert', ['id', 'parallaxSpeed', 'referenceId', 'behind']); Abstract.prototype.addMethod.call(AbstractView, 'addFilter', ['mesh', 'options']); Abstract.prototype.addMethod.call(AbstractView, 'removeFilter', ['mesh', 'options']); Abstract.prototype.addMethod.call(AbstractView, 'setCameraPosition', ['x', 'y']); diff --git a/app/Game/Client/View/LayerManager.js b/app/Game/Client/View/LayerManager.js new file mode 100644 index 0000000..2fb125c --- /dev/null +++ b/app/Game/Client/View/LayerManager.js @@ -0,0 +1,94 @@ +define([ + "Lib/Utilities/NotificationCenter" +], + +function (Nc) { + + function LayerManager() { + this.ncTokens = [ + Nc.on(Nc.ns.client.view.mesh.create, this.createMesh, this), + Nc.on(Nc.ns.client.view.animatedMesh.create, this.createAnimatedMesh, this), + Nc.on(Nc.ns.client.view.mesh.add, this.addMesh, this), + Nc.on(Nc.ns.client.view.mesh.remove, this.removeMesh, this), + Nc.on(Nc.ns.client.view.mesh.update, this.updateMesh, this), + Nc.on(Nc.ns.client.view.mesh.addFilter, this.addFilter, this), + Nc.on(Nc.ns.client.view.mesh.removeFilter, this.removeFilter, this) + ]; + } + + LayerManager.prototype.createAndInsert = function(id, parallaxSpeed, referenceId, behind) { + + var referenceIndex = -1; + behind = !!behind; + + if (referenceId) { + for(var i = 0; i < this.layers.length; i++) { + var layer = this.layers[i]; + + if (layer.getName() === referenceId) { + referenceIndex = i; + break; + } + } + if (referenceIndex === -1) { + throw new Exception('Reference Layer (' + referenceId + ') could not be found'); + } + } else { + referenceIndex = behind ? 0 : this.stage.children.length; + } + + var layer = new Layer(id, parallaxSpeed); + + var layerIndex = behind ? referenceIndex : referenceIndex + 1; + + this.layers.splice(layerIndex, 0, layer); + this.stage.addChildAt(layer.getContainer(), layerIndex); + }; + + LayerManager.prototype.getLayerById = function(id) { + for (var i = 0; i < this.layers.length; i++) { + var layer = this.layers[i]; + if (layer.getName() === id) { + return layer; + } + }; + console.warn('No such layer: ' + id); + }; + + LayerManager.prototype.delegate = function(methodName, layerId) { + var layer = this.getLayerById(layerId); + var args = arguments.splice(0,2); + + layer[methodName].apply(layer, args); + }; + + LayerManager.prototype.createMesh = function() { + this.delegate(arguments.splice(0,0,'createMesh')); + }; + + LayerManager.prototype.createAnimatedMesh = function() { + this.delegate(arguments.splice(0,0,'createAnimatedMesh')); + }; + + LayerManager.prototype.addMesh = function() { + this.delegate(arguments.splice(0,0,'addMesh')); + }; + + LayerManager.prototype.removeMesh = function() { + this.delegate(arguments.splice(0,0,'removeMesh')); + }; + + LayerManager.prototype.updateMesh = function() { + this.delegate(arguments.splice(0,0,'updateMesh')); + }; + + LayerManager.prototype.addFilter = function() { + this.delegate(arguments.splice(0,0,'addFilter')); + }; + + LayerManager.prototype.removeFilter = function() { + this.delegate(arguments.splice(0,0,'removeFilter')); + }; + + return LayerManager; +}); \ No newline at end of file diff --git a/app/Game/Client/View/Views/Pixi/ColorRangeReplaceFilter.js b/app/Game/Client/View/Pixi/ColorRangeReplaceFilter.js similarity index 100% rename from app/Game/Client/View/Views/Pixi/ColorRangeReplaceFilter.js rename to app/Game/Client/View/Pixi/ColorRangeReplaceFilter.js diff --git a/app/Game/Client/View/Views/Pixi/GameStats.js b/app/Game/Client/View/Pixi/GameStats.js similarity index 100% rename from app/Game/Client/View/Views/Pixi/GameStats.js rename to app/Game/Client/View/Pixi/GameStats.js diff --git a/app/Game/Client/View/Pixi/Layer.js b/app/Game/Client/View/Pixi/Layer.js new file mode 100644 index 0000000..a506356 --- /dev/null +++ b/app/Game/Client/View/Pixi/Layer.js @@ -0,0 +1,147 @@ +define([ + "Game/Client/View/Abstract/Layer", + "Lib/Vendor/Pixi", +], + +function (Parent, PIXI) { + + function Layer (name, parallaxSpeed) { + Parent.call(this, name, parallaxSpeed); + this.container = new PIXI.DisplayObjectContainer(); + } + + Layer.prototype = Object.create(Parent.prototype); + + Layer.prototype.getContainer = function() { + return this.contianer; + }; + + Layer.prototype.show = function() { + this.contianer.visible = true; + }; + + Layer.prototype.hide = function() { + this.contianer.visible = false; + }; + + Layer.prototype.addMesh = function(mesh) { + this.container.addChild(mesh); + }; + + Layer.prototype.removeMesh = function(mesh) { + this.container.removeChild(mesh); + }; + + Layer.prototype.createMesh = function (texturePath, callback, options) { + + var texture = PIXI.Texture.fromImage(texturePath); + + var mesh = new PIXI.Sprite(texture); + + if(options) this.updateMesh(mesh, options); + + callback(mesh); + }; + + Layer.prototype.createAnimatedMesh = function (texturePaths, callback, options) { + var textures = []; + for (var i = 0; i < texturePaths.length; i++) { + var texture = PIXI.Texture.fromImage(texturePaths[i]); + texture.width = options.width; + texture.height = options.height; + PIXI.texturesToUpdate.push(texture); + textures.push(texture); + } + + var mesh = new PIXI.MovieClip(textures); + if(options) this.updateMesh(mesh, options); + + mesh.animationSpeed = 0.5; + + mesh.play(); + + callback(mesh); + } + + Layer.prototype.updateMesh = function(mesh, options) { + if (options.x) mesh.position.x = options.x; + if (options.y) mesh.position.y = options.y; + if (options.rotation) mesh.rotation = options.rotation; + if (options.alpha) mesh.alpha = options.alpha; + if (options.width) mesh.width = options.width; + if (options.height) mesh.height = options.height; + if (options.xScale) mesh.width = Math.abs(mesh.width) * options.xScale; + if (options.yScale) mesh.scale.y = options.yScale; + if (options.visible === true || options.visible === false) mesh.visible = options.visible; + if (options.pivot) mesh.pivot = new PIXI.Point(options.pivot.x, options.pivot.y); + }; + + Layer.prototype.addFilter = function(mesh, filterName, options) { + + if (!AVAILABLE_MESH_FILTERS.hasOwnProperty(filterName)) { + throw new Exception('Filter ' + filterName + ' is not available'); + } + + var MeshFilter = AVAILABLE_MESH_FILTERS[filterName]; + var filter = new MeshFilter(); + + switch (filterName) { + case 'desaturate': + if (options.amount) filter.gray = options.amount; + break; + + case 'blur': + if (options.blurX) filter.blurX = options.blurX; + if (options.blurY) filter.blurY = options.blurY; + break; + + case 'colorRangeReplace': + if (options.minColor) filter.minColor = options.minColor; + if (options.maxColor) filter.maxColor = options.maxColor; + if (options.newColor) filter.newColor = options.newColor; + if (options.brightnessOffset) filter.brightnessOffset = options.brightnessOffset; + break; + + case 'pixelate': + if (options.sizeX) filter.size.x = options.sizeX; + if (options.sizeY) filter.size.y = options.sizeY; + break; + + default: + break; + } + + var filters = mesh.filters; + + if(!filters) { + filters = []; + } else { + // ensure uniqueness of filter by name + this.removeFilter(mesh, filterName); + } + + filters.push(filter); + mesh.filters = filters; + }; + + Layer.prototype.removeFilter = function(mesh, filterName) { + + var filters = mesh.filters; + + if(!filters) { + return; + } + + var MeshFilter = AVAILABLE_MESH_FILTERS[options.filter]; + + filters = filters.filter(function(filter){ + return !filter instanceof MeshFilter; + }); + + mesh.filters = filter; + }; + + + return Layer; +}); + diff --git a/app/Game/Client/View/Views/PixiView.js b/app/Game/Client/View/Pixi/View.js similarity index 66% rename from app/Game/Client/View/Views/PixiView.js rename to app/Game/Client/View/Pixi/View.js index 77810d2..fffbd62 100755 --- a/app/Game/Client/View/Views/PixiView.js +++ b/app/Game/Client/View/Pixi/View.js @@ -1,13 +1,13 @@ define([ - "Game/Client/View/Views/AbstractView", + "Game/Client/View/Abstract/View", "Game/Client/View/DomController", "Lib/Vendor/Pixi", - "Game/Client/View/Views/Pixi/ColorRangeReplaceFilter", + "Game/Client/View/Pixi/ColorRangeReplaceFilter", "Game/Config/Settings", "Lib/Utilities/NotificationCenter", "Lib/Utilities/Exception", - "Game/Client/View/Views/Pixi/GameStats", - "Game/Client/View/Views/Pixi/Layer" + "Game/Client/View/Pixi/GameStats", + "Game/Client/View/Pixi/Layer" ], function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Exception, GameStats, Layer) { @@ -74,134 +74,6 @@ function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Ex this.renderer.render(this.stage); } - // Layers - - PixiView.prototype.createAndAddLayer = function(name) { - - var layer = new Layer(name, 1); - this.layers.push(layer); - this.stage.addChild(layer.getContainer()); - }; - - // Meshes - - PixiView.prototype.addMesh = function(mesh) { - this.container.addChild(mesh); - }; - - PixiView.prototype.removeMesh = function(mesh) { - this.container.removeChild(mesh); - }; - - PixiView.prototype.createMesh = function (texturePath, callback, options) { - - var texture = PIXI.Texture.fromImage(texturePath); - - var mesh = new PIXI.Sprite(texture); - - if(options) this.updateMesh(mesh, options); - - callback(mesh); - } - - PixiView.prototype.createAnimatedMesh = function (texturePaths, callback, options) { - var textures = []; - for (var i = 0; i < texturePaths.length; i++) { - var texture = PIXI.Texture.fromImage(texturePaths[i]); - texture.width = options.width; - texture.height = options.height; - PIXI.texturesToUpdate.push(texture); - textures.push(texture); - } - - var mesh = new PIXI.MovieClip(textures); - if(options) this.updateMesh(mesh, options); - - mesh.animationSpeed = 0.5; - - mesh.play(); - - callback(mesh); - } - - PixiView.prototype.updateMesh = function(mesh, options) { - if (options.x) mesh.position.x = options.x; - if (options.y) mesh.position.y = options.y; - if (options.rotation) mesh.rotation = options.rotation; - if (options.alpha) mesh.alpha = options.alpha; - if (options.width) mesh.width = options.width; - if (options.height) mesh.height = options.height; - if (options.xScale) mesh.width = Math.abs(mesh.width) * options.xScale; - if (options.yScale) mesh.scale.y = options.yScale; - if (options.visible === true || options.visible === false) mesh.visible = options.visible; - if (options.pivot) mesh.pivot = new PIXI.Point(options.pivot.x, options.pivot.y); - } - - PixiView.prototype.addFilter = function(mesh, filterName, options) { - - if (!AVAILABLE_MESH_FILTERS.hasOwnProperty(filterName)) { - throw new Exception('Filter ' + filterName + ' is not available'); - } - - var MeshFilter = AVAILABLE_MESH_FILTERS[filterName]; - var filter = new MeshFilter(); - - switch (filterName) { - case 'desaturate': - if (options.amount) filter.gray = options.amount; - break; - - case 'blur': - if (options.blurX) filter.blurX = options.blurX; - if (options.blurY) filter.blurY = options.blurY; - break; - - case 'colorRangeReplace': - if (options.minColor) filter.minColor = options.minColor; - if (options.maxColor) filter.maxColor = options.maxColor; - if (options.newColor) filter.newColor = options.newColor; - if (options.brightnessOffset) filter.brightnessOffset = options.brightnessOffset; - break; - - case 'pixelate': - if (options.sizeX) filter.size.x = options.sizeX; - if (options.sizeY) filter.size.y = options.sizeY; - break; - - default: - break; - } - - var filters = mesh.filters; - - if(!filters) { - filters = []; - } else { - // ensure uniqueness of filter by name - this.removeFilter(mesh, filterName); - } - - filters.push(filter); - mesh.filters = filters; - }; - - PixiView.prototype.removeFilter = function(mesh, filterName) { - - var filters = mesh.filters; - - if(!filters) { - return; - } - - var MeshFilter = AVAILABLE_MESH_FILTERS[options.filter]; - - filters = filters.filter(function(filter){ - return !filter instanceof MeshFilter; - }); - - mesh.filters = filter; - }; - // Camera PixiView.prototype.initCamera = function () { diff --git a/app/Game/Client/View/Views/ThreeView.js b/app/Game/Client/View/Three/View.js similarity index 96% rename from app/Game/Client/View/Views/ThreeView.js rename to app/Game/Client/View/Three/View.js index d24963f..a73fa3c 100755 --- a/app/Game/Client/View/Views/ThreeView.js +++ b/app/Game/Client/View/Three/View.js @@ -1,5 +1,5 @@ define([ - "Game/Client/View/Views/AbstractView", + "Game/Client/View/Abstract/View", "Game/Client/View/DomController", "Lib/Vendor/Three", "Game/Config/Settings" diff --git a/app/Game/Client/View/ViewManager.js b/app/Game/Client/View/ViewManager.js index 3e3da85..0172030 100755 --- a/app/Game/Client/View/ViewManager.js +++ b/app/Game/Client/View/ViewManager.js @@ -1,9 +1,9 @@ define([ "Game/Config/Settings", "Lib/Utilities/Exception", - "Game/Client/View/Views/AbstractView", - //"Game/Client/View/Views/ThreeView", - "Game/Client/View/Views/PixiView", + "Game/Client/View/Abstract/View", + //"Game/Client/View/Three/View", + "Game/Client/View/Pixi/View", "Lib/Utilities/NotificationCenter" ], @@ -14,9 +14,9 @@ function (Settings, Exception, AbstractView, PixiView, Nc) { ViewManager.createView = function() { var view = null switch(Settings.VIEW_CONTROLLER) { - case 'Three': - view = new ThreeView(); - break; + //case 'Three': + // view = new ThreeView(); + // break; case 'Pixi': view = new PixiView(); break; diff --git a/app/Game/Client/View/Views/Pixi/Layer.js b/app/Game/Client/View/Views/Pixi/Layer.js deleted file mode 100644 index 8f9d4d9..0000000 --- a/app/Game/Client/View/Views/Pixi/Layer.js +++ /dev/null @@ -1,18 +0,0 @@ -define([ - "Lib/Vendor/Pixi", -], - -function (PIXI) { - - function Layer (name, parallax) { - this.name = name; - this.container = new PIXI.DisplayObjectContainer(); - this.parallax = parallax; - } - - Layer.prototype.getContainer = function() { - return this.container; - }; - - return Layer; -}); \ No newline at end of file