Sprite sheet character

Sprite sheet character DEFAULT

Best way to organize modular character sprite sheets (SOLVED)

Hi all! I have a question about the best way to structure a game object comprised of multiple modular sprites.

I have a base spritesheet that is animated frame-by-frame via a script. I also have several optional spritesheets, with the same animation frames, that should be drawn over the base sprite. Each is a different hairstyle or outfit that characters in my app might have. Because of the frame size of these animations, all these sprites cannot fit in one atlas (it’s not a pixel art style). Spine isn’t an option because the animations are drawn traditionally.

What would be the best way (for performance, ease of modification in the future, and general ‘best-practiceness’…) to unify all of these atlases into sprite objects inside a go or collection so that I could write a simple function – – that will them toggle on or off?

The approaches I’ve considered so far are:

  1. Include a different sprite component for each atlas – hair1, hair2, hair3 etc – inside the main character go/collection, then enable or disable them in
  2. Make gameobjects for each individual hair and outfit style, then create a factory for each inside the main character go/collection. Use on the appropriate hair and outfit factories for the desired hair, outfit, etc.
  3. Maybe there are other options I’m not experienced enough to know about!

I found a few oldthreads that have similar questions, but no definitive answer that fits my situation 100%. I’m a little hesitant to move forward since it will be a lot of setup work, so I want to make sure I’m headed down the right path first! Any advice will really be appreciated :blush:


Sours: https://forum.defold.com/t/best-way-to-organize-modular-character-sprite-sheets-solved/65920

Sprite (computer graphics)

For the technique of combining images into a single bitmap, see texture atlas.

For the process of drawing sprites, see pixel art.

A 2D bitmap displayed on top of a larger scene

In computer graphics, a sprite is a two-dimensionalbitmap that is integrated into a larger scene, most often in a 2D video game. Originally, the term sprite referred to fixed-sized objects composited together, by hardware, with a background.[1] Use of the term has since become more general.

Systems with hardware sprites include arcade video games of the 1970s and 1980s; game consoles such as the Atari VCS (1977), ColecoVision (1982), Nintendo Entertainment System (1983), and Sega Genesis (1988); and home computers such as the Texas Instruments TI-99/4A (1979), Atari 8-bit family (1979), Commodore 64 (1982), MSX (1983), Amiga (1985), and X68000 (1987). Hardware varies in the number of sprites supported, the size and colors of each sprite, and special effects such as scaling or reporting pixel-precise overlap.

Hardware composition of sprites occurs as each scan line is prepared for the video output device, such as a CRT, without involvement of the main CPU and without the need for a full-screen frame buffer.[1] Sprites can be positioned or altered by setting attributes used during the hardware composition process. The number of sprites which can be displayed per scan line is often lower than the total number of sprites a system supports. For example, the Texas Instruments TMS9918 chip supports 32 sprites, but only 4 can appear on the same scan line.

The CPUs in modern computers, video game consoles, and mobile devices are fast enough that bitmaps can be drawn into a frame buffer without special hardware assistance. Alternatively, modern GPUs can render vast numbers of scaled, rotated, antialiased, and partially translucent images in parallel with the CPU.


Arcade systems[edit]

The use of sprites originated with arcade video games. Nolan Bushnell came up with the original concept when he developed the first arcade video game, Computer Space (1971). Technical limitations made it difficult to adapt the early mainframe gameSpacewar! (1962), which performed an entire screen refresh for every little movement, so he came up with a solution to the problem: controlling each individual game element with a dedicated transistor. The rockets were essentially hardwired bitmaps that moved around the screen independently of the background, an important innovation that allowed screen images to be produced more efficiently and providing the basis for sprite graphics.[2]

The earliest video games to represent player characters as human player sprites were arcade sports video games, dating back to Taito's TV Basketball,[3][4][5] released in April 1974 and licensed to Midway Manufacturing for release in North America.[6] Designed by Tomohiro Nishikado, he wanted to move beyond simple Pong-style rectangles to character graphics, by rearranging the rectangle shapes into objects that look like basketball players and basketball hoops.[7][8]Ramtek later released another sports video game in October 1974, Baseball,[6] which similarly displayed human-like characters.[9]

The Namco Galaxianarcade system board, for the 1979 arcade game Galaxian, featured animated, multi-colored sprites.[10] It used a custom sprite system that animated pre-loaded sprites over a scrolling background, which became the basis for Nintendo's Radar Scope and Donkey Kong arcade hardware and home consoles such as the Nintendo Entertainment System.[11] According to Steve Golson from General Computer Corporation, the term "stamp" was used instead of "sprite" at the time.[12]

Home systems[edit]

Signetics devised the first chips capable of generating sprite graphics (referred to as objects by Signetics) for home systems. The Signetics 2636 video processors were first used in the 1978 1292 Advanced Programmable Video System and later in the 1979 Elektor TV Games Computer.

The Atari VCS, released in 1977, features a hardware sprite implementation where five graphical objects can be moved independently of the game playfield. The term sprite was not in use at the time. The VCS's sprites are called movable objects in the programming manual, further identified as two players, two missiles, and one ball.[13] These each consist of a single row of pixels that are displayed on a scan line. To produce a two-dimensional shape, the sprite's single-row bitmap is altered by software from one scan line to the next.

The 1979 Atari 400 and 800 home computers feature similar, but more elaborate, circuitry capable of moving eight single-color objects per scan line: four 8-bit wide players and four 2-bit wide missiles. Each is the full height of the display—a long, thin strip. DMA from a table in memory automatically sets the graphics pattern registers for each scan line. Hardware registers control the horizontal position of each player and missile. Vertical motion is achieved by moving the bitmap data within a player or missile's strip. The feature was called player/missile graphics by Atari.

The term sprite was first used in the graphic sense by one of the definers of the Texas Instruments9918(A) video display processor (VDP).[14] The term was first used by Danny Hillis at Texas Instruments in the late 1970s.[15] The term was derived from the fact that sprites, rather than being part of the bitmap data in the framebuffer, instead "floated" around on top without affecting the data in the framebuffer below, much like a ghost or "sprite". By this time, sprites had advanced to the point where complete two-dimensional shapes could be moved around the screen horizontally and vertically with minimal software overhead.

Systems with hardware sprites[edit]

These are base hardware specs and do not include additional programming techniques, such as using raster interrupts to repurpose sprites mid-frame.

