Rex van der Spuy [Rex van der Spuy] - The Advanced Game Developer’s Toolkit: Create Amazing Web-based Games with JavaScript and HTML5

If you dont know any of those things, or need a refresher, pick up a copy of Foundation Game Design with HTML5 and JavaScript (Apress, 2012), Advanced Game Design with HTML5 and JavaScript (Apress, 2015), and Learn PixiJS (Apress, 2015). These three books will teach you everything you need to know.

This book is completely agnostic about which technology you use to make games. The source code has been written in JavaScript using a simple 2D HTML5 game engine called Hexi . However, the code examples are purely intended to be a kind of psuedo-code that you can apply to any other programming language or game engine. It doesnt matter what game engine or display list framework you use you can apply the concepts in this book to any of them. The important things about the code in this book are the algorithms, the high-level concepts, and the code comments not necessarily the implementation details. Ill leave those up to you, for whatever technology you choose.

All you need to do is make sure that the technology youre using has a full hierarchical scene graph (also known as a display list). That means youre able make sprites and nest them as children of parent sprites. And, your technology needs some way of letting you reference the following properties on your game sprites (values are in pixels, unless stated otherwise):

• gx: The global horizontal position of the sprite, relative to the game screens top left corner.

• gy: The global vertical position of the sprite, relative to the game screens top left corner.

• x: The local horizontal position of the sprite, relative to the sprites parents top left corner.

• y: The local vertical position of the sprite, relative to the game screens top left corner.

• width: The sprites width.

• height: The sprites height.

• halfWidth: Half the sprites width.

• halfHeight: Half the sprites height.

• scaleX: The sprites horizontal scale (as a normalized value between 0 and 1).

• scaleY: The sprites vertical scale (as a normalized value between 0 and 1).

• centerX: The sprites center x position.

• centerY: The sprites center y position.

• rotation: The sprites angle of rotation, in Radians.

• alpha: The sprites transparency (as a normalized value between 0 and 1).

• vx: The sprites vertical velocity.

• vy: The sprites horizontal velocity.

• layer: The sprites position in the display stack (0 is the bottom layer).

Youll also need some way to group sprites together into a parent container, and some functions to help you manage this:

• group: Groups sprites into a parent container.

• addChild: Add sprite as child of another sprite or container.

• removeChild: Remove a sprite from its parent sprite or container.

These are the only sprite properties and functions you need to make any kind of 2D game you can think of. Although the names will likely be different, any 2D game development tool youre using will let you access these properties and functions in some way. Just identify them in the tool that youre using, and youll be able to make use of the code in this book.

Rex van der Spuy 2017

Rex van der Spuy , The Advanced Game Developer's Toolkit , 10.1007/978-1-4842-1097-0_2