jeena/chuck.js
1
0
Fork 0
mirror of https://github.com/logsol/chuck.js.git synced 2026-05-11 10:37:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'layers'

Browse source
This commit is contained in:
Jeena 2014-11-16 01:23:42 +01:00
commit 4dd529e663
30 changed files with 951 additions and 539 deletions
Download patch file Download diff file Expand all files Collapse all files

41
app/Game/Client/GameObjects/Doll.js
View file

@ -3,12 +3,14 @@ define([
"Game/Config/Settings",
"Lib/Utilities/NotificationCenter",
"Lib/Utilities/Exception",
"Lib/Utilities/ColorConverter"
"Lib/Utilities/ColorConverter",
"Game/Client/View/Abstract/Layer",
],
function (Parent, Settings, Nc, Exception, ColorConverter) {
function (Parent, Settings, Nc, Exception, ColorConverter, Layer) {
function Doll(physicsEngine, uid, player) {
function Doll(physicsEngine, uid, player) {
this.layerId = Layer.ID.SPAWN;
this.animationDef = {
"stand": [1,1],
"walk": [2,28],
@ -31,7 +33,6 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
var converter = new ColorConverter();
this.primaryColor = converter.getColorByName(player.getNickname());
console.log(this.primaryColor.toString(16))
Parent.call(this, physicsEngine, uid, player);
}
@ -47,11 +48,13 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
if(this.animatedMeshes[this.actionState]) {
Nc.trigger(
Nc.ns.client.view.mesh.update,
this.layerId,
this.animatedMeshesContainer.withArms[this.actionState],
{ visible: false }
);
Nc.trigger(
Nc.ns.client.view.mesh.update,
this.layerId,
this.animatedMeshesContainer.withoutArms[this.actionState],
{ visible: false }
);
@ -61,6 +64,7 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
Nc.trigger(
Nc.ns.client.view.mesh.update,
this.layerId,
this.animatedMeshes[this.actionState],
{
visible: true,
@ -74,7 +78,7 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
var self = this;
var setShirtColor = function (mesh) {
Nc.trigger(Nc.ns.client.view.mesh.addFilter, mesh, 'colorRangeReplace', {
Nc.trigger(Nc.ns.client.view.mesh.addFilter, self.layerId, mesh, 'colorRangeReplace', {
minColor: 0x3b4a31,
maxColor: 0x657f54,
newColor: self.primaryColor,
@ -113,12 +117,12 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
var callback = function(mesh) {
self.animatedMeshesContainer[arm][key] = mesh;
Nc.trigger(Nc.ns.client.view.mesh.add, mesh);
Nc.trigger(Nc.ns.client.view.mesh.add, self.layerId, mesh);
setShirtColor(mesh);
};
Nc.trigger(Nc.ns.client.view.animatedMesh.create, texturePaths, callback, {
Nc.trigger(Nc.ns.client.view.animatedMesh.create, this.layerId, texturePaths, callback, {
visible: false,
pivot: {
x: 35/2 * 4,
@ -136,9 +140,9 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
var texturePath = Settings.GRAPHICS_PATH + "Characters/Chuck/head.png";
var callback = function (mesh) {
self.headMesh = mesh;
Nc.trigger(Nc.ns.client.view.mesh.add, mesh);
Nc.trigger(Nc.ns.client.view.mesh.add, self.layerId, mesh);
}
Nc.trigger(Nc.ns.client.view.mesh.create, texturePath, callback, {
Nc.trigger(Nc.ns.client.view.mesh.create, this.layerId, texturePath, callback, {
pivot: {
x: 5,
y: 12
@ -152,11 +156,10 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
texturePath = Settings.GRAPHICS_PATH + "Characters/Chuck/holdingArm.png";
var callback = function (mesh) {
self.holdingArmMesh = mesh;
Nc.trigger(Nc.ns.client.view.mesh.add, mesh);
Nc.trigger(Nc.ns.client.view.mesh.add, self.layerId, mesh);
setShirtColor(mesh);
}
Nc.trigger(Nc.ns.client.view.mesh.create, texturePath, callback, {
Nc.trigger(Nc.ns.client.view.mesh.create, this.layerId, texturePath, callback, {
visible: false,
pivot: {
x: 35/2 * 4,
@ -176,6 +179,7 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
if(oldLookDirection != this.lookDirection) {
for(var key in this.animatedMeshes) {
Nc.trigger(Nc.ns.client.view.mesh.update,
this.layerId,
this.animatedMeshes[key],
{
xScale: this.lookDirection
@ -184,6 +188,7 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
}
Nc.trigger(Nc.ns.client.view.mesh.update,
this.layerId,
this.holdingArmMesh,
{
xScale: this.lookDirection
@ -194,6 +199,7 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
var angle = Math.atan2(this.lookAtXY.x, this.lookAtXY.y) / 2 - 0.7855 * this.lookDirection; // 0.7855 = 45°
Nc.trigger(Nc.ns.client.view.mesh.update,
this.layerId,
this.headMesh,
{
xScale: this.lookDirection,
@ -206,22 +212,22 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
Parent.prototype.grab.call(this, item);
this.animatedMeshes = this.animatedMeshesContainer.withoutArms;
this.setActionState(this.actionState, true);
Nc.trigger(Nc.ns.client.view.mesh.update, this.holdingArmMesh, { visible: true });
Nc.trigger(Nc.ns.client.view.mesh.update, this.layerId, this.holdingArmMesh, { visible: true });
};
Doll.prototype.throw = function(item, x, y) {
Parent.prototype.throw.call(this, item, x, y);
this.animatedMeshes = this.animatedMeshesContainer.withArms;
this.setActionState(this.actionState, true);
Nc.trigger(Nc.ns.client.view.mesh.update, this.holdingArmMesh, { visible: false });
Nc.trigger(Nc.ns.client.view.mesh.update, this.layerId, this.holdingArmMesh, { visible: false });
};
Doll.prototype.destroy = function () {
for (var key in this.animatedMeshes) {
Nc.trigger(Nc.ns.client.view.mesh.remove, this.animatedMeshes[key]);
Nc.trigger(Nc.ns.client.view.mesh.remove, this.layerId, this.animatedMeshes[key]);
}
Nc.trigger(Nc.ns.client.view.mesh.remove, this.headMesh);
Nc.trigger(Nc.ns.client.view.mesh.remove, this.layerId, this.headMesh);
Parent.prototype.destroy.call(this);
}
@ -229,6 +235,7 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
Doll.prototype.render = function() {
if(this.actionState) {
Nc.trigger(Nc.ns.client.view.mesh.update,
this.layerId,
this.animatedMeshes[this.actionState],
{
x: this.body.GetPosition().x * Settings.RATIO,
@ -238,6 +245,7 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
);
Nc.trigger(Nc.ns.client.view.mesh.update,
this.layerId,
this.headMesh,
{
x: this.body.GetPosition().x * Settings.RATIO,
@ -246,6 +254,7 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
)
Nc.trigger(Nc.ns.client.view.mesh.update,
this.layerId,
this.holdingArmMesh,
{
x: this.body.GetPosition().x * Settings.RATIO,

13
app/Game/Client/GameObjects/Item.js
View file

@ -1,12 +1,14 @@
define([
"Game/Core/GameObjects/Item",
"Game/Config/Settings",
"Lib/Utilities/NotificationCenter"
"Lib/Utilities/NotificationCenter",
"Game/Client/View/Abstract/Layer"
],
function (Parent, Settings, Nc) {
function (Parent, Settings, Nc, Layer) {
function Item(physicsEngine, uid, options) {
this.layerId = Layer.ID.ITEM;
Parent.call(this, physicsEngine, uid, options);
}
@ -22,10 +24,11 @@ function (Parent, Settings, Nc) {
var callback = function(mesh) {
self.mesh = mesh;
Nc.trigger(Nc.ns.client.view.mesh.add, mesh);
Nc.trigger(Nc.ns.client.view.mesh.add, self.layerId, mesh);
}
Nc.trigger(Nc.ns.client.view.mesh.create,
this.layerId,
texturePath,
callback,
{
@ -40,13 +43,14 @@ function (Parent, Settings, Nc) {
};
Item.prototype.destroy = function() {
Nc.trigger(Nc.ns.client.view.mesh.remove, this.mesh);
Nc.trigger(Nc.ns.client.view.mesh.remove, this.layerId, this.mesh);
Parent.prototype.destroy.call(this);
};
Item.prototype.render = function() {
Nc.trigger(Nc.ns.client.view.mesh.update,
this.layerId,
this.mesh,
{
x: this.body.GetPosition().x * Settings.RATIO,
@ -63,6 +67,7 @@ function (Parent, Settings, Nc) {
if(oldFlipDirection != direction) {
Nc.trigger(Nc.ns.client.view.mesh.update,
this.layerId,
this.mesh,
{
xScale: direction

14
app/Game/Client/GameObjects/Items/RagDoll.js
View file

@ -2,12 +2,14 @@ define([
"Game/Core/GameObjects/Items/RagDoll",
"Game/Core/GameObjects/Item",
"Game/Config/Settings",
"Lib/Utilities/NotificationCenter"
"Lib/Utilities/NotificationCenter",
"Game/Client/View/Abstract/Layer"
],
function (Parent, CoreItem, Settings, Nc) {
function (Parent, CoreItem, Settings, Nc, Layer) {
function RagDoll(physicsEngine, uid, options) {
this.layerId = Layer.ID.SPAWN;
this.limbMeshes = {};
this.baseMeshName = "chest";
this.characterName = "Chuck";
@ -36,10 +38,11 @@ function (Parent, CoreItem, Settings, Nc) {
self.limbMeshes[name] = mesh;
}
Nc.trigger(Nc.ns.client.view.mesh.add, mesh);
Nc.trigger(Nc.ns.client.view.mesh.add, self.layerId, mesh);
}
Nc.trigger(Nc.ns.client.view.mesh.create,
this.layerId,
texturePath + name + ".png",
callback,
{
@ -60,6 +63,7 @@ function (Parent, CoreItem, Settings, Nc) {
for(var name in this.limbMeshes) {
if(this.limbs[name]) {
Nc.trigger(Nc.ns.client.view.mesh.update,
this.layerId,
this.limbMeshes[name],
{
x: this.limbs[name].GetPosition().x * Settings.RATIO,
@ -80,6 +84,7 @@ function (Parent, CoreItem, Settings, Nc) {
if(oldFlipDirection != direction) {
Nc.trigger(Nc.ns.client.view.mesh.update,
this.layerId,
this.mesh,
{
xScale: direction
@ -88,6 +93,7 @@ function (Parent, CoreItem, Settings, Nc) {
for (var name in this.limbMeshes) {
Nc.trigger(Nc.ns.client.view.mesh.update,
this.layerId,
this.limbMeshes[name],
{
xScale: direction
@ -100,7 +106,7 @@ function (Parent, CoreItem, Settings, Nc) {
RagDoll.prototype.destroy = function() {
for (var name in this.limbMeshes) {
Nc.trigger(Nc.ns.client.view.mesh.remove, this.limbMeshes[name]);
Nc.trigger(Nc.ns.client.view.mesh.remove, this.layerId, this.limbMeshes[name]);
};
Parent.prototype.destroy.call(this);

12
app/Game/Client/GameObjects/Tile.js
View file

@ -1,12 +1,14 @@
define([
"Game/Core/GameObjects/Tile",
"Game/Config/Settings",
"Lib/Utilities/NotificationCenter"
"Lib/Utilities/NotificationCenter",
"Game/Client/View/Abstract/Layer"
],
function (Parent, Settings, Nc) {
function (Parent, Settings, Nc, Layer) {
function Tile(physicsEngine, uid, options) {
this.layerId = Layer.ID.TILE;
Parent.call(this, physicsEngine, uid, options);
}
@ -27,10 +29,11 @@ function (Parent, Settings, Nc) {
var callback = function(mesh) {
self.mesh = mesh;
Nc.trigger(Nc.ns.client.view.mesh.add, mesh);
Nc.trigger(Nc.ns.client.view.mesh.add, self.layerId, mesh);
}
Nc.trigger(Nc.ns.client.view.mesh.create,
this.layerId,
texturePath,
callback,
{
@ -45,13 +48,14 @@ function (Parent, Settings, Nc) {
};
Tile.prototype.destroy = function() {
Nc.trigger(Nc.ns.client.view.mesh.remove, this.mesh);
Nc.trigger(Nc.ns.client.view.mesh.remove, this.layerId, this.mesh);
Parent.prototype.destroy.call(this);
};
Tile.prototype.render = function() {
Nc.trigger(Nc.ns.client.view.mesh.update,
this.layerId,
this.mesh,
{
x: this.body.GetPosition().x * Settings.RATIO,

26
app/Game/Client/Loader/Level.js
View file

@ -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);
@ -17,13 +18,13 @@ function (Parent, Settings, Nc, PIXI) {
var self = this;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
self.loadAssets(JSON.parse(xhr.responseText), callback);
} else {
console.error("Ajax error: " + xhr.status + " " + xhr.statusText)
}
if(xhr.readyState == 4) {
if(xhr.status == 200) {
self.loadAssets(JSON.parse(xhr.responseText), callback);
} else {
console.error("Ajax error: " + xhr.status + " " + xhr.statusText)
}
}
}
xhr.open("GET", path, true);
xhr.send(null);
@ -87,5 +88,14 @@ function (Parent, Settings, Nc, PIXI) {
return paths;
};
Level.prototype.setupLayer = function(options, behind, referenceId) {
Parent.prototype.setupLayer.call(this, options, 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;
});

78
app/Game/Client/Loader/TiledLevel.js
View file

@ -1,16 +1,32 @@
define([
"Game/Core/Loader/TiledLevel",
"Game/Config/Settings"
"Game/Config/Settings",
"Lib/Utilities/NotificationCenter",
],
function (Parent, Settings) {
function (Parent, Settings, Nc) {
function TiledLevel(uid, engine, gameObjects) {
this.layerId = "background";
Parent.call(this, uid, engine, gameObjects);
}
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);
}
};
*/
Parent.prototype.setup.call(this, levelData);
};
TiledLevel.prototype.getAssetPaths = function(levelData) {
var paths = Parent.prototype.getAssetPaths.call(this, levelData);
@ -40,13 +56,61 @@ function (Parent, Settings) {
paths.push(texturePath);
};
var background = this.getLayer(levelData, "background");
paths.push(Settings.MAPS_PATH + background.image);
for (var i = 0; i < levelData.layers.length; i++) {
var layer = levelData.layers[i];
if (layer.type == "imagelayer") {
paths.push(Settings.MAPS_PATH + layer.image);
}
};
return paths;
}
TiledLevel.prototype.setupLayer = function(options, behind, referenceId) {
Parent.prototype.setupLayer.call(this, options, behind, referenceId);
// So far only one image per layer is possible because of Tiled editor
if (options.type == "imagelayer") {
var texturePath = Settings.MAPS_PATH + options.image;
var callback = function(mesh) {
Nc.trigger(Nc.ns.client.view.mesh.add, options.layerId, mesh);
Nc.trigger(Nc.ns.client.view.mesh.update, options.layerId, mesh, {
x: Settings.STAGE_WIDTH / 2,
y: Settings.STAGE_HEIGHT / 2,
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,
{
alpha: options.opacity
}
);
}
};
TiledLevel.prototype.getLayer = function(levelData, name) {
for (var i = 0; i < levelData.layers.length; i++) {
if(levelData.layers[i].name === name) {
return levelData.layers[i];
}
}
throw "Layer '" + name + "' not found.";
};
return TiledLevel;
});

51
app/Game/Client/View/Abstract/Layer.js Normal file
View file

@ -0,0 +1,51 @@
define([
"Lib/Utilities/Abstract",
],
function (Abstract) {
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', {
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']);
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;
});

112
app/Game/Client/View/Abstract/View.js Executable file
View file

@ -0,0 +1,112 @@
define([
"Lib/Utilities/Abstract",
"Game/Client/View/DomController",
"Game/Config/Settings",
"Lib/Utilities/Exception",
"Lib/Utilities/NotificationCenter"
],
function (Abstract, DomController, Settings, Exception, Nc) {
function AbstractView () {
this.me = null;
this.canvas = null;
this.debugMode = false;
this.ncTokens = [
Nc.on(Nc.ns.client.view.fullscreen.change, this.onFullscreenChange, this),
Nc.on(Nc.ns.client.view.debugMode.toggle, this.onToggleDebugMode, this),
Nc.on(Nc.ns.client.view.playerInfo.createAndAdd, this.onCreateAndAddPlayerInfo, this),
Nc.on(Nc.ns.client.view.playerInfo.update, this.onUpdatePlayerInfo, this),
Nc.on(Nc.ns.client.view.playerInfo.remove, this.onRemovePlayerInfo, 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.game.zoomIn, this.onZoomIn, this),
Nc.on(Nc.ns.client.game.zoomOut, this.onZoomOut, this),
Nc.on(Nc.ns.client.game.zoomReset, this.onZoomReset, this),
Nc.on(Nc.ns.client.view.preloadBar.update, this.onUpdateLoader, this),
];
}
Abstract.prototype.addMethod.call(AbstractView, 'render');
Abstract.prototype.addMethod.call(AbstractView, 'addFilter', ['mesh', 'options']);
Abstract.prototype.addMethod.call(AbstractView, 'removeFilter', ['mesh', 'options']);
Abstract.prototype.addMethod.call(AbstractView, 'setCameraPosition', ['x', 'y']);
Abstract.prototype.addMethod.call(AbstractView, 'setCameraZoom', ['z']);
Abstract.prototype.addMethod.call(AbstractView, 'onZoomIn');
Abstract.prototype.addMethod.call(AbstractView, 'onZoomIn');
Abstract.prototype.addMethod.call(AbstractView, 'onZoomReset');
Abstract.prototype.addMethod.call(AbstractView, 'toggleInfo', ['show', 'string']);
Abstract.prototype.addMethod.call(AbstractView, 'onCreateAndAddPlayerInfo', ['options']);
Abstract.prototype.addMethod.call(AbstractView, 'onCreateAndAddPlayerArrow', ['options']);
Abstract.prototype.addMethod.call(AbstractView, 'onUpdatePlayerArrow', ['options']);
Abstract.prototype.addMethod.call(AbstractView, 'onUpdatePlayerInfo', ['mesh', 'options']);
Abstract.prototype.addMethod.call(AbstractView, 'onRemovePlayerInfo', ['mesh']);
Abstract.prototype.addMethod.call(AbstractView, 'onUpdateLoader', ['progress']);
AbstractView.prototype.isWebGlEnabled = function () {
try {
return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' );
} catch(e) {
return false;
}
}
AbstractView.prototype.initCanvas = function (canvas) {
this.canvas = canvas;
DomController.initCanvas(canvas);
}
AbstractView.prototype.setMe = function(player) {
this.me = player;
};
/*
AbstractView.prototype.calculateCameraPosition = function() {
var reference = this.me.getPosition();
var pos = {};
pos.x = reference.x;
pos.y = reference.y;
pos.x = pos.x * Settings.RATIO;
pos.y = -(pos.y * Settings.RATIO);
pos.x += this.me.playerController.xyInput.x * Settings.STAGE_WIDTH / 4;
pos.y += this.me.playerController.xyInput.y * Settings.STAGE_HEIGHT / 4;
return pos;
};
*/
AbstractView.prototype.onFullscreenChange = function(isFullScreen) {
if (!isFullScreen) {
Settings.STAGE_WIDTH = 600;
Settings.STAGE_HEIGHT = 400;
} else {
// FIXME: Create FIXME meme (dumb and dumber)
// FIXME: don't overwrite Settings
Settings.STAGE_WIDTH = window.innerWidth;
Settings.STAGE_HEIGHT = window.innerHeight;
}
};
AbstractView.prototype.onToggleDebugMode = function(debugMode) {
if(debugMode) {
this.setCameraPosition(-Settings.STAGE_WIDTH / 2, -Settings.STAGE_HEIGHT / 2);
}
this.debugMode = debugMode;
};
AbstractView.prototype.destroy = function() {
for (var i = 0; i < this.ncTokens.length; i++) {
Nc.off(this.ncTokens[i]);
};
};
return AbstractView;
});

162
app/Game/Client/View/LayerManager.js Normal file
View file

@ -0,0 +1,162 @@
define([
"Lib/Utilities/NotificationCenter",
"Lib/Utilities/Exception",
"Game/Client/View/Pixi/Layer"
],
function (Nc, Exception, Layer) {
function LayerManager(container, me) {
this.layers = [];
this.container = container;
this.ncTokens = [
Nc.on(Nc.ns.client.view.layer.createAndInsert, this.createAndInsert, 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)
];
}
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)
* or in the foreground (behind=false/null)
*/
LayerManager.prototype.createAndInsert = function(id, parallaxSpeed, behind, referenceId) {
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.container.children.length;
}
var layer = new Layer(id, parallaxSpeed);
var layerIndex = behind ? referenceIndex : referenceIndex + 1;
this.layers.splice(layerIndex, 0, layer);
this.rearrangeLayers();
};
LayerManager.prototype.rearrangeLayers = function() {
var layer;
for (var i = this.layers.length - 1; i >= 0; i--) {
layer = this.layers[i];
if (this.container.children.indexOf(layer.getContainer()) !== -1) {
this.container.removeChild(layer.getContainer());
}
};
if (this.container.children.length !== 0) {
console.warn('Unmanaged stuff in container... ', this.container.children);
//throw new Exception('Unmanaged dirt in container... ');
}
for (var i = 0; i < this.layers.length; i++) {
layer = this.layers[i];
this.container.addChildAt(layer.getContainer(), i);
};
};
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;
}
};
return null;
};
/* Delegate methods */
LayerManager.prototype.delegate = function() {
var methodName = arguments[0];
var layerId = arguments[1];
var layer = this.getLayerById(layerId);
if (!layer) {
throw new Exception('Layer (' + layerId + ') does not exist.');
}
var args = arguments;
Array.prototype.splice.call(args, 0, 2);
layer[methodName].apply(layer, args);
};
LayerManager.prototype.createMesh = function() {
var args = arguments;
Array.prototype.splice.call(args, 0, 0, 'createMesh')
this.delegate.apply(this, args);
};
LayerManager.prototype.createAnimatedMesh = function() {
Array.prototype.splice.call(arguments, 0, 0, 'createAnimatedMesh')
this.delegate.apply(this, arguments);
};
LayerManager.prototype.addMesh = function() {
Array.prototype.splice.call(arguments, 0, 0, 'addMesh')
this.delegate.apply(this, arguments);
};
LayerManager.prototype.removeMesh = function() {
Array.prototype.splice.call(arguments, 0, 0, 'removeMesh')
this.delegate.apply(this, arguments);
};
LayerManager.prototype.updateMesh = function() {
Array.prototype.splice.call(arguments, 0, 0, 'updateMesh')
this.delegate.apply(this, arguments);
};
LayerManager.prototype.addFilter = function() {
Array.prototype.splice.call(arguments, 0, 0, 'addFilter')
this.delegate.apply(this, arguments);
};
LayerManager.prototype.removeFilter = function() {
Array.prototype.splice.call(arguments, 0, 0, 'removeFilter')
this.delegate.apply(this, arguments);
};
LayerManager.prototype.destroy = function() {
for (var i = 0; i < this.ncTokens.length; i++) {
Nc.off(this.ncTokens[i]);
};
};
return LayerManager;
});

0
app/Game/Client/View/Views/Pixi/ColorRangeReplaceFilter.js → app/Game/Client/View/Pixi/ColorRangeReplaceFilter.js
View file

0
app/Game/Client/View/Views/Pixi/GameStats.js → app/Game/Client/View/Pixi/GameStats.js
View file

186
app/Game/Client/View/Pixi/Layer.js Normal file
View file

@ -0,0 +1,186 @@
define([
"Game/Client/View/Abstract/Layer",
"Lib/Vendor/Pixi",
"Game/Client/View/Pixi/ColorRangeReplaceFilter",
"Game/Config/Settings",
],
function (Parent, PIXI, ColorRangeReplaceFilter, Settings) {
var AVAILABLE_MESH_FILTERS = {
"blur": PIXI.BlurFilter,
"desaturate": PIXI.GrayFilter,
"pixelate": PIXI.PixelateFilter,
"colorRangeReplace": ColorRangeReplaceFilter,
};
function Layer (name, parallaxSpeed) {
Parent.call(this, name, parallaxSpeed);
this.container = new PIXI.DisplayObjectContainer();
this.container.x = 0;
this.container.y = 0;
}
Layer.prototype = Object.create(Parent.prototype);
Layer.prototype.getContainer = function() {
return this.container;
};
Layer.prototype.show = function() {
this.container.visible = true;
};
Layer.prototype.hide = function() {
this.container.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;
};
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)
*/

164
app/Game/Client/View/Views/PixiView.js → app/Game/Client/View/Pixi/View.js
View file

@ -1,27 +1,21 @@
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/Config/Settings",
"Lib/Utilities/NotificationCenter",
"Lib/Utilities/Exception",
"Game/Client/View/Views/Pixi/GameStats"
"Game/Client/View/Pixi/GameStats",
"Game/Client/View/LayerManager",
],
function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Exception, GameStats) {
var AVAILABLE_MESH_FILTERS = {
"blur": PIXI.BlurFilter,
"desaturate": PIXI.GrayFilter,
"pixelate": PIXI.PixelateFilter,
"colorRangeReplace": ColorRangeReplaceFilter,
};
function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, LayerManager) {
function PixiView () {
Parent.call(this);
this.layerManager = null;
this.movableObjects = [];
this.stage = null;
this.container = null;
@ -55,6 +49,9 @@ function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Ex
this.stage = new PIXI.Stage(0x333333);
this.initCamera();
this.layerManager = new LayerManager(this.container, this.me);
this.initLoader();
this.initCanvas(this.renderer.view);
@ -64,140 +61,35 @@ function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Ex
}
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);
}
// 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 () {
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;
@ -237,7 +129,7 @@ function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Ex
return pos;
};
*/
PixiView.prototype.setCameraZoom = function (zoom) {
/*
var oldZoom = this.container.scale.x;
@ -400,6 +292,8 @@ function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Ex
};
PixiView.prototype.destroy = function() {
this.layerManager.destroy();
for (var i = 0; i < this.stage.children.length; i++) {
this.stage.removeChild(this.stage.children[i]);

2
app/Game/Client/View/Views/ThreeView.js → app/Game/Client/View/Three/View.js
View file

@ -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"

12
app/Game/Client/View/ViewManager.js
View file

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

202
app/Game/Client/View/Views/AbstractView.js
View file

@ -1,202 +0,0 @@
define([
"Game/Client/View/DomController",
"Game/Config/Settings",
"Lib/Utilities/Exception",
"Lib/Utilities/NotificationCenter"
],
function (DomController, Settings, Exception, Nc) {
function AbstractView () {
this.me = null;
this.canvas = null;
this.debugMode = false;
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),
Nc.on(Nc.ns.client.view.fullscreen.change, this.onFullscreenChange, this),
Nc.on(Nc.ns.client.view.debugMode.toggle, this.onToggleDebugMode, this),
Nc.on(Nc.ns.client.view.playerInfo.createAndAdd, this.onCreateAndAddPlayerInfo, this),
Nc.on(Nc.ns.client.view.playerInfo.update, this.onUpdatePlayerInfo, this),
Nc.on(Nc.ns.client.view.playerInfo.remove, this.onRemovePlayerInfo, 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.game.zoomIn, this.onZoomIn, this),
Nc.on(Nc.ns.client.game.zoomOut, this.onZoomOut, this),
Nc.on(Nc.ns.client.game.zoomReset, this.onZoomReset, this),
Nc.on(Nc.ns.client.view.preloadBar.update, this.onUpdateLoader, this),
];
}
AbstractView.prototype.isWebGlEnabled = function () {
try {
return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' );
} catch(e) {
return false;
}
}
AbstractView.prototype.initCanvas = function (canvas) {
this.canvas = canvas;
DomController.initCanvas(canvas);
}
AbstractView.prototype.loadPlayerMesh = function(player) {
throw new Exception('Abstract Function loadPlayerMesh not overwritten');
};
AbstractView.prototype.loadMeshes = function(objects) {
throw new Exception('Abstract Function loadMeshes not overwritten');
};
AbstractView.prototype.render = function () {
throw new Exception('Abstract Function render not overwritten');
}
AbstractView.prototype.createMesh = function (texturePath, callback, options) {
throw new Exception('Abstract Function createMesh not overwritten');
}
AbstractView.prototype.createAnimatedMesh = function (texturePaths, callback, options) {
throw new Exception('Abstract Function createAnimatedMesh not overwritten');
}
AbstractView.prototype.addMesh = function(mesh) {
throw new Exception('Abstract Function addMesh not overwritten');
};
AbstractView.prototype.removeMesh = function(mesh) {
throw new Exception('Abstract Function removeMesh not overwritten');
};
AbstractView.prototype.updateMesh = function(mesh, options) {
throw new Exception('Abstract Function updateMesh not overwritten');
};
AbstractView.prototype.addFilter = function(mesh, options) {
throw new Exception('Abstract Function addFilter not overwritten');
};
AbstractView.prototype.removeFilter = function(mesh, options) {
throw new Exception('Abstract Function removeFilter not overwritten');
};
AbstractView.prototype.setMe = function(player) {
this.me = player;
};
AbstractView.prototype.addPlayer = function(player) {
throw new Exception('Abstract Function addPlayer not overwritten');
};
AbstractView.prototype.removPlayer = function(player) {
throw new Exception('Abstract Function removPlayer not overwritten');
};
AbstractView.prototype.setCameraPosition = function (x, y) {
throw new Exception('Abstract Function setCameraPosition not overwritten');
}
AbstractView.prototype.calculateCameraPosition = function() {
var reference = this.me.getPosition();
var pos = {};
pos.x = reference.x;
pos.y = reference.y;
pos.x = pos.x * Settings.RATIO;
pos.y = -(pos.y * Settings.RATIO);
pos.x += this.me.playerController.xyInput.x * Settings.STAGE_WIDTH / 4;
pos.y += this.me.playerController.xyInput.y * Settings.STAGE_HEIGHT / 4;
return pos;
};
AbstractView.prototype.setCameraZoom = function (z) {
throw new Exception('Abstract Function setCameraZoom not overwritten');
};
AbstractView.prototype.onZoomIn = function () {
throw new Exception('Abstract Function onZoomIn not overwritten');
};
AbstractView.prototype.onZoomOut = function () {
throw new Exception('Abstract Function onZoomOut not overwritten');
};
AbstractView.prototype.onZoomReset = function () {
throw new Exception('Abstract Function onZoomReset not overwritten');
};
AbstractView.prototype.onFullscreenChange = function(isFullScreen) {
if (!isFullScreen) {
Settings.STAGE_WIDTH = 600;
Settings.STAGE_HEIGHT = 400;
} else {
// FIXME: Create FIXME meme (dumb and dumber)
// FIXME: don't overwrite Settings
Settings.STAGE_WIDTH = window.innerWidth;
Settings.STAGE_HEIGHT = window.innerHeight;
}
};
AbstractView.prototype.onToggleDebugMode = function(debugMode) {
if(debugMode) {
this.setCameraPosition(-Settings.STAGE_WIDTH / 2, -Settings.STAGE_HEIGHT / 2);
}
this.debugMode = debugMode;
};
AbstractView.prototype.toggleInfo = function(show, string) {
throw new Exception('Abstract Function showInfo not overwritten');
};
AbstractView.prototype.onCreateAndAddPlayerInfo = function(options) {
throw new Exception('Abstract Function onCreateAndAddPlayerInfo not overwritten');
};
AbstractView.prototype.onCreateAndAddPlayerArrow = function(options) {
throw new Exception('Abstract Function onCreateAndAddPlayerArrow not overwritten');
};
AbstractView.prototype.onUpdatePlayerArrow = function(options) {
throw new Exception('Abstract Function onUpdatePlayerArrow not overwritten');
};
AbstractView.prototype.onUpdatePlayerInfo = function(playerInfo, options) {
throw new Exception('Abstract Function onUpdatePlayerInfo not overwritten');
};
AbstractView.prototype.onRemovePlayerInfo = function(playerInfo) {
throw new Exception('Abstract Function onRemovePlayerInfo not overwritten');
};
AbstractView.prototype.onUpdateLoader = function(progress) {
throw new Exception('Abstract Function onUpdateLoader not overwritten');
};
AbstractView.prototype.destroy = function() {
for (var i = 0; i < this.ncTokens.length; i++) {
Nc.off(this.ncTokens[i]);
};
};
return AbstractView;
});

2
app/Game/Config/Settings.js
View file

@ -66,7 +66,7 @@ define(function() {
USE_WEBGL: true,
// NETWORKING
NETWORK_UPDATE_INTERVAL: 70,
NETWORK_UPDATE_INTERVAL: 70, // in milliseconds
NETWORK_LOG_INCOMING: false,
NETWORK_LOG_OUTGOING: false,
NETWORK_LOG_FILTER: ['ping', 'pong', 'worldUpdate', 'lookAt'],

2
app/Game/Core/GameObjects/Item.js
View file

@ -27,7 +27,7 @@ function (Parent, Box2D, Options, Settings, Exception, Nc) {
if(!this.options.category) {
// FIXME add more validation
console.warn('item category empty (' + this.options.name + ')' );
//console.warn('item category empty (' + this.options.name + ')' );
}
Parent.call(this, physicsEngine, uid);

111
app/Game/Core/Loader/Level.js
View file

@ -2,6 +2,7 @@ define([
"Game/Config/Settings",
"Lib/Vendor/Box2D",
"Lib/Utilities/NotificationCenter",
"Lib/Utilities/Abstract",
"Game/" + GLOBALS.context + "/Collision/Detector",
"Game/" + GLOBALS.context + "/GameObjects/Tile",
"Game/" + GLOBALS.context + "/GameObjects/Item",
@ -9,7 +10,7 @@ define([
"Game/" + GLOBALS.context + "/GameObjects/Items/RagDoll",
"Game/" + GLOBALS.context + "/GameObjects/Items/Rube"
], function (Settings, Box2D, Nc, CollisionDetector, Tile, Item, Skateboard, RagDoll, Rube) {
], function (Settings, Box2D, Nc, Abstract, CollisionDetector, Tile, Item, Skateboard, RagDoll, Rube) {
function Level (uid, engine) {
this.uid = uid;
@ -17,22 +18,31 @@ define([
this.levelObject = null;
this.isLoaded = false;
this.load(this.uid);
this.spawnPoints = null;
}
Level.prototype.load = function (uid) {
var self = this;
var path = Settings.MAPS_PATH + uid + ".json"
this.loadLevelDataFromPath(path, function(levelData) {
self.levelData = levelData;
self.addBackground();
self.createTiles();
self.createItems();
self.isLoaded = true;
Nc.trigger(Nc.ns.core.game.events.level.loaded);
this.loadLevelDataFromPath(path, function (levelData) {
self.setup(levelData);
});
}
Level.prototype.setup = function(levelData) {
this.isLoaded = true;
Nc.trigger(Nc.ns.core.game.events.level.loaded);
};
Level.prototype.createItems = function(options) {
for (var i = 0; i < options.length; i++) {
var uid = "item-" + i;
this.createItem(uid, options[i]);
};
};
Level.prototype.createItem = function(uid, options) {
switch(options.type) {
//case 'skateboard':
// return new Skateboard(this.engine, uid, options);
@ -45,64 +55,45 @@ define([
}
};
Level.prototype.getRandomSpawnPoint = function() {
throw new Error("Level not loaded.");
return {
x: 150 + Math.random() * 300,
y: -500
Level.prototype.createTiles = function(options) {
for (var i = 0; i < options.length; i++) {
new Tile(this.engine, "tile-" + i, options[i]);
};
};
Level.prototype.createSpawnPoints = function(points) {
this.spawnPoints = points;
};
Level.prototype.setupLayer = function(options, behind, referenceId) {
// will be extended (so far only in client)
}
Level.prototype.createContainer = function(options) {
// nothing to do here yet, in the future perhaps synchronize day/night graphics
};
Level.prototype.getRandomSpawnPoint = function() {
if(!this.spawnPoints) {
return {
x: 150 + Math.random() * 300,
y: -500
};
}
var size = this.spawnPoints.length;
var object = this.spawnPoints[parseInt(Math.random() * (size -1), 10)];
return {
x: object.x / Settings.TILE_RATIO,
y: object.y / Settings.TILE_RATIO
}
};
Level.prototype.destroy = function () {
/*
for (var key in this.gameObjects) {
for (var i = 0; i < this.gameObjects[key].length; i++) {
this.gameObjects[key][i].destroy();
}
}
*/
this.isLoaded = false;
}
/* Extended by TiledLevel
Level.prototype.createTiles = function () {
if (!this.levelData || !this.levelData.tiles || this.levelData.tiles.length < 1) {
throw "Level: Can't create physic tiles, no tiles found";
}
var tiles = this.levelData.tiles;
for (var i = 0; i < tiles.length; i++) {
var options = tiles[i];
//options.m = this.tileAtPositionExists(options.x, options.y - 1) ? "Soil" : "GrassSoil";
options.m = "Soil";
//this.gameObjects.fixed.push(
new Tile(this.engine, "tile-" + i, options);
//);
}
}
*/
/* Extended by TiledLevel
Level.prototype.createItems = function() {
if (!this.levelData || !this.levelData.items) {
return;
}
var items = this.levelData.items;
for (var i = 0; i < items.length; i++) {
var options = items[i];
var uid = "item-" + i;
var item = this.createItem(uid, options);
//this.gameObjects.animated.push(item);
};
};
// Extended by TiledLevel
Level.prototype.addBackground = function() {
}
*/
return Level;
})

208
app/Game/Core/Loader/TiledLevel.js
View file

@ -6,90 +6,162 @@ define([
"Lib/Utilities/Options",
"Lib/Utilities/Exception",
"Lib/Utilities/NotificationCenter",
"Game/Client/View/Abstract/Layer",
"Game/" + GLOBALS.context + "/Collision/Detector",
"Game/" + GLOBALS.context + "/GameObjects/Tile",
"Game/" + GLOBALS.context + "/GameObjects/Item",
"Game/" + GLOBALS.context + "/GameObjects/Items/Skateboard",
], function (Parent, Settings, ItemSettings, Box2D, Options, Exception, Nc, CollisionDetector, Tile, Item, Skateboard) {
], function (Parent, Settings, ItemSettings, Box2D, Options, Exception, Nc, AbstractLayer, CollisionDetector, Tile, Item, Skateboard) {
// Public
function TiledLevel (path, engine) {
this.layerMapping = {
tiles: this.createTiles.bind(this),
items: this.createItems.bind(this),
spawnpoints: this.createSpawnPoints.bind(this)
//collision: this.createTiles.bind(this), collision renamed to tiles
};
this.levelData = null;
Parent.call(this, path, engine);
}
TiledLevel.prototype = Object.create(Parent.prototype);
TiledLevel.prototype.createTiles = function () {
if (!this.levelData) {
throw "Level: Can't create level, nothing found";
TiledLevel.prototype.setup = function(levelData) {
this.levelData = levelData;
var spawnpointsExists = levelData.layers.some(function(o) {
return o.name == "spawnpoints";
});
if (!spawnpointsExists) {
console.warn('No layerMapping for level file layer: ' + layerOptions.name);
return;
}
var collisionLayer = this.getLayer(this.levelData, "collision");
if(collisionLayer) {
for (var i = 0; i < collisionLayer.data.length; i++) {
var gid = collisionLayer.data[i];
if(gid === 0) continue;
var imagePath = this.getTileImagePath(gid);
var parts = imagePath.split("/");
var tileType = parts[parts.length - 1].split(".")[0].split("");
// FIXME rename s to shape, r to rotation etc.
var options = {
s: parseInt(tileType[0], 10),
r: parseInt(tileType[1], 10),
t: imagePath,
x: i % collisionLayer.width,
y: parseInt(i / collisionLayer.height , 10)
}
//this.gameObjects.fixed.push(
new Tile(this.engine, "tile-" + i, options);
//);
function getLayerId(name, i) {
var mapping = {
tiles: AbstractLayer.ID.TILE,
items: AbstractLayer.ID.ITEM,
spawnpoints: AbstractLayer.ID.SPAWN
}
if(mapping[name]) {
return mapping[name];
}
} else {
console.warn("Level: No collision Layer given");
return "layer-" + i + "-" + name;
}
}
TiledLevel.prototype.createItems = function() {
var objects = this.getLayer(this.levelData, "items").objects;
var spawnpointsFound = false,
lastLayerId = null;
for (var i = 0; i < objects.length; i++) {
var object = objects[i];
// from spawnpoints to background
for (var i = levelData.layers.length - 1; i >= 0; i--) {
var layerOptions = levelData.layers[i];
layerOptions.z = i;
layerOptions.layerId = getLayerId(layerOptions.name, i);
var options = this.gatherOptions(object);
if (layerOptions.name == "spawnpoints") {
spawnpointsFound = true;
}
var uid = "item-" + i;
var item = this.createItem(uid, options);
//this.gameObjects.animated.push(item);
if (!spawnpointsFound) {
continue;
}
this.setupLayer(layerOptions, true, lastLayerId);
if(this.layerMapping[layerOptions.name]) {
this.layerMapping[layerOptions.name](layerOptions);
}
lastLayerId = layerOptions.layerId;
}
spawnpointsFound = false; // reset (used in mkLayer)
lastLayerId = AbstractLayer.ID.SPAWN;
// from spawnpoints to foreground
for (var i = 0; i < levelData.layers.length; i++) {
var layerOptions = levelData.layers[i];
layerOptions.z = i;
layerOptions.layerId = getLayerId(layerOptions.name, i);
if (layerOptions.name == "spawnpoints") {
spawnpointsFound = true;
continue;
}
if (!spawnpointsFound) {
continue;
}
this.setupLayer(layerOptions, false, lastLayerId);
if(this.layerMapping[layerOptions.name]) {
this.layerMapping[layerOptions.name](layerOptions);
}
lastLayerId = layerOptions.layerId;
};
Parent.prototype.setup.call(this, levelData);
};
TiledLevel.prototype.addBackground = function(path) {
TiledLevel.prototype.createTiles = function(options) {
var texturePath = Settings.GRAPHICS_PATH + "Backgrounds/starnight.png";
var callback = function (mesh) {
Nc.trigger(Nc.ns.client.view.mesh.add, mesh, 0); // FIXME: add at z layer -1 or so
var data = options.data;
var tilesOptions = [];
for (var i = 0; i < data.length; i++) {
var gid = data[i];
if(gid === 0) continue;
var imagePath = this.getTileImagePath(gid);
var parts = imagePath.split("/");
var tileType = parts[parts.length - 1].split(".")[0].split("");
// FIXME rename s to shape, r to rotation etc.
var tileOptions = {
s: parseInt(tileType[0], 10),
r: parseInt(tileType[1], 10),
t: imagePath,
x: i % options.width,
y: parseInt(i / options.height , 10)
}
tilesOptions.push(tileOptions);
}
Nc.trigger(Nc.ns.client.view.mesh.create, texturePath, callback, {
width: 4000,
height: 2959,
x: -(4000 - Settings.STAGE_WIDTH) / 2,
y: -(2959 + Settings.STAGE_HEIGHT + 700) / 2
});
Parent.prototype.createTiles.call(this, tilesOptions);
}
TiledLevel.prototype.createItems = function(options) {
var objects = options.objects;
var itemsOptions = []
for (var i = 0; i < objects.length; i++) {
var options = this.gatherOptions(objects[i]);
itemsOptions.push(options);
};
Parent.prototype.createItems.call(this, itemsOptions);
};
TiledLevel.prototype.createSpawnPoints = function(options) {
var points = options.objects.map(function(o) {
return { x: o.x, y: o.y };
});
Parent.prototype.createSpawnPoints.call(this, points);
};
TiledLevel.prototype.gatherOptions = function(tiledObject) {
var options = {};
@ -106,7 +178,6 @@ define([
var defaultOptions = this.getDefaultItemSettingsByName(options.name);
options = Options.merge(options, defaultOptions);
//options = Options.merge(tiledObject.properties, options);
return options;
};
@ -139,32 +210,5 @@ define([
}
}
TiledLevel.prototype.getRandomSpawnPoint = function() {
if(!this.levelData) {
return Parent.prototype.getRandomSpawnPoint.call(this);
} else {
var spawnLayer = this.getLayer(this.levelData, "spawnpoints");
var size = spawnLayer.objects.length;
var object = spawnLayer.objects[parseInt(Math.random() * (size -1), 10)];
return {
x: object.x / Settings.TILE_RATIO,
y: object.y / Settings.TILE_RATIO
}
}
};
TiledLevel.prototype.getLayer = function(levelData, name) {
for (var i = 0; i < levelData.layers.length; i++) {
if(levelData.layers[i].name === name) {
return levelData.layers[i];
}
}
throw "Layer '" + name + "' not found.";
};
return TiledLevel;
})

18
app/Lib/Utilities/Abstract.js Normal file
View file

@ -0,0 +1,18 @@
define([
"Lib/Utilities/Exception"
],
function (Exception) {
function Abstract() {
}
Abstract.prototype.addMethod = function(methodName, params) {
this.prototype[methodName] = function() {
throw new Exception("Abstract method", this, methodName + "(" + params.join(', ') + ") not overwritten.");
}
}
return Abstract;
});

3
app/Lib/Utilities/Exception.js
View file

@ -17,7 +17,8 @@ function() {
this.message = message.join(" ");
Error.call(this, this.message);
var e = Error.call(this, this.message);
console.log(e.stack)
}
Exception.prototype = Object.create(Error.prototype);

3
app/Lib/Utilities/NotificationCenter.js
View file

@ -25,6 +25,9 @@ function (Exception) {
this.ns = {
client: {
view: {
layer: {
createAndInsert: null
},
mesh: {
create: null,
add: null,

3
static/html/index.html
View file

@ -1,7 +1,8 @@
<!DOCTYPE html>
<html>
<head>
<title>Chuck Lobby</title>
<meta charset="utf-8">
<title>Chuck</title>
<link rel="stylesheet" href="/static/css/screen.css" type="text/css" media="screen">
</head>
<body>

BIN
static/img/Backgrounds/clouds.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 225 KiB

BIN
static/img/Backgrounds/londonatnight-transparent.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 719 KiB

BIN
static/img/Backgrounds/starnight-small.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 287 KiB

23
static/maps/tiled/debug.json
View file

File diff suppressed because one or more lines are too long

2
static/maps/tiled/flip.json
View file

File diff suppressed because one or more lines are too long

40
static/maps/tiled/stones.json
View file

File diff suppressed because one or more lines are too long