![]() IOS 7 Game Development Sprite Kit is. Almost everything you can see on the screen of a 2D game is a sprite. HTML5 2. D game development: Sprites. HTML5 2. D game development. Implementing Snail Bait's cast of characters. ![]() David Geary. Published on December 0. Content series: This content is part # of # in the series: HTML5 2. D game developmenthttps: //www. For example, Snail Bait has the runner (the game's protagonist), coins, rubies, sapphires, bees, bats, buttons, and a snail, most of which are shown in Figure 1. In the first article in this series (see its Sprites: The cast of characters section), I discussed those characters and their roles in the game. Snail Bait's characters. View image at full size. Each character in Snail Bait is a sprite. Sprites are graphical objects that you can endow with behaviors; for example, the runner can run, jump, fall, and collide with other sprites in game, whereas rubies and sapphires sparkle, bob up and down, and disappear when they collide with the runner. In 2D you have pixel artists who make sprite sheets. Game Development with Unity. Sprite sheets allow video game animation to. Sprite Sheet Maker is a tool that combines your. If you write 2d or 2.5d. ![]() In this article you will learn how to. Implement a Sprite object that you can reuse in any game. Decouple sprites from the objects that draw them (known as sprite artists) for flexibility at run time. Use sprite sheets to reduce startup time and memory requirements. Create sprites with metadata. Incorporate sprites into a game loop. See Download to get the full sample code for this article.
Sprite objects. I implemented Snail Bait's sprites as Java. Script objects that can be used in any game, so sprites reside in a file of their own. I include the file in Snail Bait's HTML, like this: < script src='js/sprites. Sprite attributes. Attribute. Descriptionartist. Object that draws the sprite. If the value is false, the sprite is not drawn. They also have a type, which can be used to distinguish one sprite from another, and an opacity, which means that sprites can be partially transparent. Sprite constructorvar Sprite = function (type, artist, behaviors) . Behaviors should not draw and artists should not manipulate sprite state. If you don't specify behaviors, the constructor creates an empty array, and if you create a sprite without specifying a type, its type is an empty string. If you don't specify an artist, it is simply undefined. Sprite methods. Method. Descriptiondraw(context)Calls the draw() method of the sprite's artist if the sprite is visible and has an artist. Invokes the update() method for each of the sprite's behaviors. Sprite method implementations. Sprite. prototype = ? Because of that requirement, sprite velocities are specified in pixels/second. Much of the complexity surrounding sprites is encapsulated in a sprite's artist and behaviors. It's also important to understand that you can change a sprite's artist and behaviors at run time, because sprites are decoupled from those objects. In fact, as you will see in the next article in this series, it's possible — and often highly desirable — to implement general behaviors that can be used with multiple sprites. Listing 3 shows the implementation of the stroke and fill artist that draws Snail Bait's platform sprites. Listing 3. Stroke and fill artists// Stroke and fill artists draw with Canvas 2. D drawing primitives. Snail. Bait = function (canvas. Id) . The platform artist listed in Listing 3 draws those rectangles with the Canvas 2. D context stroke. Rect() and fill. Rect() methods. The second article in this series (see its HTML5 Canvas overview section) has more information about those methods. The location and size of the ensuing rectangle is determined by the platform sprite's bounding box. Image artist// Image. Artists draw an image. Image. Artist = function (image. Url) . Most games use lots of images, and your start- up time will suffer if you make separate HTTP requests for each of them. For that reason, HTML5 game developers create a single large image that contains all their game's images. That single image is known as a sprite sheet. The Snail Bait sprite sheet. View image at full size. Given a sprite sheet, you need a way to draw a specific rectangle from that sprite sheet onto a canvas. Fortunately, the Canvas 2. D context lets you easily do that with the draw. Image() method. That technique is used by sprite sheet artists. Sprite sheet artist// Sprite sheet artists draw an image from a sprite sheet. Sprite. Sheet. Artist = function (spritesheet, cells) . Those cells represent rectangular areas within the sprite sheet, each of which encompasses a single sprite image. The sprite sheet's draw() method uses that index to access the current cell and then uses the nine- argument version of the Canvas 2. D context's draw. Image() to draw the contents of that cell into a canvas at the sprite's location. A subsequent call to the sprite sheet artist's draw() method draws the corresponding image. By repeatedly advancing the index and drawing, sprite sheet artists can draw a set of images sequentially from a sprite sheet. They are also easy to use; you just instantiate the artist with a sprite sheet and cells, and subsequently invoke the advance() and draw() methods as desired. The tricky part is defining the cells. Snail Bait sprite sheet cell definitionsvar BAT. Figure 3 shows just such a tool, available to run online at the Core HTML Canvas site (see Related topics). Figure 3. A simple sprite sheet inspector. View image at full size. The game developer's toolchest. A game developer's work is not all fun and games. Game developers spend a lot of time on tedious tasks such as determining sprite sheet cells and designing game levels. Most game developers, therefore, spend a fair amount of time implementing tools, such as the one shown in Figure 3, to assist them with those tedious tasks. As you move the mouse, the application draws guide lines and updates a readout in the upper- left corner of the application that displays the current location of the mouse cursor. The tool makes it easy to determine bounding boxes for each image and sprite sheet. Defining sprite arrays in the game constructorvar Snail. Bait = function (canvas. Id) . The game also maintains an array containing all the game's sprites. The individual arrays for bees, bats, and so on are not strictly necessary — in fact, they are redundant — but they facilitate performance; for example, when the game checks to see if the runner has landed on a platform, it's more efficient to iterate over the platforms array than to iterate over the sprites array searching for platforms. There's no array for runners, because the game has only one runner. Notice that the game instantiates the runner with a type —runner— and an artist, but it does not specify any behaviors when the runner is instantiated. Those behaviors, which I discuss in the next article in this series, are added later on in the code. Starting the game. Snail. Bait. prototype = . Creating and initializing Snail Bait sprites. Snail. Bait. prototype = . The implementations of those helper functions are shown in Listing 1. Listing 1. 0. Creating individual sprites. Snail. Bait. prototype = . Discussed in the next article in this series. Discussed in the next article in this series. Discussed in the next article in this series. First, the methods are all pretty simple: Each method creates sprites, sets their width and height, and adds them to the individual sprite arrays. Second, create. Bat. Sprites() and create. Button. Sprites() use more than one artist to create sprites of the same type. The create. Bat. Sprites() method alternates artists so that half the bats have red eyes and the other half have white eyes, as you can see from Figure 4. The create. Button. Sprites() method employs artists that draw either blue or gold buttons. Red- and white- eyed bats. View image at full size. The third and most interesting aspect of the methods in Listing 1. Sprite metadatavar Snail. Bait = function (canvas. Id) . Also, because the metadata is defined outside of the methods that create the sprites, those methods are simpler, and therefore easier to understand and modify. Finally, although the metadata for Snail Bait is embedded directly in the code, sprite metadata can come from anywhere — including, for example, a level editor that might create metadata at run time. So in a nutshell, metadata is easier to modify, and it's more flexible than specifying sprite data directly within methods that create sprites. Listing 1. 2 shows the initialize. Sprites() method. Listing 1. 2. Initializing Snail Bait sprites. Snail. Bait. prototype = . That method, in turn, positions sprites at locations specified by the sprite's metadata. Notice that some sprites, such as buttons and snails, reside on top of platforms. The put. Sprite. On. Platform() method is shown in Listing 1. Listing 1. 3. Putting sprites on platforms. Snail. Bait. prototype = . Creating and initializing Snail Bait sprites. Snail. Bait. prototype = . Snail Bait always draws the vast majority of its sprites at the same horizontal location, and their apparent horizontal motion is purely a result of that translation. Most of Snail Bait's sprites move horizontally in concert with the game's platforms, as shown in Listing 1. Listing 1. 5. Updating sprite offsets. Snail. Bait. prototype = . Those methods are shown in Listing 1. Listing 1. 6. Updating and drawing sprites. Snail. Bait. prototype = . There is no need to update or draw sprites that lie within that three- quarters of the landscape, so Snail Bait does not do so. Strictly speaking, it's not necessary to exclude those sprites when drawing, because the Canvas context would exclude them anyway. In the next article in the HTML5 2. D game development series, you'll learn how to implement sprite behaviors and attach them to specific sprites. Is 3. D game development easier with an engine?
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
October 2017
Categories |