Computer systemSprite hardwareYearSprites on screenSprites on lineMax. texels on lineTexture widthTexture heightColorsHardware zoomRotationBackgroundCollision detectionTransparencySource
Amstrad Plus19901616?1616151, 2, 4× vertical, 1, 2, 4× horizontalNo1 bitmap layerNoColor key[16]
Atari 2600TIA197755191, 826211, 2, 4, 8× horizontalHorizontal mirroring1 bitmap layerYesColor key[17]
Atari 8-bit familyGTIA/ANTIC197988402, 8128, 25611, 2× vertical, 1, 2, 4× horizontalNo1 tile or bitmap layerYesColor key[18]
Commodore 64VIC-II19828896, 19212, 24211, 31, 2× integerNo1 tile or bitmap layerYesColor key[19]
Amiga (OCS)Denise1985Arbitrary812816Arbitrary3, 15Vertical by display listNo2 bitmap layersYesColor key[20]
Amiga (AGA)Lisa1992Arbitrary851216, 32, 64Arbitrary3, 15Vertical by display listNo2 bitmap layersYesColor key
ColecovisionTexas Instruments TMS9918A1983324648, 168, 1611, 2× integerNo1 tile layerPartialColor key
Texas Instruments TI-99/4ATexas Instruments TMS9918A1981324648, 168, 1611, 2× integerNo1 tile layerPartialColor key
Gameduino2011256961,5361616255NoYes1 tile layerYesColor key[21]
IntellivisionSTIC AY-3-89001979886488,1611, 2, 4, 8× vertical, 1, 2× horizontalHorizontal and vertical mirroring1 tile layerYesColor key[22]
MSXTexas Instruments TMS9918A1983324648, 168, 1611, 2× integerNo1 tile layerPartialColor key[23]
MSX2Yamaha V993819863281288, 168,161, 3, 7, 15 per line1, 2× integerNo1 tile or bitmap layerPartialColor key
MSX2+ / MSX turbo RYamaha V995819883281288,168,161, 3, 7, 15 per line1, 2× integerNo1 tile or bitmap layerPartialColor key
Namco Pac-Man
TTL1980669616163NoHorizontal and vertical mirroring1 tile layerNoColor key[24]
TurboGrafx-16HuC6270A1987641625616, 3216, 32, 6415NoNo1 tile layerYesColor key
Namco Galaxian
TTL19797711216163NoHorizontal and vertical mirroring1 tile layerNoColor key[25][26][27]
NintendoDonkey Kong, Radar Scope
19791281625616163IntegerNo1 tile layerYesColor key[28]
Nintendo DSIntegrated PPU20041281281,2108, 16, 32, 648, 16, 32, 6465,536Yes, affineYes, affine4 layers per screen; each layer is independentNoColor key, blending[29]
NES/FamicomRicohRP2C0x PPU19836486488, 163NoHorizontal and vertical mirroring1 tile layerPartialColor key[30]
Game BoyIntegrated PPU198940108088, 163NoHorizontal and vertical mirroring1 tile layerNoColor key[31]
Game Boy AdvanceIntegrated PPU200112812812108, 16, 32, 648, 16, 32, 6415, 255Yes, affineYes, affine4 layers, 2 layers, and 1 affine layer, 2 affine layersNoColor key, blending[32]
Master System,
Game Gear
19856481288, 168, 16151, 2× integer, 1, 2× verticalBackground tile mirroring1 tile layerYesColor key[33][34]
Sega GenesisYM7101 VDP
(SMS VDP-derived)
198880203208, 16, 24, 328, 16, 24, 3215NoHorizontal and vertical mirroring2 tile layersYesColor key[35][36]
Sega OutRun (arcade)198612812816008 to 5128 to 25615Yes, anisotropicHorizontal and vertical mirroring2 tile layers and 1 bitmap layerYesAlpha[37][38][39][40][41][42][43]
Sharp X68000Cynthia jr. (original), Cynthia (later models)1987128325121616151, 2× integerHorizontal and vertical mirroring1-2 tile layers and 1-4 bitmap layersPartialColor key[44][45][46]
Neo GeoLSPC2-A219903849615361616 to 51215Sprite shrinkingHorizontal and vertical mirroring1 tile layerPartialColor key[47][48][49]
Super NES/
Super Famicom
S-PPU1, S-PPU21990128342728, 16, 32, 648, 16, 32, 6415Background onlyHorizontal and vertical mirroring3 tile layers or 1 affine mapped tile layerYesColor key, averaging
Computer systemSprite hardwareYearSprites on screenSprites on lineMax. texels on lineTexture widthTexture heightColorsHardware zoomRotationBackgroundCollision detectionTransparencySource


Some hardware manufacturers used different terms, especially before sprite became common.

Player/Missile Graphics was a term used by Atari, Inc. for hardware sprites in the Atari 8-bit computers (1979) and Atari 5200 console (1982).[50] The term reflects the use for both characters ("players") and smaller associated objects ("missiles") that share the same color. The earlier Atari Video Computer System and some Atari arcade games also used player, missile, and ball for sprites.

Stamp was used in some arcade hardware in the early 1980s, including Ms. Pac-Man.[12]

Movable Object Block, or MOB, was used in MOS Technology's graphics chip literature. Commodore, the main user of MOS chips and the owner of MOS for most of the chip maker's lifetime, used the term sprite for the Commodore 64.

OBJs (short for objects) is used in the developer manuals for the NES, Super NES, and Game Boy. The region of RAM used to store sprite attributes and coordinates is OAM (Object Attribute Memory). This also applies to the Game Boy Advance and Nintendo DS.

See also[edit]


  1. ^ abHague, James. "Why Do Dedicated Game Consoles Exist?". Programming in the 21st Century.
  2. ^Swalwell, Melanie; Wilson, Jason (12 May 2015). The Pleasures of Computer Gaming: Essays on Cultural History, Theory and Aesthetics. McFarland & Company. pp. 109–10. ISBN .
  3. ^Colby, Richard; Johnson, Matthew S. S.; Colby, Rebekah Shultz (27 January 2021). The Ethics of Playing, Researching, and Teaching Games in the Writing Classroom. Springer Nature. p. 130. ISBN .
  4. ^Video Game Firsts, The Golden Age Arcade Historian (November 22, 2013)
  5. ^Basketball Flyer (1974), Arcade Flyer Museum
  6. ^ abAkagi, Masumi (13 October 2006). アーケードTVゲームリスト国内•海外編(1971-2005) [Arcade TV Game List: Domestic • Overseas Edition (1971-2005)] (in Japanese). Japan: Amusement News Agency. pp. 40–1, 51, 129. ISBN .
  7. ^Smith, Alexander (19 November 2019). They Create Worlds: The Story of the People and Companies That Shaped the Video Game Industry, Vol. I: 1971-1982. CRC Press. pp. 191–95. ISBN .
  8. ^"スペースインベーダー・今明かす開発秘話――開発者・西角友宏氏、タイトー・和田洋一社長対談" [Space Invader, Development Secret Story Revealed Now―Interview With Developer Tomohiro Nishikado, Taito President Yoichi Wada]. The Nikkei (in Japanese). March 21, 2008. Archived from the original on March 23, 2008. Retrieved 3 May 2021. Lay summary.
  9. ^Thorpe, Nick (March 2014). "The 70s: The Genesis of an Industry". Retro Gamer. No. 127. pp. 24–7.
  10. ^Dillon, Roberto (19 April 2016). The Golden Age of Video Games: The Birth of a Multibillion Dollar Industry. CRC Press. ISBN  – via Google Books.
  11. ^Making the Famicom a Reality, Nikkei Electronics (September 12, 1994)
  12. ^ abSteve Golson (2016). Classic Game Postmortem: 'Ms. Pac-Man' (Conference). Game Developers Conference. Event occurs at 20:30. Retrieved 2017-01-26.
  13. ^Wright, Steve (December 3, 1979). "Stella Programmer's Guide"(PDF).
  14. ^"Karl Guttag Conference on Delphi TI Net - comp.sys.ti | Google Groups". Retrieved 2009-11-29.
  15. ^Johnstone, Bob (2003). Never Mind the Laptops: Kids, Computers, and the Transformation of Learning. p. 108. ISBN .
  16. ^"Plus - CPCWiki". Cpcwiki.eu. Retrieved 2009-11-29.
  17. ^"Television Interface Adaptor". AtariArchives.com. Retrieved 2011-02-06.
  18. ^"Atari 5200 FAQ - Hardware Overview". AtariHQ.com. Retrieved 2011-02-06.
  19. ^"The MOS 6567/6569 video controller (VIC-II) and its application in the Commodore 64". Archived from the original on August 30, 2006. Retrieved 2006-01-08.CS1 maint: bot: original URL status unknown (link)
  20. ^"Amiga Hardware Reference Manual 4: sprite hardware". 1989.
  21. ^"Gameduino Specifications". excamera.com.
  22. ^"STIC - Intellivision Wiki". wiki.intellivision.us. Retrieved 15 March 2018.
  23. ^TEXAS INSTRUMENTS 9900: TMS9918A/TMS9928AITMS9929A Video Display Processors(PDF). Retrieved 2011-07-05.
  24. ^Montfort, Nick; Bogost, Ian (9 January 2009). Racing the Beam: The Atari Video Computer System. MIT Press. ISBN  – via Google Books.
  25. ^"Galaxian-derived video hardware". GitHub. MAME. Retrieved October 23, 2018.
  26. ^"Galaxian-derived hardware". GitHub. MAME. Retrieved October 23, 2018.
  27. ^"Galaxian hardware family". GitHub. MAME. Retrieved October 23, 2018.
  28. ^Nathan Altice (2015), I Am Error: The Nintendo Family Computer / Entertainment System Platform, pages 53 & 69, MIT Press
  29. ^"Specifications". Nocash.emubase.de. Archived from the original on 2009-06-21. Retrieved 2009-11-29.
  30. ^"Microsoft Word - NESDoc.doc"(PDF). Retrieved 2009-11-29.
  31. ^"GameBoy - Spielkonsolen Online Lexikon". At-mix.de. 2004-06-22. Retrieved 2009-11-29.
  32. ^"Specifications". Nocash.emubase.de. Archived from the original on 2009-06-21. Retrieved 2009-11-29.
  33. ^Charles MacDonald. "Sega Master System VDP documentation". Archived from the original on 2014-03-18. Retrieved 2011-07-05.
  34. ^"Sega Master System Technical Information"(TXT). Smspower.org. Retrieved 2016-11-28.
  35. ^"Sega Programming FAQ October 18, 1995, Sixth Edition - Final". Archived from the original on January 22, 2005. Retrieved 2015-12-10.
  36. ^Staff, Polygon (2015-02-03). "How Sega built the Genesis". Polygon. Retrieved 2016-11-28.
  37. ^"Sega Out Run Hardware (Sega)". System 16. 2016-03-31. Retrieved 2016-11-28.
  38. ^"mame/segaorun.c at master · mamedev/mame · GitHub". github.com. 21 November 2014. Archived from the original on 21 November 2014. Retrieved 15 March 2018.
  39. ^"Out Run". 2001-02-27. Archived from the original on 2001-02-27. Retrieved 2016-11-28.
  40. ^"Out Run Hardware (Sega)". System 16. Retrieved 2009-11-29.
  41. ^"Version 0.3 - 7th February 1998". Coinop.org. Retrieved 2016-11-28.
  42. ^"Archived copy". Archived from the original on 2016-01-25. Retrieved 2016-02-09.CS1 maint: archived copy as title (link)
  43. ^"Sega "X-Board" hardware notes". Archived from the original(TXT) on 2014-03-18. Retrieved 2016-11-28.
  44. ^"X68000-Computer Museum". Museum.ipsj.or.jp. Retrieved 2016-11-28.
  45. ^"mame/x68k.c at master · mamedev/mame · GitHub". github.com. 21 November 2014. Archived from the original on 21 November 2014. Retrieved 15 March 2018.
  46. ^Yoshida, Koichi (12 September 2001). "超連射68K 開発後記". Yosshin's web page (in Japanese). Archived from the original on 12 May 2019. Retrieved 2016-11-28. (Translation by Shmuplations. Archived 2019-07-02 at the Wayback Machine).
  47. ^"Neo-Geo MVS Hardware Notes"(TXT). Furrtek.free.fr. Retrieved 2016-11-28.
  48. ^"Neo-Geo Programming Manual"(PDF). Furrtek.free.fr. Retrieved 2016-11-28.
  49. ^"Big List of Debug Dipswitches". Neo-Geo. 2014-07-09. Retrieved 2016-11-28.
  50. ^"De Re Atari". 1981.
Sours: https://en.wikipedia.org/wiki/Sprite_(computer_graphics)
  1. Hp support assistant download for windows 10
  2. Rebuilt atv engines
  3. Hanover college psychology department
  4. Colon cleanse poop pictures
  5. Average cpa salary

If you grew up in the 1980s playing 8-bit and 16-bit games such as Mario or Sonic, you might be familiar with their unique visual style. Which consisted of pixelated graphics and the usage of graphical tricks like “parallax scrolling” to provide an illusion of depth in what were otherwise simple 2D side scrollers.

The pixelated characters you saw on your TV screen were comprised of 2D bitmaps known as “sprites”. But sprites aren’t a forgotten technology of the past, which disappeared after the appearance of 3D models.

In fact, they are extremely popular in many of the 2D indie/ retro games you can play today. The methods by which sprites are drawn and animated have changed, but sprites themselves are still here. And if you’re interested in becoming an indie dev, you might want to check out how sprites are designed. 

So, what are sprites? Sprites are two-dimensional images or animations overlaid into a scene. They are the non-static elements within a 2D game, moving independently of the background. Often used to represent player-controlled characters, props, enemy units, etc., sprites can be composed of multiple tiles or smaller sprites. They can also be used for pseudo-3D sprite scaling like in Super Scaler, Mode 7, or in pre-rendered movement. More recently, sprites are also being used in web design (like the CSS sprites which combine lots of small images into one sheet to improve web page load times).

