Graphics‎ > ‎

2D

Pixel art before it was cool.

Graphics in 2D is made up of raster images. On older systems (SNES) it was split into two separate parts, backgrounds and sprites. These two ways of handling things in hardware lead to a number of basic ways of doing things that still remain even if it all draws the same way now.  

Backgrounds

In the dark ages of game development the computers had two problems, they where slow and had no memory. That made it hard as a common way to optimize something is to transfer resources between memory or cpu time. To minimze the speed issue many game devices supported background fields that could be scrolled on the display around in hardware. So one could make the whole world in one big wide data buffer and then simply scroll the view along as the player walked to the right. With sprites drawing the moving things like monsters and enemies there was no need to spend CPU time changing the background. More background layers was added and could scroll seperate from each other to make the world even more fun with mountains in the distance and bushes in front of the player.

The downside of all this was the memory usage. A big background did eat memory even if only a few bits was used as the color for a single pixel. To lower the memory usage the background could avoid describing the color of a single pixel and instead describe a block of pixels. These small blocks or tiles was something like 16x16 pixels and could be stored once and then reused all over the background. A background with 16x16 blocks that was 1024x1024 pixels would only consume 4Kb instead of 1Mb.

Sprites

Sprites are images that can be moved around on the screen and it was originally supported by the hardware. The good thing about them was that they did not disturbed the background and some hardware also supported collision detection. There was a limit to how many sprites could be used at the same time in hardware but clever coding could work around some of these limits. One way was to move the sprites around as each line of the screen was drawn. When the amount of memory increased software sprites could be used to save the background the sprite covered and then draw it back when the sprite was moved. These days there is no problem redrawing all the sprites each frame.

Blitter


Effects

The effects 2D list a number of special effects that can be used in 2D.



Reference

8 Bit & '8 Bitish' Graphics-Outside the Box - 2016
Advanced Visual Effects in 2D Games - 2015
2D procedurally generated world building in Unity - 2015
The Hobbyist Coder #3 : 2D platformers pathfinding - part 1/2 - 2015
Semisphere - 2015
Cellular Automata - 2015
How "oldschool" graphics worked - 2015
Part 1 - Commodore and Nintendo
Part 2 - Apple and Atari
Finding the boundary of a one-bit-per-pixel monochrome blob - 2014
2D Pixel Perfect Shadows - 2013
How to Generate Shockingly Good 2D Lightning Effects - 2013
The hobbyist coder #1: 2D platformer controller - 2013
Curved Paths - 2013
The guide to implementing 2D platformers  - 2012
2d Visibility - 2012
How to make a 2d Platform Game – 2011- part 1, part 2 and part 3
My technique for the shader-based dynamic 2D shadows - 2010
Map rendering cutton corners - 2010
Simple map generation - 2010
Walls and Shadows in 2D - 2009
Lightning Bolts - 2009
Chapter 24. Using Lookup Tables to Accelerate Color Transformation - 2005
Texture formats for 2D games - 2015. Part 1, Part 2, Part 3 and Part 4. - 2015
Graveyard Keeper: How the graphics effects are made - 2018
2d graphics in Rust discussion - A look at GPU memory management
Fast 2D rendering on GPU
3 Techniques for Dynamically Colored UI Graphics
Quadrant-Sizing for Efficient UI Rendering
Perceptually Smooth Multi-Color Linear Gradients
Progressing in Circles