Tile Based Worlds

This site aims to educate and inspire. No programming experience is required.

Tile Base Worlds is a website to explore the fun and beauty of ordered tile worlds. Mostly in the context of games but can also be useful for other creative computing tasks.

Using p5.js for creating our worlds. This is an approachable library that suits beginners to advanced users. It is supported by the processing foundation which has an active community and a great inclusion policy.

To begin the journey pick a link below.

  1. Crash Course in programming. Skip if you’re familiar with Javascript or another programming language.
  2. Why tiles?
  3. Map format
  4. More maps
  5. Rendering a maps
  6. The Hero
  7. Keys to move
  8. Hitting the wall
  9. Open the door
  10. Jumping
  11. Clouds
  12. Ladders
  13. The enemy
  14. Enemy on a platform
  15. Shooting
  16. Collecting items
  17. Moving tiles
  18. Scrolling
  19. More on scrolling
  20. Depth
  21. Mouse movement
  22. Isometric view
  23. Isometric mouse
  24. Isometric scroll
  25. Rotate Hero
  26. Rotate background
  27. Pathfinding breadth-first
  28. Pathfinding best first
  29. Slopes

Motivation for creating

This set of tutorials was inspired by Tonypa’s tile-based tutorials by Tonu Paldra. Originally published here http://www.tonypa.pri.ee/tbw/index.html but the domain has since dropped. I stumbled across the content on an Action Script dev forum goToAndPlay. And wanted to modernise this work. This series of posts was a huge piece of inspiration for me back in the day (10+ years ago now). I was so excited to discover the mechanics behind some of my favourite games like Pokemon, Advanced Wars, Fire Emblem and Final Fantasy.

The original tutorials were written for Action Script 2.0 and Macromedia Flash (before Adobe brought it). Here I’d like to focus on Javascript and Browser first in a native format. This is free and accessible to everyone without requiring any libraries. There are some other great options like PyGame or Lua Love. If time allows I’ll update the examples to include these but if not they’re worth exploring yourself.

The aim is to demystify some of the mechanics in an approachable way and ultimately inspire you the reader to go out and make some games yourself.


A brief note about licensing. All the writing and media published here will be under a Creative Commons licence, meaning you need to attribute it if you’re going to use it outside of the context of this website. But all code will be Open Source so you’re free to use and modify for personal and commercial use without any warranty.