Creating a Sprite Editor From Scratch

One of the most interesting things about creating things for the web is that it can veer off in different directions and eventually turn out to be something much better than you set out to create. Start with a simple CodePen to teach two dimensional arrays in JavaScript using Canvas. Add boolean values for each element in the array for on or off. Then using some event listeners set the value and set the fill style for the object to change the color of the square. Guess what: In three simple steps you have created a basic sprite editor. Add the ability to change colors, erase, and export as PNG and you now have a pretty neat sprite

Let’s start with Canvas

If you are not familiar with Canvas it is an HTML5 DOM element that was created to designate a certain portion of the webpage for drawing. If you need a primer on Canvas there are many books, websites, and blogs that cover the topic extensively. This blog post will only cover the basics. In order to add a Canvas element to your page use the following tag:

<canvas id="myCanvas" width="800" height="600"></canvas>

Your webpage will now allocate an 800 x 600 pixel section of your screen that is reserved for drawing. Please note that this is all you really need to understand from an HTML and CSS standpoint to understand the demo. Everything else is done in JavaScript: set up the canvas elements, set some constants (width, height), set some defaults (pen color, background color), and go on our merry way.

Boxes

“Many interesting and important things have been put into boxes over the years. textiles, other boxes, even children’s candy.”

“Do any of these boxes have candy in them?”

“No”

In order to create an array of objects we need to first create our object. In this case (in case you couldn’t tell from The Simpsons quote above) is going to be a box. Each box will have the usual attributes you would expect such as an x coordinate, y coordinate, length, and color all of which can be set in the constructor:

function box(x, y, l, color)

It is also going to have a method called draw. The draw method is where the app relies on some of the canvas functionality add a rectangle to the page. Now you are off to the races.

Creating the array

Begin by creating an empty two dimensional array. Two dimensional arrays are basically an array of arrays. These can be used for many things from storing data points or for creating matrices. In this case it is going to serve as our grid.

var grid = [ [], [] ];

Then by looping through a nested for loop the grid can be populated with box using the defaults and drawn to the screen.

Adding the Event Listeners

“Just nod if you can hear me”

Next step is to create the event listeners which are going to allow interacting with the app. We are going to have three main event listeners:

  • mouseup
  • mousemove
  • mousedown

Both mouseup and mousedown operate in a very similar fashion. They check the location of the mouse (e.clientX, e.clientY) and determine the bounding rectangle for that location. Assuming mousedown is true it will fill in that square. Using the state variable we can tell if the app is set to draw (state == 1) or erase (state == 0). Our mouseup function simply serves to set mousedown = false in order to stop drawing on mousemove.

The remaining events are for handing the button clicks from the UI to change state, change color, clear the screen, change the color, and export as a PNG.

Refreshing the screen

Whenever you are creating an app that draws to the screen you need to make sure the screen gets redrawn to reflect changes. We define a function called refresh() which gets passed into another Canvas function called requestAnimationFrame(). This function is then called recursively from within the refresh() to make sure it is continuously updated. The function clears the screen and runs through our nested for loop to fill in all of the squares in the grid with the assigned color.

Wrapping up

Hopefully this post was informative and you will be on your way to creating some interesting web apps (be it accidentally or on purpose). Feel free to fork a copy of this pen and create your one enhancements. At least one person forked it to create their own version that allowed you to select colors from a color wheel. The more creative the better. Happy coding.


Originally published at resurgencewebdesign.com on December 31, 2015.

Show your support

Clapping shows how much you appreciated Brian Greig’s story.