Export data for your pixel art

This exercise will help you to understand how pixel values are used to create images. Use this pixel art generator to design a simple pixel art game character and then export the colour data for the character as a two-dimensional array.

You can substitute the beads in the pixel art generator with any shape of your choice.

You can substitute the beads in the pixel art generator with any shape of your choice.

Once you’re done, right click the sketch and it will save a text file with the hex codes for the colours you’ve used.  You’ll find the file colours.txt saved in the same folder as your sketch. These colours can now be used to generate new versions of your character at different resolutions.

3 pixel units

3 pixel units

5 pixel units

5 pixel units

10 pixel units

10 pixel units

The hex codes will look something like this if you open the file:

FFB90093,FF000000,FF000000

Each one encodes the colour for a ‘pixel’ in your design. Now you can create various versions of your pixel art at different resolutions. Or you can experiment with different shapes, as in the example below.

This pixel art character is created with ellipses instead of rectangles

This pixel art character is created with ellipses instead of rectangles

If you want to substitute your own hex codes in the following example you should edit it in a text editor such as Notepad++. You will need to

  • replace all commas with “,”
  • replace all \n characters except the last one with “},\n{“
  • place the following code before the first hex code:  String [][] colours = {{“

Can you work out what variable you will need to change in order to create high or low resolution versions of your character? Your final code should look like this, just much longer:

String[][]colours ={   {"FFB90093","FF000000","FF000000"},
                        {"FFB90093","FF000000","FF000000"} 
                                                                                      };

Here is the code which allows you to display your character using various different processing shapes. Can you spot the nested loop, and how it is used with the 2D array of data?

int rows = 30;
int columns= 25;
noStroke();e
int size=10;
size(columns*size,rows*size);
String[][]colours ={{"colour data goes here"},
{"colour data goes here"},

{"etc"},
{"last line looks like this"} }; 
for(int i=0;i<columns;i++){ 
    for(int j=0; j<rows;j++){
     String colour = colours[i][j]; 
     int col = unhex(colour); 
     fill(col); 
     rect(i*size, j*size, size, size); } } 
save("character.png");
Advertisements

One thought on “Export data for your pixel art

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s