mirror of
https://github.com/logsol/chuck.js.git
synced 2026-05-11 10:37:34 +00:00
moved some classes, added layer manager
This commit is contained in:
logsol
parent
1d3ad16a07
commit
b5c70687d8
11 changed files with 292 additions and 177 deletions
89
app/Game/Client/View/Pixi/ColorRangeReplaceFilter.js
Normal file
89
app/Game/Client/View/Pixi/ColorRangeReplaceFilter.js
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
define([
|
||||
"Lib/Vendor/Pixi"
|
||||
],
|
||||
|
||||
function (PIXI) {
|
||||
|
||||
var Parent = PIXI.AbstractFilter;
|
||||
|
||||
function ColorRangeReplaceFilter() {
|
||||
Parent.call(this);
|
||||
|
||||
this.passes = [this];
|
||||
|
||||
// set the uniforms
|
||||
|
||||
this.uniforms = {
|
||||
minColor: {type: '3fv', value: [0,0,0]},
|
||||
maxColor: {type: '3fv', value: [0,0,0]},
|
||||
newColor: {type: '3fv', value: [0,0,0]},
|
||||
brightnessOffset: {type: '1f', value: 0}
|
||||
};
|
||||
|
||||
this.fragmentSrc = [
|
||||
'precision mediump float;',
|
||||
'varying vec2 vTextureCoord;',
|
||||
'varying vec4 vColor;',
|
||||
'uniform sampler2D uSampler;',
|
||||
'uniform vec3 minColor;',
|
||||
'uniform vec3 maxColor;',
|
||||
'uniform vec3 newColor;',
|
||||
'uniform float brightnessOffset;',
|
||||
|
||||
'void main(void) {',
|
||||
' vec4 pixel = texture2D(uSampler, vTextureCoord);',
|
||||
' if(pixel.x >= minColor.x && pixel.y >= minColor.y && pixel.z >= minColor.z',
|
||||
' && pixel.w == 1.0',
|
||||
' && pixel.x <= maxColor.x && pixel.y <= maxColor.y && pixel.z <= maxColor.z) {',
|
||||
|
||||
' pixel.rgb = mix(pixel.rgb, vec3(0.2126*pixel.r + 0.7152*pixel.g + 0.0722*pixel.b), 1.0);', // desaturate to gray
|
||||
' pixel.rgb += brightnessOffset;',
|
||||
' pixel.rgb *= newColor;',
|
||||
' }',
|
||||
' gl_FragColor = pixel;',
|
||||
'}'
|
||||
];
|
||||
}
|
||||
|
||||
ColorRangeReplaceFilter.prototype = Object.create(Parent.prototype);
|
||||
ColorRangeReplaceFilter.prototype.constructor = ColorRangeReplaceFilter;
|
||||
|
||||
|
||||
Object.defineProperty(ColorRangeReplaceFilter.prototype, 'minColor', {
|
||||
get: function() {
|
||||
return PIXI.rgb2hex(this.uniforms.minColor.value);
|
||||
},
|
||||
set: function(value) {
|
||||
this.uniforms.minColor.value = PIXI.hex2rgb(value);
|
||||
}
|
||||
});
|
||||
|
||||
Object.defineProperty(ColorRangeReplaceFilter.prototype, 'maxColor', {
|
||||
get: function() {
|
||||
return PIXI.rgb2hex(this.uniforms.maxColor.value);
|
||||
},
|
||||
set: function(value) {
|
||||
this.uniforms.maxColor.value = PIXI.hex2rgb(value);
|
||||
}
|
||||
});
|
||||
|
||||
Object.defineProperty(ColorRangeReplaceFilter.prototype, 'newColor', {
|
||||
get: function() {
|
||||
return PIXI.rgb2hex(this.uniforms.newColor.value);
|
||||
},
|
||||
set: function(value) {
|
||||
this.uniforms.newColor.value = PIXI.hex2rgb(value);
|
||||
}
|
||||
});
|
||||
|
||||
Object.defineProperty(ColorRangeReplaceFilter.prototype, 'brightnessOffset', {
|
||||
get: function() {
|
||||
return this.uniforms.brightnessOffset.value;
|
||||
},
|
||||
set: function(value) {
|
||||
this.uniforms.brightnessOffset.value = value;
|
||||
}
|
||||
});
|
||||
|
||||
return ColorRangeReplaceFilter;
|
||||
});
|
||||
130
app/Game/Client/View/Pixi/GameStats.js
Normal file
130
app/Game/Client/View/Pixi/GameStats.js
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
define([
|
||||
"Lib/Vendor/Pixi",
|
||||
"Lib/Utilities/NotificationCenter",
|
||||
"Game/Config/Settings",
|
||||
"Lib/Utilities/ColorConverter"
|
||||
],
|
||||
|
||||
function (PIXI, Nc, Settings, ColorConverter) {
|
||||
|
||||
function GameStats(container) {
|
||||
|
||||
this.style = {
|
||||
borderWidth: 3,
|
||||
padding: 20,
|
||||
colors: {
|
||||
background: 0x000000,
|
||||
text: "red",
|
||||
border: 0xAA0000
|
||||
}
|
||||
};
|
||||
|
||||
this.container = container;
|
||||
|
||||
this.infoContainer = new PIXI.DisplayObjectContainer();
|
||||
|
||||
var blurFilter = new PIXI.BlurFilter();
|
||||
blurFilter.blurX = 12;
|
||||
blurFilter.blurY = 12;
|
||||
var grayFilter = new PIXI.GrayFilter();
|
||||
grayFilter.gray = 0.85;
|
||||
this.infoFilters = [blurFilter, grayFilter];
|
||||
|
||||
this.infoText = new PIXI.Text("", {font: "normal 20px monospace", fill: this.style.colors.text, align: "center"});
|
||||
this.infoBox = new PIXI.Graphics();
|
||||
this.infoBox.alpha = 0.7;
|
||||
|
||||
this.infoContainer.addChild(this.infoBox);
|
||||
this.infoContainer.addChild(this.infoText);
|
||||
|
||||
this.infoContainer.visible = false;
|
||||
|
||||
Nc.on(Nc.ns.client.view.gameStats.toggle, this.toggle, this);
|
||||
}
|
||||
|
||||
GameStats.prototype.getInfoContainer = function() {
|
||||
return this.infoContainer;
|
||||
};
|
||||
|
||||
GameStats.prototype.toggle = function(show, sortedPlayers) {
|
||||
|
||||
function pad(string, max, alignLeft) {
|
||||
string = string.substring(0, max - 1);
|
||||
|
||||
var spaces = new Array( max - string.length + 1 ).join(" ");
|
||||
if(alignLeft) {
|
||||
return string + spaces;
|
||||
} else {
|
||||
return spaces + string;
|
||||
}
|
||||
}
|
||||
|
||||
var string = "" +
|
||||
pad("#", 2, false) + " " +
|
||||
pad("Name", 12, true) +
|
||||
pad("Score", 6, false) +
|
||||
pad("Deaths", 7, false) +
|
||||
pad("Health", 7, false) +
|
||||
"\n-----------------------------------\n";
|
||||
|
||||
var lines = [];
|
||||
sortedPlayers.forEach(function(player, i) {
|
||||
var name = player.getNickname();
|
||||
lines.push(
|
||||
pad("" + (i + 1) + ".", 2, false) + " " +
|
||||
pad(name, 12, true) +
|
||||
pad("" + player.stats.score, 6, false) +
|
||||
pad("" + player.stats.deaths, 7, false) +
|
||||
pad("" + parseInt(player.stats.health, 10), 7, false)
|
||||
);
|
||||
}, this);
|
||||
|
||||
string += lines.join("\n");
|
||||
|
||||
|
||||
if(show) {
|
||||
this.infoText.setText(string);
|
||||
this.infoText.updateText();
|
||||
this.infoText.dirty = false;
|
||||
|
||||
var x = Settings.STAGE_WIDTH / 2 - this.infoText.width / 2,
|
||||
y = Settings.STAGE_HEIGHT / 2 - this.infoText.height / 2;
|
||||
this.infoText.position = new PIXI.Point(x, y);
|
||||
|
||||
this.infoBox.clear();
|
||||
this.infoBox.beginFill(this.style.colors.background);
|
||||
this.infoBox.lineStyle(this.style.borderWidth, this.style.colors.border);
|
||||
this.infoBox.drawRect(0, 0, this.infoText.width - this.style.borderWidth + 2 * this.style.padding * 2, this.infoText.height - this.style.borderWidth + 2 * this.style.padding);
|
||||
this.infoBox.endFill();
|
||||
this.infoBox.position.x = this.infoText.position.x + this.style.borderWidth/2 - this.style.padding * 2;
|
||||
this.infoBox.position.y = this.infoText.position.y + this.style.borderWidth/2 - this.style.padding;
|
||||
|
||||
this.infoContainer.visible = true;
|
||||
this.container.filters = this.infoFilters;
|
||||
this.infoFilters.forEach(function(filter) { filter.dirty = true; });
|
||||
|
||||
this.drawPlayerColors(sortedPlayers);
|
||||
|
||||
} else {
|
||||
this.infoText.setText("...");
|
||||
this.infoContainer.visible = false;
|
||||
this.container.filters = null;
|
||||
}
|
||||
}
|
||||
|
||||
GameStats.prototype.drawPlayerColors = function(sortedPlayers) {
|
||||
var converter = new ColorConverter();
|
||||
|
||||
sortedPlayers.forEach(function(player, i) {
|
||||
|
||||
this.infoBox.beginFill(converter.getColorByName(player.getNickname()));
|
||||
this.infoBox.lineStyle();
|
||||
this.infoBox.drawRect(this.style.padding, i * 21 + this.style.padding + 42, 16, 16);
|
||||
this.infoBox.endFill();
|
||||
|
||||
}, this);
|
||||
};
|
||||
|
||||
return GameStats;
|
||||
|
||||
});
|
||||
147
app/Game/Client/View/Pixi/Layer.js
Normal file
147
app/Game/Client/View/Pixi/Layer.js
Normal file
|
|
@ -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;
|
||||
});
|
||||
|
||||
297
app/Game/Client/View/Pixi/View.js
Executable file
297
app/Game/Client/View/Pixi/View.js
Executable file
|
|
@ -0,0 +1,297 @@
|
|||
define([
|
||||
"Game/Client/View/Abstract/View",
|
||||
"Game/Client/View/DomController",
|
||||
"Lib/Vendor/Pixi",
|
||||
"Game/Client/View/Pixi/ColorRangeReplaceFilter",
|
||||
"Game/Config/Settings",
|
||||
"Lib/Utilities/NotificationCenter",
|
||||
"Lib/Utilities/Exception",
|
||||
"Game/Client/View/Pixi/GameStats",
|
||||
"Game/Client/View/Pixi/Layer"
|
||||
],
|
||||
|
||||
function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Exception, GameStats, Layer) {
|
||||
|
||||
var AVAILABLE_MESH_FILTERS = {
|
||||
"blur": PIXI.BlurFilter,
|
||||
"desaturate": PIXI.GrayFilter,
|
||||
"pixelate": PIXI.PixelateFilter,
|
||||
"colorRangeReplace": ColorRangeReplaceFilter,
|
||||
};
|
||||
|
||||
function PixiView () {
|
||||
|
||||
Parent.call(this);
|
||||
|
||||
this.movableObjects = [];
|
||||
this.stage = null;
|
||||
this.container = null;
|
||||
this.infoContainer = null;
|
||||
this.infoFilters = [];
|
||||
this.infoBox = null;
|
||||
this.loader = null;
|
||||
this.init();
|
||||
this.pixi = PIXI;
|
||||
this.currentZoom = Settings.ZOOM_DEFAULT;
|
||||
this.layers = [];
|
||||
|
||||
PIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST;
|
||||
}
|
||||
|
||||
PixiView.prototype = Object.create(Parent.prototype);
|
||||
|
||||
PixiView.prototype.init = function () {
|
||||
|
||||
var transparent = false;
|
||||
var antialias = true;
|
||||
var canvas = DomController.getCanvas();
|
||||
|
||||
if(Settings.USE_WEBGL) {
|
||||
this.renderer = new PIXI.WebGLRenderer(Settings.STAGE_WIDTH, Settings.STAGE_HEIGHT, canvas, transparent, antialias);
|
||||
console.log('WebGLRenderer')
|
||||
} else {
|
||||
this.renderer = new PIXI.CanvasRenderer(Settings.STAGE_WIDTH, Settings.STAGE_HEIGHT, canvas, transparent, antialias);
|
||||
console.log('CanvasRenderer - not using WebGL!')
|
||||
}
|
||||
|
||||
this.stage = new PIXI.Stage(0x333333);
|
||||
|
||||
this.initCamera();
|
||||
this.initLoader();
|
||||
|
||||
this.initCanvas(this.renderer.view);
|
||||
|
||||
this.gameStats = new GameStats(this.container);
|
||||
this.stage.addChild(this.gameStats.getInfoContainer());
|
||||
}
|
||||
|
||||
PixiView.prototype.render = function () {
|
||||
if(this.me) {
|
||||
var pos = this.calculateCameraPosition();
|
||||
this.setCameraPosition(pos.x, pos.y);
|
||||
}
|
||||
|
||||
this.renderer.render(this.stage);
|
||||
}
|
||||
|
||||
// Camera
|
||||
|
||||
PixiView.prototype.initCamera = function () {
|
||||
this.container = new PIXI.DisplayObjectContainer();
|
||||
this.stage.addChild(this.container);
|
||||
}
|
||||
|
||||
PixiView.prototype.calculateCameraPosition = function() {
|
||||
var targetZoom = this.currentZoom;
|
||||
|
||||
var oldZoom = (this.container.scale.x + this.container.scale.y) / 2;
|
||||
var newZoom = (targetZoom -oldZoom) * Settings.CAMERA_GLIDE / 100;
|
||||
|
||||
this.container.scale.x += newZoom;
|
||||
this.container.scale.y += newZoom;
|
||||
|
||||
var target = this.me.getHeadPosition();
|
||||
target.x *= -Settings.RATIO * targetZoom;
|
||||
target.y *= -Settings.RATIO * targetZoom;
|
||||
|
||||
target.x -= this.me.playerController.xyInput.x * Settings.STAGE_WIDTH / 4;
|
||||
target.y += this.me.playerController.xyInput.y * Settings.STAGE_HEIGHT / 4;
|
||||
|
||||
var pos = this.getCameraPosition();
|
||||
|
||||
pos.x += (target.x -pos.x) * Settings.CAMERA_GLIDE / 100;
|
||||
pos.y += (target.y -pos.y) * Settings.CAMERA_GLIDE / 100;
|
||||
|
||||
return pos;
|
||||
};
|
||||
|
||||
PixiView.prototype.setCameraPosition = function (x, y) {
|
||||
if(!this.debugMode) {
|
||||
this.container.position.x = x + Settings.STAGE_WIDTH / 2;
|
||||
this.container.position.y = y + Settings.STAGE_HEIGHT / 2;
|
||||
}
|
||||
};
|
||||
|
||||
PixiView.prototype.getCameraPosition = function () {
|
||||
var pos = this.container.position;
|
||||
|
||||
pos.x = pos.x - Settings.STAGE_WIDTH / 2;
|
||||
pos.y = pos.y - Settings.STAGE_HEIGHT / 2;
|
||||
|
||||
return pos;
|
||||
};
|
||||
|
||||
PixiView.prototype.setCameraZoom = function (zoom) {
|
||||
/*
|
||||
var oldZoom = this.container.scale.x;
|
||||
|
||||
this.container.scale.x += (zoom -oldZoom) * Settings.CAMERA_GLIDE / 100;
|
||||
this.container.scale.y += (zoom -oldZoom) * Settings.CAMERA_GLIDE / 100;
|
||||
*/
|
||||
};
|
||||
|
||||
PixiView.prototype.onFullscreenChange = function(isFullScreen) {
|
||||
Parent.prototype.onFullscreenChange.call(this, isFullScreen);
|
||||
|
||||
if(isFullScreen) {
|
||||
this.renderer.resize(window.innerWidth, window.innerHeight);
|
||||
this.currentZoom = window.innerWidth / 600;
|
||||
console.log(this.currentZoom);
|
||||
} else {
|
||||
this.renderer.resize(600, 400);
|
||||
this.currentZoom = 1;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Player Info
|
||||
|
||||
PixiView.prototype.onCreateAndAddPlayerInfo = function(callback, options) {
|
||||
var playerInfo = new PIXI.Graphics();
|
||||
this.container.addChild(playerInfo);
|
||||
|
||||
this.onUpdatePlayerInfo(playerInfo, options);
|
||||
|
||||
callback(playerInfo);
|
||||
};
|
||||
|
||||
PixiView.prototype.onUpdatePlayerInfo = function(playerInfo, options) {
|
||||
var width = 14,
|
||||
height = 2,
|
||||
borderWidth = 1,
|
||||
offsetX = -8,
|
||||
offsetY = -52;
|
||||
|
||||
if(typeof options.healthFactor != 'undefined') {
|
||||
playerInfo.clear();
|
||||
|
||||
playerInfo.beginFill(0x000000);
|
||||
playerInfo.lineStyle(borderWidth, 0x000000);
|
||||
playerInfo.drawRect(0, 0, width, height);
|
||||
playerInfo.endFill();
|
||||
|
||||
if(options.healthFactor > 0) {
|
||||
var color = 0x00FF00;
|
||||
if(options.healthFactor < 0.30) color = 0xFF0000;
|
||||
playerInfo.beginFill(color);
|
||||
playerInfo.lineStyle(0, 0x000000);
|
||||
playerInfo.drawRect(borderWidth, borderWidth, width * options.healthFactor, height);
|
||||
playerInfo.endFill();
|
||||
}
|
||||
}
|
||||
|
||||
if (options.x && options.y) playerInfo.position = new PIXI.Point(offsetX + options.x, offsetY + options.y);
|
||||
if (options.visible === true || options.visible === false) playerInfo.visible = options.visible;
|
||||
};
|
||||
|
||||
PixiView.prototype.onRemovePlayerInfo = function(playerInfo) {
|
||||
this.container.removeChild(playerInfo);
|
||||
};
|
||||
|
||||
|
||||
PixiView.prototype.onCreateAndAddPlayerArrow = function(callback, options) {
|
||||
var arrow = new PIXI.Graphics();
|
||||
arrow.visible = false;
|
||||
this.container.addChild(arrow);
|
||||
|
||||
var width = 12,
|
||||
height = 12;
|
||||
|
||||
arrow.beginFill(0xffffff, 0.1);
|
||||
arrow.lineStyle(0, 0x000000);
|
||||
arrow.moveTo(0, 0);
|
||||
arrow.lineTo(width, 0);
|
||||
arrow.lineTo(width / 2, height);
|
||||
arrow.endFill();
|
||||
arrow.pivot = new PIXI.Point(width/2, height/2);
|
||||
arrow.visible = true;
|
||||
|
||||
this.onUpdatePlayerArrow(arrow, options);
|
||||
|
||||
callback(arrow);
|
||||
};
|
||||
|
||||
PixiView.prototype.onUpdatePlayerArrow = function(arrow, options) {
|
||||
|
||||
var offsetX = 0,
|
||||
offsetY = -60,
|
||||
x = offsetX + options.x,
|
||||
y = offsetY + options.y;
|
||||
|
||||
var target = new PIXI.Point(x, y);
|
||||
|
||||
arrow.position.x += (target.x -arrow.position.x) * Settings.ARROW_GLIDE / 1.5 / 100;
|
||||
arrow.position.y += (target.y -arrow.position.y) * Settings.ARROW_GLIDE / 100;
|
||||
|
||||
var angle = -Math.atan2(arrow.position.x - x, arrow.position.y - options.y);
|
||||
angle += 0.785398163 * 4;
|
||||
|
||||
arrow.rotation = angle;
|
||||
};
|
||||
|
||||
PixiView.prototype.initLoader = function() {
|
||||
this.loader = new PIXI.Graphics();
|
||||
this.stage.addChild(this.loader);
|
||||
this.onUpdateLoader(0);
|
||||
};
|
||||
|
||||
PixiView.prototype.onUpdateLoader = function(progress) {
|
||||
var width = 200,
|
||||
height = 5,
|
||||
borderWidth = 1;
|
||||
|
||||
if(progress < 100) {
|
||||
this.loader.clear();
|
||||
|
||||
this.loader.beginFill(0x000000);
|
||||
this.loader.lineStyle(borderWidth, 0x000000);
|
||||
this.loader.drawRect(0, 0, width, height);
|
||||
this.loader.endFill();
|
||||
|
||||
if(progress > 0) {
|
||||
var color = 0xFF0FA3;
|
||||
this.loader.beginFill(color);
|
||||
this.loader.lineStyle(0, 0x000000);
|
||||
this.loader.drawRect(borderWidth, borderWidth, width * progress / 100, height);
|
||||
this.loader.endFill();
|
||||
}
|
||||
|
||||
this.loader.position = new PIXI.Point(
|
||||
Settings.STAGE_WIDTH / 2 - width / 2 - borderWidth,
|
||||
Settings.STAGE_HEIGHT / 2 - height / 2 - borderWidth
|
||||
);
|
||||
}
|
||||
|
||||
this.loader.visible = progress < 100;
|
||||
};
|
||||
|
||||
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) {
|
||||
this.currentZoom -= Settings.ZOOM_FACTOR;
|
||||
}
|
||||
};
|
||||
|
||||
PixiView.prototype.onZoomReset = function() {
|
||||
this.currentZoom = Settings.ZOOM_DEFAULT;
|
||||
};
|
||||
|
||||
PixiView.prototype.destroy = function() {
|
||||
|
||||
for (var i = 0; i < this.stage.children.length; i++) {
|
||||
this.stage.removeChild(this.stage.children[i]);
|
||||
}
|
||||
|
||||
this.renderer.render(this.stage);
|
||||
|
||||
Parent.prototype.destroy.call(this);
|
||||
};
|
||||
|
||||
return PixiView;
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue