diff --git a/app/Game/Client/Loader/Level.js b/app/Game/Client/Loader/Level.js index 5e4315d..09ea586 100755 --- a/app/Game/Client/Loader/Level.js +++ b/app/Game/Client/Loader/Level.js @@ -90,7 +90,11 @@ function (Parent, Settings, Nc, PIXI, AbstractLayer) { Level.prototype.setupLayer = function(options, behind, referenceId) { Parent.prototype.setupLayer.call(this, options, behind, referenceId); - Nc.trigger(Nc.ns.client.view.layer.createAndInsert, options.layerId, 1, behind, referenceId); + var parallaxSpeed = 0.0; + if (options.properties && options.properties.parallaxSpeed) { + parallaxSpeed = parseFloat(options.properties.parallaxSpeed); + } + Nc.trigger(Nc.ns.client.view.layer.createAndInsert, options.layerId, parallaxSpeed, behind, referenceId); }; return Level; diff --git a/app/Game/Client/Loader/TiledLevel.js b/app/Game/Client/Loader/TiledLevel.js index 56224da..9954c49 100644 --- a/app/Game/Client/Loader/TiledLevel.js +++ b/app/Game/Client/Loader/TiledLevel.js @@ -80,14 +80,19 @@ function (Parent, Settings, Nc) { pivot: { x: mesh.texture.width / 2, y: mesh.texture.height / 2 - } + }, + xScale: 1, + yScale: 1 }); } Nc.trigger(Nc.ns.client.view.mesh.create, options.layerId, texturePath, - callback + callback, + { + alpha: options.opacity + } ); } diff --git a/app/Game/Client/View/Abstract/Layer.js b/app/Game/Client/View/Abstract/Layer.js index 45e80f8..3c31ec8 100644 --- a/app/Game/Client/View/Abstract/Layer.js +++ b/app/Game/Client/View/Abstract/Layer.js @@ -4,9 +4,17 @@ define([ function (Abstract) { - function Layer(name, z, parallaxSpeed) { + function Layer(name, parallaxSpeed) { this.name = name; this.parallaxSpeed = parallaxSpeed; + this.zoom = { + current: 1, + target: 1 + }; + this.position = { + current: { x: 0, y: 0}, + target: { x: 0, y: 0} + }; } Object.defineProperty(Layer, 'ID', { @@ -24,10 +32,20 @@ function (Abstract) { Abstract.prototype.addMethod.call(Layer, 'addMesh', ['mesh']); Abstract.prototype.addMethod.call(Layer, 'removeMesh', ['mesh']); Abstract.prototype.addMethod.call(Layer, 'updateMesh', ['mesh', 'options']); + Abstract.prototype.addMethod.call(Layer, 'render', ['centerPosition']); Layer.prototype.getName = function() { return this.name; }; + Layer.prototype.setPosition = function(centerPosition) { + this.position.target.x = centerPosition.x; + this.position.target.y = centerPosition.y; + }; + + Layer.prototype.setZoom = function(z) { + this.zoom.target = z; + }; + return Layer; }); \ No newline at end of file diff --git a/app/Game/Client/View/Abstract/View.js b/app/Game/Client/View/Abstract/View.js index dbdc0b8..4ebac9c 100755 --- a/app/Game/Client/View/Abstract/View.js +++ b/app/Game/Client/View/Abstract/View.js @@ -64,7 +64,7 @@ function (Abstract, DomController, Settings, Exception, Nc) { AbstractView.prototype.setMe = function(player) { this.me = player; }; - +/* AbstractView.prototype.calculateCameraPosition = function() { var reference = this.me.getPosition(); var pos = {}; @@ -80,7 +80,7 @@ function (Abstract, DomController, Settings, Exception, Nc) { return pos; }; - +*/ AbstractView.prototype.onFullscreenChange = function(isFullScreen) { if (!isFullScreen) { diff --git a/app/Game/Client/View/LayerManager.js b/app/Game/Client/View/LayerManager.js index 02996c7..1a9433e 100644 --- a/app/Game/Client/View/LayerManager.js +++ b/app/Game/Client/View/LayerManager.js @@ -6,7 +6,7 @@ define([ function (Nc, Exception, Layer) { - function LayerManager(container) { + function LayerManager(container, me) { this.layers = []; this.container = container; @@ -21,6 +21,14 @@ function (Nc, Exception, Layer) { Nc.on(Nc.ns.client.view.mesh.removeFilter, this.removeFilter, this) ]; } + + + LayerManager.prototype.render = function(centerPosition, zoom) { + for (var i = 0; i < this.layers.length; i++) { + var layer = this.layers[i]; + layer.render(centerPosition, zoom); + } + }; /* * If no referenceId is given, the layer is inserted in the far background (behind=true) @@ -87,6 +95,11 @@ function (Nc, Exception, Layer) { return null; }; + + + + /* Delegate methods */ + LayerManager.prototype.delegate = function() { var methodName = arguments[0]; var layerId = arguments[1]; diff --git a/app/Game/Client/View/Pixi/Layer.js b/app/Game/Client/View/Pixi/Layer.js index 9f61633..7527a20 100644 --- a/app/Game/Client/View/Pixi/Layer.js +++ b/app/Game/Client/View/Pixi/Layer.js @@ -2,9 +2,10 @@ define([ "Game/Client/View/Abstract/Layer", "Lib/Vendor/Pixi", "Game/Client/View/Pixi/ColorRangeReplaceFilter", + "Game/Config/Settings", ], -function (Parent, PIXI, ColorRangeReplaceFilter) { +function (Parent, PIXI, ColorRangeReplaceFilter, Settings) { var AVAILABLE_MESH_FILTERS = { "blur": PIXI.BlurFilter, @@ -151,7 +152,35 @@ function (Parent, PIXI, ColorRangeReplaceFilter) { mesh.filters = filter; }; + Layer.prototype.render = function(centerPosition, zoom) { + this.setPosition(centerPosition); + this.setZoom(zoom); + + // Zoom + var zoomStep = (this.zoom.target - this.zoom.current) * Settings.CAMERA_GLIDE / 100; + this.zoom.current += zoomStep; + this.container.scale.x = this.zoom.current; + this.container.scale.y = this.container.scale.x; + + // Position + var posXStep = (this.position.target.x - this.position.current.x) * Settings.CAMERA_GLIDE / 100; + this.position.current.x += posXStep; + this.container.x = this.position.current.x + (this.position.current.x * this.parallaxSpeed); + + var posYStep = (this.position.target.y - this.position.current.y) * Settings.CAMERA_GLIDE / 100; + this.position.current.y += posYStep; + this.container.y = this.position.current.y + (this.position.current.y * this.parallaxSpeed); + }; return Layer; }); + +/* + +1 = this.zoom.current ? -1 + +1 = this.zoom.current * (-1) * (-1) + + +*/ diff --git a/app/Game/Client/View/Pixi/View.js b/app/Game/Client/View/Pixi/View.js index 19de504..2f3f4ef 100755 --- a/app/Game/Client/View/Pixi/View.js +++ b/app/Game/Client/View/Pixi/View.js @@ -50,7 +50,7 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, Layer this.initCamera(); - this.layerManager = new LayerManager(this.container); + this.layerManager = new LayerManager(this.container, this.me); this.initLoader(); @@ -61,21 +61,35 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, Layer } PixiView.prototype.render = function () { - if(this.me) { - var pos = this.calculateCameraPosition(); - this.setCameraPosition(pos.x, pos.y); + if (this.me) { + this.layerManager.render(this.calculateCenterPosition(), this.currentZoom); } this.renderer.render(this.stage); } // Camera - PixiView.prototype.initCamera = function () { this.container = new PIXI.DisplayObjectContainer(); this.stage.addChild(this.container); } + PixiView.prototype.calculateCenterPosition = function() { + var target = this.me.getHeadPosition(); + var centerPosition = {x: target.x, y: target.y}; + centerPosition.x *= -Settings.RATIO * this.currentZoom; + centerPosition.y *= -Settings.RATIO * this.currentZoom; + + centerPosition.x += Settings.STAGE_WIDTH / 2; + centerPosition.y += Settings.STAGE_HEIGHT / 2; + + centerPosition.x -= this.me.playerController.xyInput.x * Settings.STAGE_WIDTH / 4; + centerPosition.y += this.me.playerController.xyInput.y * Settings.STAGE_HEIGHT / 4; + + return centerPosition; + }; + +/* PixiView.prototype.calculateCameraPosition = function() { var targetZoom = this.currentZoom; @@ -115,7 +129,7 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, Layer return pos; }; - +*/ PixiView.prototype.setCameraZoom = function (zoom) { /* var oldZoom = this.container.scale.x; diff --git a/static/img/Backgrounds/clouds.png b/static/img/Backgrounds/clouds.png new file mode 100644 index 0000000..2f4e128 Binary files /dev/null and b/static/img/Backgrounds/clouds.png differ diff --git a/static/img/Backgrounds/starnight-small.png b/static/img/Backgrounds/starnight-small.png new file mode 100644 index 0000000..4486e9e Binary files /dev/null and b/static/img/Backgrounds/starnight-small.png differ diff --git a/static/maps/tiled/debug.json b/static/maps/tiled/debug.json index 862c842..16c3668 100644 --- a/static/maps/tiled/debug.json +++ b/static/maps/tiled/debug.json @@ -3,9 +3,28 @@ "layers":[ { "height":0, - "image":"..\/..\/img\/Backgrounds\/starnight.png", + "image":"..\/..\/img\/Backgrounds\/starnight-small.png", "name":"background", "opacity":1, + "properties": + { + "parallaxSpeed":"-1.0" + }, + "type":"imagelayer", + "visible":false, + "width":0, + "x":0, + "y":0 + }, + { + "height":0, + "image":"..\/..\/img\/Backgrounds\/clouds.png", + "name":"clouds", + "opacity":0.3, + "properties": + { + "parallaxSpeed":"-0.3" + }, "type":"imagelayer", "visible":false, "width":0,