DEVELOPMENT CORNER
Ren'Py 101: Releasing Your Game Part II
by Rio

We are now almost done with the Ren'Py tutorials and covering an important aspect of game making - putting in the final touches before releasing your game.

1. Changing the Icon

2. Making a Windows Installer

 
1. Changing the Icon


run_game files with Eileen and Notepad icons.

When you open the latest Ren'Py version and check out the run_game.exe file - the icon for it is Eileen as seen on the right. You can leave this icon as-is and release your game with it but if you want that extra touch of customization, the way to go is to change that icon and replace it with your own game icon.

The first thing you have to figure out is what you image you want to become an icon. One of your characters? A symbol? The acronym of your game? Once you figure it out, you have to get a software that allows you to edit the icon. Personally, I use a freeware software called PE Resource Editor but the latest version (2.0.1) is now called XN Reasource Editor. For framed site, click here. When opened, it looks something like this:


Click to view larger version.

- To edit your icon, first run XN Resource Explorer.
- Click on the open folder under the menu bar. This will pop up a window. Navigate through your folders and select the run_game file and press enter.
- Folders will appear on the right-hand side. Click on "Icon Group" and keep clicking until you reach the folder where the icons are located. There should be three icon sizes there; 48x48, 32x32, and 16x16.

Now that you have the icon open, I'll run through what's what in this software. All the way to the right are two tabs. One has the colors for the icons and the other has the tools to edit your icon manually. They can be docked or not, depending on your preference.

The column directly to it's left is the editable "drawing" area for your icon while the column with the icon stats has a real-time image of your icon as it will appear when in use. The icon stats may be edited but I suggest you don't meddle with that unless you know what you're doing.

A useful thing to know is the Zoom In and Zoom Out commands under "Image" on the menu bar. This will increase or decrease the size of the editable icon for better viewing and minute editing.

There are two ways to change the icon, the easy way and the hard way. The easy way requires you having an icon editing software and the hard way is when you do not have an icon editing software. An icon editing software can save other image formats (.jpg, .gif, .bmp, .png) into an ico file which is used for icons. Icon editing software have to be purchased but most has a trial run like Microangelo. A few folks has been kind enough to inform me some freeware icon editors; AniTuner and Clic. Thanks you guys! I'll make a section on these once I get some free time but in the meantime, give them a whirl. They'll be much better than manually making icons. =)


GSK icons: 16x16, 32x32, and 48x48

Like I said, if you don't have an icon editing software, you'll have to do this manually. The first thing you have to do is go to a graphics editing software like Photoshop or GIMP and create a 48x48, 32x32, and 16x16 image of your icon. The file format can be jpg, bmp, or gif - it doesn't matter.

-If you aren't running XNRE (XN Resource Explorer) now, then do so. Open up the run_game file whose icon you want to change.

-Right click on one of the folders that pop up on the left-hand side and click on "Import Image Recource". Open one of the icon images as I asked you create previously. Depending on the file type, a new folder will show up called "JPEG, Bitmap, or GIF". If you look under that folder, you will now see your imported image there.

- Repeat the above step until you have all three icon image sizes listed. Don't worry if they appear in their own folder, such as 0, 1, 2, etc.

- Now comes the hard (and time-consuming) part. Go to the Icon Folder and the three icon files under "Language Neutral". Select the icon you would like to edit first. Now open up the corresponding image file you just imported into the the Resource Editor. With that open, create a snapshot of it by pressing "Print Screen" on your keyboard. Open up your graphic software, create a new file, and paste the screen shot into it. Save the file.

