Pixel Map Generator
Make your own pixel maps!
Solo Project
Roles on Project: Designer & Programmer
Click the link below to use the Pixel Map Generator
About Pixel Map Generator
This software allows its users to create and design their own pixel maps for use within video games, tabletop roleplaying games and other similar media. The user interface provided allows users a large amount of freedom with how they can manipulate and customise their pixel map which includes: manipulating the colours and thresholds of biomes, manipulating the noise that the map generated is based off, generating their own map seed, loading preset colour palettes as well as saving and loading generator files so that user can come back and continue working on the same map. Using these provided functions, users are able to produce a variety of different maps.
Summary Of Work & Contributions
Developed early concepts of an interactive pixel map generator
Conducted research into making use of perlin noise to generate maps
Iteratively prototyped a pixel map generator using p5js
Released the tool to itch.io for people to use
Example Pixel Map Outputs
Outcomes From Project
This project gave me the opportunity to develop an interactive piece of software outside of the usual tools I use which are Unity and C#, as for this project I made use of JavaScript and the p5js library. It also led me to find that I had an interest in developing systems and tools that can be used to create assets for other projects, or make the development of projects easier.
My Process
Concept Work
This project was originally developed for the DXB211 - Creative Coding unit at QUT. The task of this project was to develop some sort of creative piece using p5js. I decided to make a pixel map generator that allowed users to create a range of maps that they can use in game projects or tabletop roleplaying games.
My approach to the design process was very exploratory, as I had no idea how to start generating terrain-like outputs through perlin noise. I first started by sketching out what I was aiming to make. My initial concept was that the user would put in a bunch of inputs such as the size of the map, the biomes they want, the structures they wanted and the number of structures they wanted, and from that input, a pixel map would be generated.
Pixel Map Generation Prototyping Work
After researching terrain generation and the concepts surrounding it, I started experimenting with how perlin noise worked in p5js, starting off by creating a 2D perlin noise map.
I then experimented with pixelating that noise map data and then colouring it different shades of green based off the noise values of each pixel.
I then experimented with colouring the map different colours depending if the noise value was above or below a certain threshold, allowing me to create land and water.
I continued taking this idea of thresholds further, adding sand to the map.
I felt however that the way I was displaying the different colours/biomes of the map was a bit messy in its current state. Since I planned on adding more biomes to the map, I decided to experiment with making the colouring of the map simpler and more visually comprehensible.
Pixel Map Generator Interface Work
From this point, I had a pretty good grasp on the different properties of the pixel map and how it was generated. My focus then shifted to creating user interface elements that would allow users to tweak these different properties and over many iterations, added in the first version of the generator’s graphical user interface.
I continued to refine and add different user interface elements as I asked questions like, ‘What if the user could change the seed of the map?’ or, ‘What if the user could save and load maps that they have been working on?’.
Once I was happy with all the interface elements and the generation of the pixel map, I landed on my final version of the generator which unified the design of the whole program.