This guide will teach you how to use McPixel level creator, how to create and submit levels and reveal few secrets behind the way the levels are beign created, stored, and handled.


1. Quick start

Ok, for a kickstart I'm going to show you how to get a level running in the creator and how does the thing work. First of all you will need the Creator's starter package

Download McPixel creator's starter package

Let me quickly enumerate what's in this package...
This is going to give you a kickstart for creating the levels. It might sound like a lot of work overall but it's actually not that much. Let's move on! Now launch McPixel and get into the create mode.

This is how it looks like. I will elaborate on all the buttons features later on, for now, punch the LOAD IMAGE button. It will open a file browser dialogue. Select one of the levels from the creator's pack, for this instance, let's say lvl_tram.png

The level starts immediately and you will see the level intro screen!

You can walk around and interact with stuff, but for now it will not trigger any actions. To do that we need the script file. Punch the LOAD SCRIPT button and choose the level's corresponding script file, for this instance, lvl_tram.txt.

Now you can actually trigger actions by interacting with stuff! If you are amazed by this magic tricks of mine, please take a look at the png and txt files to see how little it takes to create a level!

If you want to delve into how all this works, you will need to wait! There are still buttons features left for me to describe out there!

2. The Creator

What I call The Creator is actually more of a debugger. You can't draw the actual level or edit scripts from inside this tool. This is because levels are actually handmade pixel art that you need to draw in your favourite graphics editor and scripts are just text files that you write in your favourite text editor!

The Creator has a number of buttons features that will help you create levels for McPixel as well as a level submission tool. So that if you are satisfied with the level, you can immeediately submit it. After submission I'll check it out and if i get a full six-pack of these, I will publish it immediately!

Ok, let me write what kind of buttons features are included in the creator.


Punching this button feature will open a file browser dialogue, where you can pick a level image. After it is picked, the level will start immediately. If a level is already loaded, it will restart the level after it loads. You can quickly reload stuff when you are making changes using this.


This does the same to the script. You have a file browser and you can load or reload your script at any time. Doing so restarts the level as well.


Displays useful information about items in the level. Every item is outlined and the ID and frame number of each one of them is displayed. It's useful if you have trouble with items or you want to see the IDs of the items to write the script!


Console will log any messages from the creator so if something is wrong, you should take a look at it. It will also log stuff if everything is fine so you should read it to rejoice about that as well! There is a detailed description of the console and error messages later.


Guess what this does!


When you are satisfied with your work, punch this button feature to submit the level! There is a form to fill before you can actually submit the level.


You can unload the level to admire the NO LEVEL LOADED message some more! Actually this button feature is useful if you are loading a different level without the script. By default the old script will still be used, so you need to unload it first.


Sets the countdown timer to 60 seconds. If you are a loser that can't do stuff quickly enough, you can have more time to admire your level.


Restarts the level immediately.


Plays the losing animation immediately. Useful if you clicked the RESET TIME button.


Enables you to win anything in life. Lotteries, cars, stuff. Also, this is not true. Actually it plays the winning animation. Useful when you don't have a script yet.


Opens this help! Neat, huh?

3. The Image

Ok, all this I explained is quite useless without having basic knowledge about how the levels acutally work. It's actually pretty simple, so let me delve into that!

The actual level consists of two parts. First is the level image, and the second is the script. This part covers the former.

This is it. When you load such image into the creator you are ready to play it. Actually, the most important part is the first two rows. And these are enough to run the level. There are, however few rules that the image must meet. The level is created out of this image by layering several frames on top on each other. During the play there are 3 layers.

These layers are obviously defined by separate frames from the level image sheet. The order in which these appear is fixed. Let me elaborate on each of the frames and their meaning. Oh, and as the frame numbering system is zero-based (the first frame is frame 0) I am going to use that numeration here.

FRAME 0 - The foreground

This is the foreground. It's completely static, menaing it does neither animate nor scroll. While drawing this you should keep in mind the area on which McPixel can walk.

The walk area is at 64px-80px, the bottommost 16 pixels. McPixel under no circumstances will go higher than that. However, when interacting with items, he might step out of this area sideways or below. You should keep in mind to prevent this. Moreover, you should keep a threshold. So that the actual ground is drawn from at least 62px. This way McPixel won't appear as plastered onto the wall when he is in the highest possible spot.

FRAME 1 - The background

This is the scrolling background. You can control which way it will scroll. You should keep in mind that the background should tile (be repeatable) in the direction of scrolling. The slowest scroll setting is pretty fast to emphasise the fast-pacedness of the game. I will explain how to control scrolling in a moment. Also, you can disable scrolling at all.

Most of the times only parts of the background are visible, and you should keep that in mind. As you can see on the picture, some parts of it are invisible during play and can be disregarded.

FRAMES 2-3 - The items