The purpose of this file is to get the colors correct. Under the Imported Image folders, if you click on the "Colours" tab, you will notice a slider. You cannot directly find out the exact color of a pixel even though you can use the eye dropper tool! With the screen shot in your graphic software (and hopefully, you're using a decent one), you can use it's eye dropper tool and directly find out the color under the RGB section.

<--- Color Picker window after using eye dropper tool.

Jot down the RGB shown in the text box. Go to the Resource Editor, open to the Icon size you want to edit. Click on the "Colours" tab. Unlike the imported image files, this shows individual colors used within the icon. Double click on one of the color boxes you will not be using in your own icon, and a Color window will appear as shown below.

Note the RGB text boxes on the right-hand side. Click one of the boxes under "Custom Colors". Enter the RGB you jotted down earlier into the RGB boxes. Click on "Add to Custom Colors" button and the new color should appear in the box you selected. Click on "OK" to get back to the Resource Editor screen.

The new color will now replace the previous color in the pallette. It will also now be the top color selected. Go to the Drawing Tools section and select the Pencil. Now toggle between your icon image and the imported image and color in the areas with the color you just entered. Don't just eyeball it - count the boxes if you have to. Save and stop if you to.

Repeat this process for each color and each icon size.

Once you're done editing all your icons, you can now erase the imported image files. You can do so by first selecting the file (i.e. "Language Neutral") and letting it load into the screen. Then right click on the file name and choose "Delete Recource". Repeat until all you have left is "PYTHONSCRIPT" and "Icon Group".

Save your file and check out your brand-new icon!

Back to Dev Corner | Back to Top

2. Making a Windows Installer

Last but not least, is the Windows Installer. Basically, it takes all your game files and puts it into one convenient exe file. All the Windows player then has to do after downloading it is to run "yourgamestitle.exe" and the Installation Wizard will automatically pop-up to begin installation (i.e. decompresses your files, sets up folders in the Program list, and creates a shortcut on the desktop, among other things).

- The first you have to do is get your hands on the NSIS Tool. It's free to use for any purpose and is released under an open source license. Don't forget to install it!

- Next, download the NSIS installer script for Ren'Py games. This script is what will convert your files and make it into a Windows Installer. It looks something like below. Please check back at PyTom's Ren'Py page to see if he has updated the NSI script (which he had from the look of the one below). Basically, just follow his instructions in the comment tags after the ";" and change the name within the quote's to match your own game. I will also provide my own input in black text.

;;; Comments beginning with ";;;" are commentary added by PyTom to
;;; try to help you understand this file.
;;;
;;; This installer expects that you will have supplied LICENSE.txt
;;; and README.txt files in the root directory of your game.
;;;
;;; To use this, place it in the root directory of your game,
;;; right-click on it, and choose "Compile NSIS script..."

;;; First up, change the settings below to match your game.

;;; The exe used to run your game.
!define EXE "moonlight.exe"

;;; The exe containing the installer. This will be created in the directory
;;; above the root directory containing your game.
!define INSTALLER_EXE "moonlight-1.0ni.exe"

;;; The name and version.
!define PRODUCT_NAME "Moonlight Walks"
!define PRODUCT_VERSION "1.0"

;;; The following settings are only shown to the user in Add/Remove programs
;;; but you'll still want to use them.

!define PRODUCT_WEB_SITE "http://www.bishoujo.us/moonlight/"
!define PRODUCT_PUBLISHER "American Bishoujo"

;;; Ignore this next block of stuff. It's mostly boilerplate.
!include "MUI.nsh"
!define MUI_ABORTWARNING

;;; Change this to change the compression scheme.
SetCompressor lzma

;;; You can change these to customize the bitmaps and icons used for
;;; your installer and uninstaller. Bitmaps should be 150x57.

; !define MUI_HEADERIMAGE
; !define MUI_HEADERIMAGE_BITMAP "${NSISDIR}\Contrib\Graphics\Header\nsis.bmp"
; !define MUI_HEADERIMAGE_UNBITMAP "${NSISDIR}\Contrib\Graphics\Header\nsis.bmp"
!define MUI_ICON "${NSISDIR}\Contrib\Graphics\Icons\modern-install.ico"
!define MUI_UNICON "${NSISDIR}\Contrib\Graphics\Icons\modern-uninstall.ico"


;;; This is the sequencing of the pages that does the actual installation.
;;; you can comment pages out, if you want to.

; Welcome page
!insertmacro MUI_PAGE_WELCOME

; License page <--- If you don't have a LICENSE.txt file, you can just comment out the next line with a ;
!insertmacro MUI_PAGE_LICENSE "LICENSE.txt"

; Directory page
!insertmacro MUI_PAGE_DIRECTORY
; Instfiles page
!insertmacro MUI_PAGE_INSTFILES
; Finish page
!define MUI_FINISHPAGE_SHOWREADME "$INSTDIR\README.txt"
!insertmacro MUI_PAGE_FINISH

; Uninstaller pages
!insertmacro MUI_UNPAGE_INSTFILES

-When you're done editing the NSI script, right-click it and choose "Compile NSIS Script". A new window will pop up and start compressing your files. You'll see a bunch of lines scroll by with your file names and it will eventually pause with a line along the lines of "Compressed Data: ". Do NOT close the window! It is still running! Wait until it spits out the last lines like below and you can finally close it.

-You will probably encounter errors when running your NSI script. The most common are are follows:
1) path to file is not correct
2) file is missing
3) file name is wrong
Luckily, NSIS tells you what is wrong such as "missing file filename". Look over your script again, make corrections, and run the script again till it goes through.

-After successfully compressing your game, an executable file will appear in the same directory as your NSI script. Congratulations! You've just made a Windows Installer file.

Now that you have this, all you have to do now is prepare your game folder for Unix/Linux and Mac users and make some final checks. Read through PyTom's Tech Notes about packaging and releasing your creation to the world.

Places You Can Submit Your Game for Hosting:
Ren'ai Archives
Upload.com

Places You Can Announce Your Game Release:
Magatokyo Forum - Dating Sims and Visual Novels
Lemma Soft Forum - Completed Ren'ai Games
Freetype.net Forum - General Bishoujo Games
Freetype.net Forum - Adult Bishoujo Games
Love Revolution Forum - General Discussion

Directory Listings for Your Game Maker Site:
Anipike - Dating/Renai Sims
Anime Spy - Game

If you are a member in other forums, go right ahead and make your announcements there are well! Just make sure you post your thread in the right section like "Off-Topic", "General Discussion", "Games", and the like.


 
I would like to thank PyTom, chronoluminaire, and the folks at Lemmasoft forum for their comments, suggestions, and encouragement. ^^

 


Content© 2005 www.RenaiGames.net & RenaiGames.com, unless otherwise specified. All rights reserved.