On this topic: | Part 2 | | | | Part 1 Part 3 Part 4 Part 5 Part 6 Time to get started on the core components of the game . We should be able to render something on the before the end of this article! engine Canvas Note: please be aware that I’ll add links to specific pieces of code in the history tree. This will make it easier for you to run the same code I did when describing a specific feature. GIT repository We’ll start by working on the classes that have no dependencies like: and then progress onto others that might extend these. Game, AssetLoader EventDispatcher The class could: Game accept a as an optional constructor argument Scene keep a reference to all created scenes have public methods for adding and removing scene(s) have a public method which will trigger the method on all stored scenes loop() update() have public methods that pause and resume the loop cycle; we’ll call these: , and play() pause() togglePause() engine/Game.js There are some improvements to be made here like checking if the added scenes are actual instances, adding support for browsers which don’t have requestAnimationFrame, maybe implement a flux architecture to store data and prevent state mutation. Scene The flux architecture might come at a later time but for now we’re treating the engine as a P.O.C. (proof of concept)… that implies that I also won’t bother adding support for older browsers, but you can definitely use the if you need it. rAF polyfill The class could: AssetLoader be a singleton so we can retrieve the assets from any other class expose a load method which will receive an array of paths to local assets; the method should return a Promise so we can detect when all assets are loaded store the assets based on their name converted to camel case support loading image and audio files engine/utils/AssetsLoader.js You would generally implement a method on a singleton class, here we’re simply returning the previously created instance whenever we’re calling the class constructor. getInstance() We also have a dependency here on a class, it currently just handles the asset “name to camel case” logic; it looks like this: Utils engine/utils/Utils.js This one is actually a static class, and to enforce that we’re simply throwing an error in its constructor. That means trying to call will fail. The class is fairly simple for now as it just has a single static method; we’ll probably add more later. new Utils() The class could: EventDispatcher be a singleton, as all game classes need to be able to reference the same instance. This is generally frowned upon as its basically a global event dispatcher but we’ll need it if we want to implement the flux architecture later on. EventDispatcher expose the and methods which will help us subscribe to and emit events. on() trigger() engine/events/EventDispatcher.js You might think this one looks weirder than the rest, and there’s a good reason for that. It’s a bit tricky to extend a singleton using the ES6 syntax, read my article describing the issue . here We’re not done yet; we still have a bit of coding to do before we can draw anything. According to our schema in we can now focus on implementing the class which extends . the previous article Keyboard EventDispatcher The class could: Keyboard be a singleton expose getters which tell us if a certain key is pressed It should be sufficient to expose getters for the keys , , , , , , , , and functional keys . A to Z space arrow keys tab enter shift ctrl alt esc F1 to F12 engine/inputs/Keyboard.js This class also uses , which looks like this: KeyboardEvents engine/events/KeyboardEvents.js This class holds some static methods which return event names that basically serve as constants. You might be wondering why I didn’t simply do: export const KEY_UP = 'keyup'; It’s because this approach allows for the import of the class and through that class we gain access to all the related static getters. We don’t need to import each and every constant separately. Keyboard Since we finally have the class, we can focus on the next. Keyboard Canvas The class could: Canvas be a singleton be able to resize itself on window resize allow access to the <canvas> tag and all its properties expose the canvas ctx (the 2D context) which is used for drawing engine/ui/Canvas.js At this point we could draw on the directly by using the property but that’s boring and silly because it wouldn’t be using any of the logic we worked so had to build in the other classes. Let’s focus on building one more class which will help us out, namely: . Canvas ctx Scene The class could: Scene extend and keep a reference to itself for access in other classes that extend Canvas Scene allow for initialization with the x, y, width and height properties which will need to have some defaults allow for adding and removing of DisplayObjects export an method which will in turn call the method of all stored update() update() DisplayObjects clear itself on every update based on the provided x, y, width and height make all drawing positions relative to the instance — this means that if the has and we add a with to it, that will be drawn on the at { x: 20, y: 20 } Scene Scene { x: 20, y: 20 } DisplayObject { x: 0, y: 0 } DisplayObject Canvas hide any elements that are drawn outside of its viewport which is defined by x, y, width and height provide a static method which will reset an objects x and y position if it exceeds the boundaries wrap() Scene engine/ui/Scene.js We have a and based on its logic we can add an element to it, which will be updated and rendered… provided that the element has the and methods. Scene update() render() And now for the moment we’ve all been waiting for; this is how you draw a couple of moving squares the super complicated way… Create a new folder in the directory (on the same level as the directory) and name it . Create an file with this logic: js engine square index.js square/index.js For the sake of brevity I created the class in the same file but we now have a basic engine for creating and rendering static or moving objects on the canvas. Square The squares move on the x and y axis at a predefined speed and if you press SHIFT, that speed is doubled. The objects’ position is wrapped to the parent so you can play around with it. Don’t forget that you’re inheriting all the functionality there, so have fun with that. Screen Keyboard Grab the files and test it out here: _game-physx - A small utility for JavaScript game making_github.com raduGaspar/game-physx Obviously there are improvements to be made, like: using “ ” instead of “ ” for all singleton instances, figuring out how to use private variables in classes that have multiple instances without causing overwrites (and if you’re thinking “ ”… that will probably do more harm than good) and using a store for our game engine; just to mention a few. const let WeakMap We’ll continue with a discussion on how movement works in games, cover sprite sheets, sprites, animated sprites, controlling frame rate, display object pivot points and another implementation example in the next article.

Super

Too Long; Didn't Read

Discover Saakuru: Web3 Mass-Adoption with 0-FEES

JavaScript: Do you like games? (part 2)

Too Long; Didn't Read

Companies Mentioned

Radu B. Gaspar

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

JavaScript: Do you like games? (part 2)

Too Long; Didn't Read

Companies Mentioned

Radu B. Gaspar

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES