Do You Know Pixel Art?

A showcase of the pixel art evolution timeline as it pertains to videogames

Demo: https://boring-mayer-fdb8e8.netlify.com/

Table of Contents

1. Motivation
2. Tools
3. List of games
4. Todo

Motivation

2D art and Pixel Art in particular can be used to create stunningly beautiful and dynamic visuals for videogames, so it is interesting to track the evolution of Pixel Art across its history.

Tools

To create the website, several popular front-end libraries were used:

• React is used for its declarative approach to DOM building and component-oriented architecture;
• Material-UI is used to provide a mature UI-kit structure and consistent but customisable look;
• GatsbyJS is used because of its large number of optimisations out-of-the box and GraphQL extendability.

List of games:

1. Pong ✔️
2. Space Invaders ✔️
3. Pacman ✔️
4. Super Mario Brothers ✔️
5. Castlevania 3 ✔️
6. Sonic ✔️
7. Super Metroid ✔️
8. Castlevania SOTN ✔️
9. SF 3rd Strike ✔️
10. New-school: Cave Story, Spelunky & Co ✔️

Todo

• Create a slide React component ✔️
• Hook up styling
  • Add drop caps to paragraphs ✔️
  • Add interesting transitions between slides (inspiration: https://github.com/codrops/RotatedRevealers; but default Gatsby transitions can be enough!) ✔️
• Add a Sitemap ✔️
• Do SEO ✔️
• Add analytics
• Look into layout bugs on slides at certain pixel widths