Most home consoles back in the day were severely limited in terms of memory size and speed because RAM was so expensive. This meant that developers had to execute some really ingenious strategies to create these awesome gaming experiences.

Only a certain number of sprites could be displayed on-screen at any given time, and the main character’s sprites were often composed of multiple tiles.

Large bosses would take up all the tile budget, so developers reduced the tile cost by only using sprites for certain sections of the boss’s body (like wings) and creating the rest of the body from the game background itself.

This is why certain games would turn the entire background black during a boss fight to hide the fact that most of the boss is actually part of the background itself. They would scroll the background to make the boss move, a trick used in games like Mega Man.

In this article, we shall take a look at the history of sprites and the role they play in gaming today. We shall give you a basic idea of how sprites are animated, along with the reasoning behind the usage of sprite sheets to enhance performance.

The History Of Sprites In Gaming

It should come as no surprise that the very first sprites in gaming were used in arcades. But not until the mid-70s, which saw the first instance of sprites being used within a game when Taito released “Basketball” in 1974.

Initially launched in Japan, it was imported to America under the name “TV Basketball”. The first recorded instance of humans being represented in a video game, TV Basketball had a total of 6 sprites- 4 basketball players and 2 baskets.

Then came Speed Race, in the same year (1974). It took things a step further by implementing sprites with collision detection. This 2D game featured pixelated race cars moving along a vertically scrolling track. Later in 1977, the Taito Z80 arcade game board came out along with the game “Super Speed Race”.

Now you had support for up to 16 sprites via hardware, with the ability to display up to 4 sprites per scanline. Each sprite could be as large as 32 pixels, containing as many as 15 colors. 

In the 1980s, pseudo- 3D graphics were implemented through sprite scaling which is an early form of texture mapping. Using this technique, developers would scale each line of pixels by a different factor, to provide the illusion of 3D.

They would also rotate the background in combination with scaling sprites to further enhance the optical illusion. After Burner, a flight game released for the Sega X in 1987 is a great example. Most of the early games that used sprite scaling were racers, like F-zero for the SNES (1990).

Moving on into the modern era of gaming, 2D sprites were often used within 3D environments to cut down on resource utilization. Billboarding is one such instance, in which objects that always face the camera are constructed with sprites to fool the player into thinking that it is 3D.

It is also a form of sprite scaling and was used to render objects like trees in early 3D games. Very rare in modern 3D games, but still found in low budget titles when stuff like smoke or foliage needs to be shown. Xenoblade chronicles and Catacomb 3-D are examples of modern games using sprites in this fashion.

How Sprites Are Drawn

