How to move a tank across the map?

Phaser 3
1

Think off a strategy game, where the player selects a tank, then clicks somewhere on the map and the tank moves to the designated position. How would I implement that in Phaser?

One thing I’ve investigated are Phaser.Animations, but I think they’re for animating sprites; that is, changing the sprite of the entity. My tank however is a static image; I just want to move it across the map.

One thing I’m not sure if I’ve understand them correctly are tweens: They are interpolating between the different images of the animated sprite? Blending the images over or something?

The obvious solution would be to change the position of the tank in the update() function based on the time past since the last update. This would also require some infrastructure to manage moving objects (there is not just one tank in my game). Before I implement that however, I wanted to make sure I’m not reinventing the wheel here and this is the proper way of doing it.

2

I think you need tweens here. Tween basically tweens (changes) properties (like x, y, scale, alpha, etc) of sprite over specified amount of time.

Check out this link.

Animation is just changing frames of sprite over specified time. Please correct me if I’m explaining it wrong.

3

Ok, I had another look at tweens and TweenBuilder:

https://photonstorm.github.io/phaser3-docs/Phaser.Tweens.Builders.html#.TweenBuilder

The parameters for TweenBuilder I don’t get. What is this about?
The properties below I’m assuming are the ones I need to create a tween. However, there are no x and y properties as in the example in the link you provided. What does that mean?

4

It looks like x, y and other props are coming from GetProps function which is defined here.

We don’t need to know how tweens are operating underneath for using tweens, but yeah it’s always good to know.

Check out Tween Examples in Labs.