is it possible to create tweens sequence in KineticJS according to data saved in array without recursion?
This is my current solution including recursion:
function tweenFunc( image )
{
setGlobalCoordinates();
tween = new Kinetic.Tween({
node: image,
duration: 1,
x: x,
y: y,
rotation: rot,
onFinish: function(){
if ( counter++ < arr.length )
{
tweenFunc( image );
}
}
});
tween.play();
}
I would like to have solution which creates tweens before first animation and following tweens start from final position of predecessor.
This project includes animation of 4 images in the same time for many position sequence.
Related
Hey I want to draw a circle with phaser v2.3.0 and reduce it uniformly by applying tween on it.
It should look like this. But starting from a full circle perimeter(kind of hollow disk with some thickness at the perimeter) and reduce its perimeter uniformly withing 5 second.
You can take help with this example
As I am new to phaser so I am able to understand it or if you can give me simple example or solution, it would be better.
Thanks in advance
I got the answer
var GameState = {
update: function () {
this.graphics.clear();
this.graphics.lineStyle(6, 0xffffff);
this.graphics.arc(40, 90, 20, 0,
game.math.degToRad(this.angle.max), true, 128);
this.graphics.endFill();
}
create: function () {
this.graphics = game.add.graphics(0, 0);
this.world.bringToTop(this.graphics)
this.angle = { min: 0, max: 0 };
this.roundArcTween = this.add.tween(this.angle).to({ max: 360 }, 5000);
}
}
I'm currently using Phaser 3 to represent my server's state.
Every x amount of time, I am sent the server's game state, this is what the client looks like:
var t1 = Date.now();
var serverUpdateDelta = 0;
Client.socket.on('usersPool', usersPool => {
// usersPool is an object containing all the user data of sockets connected on the server. Looks something like this:
/*
usersPool = {
"user1234": { x: 0, y: 0, direction: "right", moving: true },
"testuser": { x: 200, y: 250, direction: "down", moving: false }
}
*/
// keeping count of milliseconds between updates (usually around 500m)
serverUpdateDelta = Date.now() - t1;
// for every user connected on the server...
for(id in usersPool) {
let data = usersPool[id]; // this is the user's data
if(/* the player exists as a sprite in the game...*/) {
// THIS IS WHERE THE MAGIC SHOULD HAPPEN
} else {
genSprite(player);
}
}
});
The player's data contains a movementQueue, which is just an array of coordinates the user has been at. It might look a little like this:
[
{ x: 0, y: 0, direction: 'down', moving: false },
{ x: 5, y: 0, direction: 'right', moving: true },
{ x: 6, y: 0, direction: 'right', moving: false }
]
This is calculated on the server, but each movementStack (item in the movementQueue`) is generated every 25 milliseconds or so on the server.
The job now is, when receiving this movementQueue, to interpolate the values and move the sprite accordingly...
Attempt 1
I first tried making a function which would interpolate once the update was received, like so:
// THIS IS WHERE THE MAGIC SHOULD HAPPEN
// user's state on the client is set to an interpolated version of the one on the server
player.movementQueue = buffer(data.movementQueue);
The buffer will simply generate an interpolated array based on the serverUpdateDelta and game.loop.actualFps
then, in the Game.update function I ran the following:
for(id in spawnedPlayers) {
// this will remove the first movementStack from the queue and returns in
movementStack = spawnedPlayers[id].movementQueue.shift();
// we then take this movementStack and update the user to that position (and play the walking animation)
spawnedPlayers[id].update(movementStack);
}
So every game loop, we would remove a stack from the queue and set the user to it.
This did NOT work. The game loop seemed to run Way more times than there were frames in the queue, making the player look like they were moving a small distance very slowly...*:
player.movementQueue = player.movementQueue.concat(buffer(data.movementQueue));
But then something weird happened, where the game loop could not keep up with the movementQueue and the player would move extremely slowly...
Attempt 2
I then tried using tweens which would be really easy to implement, simply run:
// THIS IS WHERE THE MAGIC SHOULD HAPPEN
_this.tweens.timeline({
targets: player.sprite,
tweens: data.movementQueue, // [{x, y}, {x, y}, {x, y}]
duration: serverDeltaTime/movementQueue.length, // duration between each tween in ms
});
This worked ALMOST perfectly, except for one small detail:
Before, we would run a method for the player on each movementStack: player.update(movementStack), this method would take the direction of the user and animate the sprite accordingly. Now we have no way of doing this...
SO
What methods or techniques could I use? What am I missing? What could I implement? I ask this because I'm stuck at this point.
Thank you in advance for the help.
I am developing an application to show a property and its elements such as walls, doors, etc. I need to control camera to zoom to specific objects on the scene. However, I need to move camera slowly between objects and not quick movement. I have an example here:
http://interactivebuildings.planning.nsw.gov.au/planning-residential
In this example, when you click an object from the list, camera flies to that object.
How can I do a fly in Three.js?
Thanks.
Its called tweening.
There are a few tweening libraries for JS.
My preferred tweening library is TweenLite or TweenMax by Greensock
To do what I think you want, you would just tween the properties of the camera in your scene.
This what I have used. Works very well using tween.js http://www.createjs.com/#!/TweenJS.
function test () {
var position = {X: 200, Y: 200, Z: 200, lookX: 0, lookY: 0, lookZ: 0};
tween = new TWEEN.Tween(position).to({X: 0, Y: 300, Z: 0, lookX: 0, lookY: 0, lookZ: 0}, 2000);
tween.easing(TWEEN.Easing.Circular.InOut);
tween.onUpdate(function(){
camera.position.set(position.X,position.Y,position.Z);
camera.lookAt( {x:position.lookX, y:position.lookY, z:position.lookZ } );
});
tween.start();
}
test();
animate();
TWEEN.update(time);
I'm trying to use Transform.multiply4x4() to move a surface modifier but it doesn't seem to work as expect. I am trying to rotate a surface almost flat and then send it off into the distance.
My code looks like this
myModifier.setTransform(
Transform.multiply4x4(
Transform.rotateX(1.4), //rotate at the same time by 1.4 radians on the x axis
Transform.scale(0, 0, 1) //send back into the distance
),
{duration: 600}
);
However the only thing that happens is that the surface that is attached to the modifier just gets pushed back into the distance there is no rotation on the X axis. Am I using the multiplyx4x method wrong ?
I am not trying to stagger the effects I am actually trying to do them at the same time.
You may want to chain your modifiers instead.
See this example jsBin
var myRotateModifier = new Modifier({
origin: [0.5, 0.5],
align: [0.5, 0.5],
});
myRotateModifier.setTransform(
Transform.rotateX(1.4),
{duration: 1000}
);
var myModifier = new Modifier();
myModifier.setTransform(
Transform.scale(0, 0, 1),
{duration: 2000}
);
mainContext.add(myRotateModifier).add(myModifier).add(surface);
Why not the multiply4x4 in this case
The multiply4x4 gives you a result matrix from multiplying the two transforms then applies that matrix transform. It results in what you are seeing in your code.
Hello Stackoverflow community
As I am trying to build a small game, i came to a problem.
Somehow, when i try to fade out multiple shapes, respectivly a group with the shapes in it, some of the shapes will not fade out or browser gets a stack overflow.
So as i tried out several hours to fix the problem i need your help.
Heres the link to a little fiddle i made: http://jsfiddle.net/hnBPT/
As you can see theres a function newFadeShapesOut() which needs the nodes that should be fade out and also the layer of the nodes.
It moves the nodes into a group and fades the group out. Somehow and sometimes, one or more shapes will not fade out or there occurs a fatal error.
Function for fadeout:
function newFadeShapesOut(shapes, layer, callback, speed){
if(typeof(speed) == 'undefined'){
speed = 1;
}
var g = new Kinetic.Group();
console.log(layer.getChildren().length);
console.log(shapes.length);
layer.add(g);
shapes.each(function(shape){
shape.moveTo(g);
});
console.log(layer.getChildren().length);
console.log(shapes.length);
var tween = new Kinetic.Tween({
node: g,
opacity: 0,
duration: speed,
onFinish: function(){
if(typeof(callback) != 'undefined'){
callback();
tween.destroy();
}
}
}).play();
}
PS: Google Chrome is recommend, firefox tends to crash.
Thank you for your help.
EDIT: Sorry i forgot about that, you can activate the script by clicking the red square.
There's some strange behaviour going on here. Look at my comments as I tried to rewrite your function:
function fadeShapesOut(layer, callback, speed) {
var children = layer.children;
//The layer here already shows some children have moved.
//2 children remain, 1 text and 1 rect.
console.log("LAYER");
console.log(layer);
//Again, children shows that there are only 2 children of layer at this point: Test 2 and Button Rect
console.log('CHILDREN');
console.log(children);
if(typeof(speed) == 'undefined'){
speed = 1;
}
var group = new Kinetic.Group();
layer.add(group);
children.each(function(child) {
console.log("CHILD");
console.log(child); //This spits out Test 1, Test 3 and the newly added Group. (Strange order???
child.moveTo(group);
});
//Since group is already added to the layer, you're all of layer's children to group, including group itself. Which is causing a never ending loop of references to group including itself - causing the stack overflow.
var tween = new Kinetic.Tween({
node: group,
opacity: 0,
duration: speed,
onFinish: function(){
if(typeof(callback) != 'undefined'){
callback();
tween.destroy();
}
}
}).play();
}
What's messing you up is that the group is being considered a child of layer (Even though it hasn't been added yet in the order of function calls, which is strange behaviour to me). So when you loop through the children of layer in the each function, you're trying to move group --> group which screws up the reference in a never ending loop.
I logged a bunch of things in my fiddle, so go ahead and take a look to see some of the strange behaviour I was talking about above.
Anyways, if your callback is going to destroy the layer, what is the point of moving everything to a new group in the function? That Group is messing your code up and I don't see the point of it if you're just going to destroy the layer.
Instead you can achieve the effect you want by just tweening the layer itself:
function fadeLayer(layer, callback, speed) {
var tween = new Kinetic.Tween({
node: layer,
opacity: 0,
duration: 2,
onFinish: function(){
layer.destroy();
tween.destroy();
}
}).play();
}
If you must stick with your original function format, then you can grab children by using names:
newsobj[n] = new Kinetic.Text({
nid: n,
x: 140,
y: ((n == 0) ? 294.5 : 304.5 ),
text: news[n],
fill: 'white',
fontFamily: 'Corbel W01 Regular',
fontSize: 11.26,
name: 'fadeThisAway'
});
button = new Kinetic.Rect({
x: 10,
y: 10,
width: 100,
height: 100,
fill: 'red',
name: 'fadeThisAway'
});
In my example, I used the name fadeThisAway. And then, using your old function:
function newFadeShapesOut(layer, callback, speed){
var shapes = layer.get('.fadeThisAway');
if(typeof(speed) == 'undefined'){
speed = 1;
}
var g = new Kinetic.Group();
console.log(layer.getChildren().length);
console.log(shapes.length);
layer.add(g);
shapes.each(function(shape){
shape.moveTo(g);
});
console.log(layer.getChildren().length);
console.log(shapes.length);
var tween = new Kinetic.Tween({
node: g,
opacity: 0,
duration: speed,
onFinish: function(){
if(typeof(callback) != 'undefined'){
callback();
tween.destroy();
}
}
}).play();
}
Instead of passing shapes through the function, just call
var shapes = layer.get('.fadeThisAway');
at the beginning of the function (you're passing layer through the function already anyways) to grab the children that are named fadeThisAway. (Note: This works because the group is not named fadeThisAway)
Working example and comments inside: JSFIDDLE
UPDATE
Okay so I made a basic example of the issue with layer.children
2nd JSFIDDLE
And it looks like that's just how the children of layer works. This proves that you definitely have to distinguish between shapes and group, because the group will always be considered a child of layer.
The naming method works to distinguish your shapes between layers by giving all shapes a common name that excludes groups.
After several attempts to bend projeqht's function to my way i finally did it!
Somehow, the collection shapes just updates itself when adding the group to the layer!
If i use an array instead, it works.
Hope it helps someone!
So here my solution which works like a charm.
function fadeShapesOut(shapes, callback, speed){
layer = shapes[0].getLayer();
if(typeof(speed) == 'undefined'){
speed = 1;
}
var g = new Kinetic.Group();
layer.add(g);
for(i in shapes){
shapes[i].moveTo(g);
}
var tween = new Kinetic.Tween({
node: g,
opacity: 0,
duration: speed,
onFinish: function(){
if(typeof(callback) != 'undefined'){
callback();
}
tween.destroy();
}
}).play();
}
If you have further questions, don't mind contacting me.