Sign in to follow this  
Matheus Vinícius

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

Recommended Posts

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 image.png.87781c028d800c52da0989b28ead0ee9.png

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;

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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.

gif.gif

Share this post


Link to post
Share on other sites

> 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?

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.