zhukovsd / endless-field Goto Github PK

Rendering in the JS client based on canvas layers, every independent logical 'layer' (cells or player labels) render separately, which is convenient.

Within this principle, it would be handy to implement animation rendering on layers.

What information describes an animation:

• Position bound to cells or screen. If position bound to cells, then animation moves on camera scrolling, doesn't moves otherwise
• Animation value, which represents a stage of animation, shows which portion of its duration has been already completed for the current moment from a start moment. For example, if we animate a full turnover of a second hand in the clocks, then logical value range would be from 0 to 59, and duration is 60 seconds.
• Rendering function, which renders an animation sprite for the given value. For example, renders the second hand in given position from 0th to 59th second.

An animation layer holds an array of animations.

A global tick timer iterates through all animation layers and their animations, calculates the value for the current moment, renders it and refreshes all animation layers.

When browser window size changed, a size of the canvas changes as well. Canvas content gets stretched, breaking the aspect ratio.

Actually, canvas has 2 kinds of sizes, width/height for canvas as UI element, and width/height of its content. When these sizes not matches, aspect ratio breaks.

In order to correctly handle resize, we need to process resize events, and update width/height of canvas content.

When content size gets changed, canvas clears, to it has to be repainted.

If canvas size increases significantly, we might need to request additional chunks from the server. It makes sense to request additional information not on every size change, but only if the size has not changed for some interval, 200 ms, for example.

When a user moves his camera, his scope changes and field manager requests new chunks. During the scrolling, the scope may change only partially, so the user has to receive only new chunks, and there is no need to resend him chunks which he already has.

For example, if user scope = [0, 1], he moves the camera and new scope is [1, 2], the server should only send him chunk with id 2.

So, field endpoint response should look like:

  {
    "responseCode": 0,
    skippedChunks: [
      ids of previously requested chunks
    ],
    chunks: [
      {
        origin, ordered cells array
      },
      < ... >
    ]
  }