The Openpixels Character Editor is born

Some time ago i was browsing for 2d sprites again and somehow run accross a nice collection called Openpixels. It's a set of pixelart characters in classic rpg orientation provided in gimp format, with all stuff in its own layer, so you can create alot of different characters. Even i am not a fan of pixelart, i felt in love with them and the urge to make an editor for them. Yeah and last friday i spend my spare time creating an online editor for them called Openpixels Character Editor. Go check it out and if your interested in the development, come back :-)

Exporting the images from gimp

First i had to make the image useable outside of gimp in an easy way and at least semi automatic way. From a previous project i know that one can extend gimp with python scripts using gimp-python and it does work on windows too. Lucky almost all layers where named with a consistent naming scheme i could use and i just fixed the few which didn't match.

The naming schema:

#<type> <item>

where type is the placement of the part, i.e. head, body, hat, and item is the actual item, i.e. witch hat.

The script iterates over all layers and exports each layer matching the naming schema as an png, using a folder for each type.

I set manually the layer size of each layer to the image size, haven't found the right api method yet. So any hint is appreciated :-)

The script:

#!/usr/bin/env python

from gimpfu import *
import os.path
import re, gettext, os

def save_layer(layer, filename):
    temp_image = pdb.gimp_image_new (layer.width, layer.height, layer.image.base_type)
    temp_drawable = pdb.gimp_layer_new_from_drawable (layer, temp_image)
    temp_image.add_layer (temp_drawable, -1)
    pdb.gimp_file_save(temp_image, temp_drawable, filename, filename)

def character_export(img, drawable, save_path):
    layers = []
    expr = re.compile('#(?P<part>body|cloths|eyes|hair|hat|head|misc)\s(?P<name>.*)')
    for layer in img.layers:
        m = expr.match(
        if m:
            body_part ='part')
            name ='name')
            if body_part and name:
                body_part_path = os.path.join(save_path, body_part)
                if not os.path.exists(body_part_path):
            filename = os.path.join(body_part_path, name + ".png")
            save_layer(layer, filename)

    "Export _Openpixels layers as png for use in the Openpixels Character-Editor",
    "Export _Openpixels layers as png for use in the Openpixels Character-Editor",
    "<Image>/Python-Fu/_Openpixels Character-Editor Export",
    "RGBA, GRAYA",
        (PF_STRING, "save_path",  "Path",  "c:/temp/test"),

Now we got the images, what now?

I did not want to hardcode every image into the html page, so i wrote a simple script, which iterates over the image folders and puts the structure into a dict, which will the be passed over to a jinja template.

The page generation script:

from jinja2 import Environment, FileSystemLoader
import os

template_store = './templates'
env = Environment(loader=FileSystemLoader(template_store))

openpixels_dir = "openpixels"

cats = {}

for filename in os.listdir (openpixels_dir):
    path = os.path.join(openpixels_dir, filename)
    if os.path.isdir(path):
        cats[filename] = {}
        for img_filename in os.listdir (path):
            (img_name, file_ext) = os.path.splitext(img_filename)      
            cats[filename][img_name] = img_filename

template = env.get_template('index.html')
content = template.render(cats=cats, includeTracking=True).encode('utf-8')

path = os.path.join("index.html")
file = open(path, 'wb')
The actual editor page

Just take a look at the Openpixels Character Editor :-)