Before I get into making a new video series, I want to try to establish some vocabulary and go over the basics on how JawsJS works. For the most part, the game library borrows from conventions from other engines and uses techniques common to video game programming. For those coming to the library from working with other engines and libraries, this is great. If you are unfamiliar with the terminology or are new to video game programming, this could be confusing.

State: The condition of a function at a point in time.

Because game programming comes from a background in mathematics, it uses some of the same ideas. One of these is a state: the condition of a function at a point in time. In mathematics, this might be the value of a formula at a specific point along a time continuum. In game programming, however, this is commonly used to isolate functionality that might use the same input and display space from something else.

The main menu of a game is often a different state than that of the game itself. A game over screen might be another state too. These all might use the same input (controls) and display space and thus, to avoid them conflicting with each other, a game might switch between one state and another.

Tick: One cycle of updating and drawing objects on the screen.

Most game engines rely on what is known as a Tick. Also referred to as the “game tick,” is is how fast objects are updated and drawn on the screen. Another way to think about is in frames per second (FPS), or how often the content on the screen will be cleared and redrawn between one calculation of it to the next.

Different monitors and even devices all have their own, often hardware based, refresh rates that dictate how fast they are updating their displays. Because it would be difficult to write code to match all these specifications, a number can be explicitly written with many game engines to tell the code exactly how fast to try to run. Usually, the higher the FPS is, the better, because these means the game is handling more calculations and drawing more objects per second.

Draw loop: This uses the current position and image data of an object to display it.

Most often associated with or as a part of a game tick, this is the internal functionality of an object that maintains its position and image data as it applies to the current display.  If an object is on the screen, its draw loop is being called each game tick to update itself. This can include everything from a background image to an object moving. If the player is seeing it, a draw loop is being called.

Sprite: An object which contains image data, a draw loop, and possibly coordinates or additional functionality (2D).

One of the most fundamental aspects of video game programming are the objects which hold the image data, commonly referred to as sprites in a two-dimension context. These are the objects moving around from player input. They can also be the background on which the object was moving or the ground on which a character in a game might be walking. If an object is being drawn to the screen, it is sprite or something of similar functionality.

Collision: Detecting if one or more objects intersect each other.

Along with sprites, collision detection is often another fundamental aspect of a game engine. In use, it takes two objects or lists and compares them. If their coordinates intersect with each other, they are colliding.

This is used in countless games as a way to tell if, for example, Mario is touching the ground or if bullets are colliding with an enemy. It is often part of the updating phase of a game tick as collision is calculated and objects are updated accordingly before being removed, moved, or changed as the result of collision with another object.

Parallax: The visual illusion of depth from two or more lines of sight moving at different rates of speed.

In video game programming, this is the perception of depth for the player from the layering of objects one on top of another (often along a z-axis). Commonly used before the word “scrolling,” it is moving objects “behind”  or “in front of”(drawn before or after) the player controlled character at a different rate of speed than the player controlled character is moving. The effect is one that create the visual illusion of depth because some objects appear to be closer to the player than others.

Viewport: A subset of the total game space.

Often, game worlds can be very large. Even some levels can be much bigger than the relative size of the player controlled character. In order to maintain relative sizing within the resolution of a display, a viewport is used to only show part of a level or world in respect to the relative positioning of an object within it. In other words, using a viewport allows for the screen to contain only the player controlled character and that part of a level or world in which their are currently positioned.

For example, Super Mario Bros only shows where Mario is plus a set amount of distance in front of him. Another game might use a viewport to display both an object moving and some information about that object at the top of the screen. Like a sprite, a viewport too can be treated as a wholly separate object with its own positioning and drawing in respect to a larger screen. (This is how local split-screen works with different concurrent viewports showing the relative position of different objects all within a single larger game space.)