Traditionally, there have been two main methods we use to draw sprites- Buffering/ Blitting, and Hardware sprites. Using the buffering tactic, a CPU or dedicated graphics processor chip will modify a frame-buffer held in RAM.

Sprites are processed through a display list, the background behind moving objects being constantly refreshed. Double buffering is required to prevent flickering and tearing, but the main advantage of this technique is that you can have more moving objects with higher complexity (larger sprites for example).

The downside? It requires a fast CPU or GPU, along with a high amount of RAM (back then 16KB was considered a lot of memory). In the 1980s, only arcades could afford to use this method since home consoles had limited processing power. 

The second method of drawing sprites doesn’t use bitmap data from the frame buffer. Instead, it floats the sprites on top of the background. Much like a ghost, which is where the term sprite may have come from.

Using the hardware method you are reducing the processing power needed, which is why home consoles implemented this technique. But it also places severe restrictions on how many moving objects you can have on the screen at any given time.

Which forced developers to change render priority of sprites in real time, causing the distinct flickering effect that you see in many of the old console games. The Nintendo Entertainment System (NES) and Sega Genesis used this technique.

These days, computers and consoles have grown powerful enough to draw large high-resolution sprites. We have plenty of memory, really fast CPUs, and dedicated GPUs to handle hundreds of sprites within a single scene.

Artists back in the day would draw sprites pixel by pixel, using colored graph paper and custom-built hardware like the Sega Digitizer System. Now we have Photoshop, tablets, Unity, and various other tools to create sprites.

Some artists scan in hand-drawn artwork and trace it over to software. And not all sprites have to look pixelated unless you’re going for that retro look. One trick is to draw images at a high resolution and scale it down.

Krita and Gimp are popular tools for creating sprites, some developers will also create the graphics in 3D and convert them into 2D.

How Animating Sprites is Done?

We have talked about how sprites are non-static objects which can move independently of the game background. But it would be really weird if your protagonist just skied along the terrain without moving any arms or legs, like an inanimate object.

To breathe some life into your sprites, you’ll have to “animate” them. There are many ways to do this, and several tools which will give you different results with varying degrees of smoothness and detail. The most basic way to animate something is by showing multiple images in quick succession to create the illusion of motion, like movies.

Game developers often use sprite sheets for animation, by rendering different images contained within a single sheet in the correct order. The sprite sheet contains two parts- frames and cycles.

Say you have a character walking, there will be different images on the same sheet of the character with their limbs in different positions. A cycle refers to the activity that your character is doing, i.e. walking cycle, running cycle, attacking cycle, etc. Each cycle is composed of various images. 

The more “samples” you have per cycle, the smoother your animation will be (and also consume more resources). You can get by with as few as 3 different sprites per cycle, like for idle animation when your character is just standing around (works in retro games with pixelated art design).

Or you can move things up to 24 for a smoother cinematic feel. The game engine will call upon the appropriate cycles after taking player input, as well as collision data. High-quality animations will require some coding and tools like Unity or Godot, but you can create basic animations with JavaScript and HTML5.

There are some basic rules to follow in order to create good looking animation. You need to make sure that your characters never feel stiff. The character needs to feel like it is moving even when standing still. Make things bouncy and try to animate hair or clothes blowing in the wind.

Give your characters facial expressions, which brings in some personality. Another really helpful tip is limiting the number of frames. This may seem counterintuitive at first, since more frames = smoother animation. But too many frames will reduce the impact of your character’s movement, over-flourishing the end product.

They will also spoil the timing and tone of your character. Finally, make sure that your animation has really good keyframes and silhouettes. Test stuff against a white background to ensure that you can read the movements easily. 

Related Post
If you are looking for assets for your game you can check out my post Best 21 Sites To Download Amazing Game Assets For Free

The Importance Of Using Sprite Sheets

Enhancing Performance:

