mirror of
https://github.com/logsol/chuck.js.git
synced 2026-05-11 18:47:35 +00:00
Added PointerLockManagement, Fixed layer positioning, added fps chart. fixes #120, fixes #121, fixes #123
This commit is contained in:
logsol
parent
8d0989844c
commit
60eae208a2
23 changed files with 458 additions and 109 deletions
|
|
@ -3,9 +3,10 @@ define([
|
|||
"Lib/Vendor/Pixi",
|
||||
"Game/Client/View/Pixi/ColorRangeReplaceFilter",
|
||||
"Game/Config/Settings",
|
||||
"Lib/Utilities/ColorConverter"
|
||||
],
|
||||
|
||||
function (Parent, PIXI, ColorRangeReplaceFilter, Settings) {
|
||||
function (Parent, PIXI, ColorRangeReplaceFilter, Settings, ColorConverter) {
|
||||
|
||||
"use strict";
|
||||
|
||||
|
|
@ -22,6 +23,39 @@ function (Parent, PIXI, ColorRangeReplaceFilter, Settings) {
|
|||
this.container.x = 0;
|
||||
this.container.y = 0;
|
||||
this.static = false;
|
||||
|
||||
if (Settings.SHOW_LAYER_INFO) {
|
||||
|
||||
var self = this;
|
||||
var g = new PIXI.Graphics();
|
||||
var converter = new ColorConverter();
|
||||
var c = converter.getColorByName(name);
|
||||
var fontSize = 12;
|
||||
var textOptions = {
|
||||
font: "normal " + fontSize + "px 'Joystix'",
|
||||
fill: "#" + c.toString(16),
|
||||
};
|
||||
|
||||
var t = new PIXI.Text(name, textOptions);
|
||||
|
||||
var y = 0;
|
||||
switch (name) {
|
||||
case "ghost": y++;
|
||||
case "item": y++;
|
||||
case "tile": y++;
|
||||
case "spawn": y=y;
|
||||
}
|
||||
|
||||
t.position = new PIXI.Point(0, fontSize * y);
|
||||
|
||||
g.lineStyle (1, c, 1);
|
||||
g.drawRect (0, 0, 100 + y, 100 + y);
|
||||
|
||||
setTimeout(function(){
|
||||
self.container.addChild(t);
|
||||
self.container.addChild(g);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
Layer.prototype = Object.create(Parent.prototype);
|
||||
|
|
@ -166,6 +200,7 @@ function (Parent, PIXI, ColorRangeReplaceFilter, Settings) {
|
|||
|
||||
Layer.prototype.render = function(centerPosition, zoom) {
|
||||
this.setPosition(centerPosition);
|
||||
|
||||
this.setZoom(zoom);
|
||||
|
||||
// Zoom
|
||||
|
|
@ -174,8 +209,37 @@ function (Parent, PIXI, ColorRangeReplaceFilter, Settings) {
|
|||
this.container.scale.x = this.zoom.current;
|
||||
this.container.scale.y = this.container.scale.x;
|
||||
|
||||
|
||||
/*
|
||||
|
||||
// we would need another zoom state,
|
||||
// to separate fixed zooming (by window size)
|
||||
// and user zoom by +/-/0 keys
|
||||
|
||||
// this snippet would zoom the layers by its parallax
|
||||
// so further away layers would not zoom as much.
|
||||
|
||||
var zoomParallax = this.parallaxSpeed == 0
|
||||
? 1
|
||||
: this.parallaxSpeed < 0
|
||||
? (1 + this.parallaxSpeed)
|
||||
: this.parallaxSpeed + 1000;
|
||||
|
||||
var newZoomTarget = 1 + Math.log(this.zoom.target+2) * (zoomParallax)
|
||||
console.log(newZoomTarget)
|
||||
|
||||
this.container.scale.x = newZoomTarget;
|
||||
this.container.scale.y = newZoomTarget;
|
||||
|
||||
// Later, this would need to be added as well:
|
||||
this.container.x *= newZoomTarget;
|
||||
this.container.y *= newZoomTarget;
|
||||
*/
|
||||
|
||||
|
||||
// Position
|
||||
if (!this.static) {
|
||||
|
||||
/*
|
||||
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);
|
||||
|
|
@ -183,7 +247,41 @@ function (Parent, PIXI, ColorRangeReplaceFilter, Settings) {
|
|||
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);
|
||||
}
|
||||
*/
|
||||
|
||||
if (!this.static) {
|
||||
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);
|
||||
|
||||
if (this.name == "spawn"
|
||||
|| this.name == "tile"
|
||||
|| this.name == "item"
|
||||
|| this.name == "ghost"
|
||||
|| this.name == "swiper") {
|
||||
this.container.x = this.position.current.x;
|
||||
this.container.y = this.position.current.y;
|
||||
}
|
||||
|
||||
this.container.x *= this.zoom.current;
|
||||
this.container.y *= this.zoom.current;
|
||||
|
||||
this.container.x += Settings.STAGE_WIDTH / 2;
|
||||
this.container.y += Settings.STAGE_HEIGHT / 2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
};
|
||||
|
||||
return Layer;
|
||||
|
|
|
|||
|
|
@ -27,8 +27,8 @@ function (Parent, PIXI, Nc, Settings) {
|
|||
|
||||
Swiper.prototype.swipe = function(x, y) {
|
||||
var offset = {
|
||||
x: Settings.STAGE_WIDTH / 2,
|
||||
y: Settings.STAGE_HEIGHT / 2
|
||||
x: Settings.STAGE_WIDTH / 2 / this.zoom.current,
|
||||
y: Settings.STAGE_HEIGHT / 2 / this.zoom.current,
|
||||
}
|
||||
|
||||
this.sprite.moveTo(offset.x + this.last.x, offset.y + this.last.y);
|
||||
|
|
|
|||
|
|
@ -8,10 +8,11 @@ define([
|
|||
"Game/Client/View/Pixi/GameStats",
|
||||
"Game/Client/View/LayerManager",
|
||||
"Game/Client/View/Pixi/Layers/Ghost",
|
||||
"Game/Client/View/Pixi/Layers/Swiper"
|
||||
"Game/Client/View/Pixi/Layers/Swiper",
|
||||
"Game/Client/PointerLockManager"
|
||||
],
|
||||
|
||||
function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, LayerManager, Ghost, Swiper) {
|
||||
function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, LayerManager, Ghost, Swiper, PointerLockManager) {
|
||||
|
||||
"use strict";
|
||||
|
||||
|
|
@ -23,12 +24,16 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, Layer
|
|||
this.stage = null;
|
||||
this.container = null;
|
||||
this.infoContainer = null;
|
||||
this.infoFilters = [];
|
||||
this.loader = null;
|
||||
this.currentZoom = Settings.ZOOM_DEFAULT;
|
||||
this.clickToEnable = null;
|
||||
|
||||
this.init();
|
||||
|
||||
this.ncTokens = this.ncTokens.concat([
|
||||
Nc.on(Nc.ns.client.pointerLock.change, this.onPointerLockChange, this)
|
||||
]);
|
||||
|
||||
PIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST;
|
||||
}
|
||||
|
||||
|
|
@ -66,7 +71,9 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, Layer
|
|||
|
||||
this.initCanvas(this.renderer.view);
|
||||
|
||||
// Tab Overlay (not using layer manager)
|
||||
this.initPointerLockView();
|
||||
|
||||
// Tab Overlay (not using layer manager, cause of filters)
|
||||
this.gameStats = new GameStats(this.container);
|
||||
this.stage.addChild(this.gameStats.getInfoContainer());
|
||||
|
||||
|
|
@ -75,6 +82,8 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, Layer
|
|||
|
||||
this.swiperLayer = new Swiper();
|
||||
this.layerManager.insert(this.swiperLayer, false);
|
||||
|
||||
this.render();
|
||||
}
|
||||
|
||||
PixiView.prototype.render = function () {
|
||||
|
|
@ -85,32 +94,74 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, Layer
|
|||
this.renderer.render(this.stage);
|
||||
}
|
||||
|
||||
PixiView.prototype.initPointerLockView = function() {
|
||||
|
||||
var blurFilter = new PIXI.BlurFilter();
|
||||
blurFilter.blurX = 42 * this.currentZoom;
|
||||
blurFilter.blurY = 42 * this.currentZoom;
|
||||
|
||||
var pixelFilter = new PIXI.PixelateFilter();
|
||||
pixelFilter.pixelSize = 10 * this.currentZoom ;
|
||||
|
||||
var grayFilter = new PIXI.GrayFilter();
|
||||
grayFilter.gray = 0.99;
|
||||
this.pointerLockFilters = [pixelFilter, grayFilter];
|
||||
|
||||
this.clickToEnable = new PIXI.Text("Click to start playing.");
|
||||
this.clickToEnable.visible = false;
|
||||
this.stage.addChild(this.clickToEnable)
|
||||
};
|
||||
|
||||
PixiView.prototype.onPointerLockChange = function(isLocked, options) {
|
||||
if(isLocked) {
|
||||
this.container.filters = null;
|
||||
this.clickToEnable.visible = false;
|
||||
this.onZoomReset();
|
||||
} else {
|
||||
|
||||
if(!options || options.start !== true) {
|
||||
this.clickToEnable.setText("Click to continue playing.");
|
||||
}
|
||||
|
||||
this.clickToEnable.setStyle({
|
||||
font: "normal " + (14 * this.currentZoom) + "px 'Joystix'",
|
||||
fill: "#ffffff",
|
||||
stroke: "rgba(0,0,0,0.8)",
|
||||
strokeThickness: 6 * this.currentZoom
|
||||
});
|
||||
|
||||
this.container.filters = this.pointerLockFilters;
|
||||
this.pointerLockFilters.forEach(function(filter) { filter.dirty = true; });
|
||||
|
||||
this.clickToEnable.position = new PIXI.Point(Settings.STAGE_WIDTH / 2 - this.clickToEnable.width / 2, Settings.STAGE_HEIGHT / 2 - this.clickToEnable.height / 2)
|
||||
this.clickToEnable.visible = true;
|
||||
|
||||
this.onZoomReset();
|
||||
this.currentZoom *= 0.9;
|
||||
}
|
||||
};
|
||||
|
||||
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;
|
||||
var centerPosition = {x: target.x, y: target.y};
|
||||
centerPosition.x *= Settings.RATIO * -1;
|
||||
centerPosition.y *= Settings.RATIO * -1;
|
||||
|
||||
var lookAt = this.me.getLookAt();
|
||||
centerPosition.x -= lookAt.x * Settings.STAGE_WIDTH / 4;
|
||||
centerPosition.y += lookAt.y * Settings.STAGE_HEIGHT / 4;
|
||||
centerPosition.x -= lookAt.x * 600 / 4;
|
||||
centerPosition.y += lookAt.y * 400 / 4;
|
||||
|
||||
return centerPosition;
|
||||
};
|
||||
|
||||
PixiView.prototype.onFullscreenChange = function(isFullScreen) {
|
||||
Parent.prototype.onFullscreenChange.call(this, isFullScreen);
|
||||
PixiView.prototype.onDisplaySizeChange = function(isFullScreen) {
|
||||
Parent.prototype.onDisplaySizeChange.call(this, isFullScreen);
|
||||
|
||||
if(isFullScreen) {
|
||||
this.renderer.resize(window.innerWidth, window.innerHeight);
|
||||
this.currentZoom = window.innerWidth / 600;
|
||||
} else {
|
||||
this.renderer.resize(600, 400);
|
||||
this.currentZoom = 1;
|
||||
}
|
||||
this.renderer.resize(window.innerWidth, window.innerHeight);
|
||||
this.currentZoom = window.innerWidth / 600;
|
||||
|
||||
PointerLockManager.update(null, {}); // only to reposition clickToEnable text
|
||||
};
|
||||
|
||||
PixiView.prototype.initLoader = function() {
|
||||
|
|
@ -150,20 +201,19 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, Layer
|
|||
};
|
||||
|
||||
PixiView.prototype.onZoomIn = function() {
|
||||
console.log("onZoomIn")
|
||||
if(this.currentZoom + Settings.ZOOM_FACTOR <= Settings.ZOOM_MAX) {
|
||||
this.currentZoom += Settings.ZOOM_FACTOR;
|
||||
}
|
||||
};
|
||||
|
||||
PixiView.prototype.onZoomOut = function() {
|
||||
if(this.currentZoom - Settings.ZOOM_FACTOR > 0) {
|
||||
//if(this.currentZoom - Settings.ZOOM_FACTOR > window.innerWidth / 600) {
|
||||
this.currentZoom -= Settings.ZOOM_FACTOR;
|
||||
}
|
||||
};
|
||||
//}
|
||||
};
|
||||
|
||||
PixiView.prototype.onZoomReset = function() {
|
||||
this.currentZoom = Settings.ZOOM_DEFAULT;
|
||||
this.currentZoom = window.innerWidth / 600;
|
||||
};
|
||||
|
||||
PixiView.prototype.getTexturesFromFrame = function(textureNames) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue