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