Drawing of ALL game frame by frame from JSON

Good afternoon, there was a problem with the implementation of my game. There are no physical inputs in it (keyboard/mouse), no physics and logics, it should only draw frame-by-frame movement of various objects on the screen, coming in JSON.

I found examples only for the animation individual objects-sprites in the game, but not for the whole game at all, is it generally realizable?

Is it possible to do this on tween + some events (?) Or are there any other ways?

I apologize for the confusing question, but this is a problem that has upset me for a long time, and I cannot understand how to do it. I will be glad to any advice, examples and links. Thanks :slight_smile:

Are the frames drawn in an image format in the JSon file ?

The JSON-file must contain a global description of objects of each frame, for each frame - the coordinates of every objects in the game.

Just as an example with one game unit (but there should be a lot of them):

“frames”: [
{“unitId”: 1,
“positionX”: 59,
“positionY”: 77
{“unitId”: 1,
“positionX”: 65,
“positionY”: 84


The game itself consists of one tilemap, 98% of the images, and some several spritesheets (they, probably, in such an architecture also need to be broken into separate images). I have to move images (“units” in the game) or call them frame by frame.

The task of the Phaser is only visualization, all logic is on the backend, that sends JSON.

Can you check please the example here ? And tell me if it looks a bit like what you’re expecting from Phaser CE

Enter The Matrix.zip (123.3 KB)

Unfortunately, it seems, but not quite what I need, i think.

The problem is that most of the animation in the game is the movement of a static image from position to position (visually as chess, for example: a fixed field and the movement of objects along it).

In fact, this is more like using twin-methods, rather than animation, as it seems to me, but I could be wrong.

Tweens are nice to make linear movements (not only ofc) but am not sure you can do it with frame by frame, but you can for example draw the animation of your Tilemap frame by frame and add (draw) a tween on it, I have a WiP example for tween movements looking like chess that uses the easystartjs framework on my GitHub Account (but with a fixed Tilemap not animated maybe a good way for developping my game)

Think that tweens are for moving (for example) and animations is not a mouvement if you let the sprite as it is without handling it with inputs

Check the examples in Waveforms https://phaser.io/waveforms. If you have a set of numbers then you can tween. If you want to tween when some data is loaded, you could use Phaser.Signal or custom events to start tweening when the data is loaded.