On this topic: | | | Part 4 | | Part 1 Part 2 Part 3 Part 5 Part 6 We’re going to continue with which extends . You can review the schema in of this series but we’re going to make some changes to how things are named. DisplayObject Scene part 1 Its job is very simple; it will group objects that need to be rendered in a array and it will expose methods which allow us to add and remove elements to this array. It’s actually very similar in functionality to the . children Canvas We want everything that’s being rendered in our to be a . Imagine a game where we have a space ship. Whenever the ship moves, its thrusters are ignited. The could hold both the ship and the thrusters as they belong together. Scene DisplayObject DisplayObject Splitting the objects like this means we can also test for collision separately as something colliding with the thrusters should not register a hit on the ship. You can use this logic to go even further and add the ability to collect power-ups that add more firepower to the ship and make those enhancements destructible by enemy fire, etc. For now we only care about the grouping logic: engine/ui/DisplayObject.js : what they are and what do they offer? Sprite sheets A game usually needs a lot of graphical assets. In the case of 2D games, these images are usually referred to as . Every image has a width, height and color depth. Pixels are defined by 4 channels: sprites 3 color channels (red, green, blue) and 1 alpha channel. Every channel has a value from 0 to 255. You can store the maximum value of 255 using 8 bits (255 = 11111111 in binary); 4 channels * 8 bits per channel = 32 bits. That’s a total of 4 bytes for each pixel. The memory required for a 64x64 image is 64*64*4 = 16.3 kilobytes. That’s not a lot, but managing multiple characters, items and animations can affect memory and implicitly performance. The best way is to store all graphical assets in a single sprite sheet. Here’s a partial sprite sheet example from the Angry Birds game: © Angry Birds Sprite Sheet (868 x 898 px) Rovio Entertainment — It has the various pigs, the damage stages they receive, as well as some of the birds. There are tools which help you create sprite sheets, like but you could also create your own utility that does this relatively easy. TexturePacker You can create sprite sheets with fixed width and height cells or you can optimize them by cropping out the transparent parts making every sprite takes as little space as possible. Our engine will have a class which will implement a method to return a specific tile based on its position. We’ll currently work with the idea that all tiles in the sheet have the same width and height (so if one image is 64x32px, they all are). SpriteSheet getTile() engin/ui/SpriteSheet.js It takes two parameters: a loaded image and the tile size. The loaded image will be provided by our utility class which we covered in of this series. AssetsLoader part 2 Since our sprite sheets will have a fixed width and height for each tile, we can traverse the entire image and store the coordinates of each of the sprites. Animated sprites are no different, take a look at this Ryu sprite sheet from the Street Fighter game: Ryu Sprite Sheet (702 x 130 px) It’s the same concept as movie reels. You have a lot of frames with static images which you traverse at a high frame rate. This gives the illusion of movement. So what would an class look like? Well it should have a few things like: AnimatedSprite the x and y position the sprite sheet it’s working with the start and end frame of the animation whether the animation should loop forever (default true) — at a later time we could also allow for this to be a number (like loop 3 times) if the loop is false it should stop on the last frame the animation frame rate (unless we want to toggle through those frames 60 times per second) in the image above Ryu has 9 frames but we’re working on a 0 based index, so the frames are counted left to right from 0 to 8; this will be the default approach in our class engine/ui/AnimatedSprite.js This is know as blitting. The frame rate control is managed with Date instances inside the method. We check if the time that’s elapsed is greater than the period… if it is, we simply increment the frame index by 1; both the and methods are still called ~60 times per second, this doesn’t affect us. update() update() render() Let put everything together: sprites/index.js Here’s a working demo of Ryu animating on a loop at 10 fps: Source code: _game-physx - A small utility for JavaScript game making_github.com raduGaspar/game-physx In the next article we’ll attempt creating a simple game like Asteroids or Invaders with the we have so far. Space engine
