This describes how animation graphics is created on the client side (spritesheets).


1 Introduction


2 Sprite sheet

Spritesheet is an image, containing \(N\) frames of some animation, let's number them \(1 ... N\).
If we draw frames \(1 ... N\) in time, with some time delay \(\delta t\), then we create effect of animation.
Class that allows to draw any frame from prite sheet and dvance to next frame / draw infinite or backwards animations, is called GraphicsAnimation

Example of sprite sheet for a monster

3 Frame dimensions

The amount of frames in sprite sheet might differ, aswell as the number of frames per line, and width / height of one frame.
We settle down, however, that all frames will have same dimensions.
Therefore, this information is contained within related json file, which might look as follows:

  "framesTotal": 30,
  "frameWidth": 232,
  "frameHeight": 310,
  "framesPerLine": 17,
  "animationSpeed": 100

4 GraphicsAnimation class

Allows to draw one specific frame (cuts it out from entire spritesheet) to target position on canvas.
Also allows to automatically draw frames to create animation effect, can animate backwards, forwards, or from fome frame to another frame only.