fixes initial level positioning

This commit is contained in:
Jeena 2015-04-19 16:06:23 +02:00
parent aaa1db4468
commit cad112419d
14 changed files with 91 additions and 61 deletions

View file

@ -12,6 +12,10 @@ function (Parent, Settings, Nc, PIXI, AbstractLayer) {
function Level (uid, engine, gameObjects) {
Parent.call(this, uid, engine, gameObjects);
this.levelSize = {
width: 0,
height: 0
}
}
Level.prototype = Object.create(Parent.prototype);
@ -112,7 +116,16 @@ function (Parent, Settings, Nc, PIXI, AbstractLayer) {
if (options.properties && options.properties.parallaxSpeed) {
parallaxSpeed = parseFloat(options.properties.parallaxSpeed);
}
Nc.trigger(Nc.ns.client.view.layer.createAndInsert, options.layerId, parallaxSpeed, behind, referenceId);
Nc.trigger(
Nc.ns.client.view.layer.createAndInsert,
options.layerId,
{
parallaxSpeed: parallaxSpeed,
levelSize: this.levelSize
},
behind,
referenceId
);
};
return Level;

View file

@ -16,16 +16,14 @@ function (Parent, Settings, Nc) {
TiledLevel.prototype = Object.create(Parent.prototype);
TiledLevel.prototype.setup = function(levelData) {
/*
FIXME: find a name for this shit!
for (var i = 0; i < levelData.layers.length; i++) {
var layerOptions = levelData.layers[i];
layerOptions.z = i;
if(!this.layerMapping[layerOptions.name]) {
this.createLayer(layerOptions);
}
var tilesLayerData = this.getLayer(levelData, "tiles");
this.levelSize = {
width: tilesLayerData.width * Settings.TILE_SIZE,
height: tilesLayerData.height * Settings.TILE_SIZE
};
*/
Nc.trigger(Nc.ns.client.view.layer.levelSizeUpdate, this.levelSize);
Parent.prototype.setup.call(this, levelData);
};

View file

@ -38,7 +38,7 @@ function (ProtocolHelper, GameController, User, Nc, Settings, DomController) {
Nc.on(Nc.ns.client.to.server.gameCommand.send, this.sendGameCommand, this);
Nc.on(Nc.ns.core.game.events.level.loaded, this.onLevelLoaded, this);
DomController.setNick(nickname);
DomController.setNick(nickname);
}
// Socket callbacks

View file

@ -6,18 +6,23 @@ function (Abstract) {
"use strict";
function Layer(name, parallaxSpeed) {
function Layer(name, options) {
this.name = name;
this.parallaxSpeed = parallaxSpeed;
this.parallaxSpeed = options.parallaxSpeed || 0;
this.zoom = {
current: 1,
target: 1
current: window.innerWidth / 600,
target: window.innerWidth / 600
};
this.position = {
current: { x: 0, y: 0},
target: { x: 0, y: 0}
};
if(options.levelSize) {
this.position.current.x = -options.levelSize.width / 2;
this.position.current.y = -options.levelSize.height / 2;
}
this.ncTokens = [];
}
@ -52,7 +57,9 @@ function (Abstract) {
};
Layer.prototype.destroy = function() {
for (var i = 0; i < this.ncTokens.length; i++) {
Nc.off(this.ncTokens[i]);
};
};
return Layer;

View file

@ -36,8 +36,8 @@ function (Nc, Exception, Layer) {
* If no referenceId is given, the layer is inserted in the far background (behind=true)
* or in the foreground (behind=false/null)
*/
LayerManager.prototype.createAndInsert = function(id, parallaxSpeed, behind, referenceId) {
var layer = new Layer(id, parallaxSpeed);
LayerManager.prototype.createAndInsert = function(id, options, behind, referenceId) {
var layer = new Layer(id, options);
this.insert(layer, behind, referenceId);
};

View file

@ -3,19 +3,28 @@ define([
"Lib/Vendor/Pixi",
"Game/Client/View/Pixi/ColorRangeReplaceFilter",
"Game/Config/Settings",
"Lib/Utilities/ColorConverter"
"Lib/Utilities/ColorConverter",
"Lib/Utilities/NotificationCenter"
],
function (Parent, PIXI, ColorRangeReplaceFilter, Settings, ColorConverter) {
function (Parent, PIXI, ColorRangeReplaceFilter, Settings, ColorConverter, Nc) {
"use strict";
function Layer (name, parallaxSpeed) {
Parent.call(this, name, parallaxSpeed);
function Layer (name, options) {
Parent.call(this, name, options);
this.container = new PIXI.DisplayObjectContainer();
this.container.x = 0;
this.container.y = 0;
this.static = false;
this.levelSize = {
width: 0,
height: 0
}
this.ncTokens = this.ncTokens.concat([
Nc.on(Nc.ns.client.view.layer.levelSizeUpdate, this.onLevelSizeUpdate, this)
]);
if (Settings.SHOW_LAYER_INFO) {
@ -53,6 +62,10 @@ function (Parent, PIXI, ColorRangeReplaceFilter, Settings, ColorConverter) {
Layer.prototype = Object.create(Parent.prototype);
Layer.prototype.onLevelSizeUpdate = function(levelSize) {
this.levelSize = levelSize;
};
Layer.prototype.getAvailableMeshFilters = function() {
return {
"blur": PIXI.BlurFilter,
@ -241,31 +254,29 @@ function (Parent, PIXI, ColorRangeReplaceFilter, Settings, ColorConverter) {
// Position
if (!this.static) {
// Fixme: needs to read from actual level size
var levelSize = {
x: 600,
y: 400
}
var posXStep = (this.position.target.x - this.position.current.x) * Settings.CAMERA_GLIDE / 100;
this.position.current.x += posXStep;
var posYStep = (this.position.target.y - this.position.current.y) * Settings.CAMERA_GLIDE / 100;
this.position.current.y += posYStep;
this.container.x = this.position.current.x + levelSize.x / 2 - (-this.parallaxSpeed) * (this.position.current.x + levelSize.x / 2);
this.container.y = this.position.current.y + levelSize.y / 2 - (-this.parallaxSpeed) * (this.position.current.y + levelSize.y / 2);
// Add here to set 0,0 not in the center of the map but the level origin in the top left
// FIXME: use a different kind of flag than "name"
if (this.name == "spawn"
|| this.name == "tile"
|| this.name == "item"
|| this.name == "ghost"
|| this.name == "swiper"
|| this.parallaxSpeed == 0) {
this.container.x = this.position.current.x;
this.container.y = this.position.current.y;
} else {
var x = this.position.current.x + this.levelSize.width / 2;
this.container.x = x - x * -this.parallaxSpeed;
var y = this.position.current.y + this.levelSize.height / 2;
this.container.y = y - y * -this.parallaxSpeed;
}
this.container.x *= this.zoom.current;

View file

@ -10,9 +10,8 @@ function (Parent, PIXI) {
function Debug() {
Parent.call(this, "debug", 0.00000001);
this.graphics = new PIXI.Graphics();
this.container.addChild(this.graphics);
this.graphics = new PIXI.Graphics();
this.container.addChild(this.graphics);
}
Debug.prototype = Object.create(Parent.prototype);

View file

@ -10,19 +10,25 @@ function (Parent, PIXI, Nc, Settings) {
"use strict";
function Ghost() {
Parent.call(this, "ghost", 0);
Parent.call(this, "ghost", {parallaxSpeed: 0});
this.ncTokens = [
this.ncTokens = this.ncTokens.concat([
Nc.on(Nc.ns.client.view.layer.levelSizeUpdate, this.onLevelSizeUpdate, this),
Nc.on(Nc.ns.client.view.playerArrow.createAndAdd, this.onCreateAndAddPlayerArrow, this),
Nc.on(Nc.ns.client.view.playerArrow.update, this.onUpdatePlayerArrow, this),
Nc.on(Nc.ns.client.view.healthBar.createAndAdd, this.onCreateAndAddHealthBar, this),
Nc.on(Nc.ns.client.view.healthBar.update, this.onUpdateHealthBar, this),
Nc.on(Nc.ns.client.view.healthBar.remove, this.onRemoveHealthBar, this),
];
]);
}
Ghost.prototype = Object.create(Parent.prototype);
Ghost.prototype.onLevelSizeUpdate = function(levelSize) {
this.position.current.x = -levelSize.width / 2;
this.position.current.y = -levelSize.height / 2;
};
Ghost.prototype.onCreateAndAddPlayerArrow = function(callback, options) {
@ -107,12 +113,6 @@ function (Parent, PIXI, Nc, Settings) {
Ghost.prototype.onRemoveHealthBar = function(healthBar) {
this.container.removeChild(healthBar);
};
Ghost.prototype.destroy = function() {
for (var i = 0; i < this.ncTokens.length; i++) {
Nc.off(this.ncTokens[i]);
};
};
return Ghost;

View file

@ -10,11 +10,11 @@ function (Parent, PIXI, Nc, Settings) {
"use strict";
function Messages() {
Parent.call(this, "messages", -1);
Parent.call(this, "messages", {parallaxSpeed:-1});
this.ncTokens = [
this.ncTokens = this.ncTokens.concat([
Nc.on(Nc.ns.client.view.gameStats.kill, this.onKill, this)
];
]);
this.mainTextOptions = {
font: "normal 22px 'Joystix'",

View file

@ -8,14 +8,14 @@ define([
function (Parent, PIXI, Nc, Settings) {
function Swiper() {
Parent.call(this, "swiper", 0);
Parent.call(this, "swiper", {parallaxSpeed:0});
this.static = true;
this.ncTokens = [
this.ncTokens = this.ncTokens.concat([
Nc.on(Nc.ns.client.view.swiper.swipe, this.swipe, this),
Nc.on(Nc.ns.client.view.swiper.end, this.end, this)
];
]);
this.sprite = new PIXI.Graphics();
this.container.addChild(this.sprite);

View file

@ -66,6 +66,7 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, Layer
}
this.onDisplaySizeChange(false);
this.stage = new PIXI.Stage(0x333333);
@ -168,7 +169,7 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, Layer
PixiView.prototype.calculateCenterPosition = function() {
var target = this.me.getHeadPosition();
var centerPosition = {x: target.x, y: target.y};
centerPosition.x *= Settings.RATIO * -1;
centerPosition.y *= Settings.RATIO * -1;

View file

@ -35,7 +35,7 @@ function () {
ORIGINAL_TILE_SIZE: 25,
TILE_SIZE: 20,
CAMERA_IS_ORTHOGRAPHIC: true,
CAMERA_GLIDE: 12, // % of the way per frame
CAMERA_GLIDE: 6, // % of the way per frame
VIEW_CONTROLLER: 0 ? "Three" : "Pixi",
ARROW_GLIDE: 30, // % of the way per frame
SHOW_LAYER_INFO: false,