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.


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 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.



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


Fast 2D rendering on GPU - 2020

3 Techniques for Dynamically Colored UI Graphics - 2020

Quadrant-Sizing for Efficient UI Rendering - 2020

Perceptually Smooth Multi-Color Linear GradientsProgressing in Circles - 2020

Graveyard Keeper: How the graphics effects are made - 2018

2d graphics in Rust discussion - A look at GPU memory management - 2018

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

Texture formats for 2D games - 2015. Part 1, Part 2, Part 3 and Part 4. - 2015

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

Part 1 - Commodore and Nintendo

Part 2 - Apple and Atari

2D Graphics on Modern GPU - 2019


A sort-middle architecture for 2D graphics - 2020


Fast 2D rendering on GPU - 2020


The case of the curiously slow shader - 2021