This is the most important part of the level image sheet. It defines the items that appear in the level, scrolling direction, speed and McPixel starting position. There are two frames for that purpose, because items can be animated. The position of items is determined via encapsulating them in boxes of a specific colour. Let me explain meaning of colours. These colours are exclusive for the purpose of describing level contents. So if you want to draw something yellow, use a nearby colour to do that (#fefe00 rgb(254,254,0)). This way it is almost unnoticable. Moreover, everyhting that is not framed, will be discarded, so that if you want to temporarily remove an item from the stage, it is enough to delete the frame surrounding it.

The default action McPixel takes when interaction with an item is determined by its position. The position of item is its center. If you are unsure about that position, enable the debug info and a crosshair will appear in the middle of each item. If you want McPixel to approach item from palce other than its center, you can easily fake achieve this by extending the item frame in a direction. Browse the tutorial levels to see numerous examples of doing that.

Now, let me enumerate the interaction zones, and how McPixel does something different to an item depending on its position.

When drawing the level, you should first create the 10 base frames, and before drawing the cutscenes, you have to load it, and see where exactly McPixel is standing when interacting with the item to draw the first frame. If you mismatch his position by as little as one pixel, there will be a visible stutter, and you will have to redraw your animation!

To conclude elaboration on this part, let me enumerate several guidelines you have to keep in mind when drawing this part.

FRAME 4 - Cutscene background

This is the same as Frame 1, but applies to the cutscene (the one that displays McPixel logo). It's a scrollable background and the scrolling speed and direction is the same as when playing the level and defined in the item frame.

This and all (of the 10) subsequent frames are used for the cutscene. They should provide a view from outside / away of the actual level scene.

FRAMES 5-6 - 'Good' cutscene

It's 'good' in quotes, since it's used all over, not only for the good ending. Basically it's a static foreground of the cutscene in two frames. As you can see above, the frames are not toggling, but more of stuttering between each other. Places it is used in:

FRAMES 7-8 - 'Bad' cutscene

In a nutshell, these are the same that frames 6-7, but after the explosion. It animates the same way that the above one. Frame 7 should correspond to frame 5 and frame 8 to frame 6.

FRAME 9 - Boom!

This is the most important part of everyone's lives - everything explodes. This frame should correspond to frame 6, not frame 5, since it's being played after frame 5 and before frame 7.

FRAMES 5-6-7-8-9 combined

This is the 'bad ending' when you lose and stuff blows up. It uses all of the cutscene frames.

FRAMES 10+ - Endings

Arrangement of any of the following frames is up to you. These are used for the animations of endings and their playing order is determined via the script. These can be sparse, meaning that you can have unused frames in there. Also, you can have a custom scrolling background for your ending, which you can place anywhere and access via the script.

Oh man... so much about the script, I better move onto it now!

4. The script

level 1 item 0 | hold | nowin | .1 | 1 | 22, 23, 22, 23, 22, 23, 22 item 0 | nohold | nowin | .1 | 1 | 11, 10, 11, 10, 11, 10, 11, 10 item 2 | hold | win | .1 | 1 | 24, 24, 25, 25, 24, 24, 25, 25, 26, 26, 27, 27, 26, 26, 27, 27, 28, 28, 29, 29, 28, 28, 29, 29, 30, 30, 31, 31, 30, 30, 31, 31, 32, 33, 34, 35, 36, 37, 38, 39, 39, 40, 39, 40 item 3 | nohold | nowin | .3 | 1 | 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21 item 4 | nohold | nowin | .1 | 1 | item 4 | hold | nowin | .1 | 1 | thanks

This is how the script looks like. It defines animation sequences that are triggered by interacting with each item. the script has 3 parts, let me describe them. The most important part is the middle where you actually define the animations. The syntax of each definition is as follows.

item [id] | [hold/nohold] | [win/nowin] | [frame_rate] | [bg_frame] | [frames] If there are any errors with your script file, you will be notified via the console. Check the console after loading the script to make sure that everything went fine!

Let me show you an ending animation, the script line that triggers this animation and position of this animation in the level image sheet.

item 0 | nohold | nowin | .1 | 1 | 11, 10, 11, 10, 11, 10, 11, 10

This is basically how it works. I guess writing the scripts is not that hard! But since there are some guidelines to follow while writing them, let me enumerate these. This is it about the scripts. Let's move on...

5. Graphics Gale

Graphics Gale is by far my favourite drawing tool. I use it in conjunction with Irfan View and XnView. I use the former to achieve transparency in PNGs quickly and the latter to add effects to images. Let me point you to download spots for these. Of course you can have your own favourite graphics app, like Photoshop, Deluxe Paint or MS Paint even. It's not needed to be using Graphics Gale, but since the source files for the levels are in .gal format, you should get it just to examine them.

And since this is not a pixel art or a Graphics Gale tutorial, I'm not going to delve into details of those much. But still I will provide few hints and an overview of how the application works, since it's crucial to understanding this chapter. If you are running Mac OS or Linux, you can easily launch Graphics Gale using, correspondingly, Wine or WineBottler. Let me tell you about the basic features of Graphics Gale. Launch the application, and load file.

This is NOT what you're going to see immediately, you need to do two things first. If your layout looks totally different from what you can see here, it means you got the wrong version (the 2.0 beta is the one you should get). But you can easily drag stuff around and rearrange it to look like this. Now let me tell you about the basic features of this app.

This is the basic layout for the application. If you want to delve into it some more, I will describe some features and techniques to help you get used to this in an Appendix. For now, I would like to focus on how to keep your levels arranged in layers and frames.

This is the layer layout for frame 0. The subsequent frames are just a copy of this frame with different layers enabled. I would like you to look at the bottommost layer. As you already noticed I am not using magenta (magic pink) for transparency. One of the reasons is that it hurts your eyes to look at it for long time. The other is that Graphics Gale would substitute the default transparent colour with white. The bottommost layer is holding the transparent colour, and has no transparency enabled. This way it's easy to pick the transparent colour (right-click is color picker) from the image.

Having you layers arranged this way is also helpful for animating the ending. Take a look at any animation frame to see that the layers are basically in the same arrangement that frame 0. The same goes for the cutscene frames (frames 6 through 9) where all of the ending and intro animation is on one frame, divided by layers and onle some are enabled each frame. Take your time to browse the source files and see how they are arranged.

You might want to make changes to the level, but keep in mind, that if you change anything in the base level, the animations will become obsolete and you will have to alter all of the animation frames to match the changes. So always remember to create the base level first, and only after you are sure that everything is fine, proceed with creation of the animations. So, to make the level into a PNG image sheet that you can actually load into the editor, you need the Export tool from the File menu.

Always keep the Columns value at 4 or more! Remember that the level needs at least that to even load into the creator! For now, just make or not make some changes and export as a BMP file.

BMP format doesn't support transparency, so now you have to load the file into Irfan View, and save it back as PNG. While doing that, enable the Options dialogue and check Save Transparent Color checkbox.

You will be asked to pick the transparent colour from the image with your mouse. Just click a place with the colour that should be transparency, and you now have a PNG file that you can load into the creator.

6. Submitting your level

When you are done and satisfied with your work, it's time to submit your level. To do this simply punch SUBMIT LEVEL button in the creator. If your level is OK, you will see the submission form immediatelly, otherwise, you may encounter an error message.

But since it's pretty simple, I don't think you're going to see these. The submission form is pretty simple too and I already explained it's contents, but for simplicity sake, let's go through that again.

After you filled out the form, tap the... no wait! There is one last thing you need to do. You need to read and accept the legal shit. You can read it if you scroll a bit down, but the form will force you to click the LEGAL SHIT button before you can submit anyways. I suggest you check it out, it's neither long nor obscure. When you're done with that, tap the SUBMIT LEVEL button

If everything goes fine, after few seconds you should see the following message.

This is it! Your level has been sent to my place. It will be published as soon as I get a full sixpack of them. It wasn't that hard, was it? But still, some bad stuff can happen with your submission, and you will be seeing an error message. Let me tell you about these and how to avoid them.
If everything went fine though, just wait until the level is approved and published. I will try to make sure to drop you an email when this happens!

Appendix A

Console Errors

Here is a list of errors you can get in the console and a detailed description of their meaning. If you can't see an error and the creator tells you it's there, reload the level or the script to be notified about any errors again.



Appendix B

Legal Shit


I am going to distribute the levels from within the game of McPixel. You're OK with that.


The level and all the stuff inside is your property. But you let me share it.


I may be a total ass by refusing to publish your level for no reason. You acknowledge that.


I can also change stuff in your level before publishing it and still credit you for that. And it's fine with you.


I can also change your name and level title, but only if it's offensive. I will substitute anything offensive with 'pony' (e.g. motherponyer). You like that idea.


I can delete your level from the server or I can accidentally all the levels. You should keep a copy to yourself!


Don't sue me bro. That's why i'm writing this.


I'm not good with this kind of stuff, but here it is. This applies to anyone who sumbits a level. Let me clear some points up as to why I wrote stuff like that. Well, basically I don't want to get sued just because someone is being an ass, but that might make me look like an ass. I guess there's no winning solution in this. Let me account for some stuff that's inside this then.

Appendix C

Graphics Gale Coolness

I am going to tell you about cool features and techniques of Graphics Gale. I've been using it for quite some time now and if you want to create pixel art on Windows, this is the best you can get! Let me now get into details. I will first enumerate features.

The weapons

As you can see, this set is clearly missing the eraser tool. This is because instead of erasing, you just draw in a transparent color. Ok, let me move onto describing the toolboxes in more detail.

The tools

Let's go over all the puzzling buttons scattered across the window. One by one. Ok, enough descriptions. Let me now point out some cool tricks you can do in the application. I bet you can find them helpful. This concludes it. I'm pretty confident you can work something out using Graphics Gale by now!