geoffrey/agario-webclient
geoffrey/agario-webclient
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Fluid animations

Browse source
This commit is contained in:
Geoffrey Frogeye 2015-06-05 17:41:07 +02:00
parent 48397199c5
commit 2aa8ec685a
1 changed files with 85 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
script.js
View file

@ -1,16 +1,5 @@
function AnimatedValue(object, name, value, timeout) { function AnimatedValue(value) {
this.overwrite(value); this.write(value);
this.timeout = timeout;
var _this = this;
Object.defineProperty(object, name, {
get: function() {
return _this.get();
},
set: function(x) {
return _this.set(x);
}
});
object[name + 'handler'] = this;
} }
AnimatedValue.prototype = { AnimatedValue.prototype = {
@ -23,17 +12,19 @@ AnimatedValue.prototype = {
return this.toVal - (this.toVal - this.frVal) * (end - now) / this.timeout; return this.toVal - (this.toVal - this.frVal) * (end - now) / this.timeout;
} }
}, },
set: function(value) { set: function (value, timeout) {
if (value != this.toVal) { if (value != this.toVal) {
this.timeout = timeout;
this.frVal = this.get(); this.frVal = this.get();
this.toVal = value; this.toVal = value;
this.frTime = performance.now(); this.frTime = performance.now();
} }
}, },
overwrite: function(value) { write: function (value) {
this.frVal = value; this.frVal = value;
this.toVal = value; this.toVal = value;
this.frTime = performance.now() - this.timeout; // so end == now this.timeout = 0;
this.frTime = performance.now(); // so end == now
} }
}; };
@ -42,39 +33,35 @@ function BallView(main, ball) {
this.ball = ball; this.ball = ball;
this.graphic = new PIXI.Graphics(); this.graphic = new PIXI.Graphics();
new AnimatedValue(this, 'x', 0, 100); this.x = new AnimatedValue(0);
new AnimatedValue(this, 'y', 0, 100); this.y = new AnimatedValue(0);
new AnimatedValue(this, 's', 0, 100); this.s = new AnimatedValue(0);
var _this = this; var _this = this;
// console.log(_this.ball.id, 'NEW');
this.appear(); this.appear();
this.ball.on('appear', function () { this.ball.on('appear', function () {
_this.appear(); _this.appear();
}); });
this.ball.on('destroy', function () { this.ball.on('destroy', function () {
// console.log(_this.ball.id, 'DES');
_this.main.stage.removeChild(_this.graphic); _this.main.stage.removeChild(_this.graphic);
}); });
this.ball.on('disappear', function () { this.ball.on('disappear', function () {
// console.log(_this.ball.id, 'DIS');
_this.main.stage.removeChild(_this.graphic); _this.main.stage.removeChild(_this.graphic);
}); });
this.ball.on('move', function () { this.ball.on('move', function () {
_this.x = _this.ball.x; _this.x.set(_this.ball.x, 100);
_this.y = _this.ball.y; _this.y.set(_this.ball.y, 100);
}); });
this.ball.on('resize', function () { this.ball.on('resize', function () {
_this.s = _this.ball.size; _this.s.set(_this.ball.size, 100);
}); });
} }
BallView.prototype = { BallView.prototype = {
appear: function () { appear: function () {
// console.log(this.ball.id, 'APP'); this.x.write(this.ball.x);
this.x = this.ball.x; this.y.write(this.ball.y);
this.y = this.ball.y; this.s.write(this.ball.size);
this.s = this.ball.size;
this.shape(); this.shape();
this.main.stage.addChild(this.graphic); this.main.stage.addChild(this.graphic);
}, },
@ -86,9 +73,9 @@ BallView.prototype = {
this.graphic.endFill(); this.graphic.endFill();
}, },
render: function () { render: function () {
this.graphic.position.x = this.x; this.graphic.position.x = this.x.get();
this.graphic.position.y = this.y; this.graphic.position.y = this.y.get();
this.graphic.scale.x = this.graphic.scale.y = this.s; this.graphic.scale.x = this.graphic.scale.y = this.s.get();
} }
}; };
@ -134,21 +121,23 @@ Viewer.prototype = {
}, },
initStage: function () { initStage: function () {
this.stage = new PIXI.Container(); this.stage = new PIXI.Container();
this.cam = {}; this.cam = {
new AnimatedValue(this.cam, 'x', this.gameWidth / 2, 100); x: new AnimatedValue(this.gameWidth / 2),
new AnimatedValue(this.cam, 'y', this.gameHeight / 2, 100); y: new AnimatedValue(this.gameHeight / 2),
new AnimatedValue(this.cam, 's', 0.5 / 2, 100); s: new AnimatedValue(0.5)
};
}, },
addListners: function () { addListners: function () {
var _this = this; var _this = this;
this.client.on('ballAppear', function (id) { this.client.on('ballAppear', function (id) {
if (!_this.balls[id]) { if (!_this.balls[id]) {
_this.balls[id] = new BallView(_this, this.balls[id]); _this.balls[id] = new BallView(_this, this.balls[id]);
} else {
} }
}); });
this.client.on('ballDestroy', function(id) { // this.client.on('ballDestroy', function(id) {
delete this.balls[id]; // delete this.balls[id];
}); // });
}, },
addBorders: function () { addBorders: function () {
this.borders = new PIXI.Graphics(); this.borders = new PIXI.Graphics();
@ -174,9 +163,9 @@ Viewer.prototype = {
p += ball.size; p += ball.size;
} }
if (p > 0) { // if we have visible ball(s) if (p > 0) { // if we have visible ball(s)
this.cam.x = x / p; this.cam.x.set(x / p, 100);
this.cam.y = y / p; this.cam.y.set(y / p, 100);
this.cam.s = 0.04 * this.width / p; // Scale this.cam.s.set(0.04 * this.width / p, 500); // Scale
// TODO Better scale calculation // TODO Better scale calculation
} // else: don't move the camera } // else: don't move the camera
}, },
@ -192,9 +181,9 @@ Viewer.prototype = {
this.stats.begin(); this.stats.begin();
this.render(); this.render();
this.posCamera(); this.posCamera();
this.stage.scale.x = this.stage.scale.y = this.cam.s; this.stage.scale.x = this.stage.scale.y = this.cam.s.get();
this.stage.position.x = -this.cam.x * this.stage.scale.x + this.width / 2; this.stage.position.x = -this.cam.x.get() * this.stage.scale.x + this.width / 2;
this.stage.position.y = -this.cam.y * this.stage.scale.y + this.height / 2; this.stage.position.y = -this.cam.y.get() * this.stage.scale.y + this.height / 2;
this.renderer.render(this.stage); this.renderer.render(this.stage);
this.stats.end(); this.stats.end();
this.emit('animate'); this.emit('animate');
@ -241,13 +230,13 @@ function Pointer(viewer) {
Pointer.prototype = { Pointer.prototype = {
move: function () { move: function () {
this.client.moveTo(this.viewer.cam.x + this.dest.x, this.viewer.cam.y + this.dest.y); this.client.moveTo(this.viewer.cam.x.get() + this.dest.x, this.viewer.cam.y.get() + this.dest.y);
}, },
pointermove: function (e) { pointermove: function (e) {
var gamePos = e.data.getLocalPosition(this.viewer.stage); var gamePos = e.data.getLocalPosition(this.viewer.stage);
this.dest = { // TODO deadzone this.dest = { // TODO deadzone
x: gamePos.x - this.viewer.cam.x, x: gamePos.x - this.viewer.cam.x.get(),
y: gamePos.y - this.viewer.cam.y y: gamePos.y - this.viewer.cam.y.get()
}; };
this.move(); this.move();
} }