Pixel Papercraft

.
.

Papercraft Generator Builder

The Generator Builder will help you make your own generators that may be featured on the site.

Generators are an advanced topic and require some basic JavaScript programming skills.

See the Quick Start below to get started, then read the Generator Programming Guide for more details.

Get in touch via the Contact page for help.

Generator Developers

If you'd like to create a generator (even if it's not in this list) then let us know.

Pig aaronhawksley
Pig (Advanced) TepigMC
Pig Character aaronhawksley
Sheep Not Made
Sheep Character Not Made
Spider Not Made
Spider Character Not Made
Squid Not Made
Squid Character frownieman
Villager Not Made
Villager Character Boe6Eod7Nty
Wither Not Made
Wolf Not Made
Wolf Character dodecaphon

1. Choose the Generator Images

Select all of the images that your generator will need (you can select multiple at a time).

This may include a background, folds and maybe a labels image. You might also include several textures that users can choose from.

Images should be at most 595 x 842 pixels in size. You might like to use the A4 page template.

2. Write the Generator Script

Now you can write your generator script.

The generator builder will save your script automatically, but you should take a copy of it and save it somewhere else whenever you take a break so it does not get permanently lost :(
Click 'Run Script' to see the the results of your code.

Quick Start

Here's a quick tutorial to get you started.

Step 1

Download the following files

Step 2

In the Generator Images section, select the Background.png and Folds.png files.

Step 3

Enter the following Generator Script:

// Define the user inputs
// In this case, we just have one input to ask the user for a Minecraft character texture.
Generator.defineInput('Skin', {type:'minecraft-character-texture'});

// Draw the Background image
Generator.drawImage('Background');

// Draw the Head parts from the skin selected by the user
Generator.drawImage( 'Skin', {x:0,  y:8, w:8, h:8}, {x:74,  y:89,  w:64, h:64} ); // Right
Generator.drawImage( 'Skin', {x:8,  y:8, w:8, h:8}, {x:138, y:89,  w:64, h:64} ); // Face
Generator.drawImage( 'Skin', {x:16, y:8, w:8, h:8}, {x:202, y:89,  w:64, h:64} ); // Left
Generator.drawImage( 'Skin', {x:24, y:8, w:8, h:8}, {x:266, y:89,  w:64, h:64} ); // Back
Generator.drawImage( 'Skin', {x:8,  y:0, w:8, h:8}, {x:138, y:25,  w:64, h:64} ); // Top
Generator.drawImage( 'Skin', {x:16, y:0, w:8, h:8}, {x:138, y:153, w:64, h:64} ); // Bottom

// Draw the fold lines on top
Generator.drawImage('Folds');

Step 4

Click Run Script.

You should see a prompt to select a Skin texture file and a blank template.

Step 5

Click the Choose ... button and either enter a Minecraft username, select any Minecraft skin file, or select the Skin.png texture file you just downloaded.

You should see Steve's head on a blank template.

Generator Programming Guide

Defining Inputs for Minecraft Skins

You can ask the user to select a Minecraft skin texture.

Example: Suppose you want to ask for a Minecraft Character texture named Skin.

// Define user texture
Generator.defineInput('Skin', {
  type:'minecraft-character-texture'
});

This tells the generator that you need a Minecraft Character skin.

The user will be prompted to enter either a Minecraft username, or select a skin file, or enter a skin file URL.

You can then use Generator.drawImage() to draw this skin onto the page. See Drawing Textures below.

Sometimes it's useful to know if an input has been selected or not. For example, if you have four inputs but you only want to draw something for the inputs that have been selected.

Example: Suppose you have 3 inputs named Skin 1, Skin 2 and Skin 3. You can check if Skin 2 has been selected with Generator.hasInput('Skin 2'):

// If Skin 2 has been selected then do something
if ( Generator.hasInput('Skin 2') ) {
  // Do something
}

Defining Inputs for Other Textures

You can also tell the generator to request non-Minecraft skin textures, such as textures for mobs or anything else.

Example: Suppose you want to ask for a non Minecraft character texture, but you also name it Skin.

Generator.defineInput('Skin', {
  type: 'texture',
  standardWidth: 64,
  standardHeight: 32
});

Here we define a user input named Skin.

We specifiy its type as texture so the generator knows you want to prompt the user for a texture file.

We also specify the standard width and height of the texture. This is required so that higher resolution textures will also work. For example, suppose you create a generator for a 64x64 skin but someone selects a 256x256 skin file, then it will still work correctly.

When you run the script you will see a prompt for a texture file named Skin.

Drawing Images

Any images you add or textures selected by users can be drawn onto the page.

Example: Suppose you have uploaded two images named Background and Folds and you have an texture input named Skin.

// Draw the background, folds and the skin
Generator.drawImage('Background');
Generator.drawImage('Folds');
Generator.drawImage('Skin');

Images can also be drawn at different positions on the page.

Example: Draw an image at position x = 150 and y = 220.

// Draw a special overlay
Generator.drawImage('Eyes', 150, 220);

Drawing Textures

To draw a texture means that you want to copy a rectangle from the texture onto the page.

To do this, you need to:

  1. Identify the x, y coordinates plus width and height of a rectangle on the texture to copy (like the face)
  2. Identify the x, y coordinates plus width and height of a rectangle on the page to draw it into

Example: Suppose we want to copy Steve's face onto the page.

First we need the texture of Steve's face.

This is a rectangle (a square in this case) with the following coordinates and size:

x = 8
y = 8
width = 8
height = 8

In JavaScript we write this as:

{x:8, y:8, w:8, h:8}

Next, we need to identify the rectange on the page.

It needs to draw onto the page as a bigger rectangle with the following coordinates and size:

x = 138
y = 89
width = 64
height = 64

In JavaScript we write this as:

{x:138, y:89, w:64, h:64}

Suppose the name of the texture is Skin, then to draw this texture onto the page we would write:

Generator.drawImage( 'Skin', {x:8, y:8, w:8, h:8}, {x:138, y:89, w:64, h:64} );

Notice this is made up of several parts:

  1. The function to draw the texture:
    Generator.drawImage( 'Skin', {x:8, y:8, w:8, h:8}, {x:138, y:89, w:64, h:64} );

  2. We tell it which texture we're using
    Generator.drawImage( 'Skin', {x:8, y:8, w:8, h:8}, {x:138, y:89, w:64, h:64} );

  3. We tell it the rectangle on the texture
    Generator.drawImage( 'Skin', {x:8, y:8, w:8, h:8}, {x:138, y:89, w:64, h:64} );

  4. We tell it the rectangle on the page
    Generator.drawImage( 'Skin', {x:8, y:8, w:8, h:8}, {x:138, y:89, w:64, h:64} );

Tip: If you're using Gimp then if you select the rectangular region on the skin or the rectangular region on the template then Gimp will show you the x and y position plus the width and height.

In this example we have:
x: 138
y: 89
w: 64
h: 64

Rotating and Flipping Textures

Textures can be rotated and flipped when you use Generator.drawImage().

Example: Rotate a texture 90 degrees.

Generator.drawImage( 'Skin', {x:8, y:8, w:8, h:8}, {x:138, y:89, w:64, h:64}, {rotate:90} );

Notice that we added {rotate:90} to the line. Just change 90 to whatever angle you want to rotate by.

Example: Flipping a texture horizontally or vertically.

Generator.drawImage( 'Skin', {x:8, y:8, w:8, h:8}, {x:138, y:89, w:64, h:64}, {flip:'horizontal'} );
Generator.drawImage( 'Skin', {x:8, y:8, w:8, h:8}, {x:138, y:89, w:64, h:64}, {flip:'vertical'} );

You add either {flip:'horizontal'} or {flip:'vertical'} to flip the texture.

Example: Flipping and rotating a texture.

Generator.drawImage( 'Skin', {x:8,y:8,w:8,h:8}, {x:138,y:89,w:64,h:64}, {flip:'horizontal', rotate:90} );

You can put both flipping and rotating together {flip:'horizontal', rotate:90}.

Drawing Text

Text can be added to your page using Generator.drawText().

Example: Write the text Pixel Papercraft on the page at coordinates x = 100 and y = 150;

Generator.drawText( 'Pixel Papercraft', 100, 150 );

Example: Different font styles.

Generator.drawText( 'Pixel Papercraft', 10, 20, {fontStyle:'bold'} ); // Bold
Generator.drawText( 'Pixel Papercraft', 10, 40, {fontStyle:'italic'} ); // Italic
Generator.drawText( 'Pixel Papercraft', 10, 60, {fontStyle:'bold italic'} ); // Bold Italic

Example: Different sizes.

Generator.drawText( 'Pixel Papercraft', 10, 80,  {fontSize:'16px'} ); // Normal size
Generator.drawText( 'Pixel Papercraft', 10, 100, {fontSize:'24px'} );
Generator.drawText( 'Pixel Papercraft', 10, 120, {fontSize:'26px'} );

Example: Different fonts.

Generator.drawText( 'Pixel Papercraft', 10, 140, {fontFamily:'sans-serif'} ); // Normal font
Generator.drawText( 'Pixel Papercraft', 10, 160, {fontFamily:'Minecraft' } ); // Minecraft font

Example: Different alignments.

Generator.drawText( 'Pixel Papercraft', 10, 180, {textAlign:'left'} );
Generator.drawText( 'Pixel Papercraft', 10, 200, {textAlign:'right'} );
Generator.drawText( 'Pixel Papercraft', 10, 220, {textAlign:'center'} );

Example: You can combine any of the above:

Generator.drawText('Pixel Papercraft',10,240, {fontSize:'10px',fontStyle:'bold'} );
Generator.drawText('Pixel Papercraft',10,260, {fontSize:'20px',fontStyle:'italic'} );
Generator.drawText('Pixel Papercraft',10,280, {fontSize:'30px',fontFamily:'Minecraft',fontStyle:'italic'} );

Adding Comments to your Program

Comments are lines that start with //

They are just notes to yourself and help you to remember what's going on it parts of the program. You can put anything after the // and it will be ignored.

Adding Variables to your Program

So far your programs look something like this.

// Head
Generator.drawImage( 'Skin', {x:0,  y:8, w:8, h:8}, {x:74,  y:89,  w:64, h:64} ); // Right
Generator.drawImage( 'Skin', {x:8,  y:8, w:8, h:8}, {x:138, y:89,  w:64, h:64} ); // Face
Generator.drawImage( 'Skin', {x:16, y:8, w:8, h:8}, {x:202, y:89,  w:64, h:64} ); // Left
Generator.drawImage( 'Skin', {x:24, y:8, w:8, h:8}, {x:266, y:89,  w:64, h:64} ); // Back
Generator.drawImage( 'Skin', {x:8,  y:0, w:8, h:8}, {x:138, y:25,  w:64, h:64} ); // Top
Generator.drawImage( 'Skin', {x:16, y:0, w:8, h:8}, {x:138, y:153, w:64, h:64} ); // Bottom

One of the challenges is that if you wanted to move the head to a new position on the page then you would need to update the target x and y coordinates for all six of those lines. That's 12 numbers to change.

This program can be improved by using variables.

// Define the variables we need to use
// This only gets written at the very top of your program
var ox; // ox means 'origin x'
var oy; // oy means 'origin y'

// Head
ox = 74; // The head starts at 74 pixels across
oy = 25; // The head starts at 25 pixels down
Generator.drawImage( 'Skin', {x:0,  y:8, w:8, h:8}, {x:ox,     y:oy+64,  w:64, h:64} ); // Right
Generator.drawImage( 'Skin', {x:8,  y:8, w:8, h:8}, {x:ox+64,  y:oy+64,  w:64, h:64} ); // Face
Generator.drawImage( 'Skin', {x:16, y:8, w:8, h:8}, {x:ox+128, y:oy+64,  w:64, h:64} ); // Left
Generator.drawImage( 'Skin', {x:24, y:8, w:8, h:8}, {x:ox+192, y:oy+64,  w:64, h:64} ); // Back
Generator.drawImage( 'Skin', {x:8,  y:0, w:8, h:8}, {x:ox+64,  y:oy,     w:64, h:64} ); // Top
Generator.drawImage( 'Skin', {x:16, y:0, w:8, h:8}, {x:ox+64,  y:oy+128, w:64, h:64} ); // Bottom

Now if we wanted to move the position of our head we only need to change 2 numbers instead of 12.

The complete program looks like this:

// Define variables
var ox;
var oy;

// Background
Generator.drawImage('Background');

// Head
ox = 74;
oy = 25;
Generator.drawImage( 'Skin', {x:0,  y:8, w:8, h:8}, {x:ox,     y:oy+64,  w:64, h:64} ); // Right
Generator.drawImage( 'Skin', {x:8,  y:8, w:8, h:8}, {x:ox+64,  y:oy+64,  w:64, h:64} ); // Face
Generator.drawImage( 'Skin', {x:16, y:8, w:8, h:8}, {x:ox+128, y:oy+64,  w:64, h:64} ); // Left
Generator.drawImage( 'Skin', {x:24, y:8, w:8, h:8}, {x:ox+192, y:oy+64,  w:64, h:64} ); // Back
Generator.drawImage( 'Skin', {x:8,  y:0, w:8, h:8}, {x:ox+64,  y:oy,     w:64, h:64} ); // Top
Generator.drawImage( 'Skin', {x:16, y:0, w:8, h:8}, {x:ox+64,  y:oy+128, w:64, h:64} ); // Bottom

// Fold Lines
Generator.drawImage('Folds');

Using Multiple Pages

By default the builder gives you one blank page to work with, however some designs may require more than one page.

To specify additional pages you can use the Generator.usePage() function. You just have to choose a name for each page, which can be any name you like.

// Put your texture options and variables here ...

// Then choose the first page
Generator.usePage('Head and Body');

// Draw some images and textures here ...

// Then choose the next page
Generator.usePage('Legs');

// Draw more images and textures here ...

If each page doesn't have a specific purpose, just call them Page 1, Page 2, etc.

// Put your texture options and variables here ...

// Then choose the first page
Generator.usePage('Page 1');

// Draw some images and textures here ...

// Then choose the next page
Generator.usePage('Page 2');

// Draw more images and textures here ...

Handling Transparent areas

If a texture has transparent parts then they will draw correctly. Unfortunately for some textures (especially Minecraft character skins) the transparent areas, such as the hat/helmet, are not actually transparent. Instead they are just a solid colour like black or white.

To handle this there is an extra option can set in your script. To make a section that's all one colour become transparent:

// Make solid colours transparent
Generator.setImageOption('Skin', 'solidColorIsTransparent', true);

And to go back to drawing the solid colours again:

// Make solid colours non-transparent
Generator.setImageOption('Skin', 'solidColorIsTransparent', false);

Getting User Input

It's sometimes useful to give your user some choices in your generator.

For example, some people want the fold lines, and others don't. Your generator might have a saddle to turn on or off, or a list of weapons they can choose from.

Boolean Variables

Boolean variables are a true or false choice. They may be used to show or hide certain parts of your generator.

// Define user variables
Generator.defineBooleanVariable('Show Folds', true);
Generator.defineBooleanVariable('Show Labels', true);

These should be written at the top of your script.

This will create two variables that will show up as a check box options when you run your generator script.

  • The first argument is the name of the variable.

  • The second argument is the inital value of the variable. It must be either true or false

To make use of these variables we need some extra code:

// Get user variables
var showFolds = Generator.getVariable('Show Folds');
var showLabels = Generator.getVariable('Show Labels');

// Folds
if (showFolds) {
  Generator.drawImage('Folds');
}

// Labels
if (showLabels) {
  Generator.drawImage('Labels');
}

Here we first get the current values of the variables, and then later in the program we use them to decide if we should show the Folds and Labels images.

Range Variables

Range variables let your user choose a value between two numbers.

// Define user variables
Generator.defineRangeVariable('Head Width', {min:1, max:16, value:8, step:1});
Generator.defineRangeVariable('Head Height', {min:1, max:16, value:8, step:1});

This should be written at the top of your script.

This will create two variables that will appear as sliders on most browsers (in older browsers it will be an input box).

  • The first argument is the name of the variable.

  • The second argument defines the range of values:

    • min - The first number in the range
    • max - The last number in the range
    • value - The initial value
    • step - How much the slider should jump when choosing values

To make use of these variables we need the following code:

// Get user variables
var headHeight = Generator.getVariable('Head Height');
var headWidth = Generator.getVariable('Head Width');

// Show the width and height
Generator.drawText(headWidth, 10, 10);
Generator.drawText(headHeight, 10, 30);

Here we first get the current values of the variables, and then later in the program just print them as text on the page but you can use those numbers for any purpose.

Select Variables

Select variables let your user choose from a list of values that you provide.

// Define user variables
Generator.defineSelectVariable('Armor Style', ['Diamond', 'Gold', 'Bronze']);

This should be written at the top of your script.

This will create a variable that will appear as select list.

  • The first argument is the name of the variable.

  • The second argument is an array of values the user can choose from. The first item in the array is the default value.

To make use of these variables we need the following code:

// Get user variables
var armorStyle = Generator.getVariable('Armor 'Style);

// Show the selected style
Generator.drawText(armorStyle, 10, 10);

Here we first get the current values of the variable, and then later in the program just print them as text on the page but you can the selected value for any purpose.

Providing Texture Choices

It's sometimes useful to let your user choose from a set of available textures rather than finding their own.

For example, you might provide a set of armour textures or weapon textures and the user can choose which one they want to use. can choose one.

1. Select the textures you want to use

In the Generator Images section above, add and name all of the images you want to use.

Suppose you added images named Diamond Armour, Gold Armour and Bronze Armour.

2. Add the choices to your input textures

Add a choices property to you input definition which just lists all of the texture choices.

Generator.defineInput('Armour', {
    type:'texture',
    standardWidth: 64,
    standardHeight: 64,
    choices: ['Diamond Armour', 'Gold Armour', 'Bronze Armour']
});