Drawing and Editing Graphics using YY-CHR
There are a lot of reasons you would want to edit the GFX and ExGFX file you use in your hack. Lunar Magic has a built-in graphics editor in the form of the
8x8 Graphics Editor, but that one is very basic and lacks a lot of helpful features.
This tutorial will teach you how to open, edit and draw graphics for Super Mario World hacks with a bitmap editing tool called YY-CHR.
What you will need
Extract all the contents of the YY-CHR .zip file you downloaded to its own folder somewhere, such as in a general tools folder.
I will not go over how to
insert graphics, so be sure you know how that works!
Table of Contents
Setting up YY-CHR's Language
Before doing anything else, we will have to make sure YY-CHR runs in a language you can understand. Open up the YY-CHR executable, yychr.exe. Now check, are the menus in English or are they in Japanese or look like gibberish characters?
If they're English and the menus look like the image on the right (click to zoom), then you can skip ahead to the next section.
If they're not English, we will have to fix that really quickly. To do that, we have to change the file extension of "yychr.ENG", that means the ".ENG" part to match the language your computer is set to.
The "yychr_language" text file in the same directory holds a table of file endings for most languages, but I'll copy it here for convenience:
||English (New Zealand)
||English (United Kingdom)
||English (United States)
From this table, pick the one that suits your computer's language. On most Windows machines, you can find the corresponding locale extension in the bottom right of the taskbar as well.
For example, this is how it looks for me, as a German:
Both the table and my PC confirm that my proper file extension would be ".DEU".
Find out yours and then rename the "yychr.ENG" file to match. In my case, I have to rename it to "yychr.DEU".
Once you've done this, open up YY-CHR again. Is it in English now? If so, great!
If not, try looking at the table above and making sure you picked the right extension, and that you chose the right sublanguage; ".FRA" will not work for French-Canadians for example, make extra sure you picked the right one!
Loading the Graphics and a Palette
When opening YY-CHR, you will be greeted by the current version's logo in the big graphics viewing area on the left. In version 0.99 that is a box with the program's name and a skull. You can click on it and scroll down to see the old versions' logos, too.
But we're not here to marvel at these logos, let's figure out how to load up a graphics set and a palette before I teach you what each of the buttons do!
First, let's grab an existing graphics file for simplicity's sake; I'll teach you how to create graphics from scratch after. It's not very different.
Open up Lunar Magic with your, or any, Super Mario World ROM. In the menu bar at the very top, click on Options
> General Options...
. In the box titled "ROM Editing Options" on the right side, make sure "Use Joined GFX Files" is NOT ticked. If it is, turn it off. The image on the right shows where to find it if you can't see it.
What this does is extract the game's graphics as bite-sized files, split up by the way the game uses them in tilesets, instead of as one massive file.
That is generally a matter of preference and you can feel free to turn it on again after this tutorial, but it'll be easier to explain where to go to using separated GFX files!
Now extract the game's original graphics by pressing the
Quick Extract GFX from ROM button.
Once Lunar Magic is done processing, the "Graphics" folder in your ROM's directory will be filled to the brim with separate GFX files, all with the .bin extension.
Let's open "GFX14.bin" now. That file contains the graphics for a few global objects you'll surely recognize.
There's two ways you can open .bin files in YY-CHR:
By File Association
If you want all .bin files to open in YY-CHR by double clicking them, you can simply associate them with YY-CHR like any other program and file type.
Right click your "GFX14.bin" file and hit "Open with..." in the context menu. Wait for the "Open with" window to appear, search for and select YY-CHR.
This can be a little confusing in Windows 10 because the box can take a long time to show up and when it does it won't show YY-CHR as an option. First, make sure "Always use this app to open .bin files" is ticked, so you won't have to repeat this every time.
To find YY-CHR, first click on the blue "More Apps" link, then scroll all the way down in the list that pops up and select "Look for another app on this PC".
Now just browse to your YY-CHR folder in the window that comes up and double click "yychr.exe".
From now on, all .bin files will open in YY-CHR by double clicking them.
From Within YY-CHR
If you don't want all .bin files to open in YY-CHR by double clicking them, open up "yychr.exe" manually.
Then, in the top left, click File
. In the file browser window that appears, navigate to your ROM's "Graphics" or "ExGraphics" folder and select the .bin file you wish to open.
Open "GFX14.bin" in one of those ways.
What you should now is the same YY-CHR window, but with a garbled mess in both viewing areas. See the image on the right for reference. That's normal, because the Graphic format
(circled in red in the image) is set to the wrong value.
You see, SNES graphics are in the so-called "4BPP" format, where BPP
stands for "b
ixel". This makes SNES graphics able to use 16 colors per tile, or per palette as it's called.
The NES and the Gameboy on the other hand are merely "2BPP", meaning they can only display 4 colors per palette.
Knowing this, select the Graphic format
dropdown box and pick "4BPP SNES/PCE CG" from the list. Tadah, the graphics should look a lot more familiar now!
The only issue is that the colors are very off, because .bin graphics files actually don't contain any color information, only how the pixels are arranged.
To fix this, we have to import a palette. Open any unedited level in Lunar Magic and open the
Palette Editor. We just want to export SMW's palettes, so hit the
Export Level Palette to File button and save the .pal file somewhere you'll find it again in the file browser that comes up.
If you plan to edit ExGFX from the Graphics Section
in the future, you can just use the .pal file that comes with the graphics' .zip file.
Now that we have the palette, let's open it with YY-CHR. Bring up the off-color "GFX14.bin" YY-CHR window again, and in the menu bar at the top, click on Palette
> Open palette (*.pal)...
, as seen in the image on the left.
Select and open the .pal file we just exported from Lunar Magic. The colors should've changed now, even if they don't look quite right still.
But as you might notice, that is just because right now the graphics are displayed using palette 0, the background's palette. YY-CHR can only display 1 palette at a time, for all tiles in the .bin file.
The palette shown can be changed freely however! In the bottom right of the window you will see this:
This is YY-CHR's palette tool. I'll explain it more in-depth later, but for now just try left clicking on different palette rows, scroll up and down and check them all out. You'll notice that different palettes will make different objects show up correctly.
The Turnblock shows up right in palette 6, the switch blocks show up in palette 7, the cement block likes palette 3 and the pipes look right in a whole bunch of palettes.
That is because Super Mario World's palettes are laid out in such a way that the darkest shade of each palette's color is in the same column as the darkest shade in other palette rows.
You might notice that the Dragon Coin doesn't look right in ANY palette! This is because the bright magenta in palette 6 is actually not megante in-game; it's the flashing yellow color the Dragon Coins use! You can draw with this or any other animated color however you want and they will show up right in-game, YY-CHR just can't display them because the flashing is achieved through Super Mario World's game code.
To finish up, here's a little tip that can save you a lot of time: you can replace the palettes that YY-CHR boots up with, meaning that it could be set to always have Super Mario World's palettes pre-loaded when you open a .bin file.
To do this, just delete the file titled "yychr.pal" in YY-CHR's folder, then move the .pal file we exported from Lunar Magic earlier to YY-CHR's folder and rename it to "yychr.pal".
"yychr.pal" is the palette file YY-CHR will try loading on boot, so replacing it with our Super Mario World palette will do the trick.
With "GFX14.bin" loaded up, let me go over all of YY-CHR's tools first. I'll explain how to use the important ones in a few examples after.
First, let me explain the two tile areas using up most of the space.
This area shows you the contents of the graphics file you're editing right now, as you might have guessed.
You can left click around on this area to select different tiles and have them show up in the Drawing Area to the right.
The size of your selection depends on what you have the zoom set to, which you can find at the bottom of the program, to the left of the Palette Editor.
Since SMW predominantly uses 16x16
tiles, the size of one turn block, feel free to change the zoom to x8
The white box that appears around tiles you click on is called your 'selection'. By left clicking, YY-CHR will always select the same tiles you can see in the Drawing Area, but if you click or hold and drag right click, you can select different shapes as well, from single 8x8
tiles (a quarter of a turn block) to an entire row or even the entire file.
The tile manipulation tools I'll get into in a little bit will talk about the 'selected' tile, which always refers to the tile(s) that currently have a white box around them, not necessarily the tiles in the Drawing Area.
Some technical details you don't need to remember: YY-CHR can show any size of graphics file, but one screen always shows you exactly 8KB of graphics data in 4BPP mode, the one SMW uses for everything but layer 3. The graphics file we've been looking at for this tutorial, "GFX14.bin", covers exactly half of this area, meaning it and all other GFX and ExGFX files SMW uses are 4KB.
This is the area where the drawing happens, as the name hints at.
The tiles shown here are those that you left click in the Viewing Area on the left. The amount of tiles depends on the zoom level you set in the dropdown box at the bottom of the program.
While drawing, left click will do whatever the currently selected drawing tool from the buttons to the right does. A pen draws pixels, the bucket colors areas of the same color to a different color, etc.
I'll explain all the tools more in-depth a little further down.
Right click on the other hand always acts as a color picker. Try right clicking differently colored pixels in the Drawing Area and watch the little white box move to that color in the Palette Editor below the area.
Drawing and Editing our Graphics
The Clipboard tools don't directly manipulate tiles, they're just a way to navigate the program.
Copies and deletes the currently selected tiles. To move them elsewhere, select the place you want them to be moved to and paste them back in with the Paste button.
Copies the currently selected tiles without deleting them. Use the Paste button to duplicate them elsewhere.
The paste tool will insert tiles copied or cut from YY-CHR or other image manipulation programs to the area currently selected. You can use the clipboard to move tiles between different instances of YY-CHR and even copy graphics straight out of any image manipulation program like GIMP or Photoshop.
In those cases, the graphics will be color-reduced down to 16 colors to fit the palette size and will usually be heavily miscolored, because YY-CHR does not know any colors besides the one in its palette and accepts them randomly.
Completely deletes the tile currently selected, replacing them with color 00, transparency.
Undoes the last operation. If you mess up anything, just press this a few times to be back where you started.
There's a limit of roughly 30 steps it can go back, but that should be enough for most things.
Redoes the last undone action. Can be used as often as possible, till it's back to where you were before undoing. Doing anything other than un- or redoing will make the Redo button unusable though, since YY-CHR doesn't know how to combine the change you made with the action to be redone.
The Tile Manipulation tools allow you to automate a few otherwise tedious tasks, like flipping, rotating and recoloring.
Horizontal Mirroring [Ctrl-Up], Vertical Mirroring [Ctrl-Down]
Flip the currently selected tiles. If a row or column of tiles is selected, the tiles also switch places to keep the graphic intact, instead of flipping every tile individually in-place.
Rotate Left [Ctrl-Left], Rotate Right [Ctrl-Right]
Rotate the currently selected tiles 90° to the left or right, meaning a pipe facing up would now face left or right.
Shift Up [Shift-Up], Shift Down [Shift-Down], Shift Left [Shift-Left], Shift Right [Shift-Right]
Move the currently selected tiles one pixel into a direction, letting them wrap around the selection box. This means that if a row of pixels would be pushed downard out of sight, it will reappear at the top of the selection, wrapping around.
Remap Colors... [Ctrl-R]
This button is a little more complicated than the rest. It opens a small new window, allowing you to replace all colors in the current selection with different colors in the palette.
The palette row on the top is the original palette, while the one on the bottom is the one you manipulate. To use this properly, first select the color you want to change in the bottom row, then click on the color you want to change it to in the top row.
If done correctly, the color you selected in the bottom row will change to the one you want it to be. Afterwards, hit OK to apply the changes to the tiles you have selected in your GFX file.
If you screw it up, hitting the Undo button will revert all of it in one fell swoop.
The Drawing Tools are all used to draw on and edit tiles in the Drawing Area. Most of them require a color to be selected, which you can do by clicking on a color in the Palette Editor
at the bottom or by right clicking on a color in the Drawing Area to colorpick it.
Allows you to clone pixel regions smaller than 8x8 pixels within the tile. Select a rectangular region by holding down left click and releasing it, and then drag and drop the rectangle around to clone it.
Do note that YY-CHR treats color 00 as just another color instead of as transparency like SMW does, making this tool a lot less useful for tile overlapping than it initially sounds.
Draws pixels freely where you're pointing. The most basic tool you'll use the most.
Pen (Pattern) 
Behaves like the pen, except only every second pixel will be coloredin a grid-like fashion.
Draws a straight line. Hold down the left mouse button and drag it around to see where the line will be drawn.
Rectangle (Fill) 
Draws a rectangle of solid color, using the pixel you pressed the left mouse button down on and the pixel you release it on for its corners.
Rectangle (Pattern) 
Like the Rectangle (Fill), except only every second pixel will be colored in a grid-like fashion.
Rectangle (Frame) 
Like the Rectangle (Fill), except only the outlines of the rectangle are drawn, while the inside is left intact.
Circle (Fill) 
Draws a circle of solic color, within the boundaries of the pixel you pressed the left mouse button down on and the one you release it on.
Do note that YY-CHR's circles are generally very crooked and it's a good idea to make them symmetrical and smoothen them out afterwards.
Circle (Frame) 
Like the Circle (Fill), except only the outlines of the circle are drawn, while the inside is left intact.
Replaces the color of the pixel you're clicking on and all pixels with the same color that touch with a new color.
Do note that this behaves a little wonky for colors the touch the edge of the tile. YY-CHR treats all pixels outside the boundaries of the Drawing Area as being the same color as the pixel you click on, meaning that the Fill can and will wrap around or move around boundaries unfortunately.
Editing Area, ShowHint
It's unknown what these two checkboxes do, just ignore them.
Left Grid, Right Grid
These two checkboxes toggle whether or not to show a tile/pixel grid over the Viewing and Drawing Areas.
Turns down the brightness of both Areas by 50% when checked. This may be useful to check if your palettes have enough contrast should something cover them up.
Graphic Format, Pattern
These two dropdown boxes change the way YY-CHR displays tiles.
The Graphic Format determines the pixel depth of the graphics. For most SNES graphics (Layers 1, 2 and Sprites) the depth is 4BPP, but Layer 3 in SMW uses 2BPP, while Mode 7 can use 8BPP, which is out of YY-CHR's range.
When editing SNES graphics, you will never have to change the Pattern from "Normal".
These two dropdowns let you change the orientation of all tiles at the same time, but only visually. Meaning the changes won't actually show up in-game, they are only for viewing and editing within YY-CHR.
Changes the thickness of the grid overlay, the options are sorted from thinnest to widest, top to bottom.
Point is just a single point per pixel to keep the graphics unobscured, Dot uses dotted lines, Dash is similar to Dot but with a larger pattern and Line is a solid color line.
Changes the zoom level of the Drawing Area, ranging from letting your draw over the entire .bin file at once (1x
) to only showing a single 8x8 tile (x16
Since most objects and sprites in SMW are made of 16x16 tiles, x8
is a useful default setting.
The Palette Editor handles everything regarding colors in YY-CHR and even allows you to edit them for export later while drawing.
There are two buttons on the left side of it, PAL SET and PAL. PAL simply displays the palettes as they are imported from the .pal file. PAL SET on the other hand allows you to mix and match colors from different palettes into YY-CHR-exclusive palette rows.
However, since SNES games operate on the fixed palette system, the PAL SET button is useless for us. We can't mix and match on the SNES without changing the palette itself.
The Palette Editor itself is really simple once you understand it. The red rectangle defines which palette row is currently being used to display the tiles. You can change this by simply clicking on any color in another palette row.
The palette row being displayed is purely for within YY-CHR, it won't actually change the palette the tiles use in SMW, that's what the Map16 and .cfg files are for with blocks and sprites respectively.
Remember that objects, such as ground, coins and blocks, only use palette rows 0-7, while sprites (including Mario) only use palette rows 8-F. This is a SNES hardware limitation and can't be circumvented!
To select a color for drawing, just click on it within the current palette row. A small, hard to see white box shows you which color is currently selected and will be used for all drawing tools.
Right clicking on a color will open a small color editing window:
Click on one of the colored bars to change the color balance and hit OK or just click outside of the little window to close it. Changes are applied as you make them and can't automatically be undone after, so be careful which you edit or you might have to re-import the proper .pal palette again.
The numbers are unfortunately in hexadecimal, which makes it a lot more tedious to copy colors from the traditional decimal RGB notation, but editing them freehand should still be just as easy.
Keep in mind that changing the palette in YY-CHR will not automatically export the palette or change the palettes in-game, you'll have to export the .pal manually by clicking on Palette
> Save palette (*.pal)...
in the menu, then importing that palette back into Lunar Magic's Palette Editor.
Now that we have an idea of how YY-CHR works, let's go over an example or two to get you familiar with working in YY-CHR.
Don't worry if you skipped or skimmed the section above, I'll try to explain which tools we use as we go along, so you can go back and look it up.
Let's start by doing a simple edit to the cloud block and turn its smile upside down. Let's select the cloud tiles near the top right.
If you can't find it, look at the very bottom of the program, you'll find a line saying "Pattern: ADF[yx]: yx". The number yx
will show the tile your mouse is currently hovering over. As you go right, the x
digit will increase, while the y
digit increases with each tile you move down. The cloud tiles we are looking for are at 2C
You'll notice that the cloud is split in half. This is because SMW simple horizontally flips those tiles to make up the whole cloud, meaning we only have to edit this half.
Switch to palette 7, the palette the cloud actually uses, to make the smile the proper shade of pink it is in the game.
Now, to the drawing. Click on the Pen tool on the right and select the white color in the Palette Editor. Remember, you can do this by either left clicking on the white color in the palette row (color 71
) or by right clicking on an existing white pixel in the tile.
Draw over the cloud's cheek with white to delete the smile and a pink pixel below to make it frown.
Here's how it should look:
There. Hit the save button (or just hit the keyboard shortcut Ctrl-S) and
Insert the graphics back into your ROM with Lunar Magic.
As usual when inserting GFX files, Lunar Magic won't immediately update, so switch to a different level and look at the cloud blocks there.
Tadah! The world is now an unhappier place, great job team.
Now you know how to edit graphics by hand. Editing all other graphics in the game works exactly the same way in concept, it might get more complex depending on your artistic ability but the tools given should be up to the task.
Next, let's try recoloring something with the
Remap Colors button.
This button is immensely useful in contexts like the VLDC contests, saving you a lot of manual futzing about with the Fill tool.
Select the turnblock graphic (tile 06
) in palette 6 and click on the
Remap Colors button. It should now look exactly like the image on the right.
There was an explanation for how the tool works in YY-CHR Explained up above
, make sure to have read that before continuing.
Let's make the block look like chocolate for practice. In the little "Color replace" window, click on the brightest shade of yellow and then click on the shade of yellow that is one step darker in the row above it.
Repeat this for each shade except for the darkest one, since there's no darker one and we don't want to turn things black.
Then, before hitting OK, select the white color in the bottom row and assign it to the second-brightest yellow in the top row. This'll make the white light reflection look yellow to fit the new darker block.
Now, hit OK and the block will change colors properly:
Voila, chocolatey block!
Note that this is only really good as practice though, the actual spinning parts of the turnblock are in another graphics file and would need to be edited too. Not to mention that this would screw up your blue throwblocks!
I hope you understand how to remap colors now. It's not that complicated once you see through the way the tool works.
Frequently Asked Questions
I created my own tileset, but Lunar Magic doesn't show all my tiles!/won't insert my .bin file!
When creating your own tilesets, make sure to copy and paste an existing GFX file, delete everything in your copy and use that. This is because YY-CHR doesn't create .bin files of the size SMW uses by default.
Always keep in mind that one standard GFX file only covers the top half of YY-CHR's Viewing Area, so any tiles you draw below that will be lost upon saving!
I have another question!
If there's anything you need help with regarding this topic, feel free to post a reply about it in this thread and hopefully someone will answer you!