question PIXI.js: How to build a soft sprite animation (not loop)

[Matheus Vinícius]

Hey guys, i tried to make a soft sprite animation with PIXI.js, i learn about the ticker and i tried to implement, but is a loop, and its no use because is a movimentation player.

See the print 

Is a isometric map, and i need I need the player to walk the floors, i already do that, but not so that the animation is smooth, it goes from point a to b without any animation.

I also tried to implement the smoothie library but it was not possible.

 

i stay waiting for responses, sorry for my bad english;

[ivan.popelyshev]

HI!

Sorry, that's not enough information.

You mean animation of texture, right?

AnimatedSprite is a baseline, not an off-world rocket-science. Its made not for use but to show how can you do your own animation! 

https://github.com/pixijs/pixi.js/blob/dev/packages/sprite-animated/src/AnimatedSprite.ts

You can also make an object separated from sprite, that's same code but as an "AnimationState" that can be applied to anything that has texture: Sprite, Rope, Plane.

https://github.com/gameofbombs/pixi-heaven/blob/master/src/animation/AnimationState.ts

I anticipate that you'll answer "but it will not work for my game!" and I will answer again "Do it for your game, its your game and not mine."

If you want better help, please make a minimal demo and describe the problem in details.

Edited April 20, 2020 by ivan.popelyshev

[Matheus Vinícius]

43 minutes ago, ivan.popelyshev said:

HI!

Sorry, that's not enough information.

You mean animation of texture, right?

AnimatedSprite is a baseline, not an off-world rocket-science. Its made not for use but to show how can you do your own animation! 

https://github.com/pixijs/pixi.js/blob/dev/packages/sprite-animated/src/AnimatedSprite.ts

You can also make an object separated from sprite, that's same code but as an "AnimationState" that can be applied to anything that has texture: Sprite, Rope, Plane.

https://github.com/gameofbombs/pixi-heaven/blob/master/src/animation/AnimationState.ts

I anticipate that you'll answer "but it will not work for my game!" and I will answer again "Do it for your game, its your game and not mine."

If you want better help, please make a minimal demo and describe the problem in details.

Hi, thanks for response.

Well, your answer is part of my code, but what I really want to do is change: sprite.x and sprite.y; smoothly, is it possible?

[ivan.popelyshev]

Oh, coordinates animations! Do you know basic stuff, like LERP and what is gameloop?

[Matheus Vinícius]

The gameloop yes, and LERP no, see my situation: i can already move the coordinates, but the change not have animation, and the only way to make a coordinate animation was with the gameloop, but I can't use it, because the player will not move in a loop, but in a mouse click event (i can do this already), see the gif. The objective is change the coordinate softly.

Sorry for my bad english.

[ivan.popelyshev]

> The gameloop yes, and LERP no, see my situation: i can already move the coordinates, but the change not have animation, and the only way to make a coordinate animation was with the gameloop, but I can't use it, because the player will not move in a loop, but in a mouse click event (i can do this already), see the gif. The objective is change the coordinate softly.

If you know what gameloop and LERP is, you should be able to do stuff. Pixi ticker is basically a gameloop - just register a handler and check every time whether character has to move, store previous cell and the one that was clicked on somewhere.

Ticker even has special "delta" param that equals to 1 if it was one frame or 2 if one frame was skipped and so on

Sound like you just need one basic example from other coders to show you that its easy

@jonforum @Exca help please?

 

[Exca]

Easiest way for this would be to use some tweening library. For example tween.js (https://createjs.com/tweenjs), gsap (https://greensock.com/3) or some other from multiple possibilites.

The examples below are done with tween.js.

You could have in your click-handler code like:

function moveTo(character, newX,newY)
{
  var time = 500;
  createjs.Tween.get(character.position).to({x:newX, y:newY}, time);
}

and it would move the character with given amount of time to given position.

If you do not wish to use tweening libraries, then you can also calculate the animation yourself and update the position in the mainloop. Below is one way how to do that (pseudocode, might have errors)

const app = new PIXI.Application(...);
const container = new PIXI.Container();
const characterSprite = PIXI.Sprite.from(...);
const bg = PIXI.Sprite.from(...);

container.addChild(bg);
container.addChild(characterSprite);

let targetPoint = characterSprite.position;
let moveStart = characterSprite.position;
let moveTime = 0;
let timeCount = 0;

bg.interactive = true;
bg.addListener("click", function(e){
  var to = /*Determine the coordinates where to move*/
  targetPoint = to;
  moveStart = characterSprite.position;
  
  //Calculate the distance between points to determine how long should move last
  const dx = to.x - moveStart.x;
  const dy = to.y - moveStart.y;
  moveTime = Math.sqrt(dx*dx + dy*dy);
});

app.ticker.add( function(delta){
  if(moveTime > 0)
  {
    timeCount+=delta;
    if(timeCount >= moveTime)
    {
      //End has been reached.
      moveTime = 0;
      characterSprite.position = targetPoint;
    }
    else
    {
      const dx = targetPoint.x - moveStart.x;
      const dy = targetPoint.y - moveStart.y;
      characterSprite.x = moveStart.x + dx * timeCount/moveTime;
      characterSprite.y = moveStart.y + dy * timeCount/moveTime;
    }
  }
});

Basically what happens there is you move the character between it's current point and target  point by linearly interpolating the position based on time.