A sprite sheet combines multiple sprites into one single image file. This improves performance significantly, by reducing the draw calls. Perhaps the strongest case supporting the usage of sprite sheets is all the rendering time you’ll save on textures.

Say you’ve got 60 textures for 60 different objects on the same sprite sheet, all of these objects can be drawn in one single draw call. With individual sprites, your graphics processor would have to do a lot more work preparing each sprite before drawing. It’s usually faster to draw 200 objects as part of one large sprite sheet than to draw one sprite 200 times. 

Let’s explain this in simpler terms. Imagine the graphics API for your game is an artist, in our example it is OpenGL. So, OpenGL will paint a game scene by taking data from the frame buffer. Your game code will tell OpenGL what to draw, and where.

It will give OpenGL 3 important bits of info- which sprite to choose, what part of the sprite to draw, and finally the location on the scene where the sprite has to be drawn. The game will then wait till the sprite has been drawn, after which new commands will be processed. The faster these sprites are drawn, the higher your framerate.

This method of doing sprites one by one results in plenty of communication overhead. Instead, we could use a sprite sheet which contains all the sprites in one place. And an additional module called the sprite atlas. There is a list of source coordinates telling OpenGL which sprites to copy, and a list of destination coordinates telling OpenGL where on the display to draw them.

Now all the sprites within the scene can be handled with much fewer instructions, which gives our game time to do other stuff like handle player input or calculate collisions.

Reducing Memory Usage:

Now let’s take a look at how sprite sheets can help you save on memory usage. Say you’ve got a side-scrolling adventure game, and one of the scenes is made from several movable objects- trees, flowers, birds, animals, and the main character.

These movable 2D objects are made of sprites. And a sprite is typically represented as a rectangular image with a certain width and height, measured in pixels. In our case, let’s assume the main character’s sprite is 100 pixels tall by 100 pixels wide. Combine that with a color depth of 32 bits, and we get a total memory requirement of (32 bits/8) x 100 x 100 = 40kB. We divided 32bits by 8, since 8 bits= 1 byte.

And the result in bytes is divided by 1000 to give us kB. Here’s the deal- your graphics hardware is only going to support specific sprite sizes. This means that a sprite will often be padded with filler pixels to support hardware constraints. So your nice little 40 x 40 pixels might end up turning into a 256 x 256 pixel square sprite which takes up a lot more memory (over 256kB compared to 40kB previously). 

Still not that big of a deal since modern hardware like an iPhone X or Galaxy S10 has plenty of RAM to go around. But games have several dozen sprites within each scene, ranging from characters and props to buildings and vehicles.

All of this adds up fast, and you end up wasting resources for no reason. A sprite sheet alleviates most of these problems by packing additional sprites into the wasted filler space. You now have a single unit- the sprite sheet, instead of bloated individual sprites.

Things are compressed further by removing transparent bits from the sprites. You can even reduce the color depth from 32 to  16 bits and make up for the loss in color accuracy by applying dithering. 

You will need some specialized tools to create your own sprite sheet, here are a few- Texture Packer, ShoeBox, Zwoptex, and Sprite Sheet Packer. Or if you’re using Unity to develop your game, there are built-in features to assist you with the creation of sprite sheets (Sprite Editor).


Sprites are an indispensable tool when it comes to designing 2D indie games and retro games. They can be implemented in various game genres such as sidescrollers, platformers, 2D RPGs, and fighting games. A lot of web games that you play in the browser use sprites.

Learning how to create and use them will help you significantly on the path to becoming a professional game developer. There are plenty of online resources to help you along. Hopefully, our article provided a good general overview of what to expect.

There are websites where you can download free graphics assets, including sprite sheets- kenney.nl, OpenGameArt.Org, itch.io, etc.

Sours: https://gamingshift.com/sprites-in-games/


Sheet character sprite


How to make a Sprite Sheet in Photoshop? Learn how to make Sprite Sheets for your Unity game!


You will also like:


1258 1259 1260 1261 1262