|
|
ForumsSega Master System / Mark III / Game GearSG-1000 / SC-3000 / SF-7000 / OMV |
Home - Forums - Games - Scans - Maps - Cheats - Credits Music - Videos - Development - Hacks - Translations - Homebrew |
View topic - Tutorial: Using GIMP and BMP2Tile to generate Tiles
 |
| Author | Message |
|---|---|
|
 Tutorial: Using GIMP and BMP2Tile to generate Tiles
 Posted: Mon May 20, 2024 4:12 pm
|
|
Tutorial: Creating SMS and GG graphics with GIMP and BMP2Tile
Intro: If you are here, you're interested in developing a game for the Sega Master System or Game Gear. I am too and I found a major struggle was the time investment I was putting into graphics. Originally I was hand calculating my tiles (yikes!) than I tried to build a simple HTML app to do my calculations for me. I than found BMP2Tile but wasn't entirely sure how to use it with my editor of choice: GIMP Why GIMP? It's free...it's terrible compared to paint.net but it's free and can functionally be used on all OS so this should in theory be a one guide to rule them all. Why BMP2Tile? I couldn't get the palette math right on my painter and this honestly is a GREAT tool for outputting graphics quickly once you know what you are doing. Prerequisites: 1) You have GIMP and You have BMP2Tile https://www.smspower.org/Development/BMP2Tile 2) I am going to assume you've gone through the "Hello World" example written by Maxim. If not, please do this first! https://www.smspower.org/maxim/HowToProgram/Index Link provided above. 3) You've built some code to port your tiles into your game. If not no worries there's the racer example on this very website under the "Getting Started" section. https://www.smspower.org/Articles/CreateARacingGame Overarching Workflow 1) Work in GIMP 1A) Setup Brush (one time only) 1B) Setup Palette (one time if you dont want to modify it) 1C) Setup Grid (optional but VERY useful) 1D) Draw Picture 2) Export from GIMP as PNG 3) Import into BMP2Tile 3A) Toggle applicable switches in BMP2Tile 4) Port to Code ---------- 1) Working in Gimp ---------- 1A) Setup Brush - By default there isn't a single pixel brush in GIMP. We will have to make one - Let's start by going to the brush selection dialog. See fig_BrushSelection. --- You can follow the RED arrow route and click the brush icon (leftmost tab on the right) --- You can follow the GREEN arrow route by clicking Windows->Dockable Dialogs->Brushes --- You can click Shift+Ctrl+B to open the dialog as well. - Once the dialog is open, right click anywhere within it and select "New Brush" - Change your settings to match fig_BrushSettings --- (Optional) Title from Untitled to Single Pixel --- Shape = square --- Radius = 0.5 --- Spikes = 2 --- Hardness = 0.98 --- Aspect Ratio = 1.0 --- Angle = 0.0 --- Spacing = 1.0 - Select the pencil tool, give your new brush a shot to test it. - If there's issue I googled "Single Pixel Brush in GIMP" to find my answer 1B) Setup Palette - The secret to making all of this work! Without a palette you CANNOT EXPORT TO BMP2TILE. There will be errors on the import of the PNG. - If there isn't an error than BMP2Tile will reorganize the intended slot for each Palette color you've chosen. - Let's start by goin gto the palette selection dialog. see fig_PaletteSelection --- You can follow the RED arrow route and click the palettle icon (color tabs in a square) --- You can follow the GREEN arrow route by clicking Windows->Dockable Dialogs->Palettes - Once the dialog is open, right click anywhere within it and select "New Palette" - The dialog will now be blank. I Recommend you rename your palette so you don't lose it (change the "Untitled" value at the top) - We need to add colors. For the GG and SMS it's 16 colors to be exact! - There's a small icon underneath the word "Untitled" at the bottom that looks like a rectangle page with a plus in the upper left. This adds colors to our palette. See fig_AddColor. Click this --- you'll notice a long black bar appears in the Palette dialog. - Click the LEFTMOST section of that palette. Annoyingly this loads your first color as black and you have to find the color. Once you find it a small dotted white box will appear around it. - Double click the color and the edit color dialog will appear. Set your color and click "OK" - Repeat this process over and over until you have ALL of your colors! - ONCE YOU HAVE YOUR COLORS we need to set the image to only use our palette - Goto Image -> Mode -> Indexed. see fig_Indexed. - The Indexed Color Conversion dialog should appear. --- Select "Use custom palette" and select your named palette. --- click the pretty palette picture for easy select. See fig_Indexed --- Click Convert - We are now ready to paint but it wont be easy without the next step 1C) Setup Grid - If you haven't created an image that is a (multiple of 8) x (multiple of 8) size, do so now. - Goto Image -> Configure Grid see fig_Grid - There are alot of options but just change the spacing to 1 and 1. Feel free to change colors if you needto (by default it draw black lines) than click OK. --- See fig_GridConfig --- This just configures but doesn't SHOW our grid - To toggle the grid on and off goto view->Show Grid. see fig_showGrid - We are now ready to do some drawing. 1D) Draw Picture - Use the pencil tool - Select your color ONLY from the palette you built - use X to toggle colors - make sure each dimension of your canvas can be divided by 8! - save often. ---------- 2) Export from GIMP as PNG ---------- 2A) Make sure your image mode is set to "indexed" (see earlier steps) 2B) Select File->Export as --- Make sure you put for file extension as PNG. GIMP goes by what you name the image. 2C) When Export Image as PNG dialog is visible just make sure "Save color profile" is saved and "automatic pixelformat" is selected from the drop down. See fig_ExportPNG ---------- 3) Import into BMP2Tile ---------- 3A) Open BMP2Tile, click Browse and find your PNG 3B) Goto Palette, make sure the palette is ordered the same as what you had in GIMP 3C) Set the palette to what you system you want to export for. -- you can also omit other colors which I tend to do. I write my other colors as black. 3D) Select the Tiles tab -- make sure your tile count loaded as expected -- OFTEN TIMES I remove "use tile mirroring" but that's up to each individual users use case. ---------- 4) Port to code ---------- All that is left is to port and enjoy. Hope this helps anyone who was hand calculating like I was. My joy for working on this platform increased 100 fold after doing this as I wasn't hand calculating tiles all evening. Let me know if there's anything that needs clarifying! 
|
|
  
|
|
|
Posted: Wed May 22, 2024 9:37 am
|
| Love the detail, thank you very much! | |
|
|
|
