Game Viewer Requirements

The game viewer is responsible for displaying the visual elements of a game, such as maps, units, markers, and decorations. We call all of these elements "Renderables." A renderable does not need to represent a player.

Requirements

General:

• Use PixiJs to render the game
• Render the next frame based on changes received
• Generically render any supported 2D grid-based game without game-specific Viewer code

Recording Viewer:

• Be able to speed up and slow down the animation time (time between a frame change) including pausing.
• Go back from one change to the previous change.
• Step through all the changes one by one.
• Must be able to run inside docker

Live Viewer:

• Save the list of changes as they are received to be able to play them back upon termination (extra)

Setup

Before being to render anything, the game viewer must receive all assets, and the configuration of the viewer (tile-size, resolution, game zone vs decoration: ex. scoreboard at the top, etc.)

Input Flow

Given a list of renderables, the game viewer must display all of them using their position, size and other aspects of a renderable.

The game viewer must take a list of RenderableChange, which is a list of all the renderables that changed since the last index. Note: when there is a renderable with an id the game viewer hasn't seen before, it means that it is a new object being rendered.

Animation and viewing a game

Given this list of RenderableChanges, the game viewer must animate them in the order of the indexes.

For example, this list of changes will need to animate the player moving from 0,0 to 0,1.

const changes: RenderableChange[] = [
  {index: 0, changes: {id: "player1", position: [0,0]}},
  {index: 1, changes: {id: "player1", position: [0,1]}}
]

Definitions

interface GameRenderable {
	id: string;
	position: [number, number]; //tile size
	assetPath: string;
	size: [number, number]; //tile size
	type: RenderableType;
	layer: number;
        removed?: boolean; //optional boolean to mark removed elements
}

enum RenderableType {
	MAP,
	OBJECT,
	DECORATION
}

interface RenderableChange {
	index: number,
	changes: Renderable[] // what changed since last index
}

Illustration of the Position and Size logic with the 2d game grid system:

Generic Viewer Scope

The Viewer should not contain game-specific concepts such as players, ships, or resources. It should only display the renderables it receives. For example, a Battleship game could represent its board as a map and its ships and hit markers as objects. The Game Server team will define how game state is converted and sent to the Viewer.

PixiJS References

• Assets for loading textures from asset paths.
• Sprite for displaying and positioning renderables.
• Container for grouping renderables and controlling their drawing order.