Your Custom Menu Screen Tutorial

Euphod

No Friend requests please
I am assuming that anyone attempting to make a custom menu screen has some type of feature filled graphics manipulation program and is comfortably proficient using it. I use PSP8 myself, but I'm sure that most programs are similar. I bear no responsibility for your project or the outcome, because if you perform the very first step there should be no issues with "breaking your game"!

The First Step:

Make yourself a new folder, place it somewhere you will recall and name it "Original Menu Files". This folder will backup the original files in case you need to reinstall them.

Close Trainz 12, then navigate to your Trainz 12 folder in Explorer, open the "Bin" folder and then the "Launcher" folder. In the Launcher folder, find the appropriate folder for the version corresponding to the nation in which you live, assuming that's the language your version is using. I live in the US, so I opened the "images-US" folder. Copy and save the following files to your Original Menu Files Folder:

btn_start (START BUTTON GRAPHIC)

btn_trainzmap (EXTRAS BUTTON GRAPHIC)

btn_manual (MANUAL BUTTON GRAPHIC)

btn_options (OPTIONS BUTTON GRAPHIC)

btn_manage content (CONTENT BUTTON GRAPHIC)

btn_readme (FORUMS BUTTON GRAPHIC)

btn_website (WEBSITE BUTTON GRAPHIC)

btn_quit (QUIT BUTTON GRAPHIC)

main_back (MENU SCREEN IMAGE)

ts12 (MENU SCREEN HEADER... the space at the top of the image where the Trainz Simulator 12 graphic displays)

Now all your original files are safely copied and saved in case you should need them later.

The Second Step:

Open your graphics program, then open each of the files above except for main_back. You should be altering the files that are still IN YOUR TRAINZ 12 FOLDER, not the ones you have copied and saved. Once open, fill each of them with a color that you can easily detect, consider, perhaps a blue or red set at about 30 to 50% opacity. Save all files, but you shouldn't need to close them.

The Third Step:

Start Trainz to the menu screen. You should see the colored areas you have inserted as a larger box around the header, and then 8 smaller rectangles around each button. Take a screenshot and then open that shot in your graphics program. Quit Trainz from the menu. Crop the image to the exact outline of the menu screen, it should measure 640 x 480 pixels when complete. Use your select tool to outline each of the colored areas. You will want to be as exact as possible during this procedure. Invert the selections, then copy and paste the inversion as a new image, fill the areas outside your selections with a solid color, (I used black at 100% opacity). This graphic will be used as a mask in the future, so do not merge the layers, or save as any other format than your graphics programs native extension. You should undo all your selections on your screen shot graphic and save that also, it helps when working with the buttons later. You should now have a graphic that looks like this:

e9c1e41b65fc981020d3aba62326ce4f.jpg



The Fourth Step:

Prepare your custom image to your liking. I try to center the main subject near the center of the image, but keep in mind the buttons on the right hand side extend slightly more to the center than those on the left. Your finished image should be 640 x 480 pixels in dimensions. Save the image as a Windows or OS/2 Bitmap (*bmp.). You can then use this image to replace the "main_back" image in your Trainz folder. After saving your custom image to the Trainz folder, make a copy and apply the mask you made above to the copy (they should be exactly the same size). You will now have something like this:

main_back, BOTH ON YOUR GRAPHICS WINDOW, AND SAVED IN YOUR TRAINZ FOLDER:

09f50c07d977f0f9fa7e526990d7b59d.jpg


Masked image (on your graphics window):

1b5bc2dab424f6febe735beae523150b.jpg


The Fifth Step:

Using your select tool, outline the large rectangle at the top of your masked image, copy and paste that as a new image. You may use your tools to add whatever you want to the image, by default in the original files, this is where the Trainz Simulator 12 writing appears, but you can use a text tool to write "Peter's Trainz Toot Toot" or "Norfolk Southern Trainz 12" or a picture of Thomas the Tank Engine, or whatever you want. Whatever you decide to do, that rectangle is going to show up, superimposed over your custom image, so beware not to obscure the image too much. When you are done wreaking havoc, save the image to the Trainz 12 folder as a Windows or OS/2 bitmap (*bmp.) named ts12. My file looks like this:

8bcdbd701357069c97c21cececcc70bc.jpg


The Sixth Step (buttons):

The original buttons are laid out horizontally, three instances of the same graphic in a row. The first from the left is the button as it appears when the menu is displayed on the screen. The second is the button as it appears when you mouse over it, (the color of the writing changes from white to yellow), the last is the button when you click upon it, (the yellow writing moves downward). See below:

0ba1c7e506f2ef00412c891f83446e1b.jpg


If you don't care about transparency you can just fill the graphic with color and place text of your choice three times across the graphic, or you can select each rectangle and buttonize the selection. You can change the color of the writing or place a "light" next to each "Start" that changes for each state of the button, but you have to do something, because you don't want those bits of the original main_back showing up on your new custom image!

I use the masked main_back file and selected each rectangle where the buttons appear and copied them one at a time, three times across each "btn" image. Patience and precision are called for. I then filled each btn image with a black color, at 10%, six times to achieve a transparent, yet darked area where the buttons will display. I then applied the words with the text tool, and added a drop shadow. I took care to postion the last word on the far right a bit below the other two instances of the word to maintain the original scheme as much as possible. Below is my result:

81cbeafc1e0f470708256c8ffb9d7c03.jpg


You must repeat this step for all eight buttons, using the selection for the appropriate location where each button will appear.

Save each in the Trainz 12 folder as Windows or OS/2 bitmaps (*bmp.). Start Trainz to the menu screen and see what you've wrought, then make changes as desired. You may want to consider saving a copy of each of these altered images to a folder named to represent your new scheme.

Note that the build number will be displayed in the lower right hand corner. This is not a function of buttons. If you wish to change the area it uses, you must do so on your main_back file. The original gray semi rounded rectangles that each button is displayed in are also "painted" on the Main_back file.

My final results look like this (for now):

ca242a2b0815545487224a723fc192da.jpg


Good luck, and please post your thoughts, or any questions you may have!

Thanks for visiting "The Deadliest Kvetch"!;)
 
Well, I think I'm getting there. But it would probably help if I knew more about my graphics editor, masking and why my menus keep undocking themselves.:hehe: As you can see some of the text is unreadable, there is an unwanted line at the top, and I still have to finish off the buttons. So this might be a test run. It isn't the best shot of my first loco either. But its been an interesting exercise.

getting_there.png


Ed,
Perhaps I might make a small suggestion for your tutorial. In the Third Step section, I recommend that you move the comment about saving the mask file in its native extension ABOVE the picture so that idiots like me don't save the file and collapse all the layers. :eek: I managed to recover the situation eventually.


Cheers
Paul
 
Good show Paul, it is a process, and don't think I didn't have some false starts as well. Thanks for the tip on the tutorial as well, and I'm sorry I tripped you up!
 
Here is the final copy of my first version. The picture I chose of my GWR 54xx loco isn't the best so before I try this again I need to get a much better shot.

Done.png


Some extra comments:

The partial see thru boxes around the menu options I suggest are really important. In my photo there are variances between sky, smoke and scenery. Without the boxes you can hardly see some of the menu options.

My "boxes" , which I added as an extra raster layer, are set at 30% opacity. I tried 10, 20 and 30 and decided on 30. It might be worthwhile varying each "box" to see how it looks. For example, the Website "box" could be a higher opacity. Currently you can hardly see it.

It's really important to keep your source images in the native save mode for your image editor. This is so you can go back and edit text, opacity layers such as the box and other items. The final image files must be in bmp format so if that is also your source then editing is very limited.

The image editor I used is PaintShop Pro X4 which is very limited for text formats. For example, I couldn't get it to do shadow characters which would have been nice for the main title. I've got a few other image editors on my PC so maybe I try them. Currently my main title looks rather lame.

Summary:

I found this a very useful exercise and I learned a whole lot more about image manipulation, layers, text formatting, etc. This should prove useful for my future asset creation efforts.

Plus I now have a unique version. :) Or until the next version blows it away. Maybe I will take a copy of all this work just in case.
 
pcas1986;bt107 said:
Here is the final copy of my first version.

Well done Paul, I'm glad you found this to be a useful exercise! Perhaps a picture of the "Sunny side" of your locomotive would be better! I applaud you for perservering, and do suggest saving the theme somewhere. You never know when you may want to change a little something!
Thanks for commenting, and showing off your work. Hopefully more will join you!:wave:
 
thanks for the write-up Ed, it was fairly helpful. One question for others attempting this: might it be possible for you to release your button-layout template you made for everyone else to use?

Also for TS9WBE users the logo file is called "ts2009.bmp". TS9 users also have access to the TS9 fan-kit available off the TS2009 Website.

My Launcher:


peter
 
PerRock;bt110 said:
thanks for the write-up Ed, it was fairly helpful. One question for others attempting this: might it be possible for you to release your button-layout template you made for everyone else to use?

Also for TS9WBE users the logo file is called "ts2009.bmp". TS9 users also have access to the TS9 fan-kit available off the TS2009 Website.
Well done Peter, that looks great! You're welcome, and thank you for applying the tutorial to 2009, and providing the extra information! I may well make some custom screens to offer, but at this point I have to admit that I'm not seeing the interest! Thanks for visiting, and commenting!:)
 
It's obvious that I'm going to have to get me a good picture and give this a try. Thanks Ed.
Mike
 
I've just recreated the mask (for TS12) and this time I think I got it right. But on examination there is only one layer - should there be more? I'm happy to post it here but I can only post as JPG, JPEG, PNG or GIF. Would that be useful?

Paul
 
pcas1986;bt140 said:
I've just recreated the mask (for TS12) and this time I think I got it right. But on examination there is only one layer - should there be more? I'm happy to post it here but I can only post as JPG, JPEG, PNG or GIF. Would that be useful?

Paul

Yes Paul, one layer, a raster layer. Do not post it, as it will merge anyway, as long as you have the masked section and the transparent rectangles, you're on target!
 
russellwhite2007;bt143 said:
Thank-you for your time and efforts on this.

You're welcome Russell, I'll look forward to seeing your results! Thanks for visiting, and for commenting!:)
 
After living with mine for a little while, I've elected to do some tweaking.


I'm not sure if I want to keep the "Extras" icon. Any suggestions for alternates?


peter
 
Last edited:
PerRock;bt180 said:
After living with mine for a little while, I've elected to do some tweaking.
I'm not sure if I want to keep the "Extras" icon. Any suggestions for alternates?
peter

Your'e not the type to let something be for very long, are you?:hehe: It looks nice, and I like your buttons. As far as the "Extras" button goes, I suppose "Stuff I don't Use" is too much to fit in there?
 
The "Stuff I don't use" would include the Manual, Website, Forums & Extras. All of those I access via other means. The Options button gets used maybe once or twice during a version install.

I guess the "links" and other stuff associated with those buttons is hardcoded. At least I couldn't find anything that could be amended.
 
Euphod;bt189 said:
Nice pic Mike. The buttons are little indistinct for my tastes, but I like it overall!

Yeah, I know they're indistinct, but it's for my use and as long as I can see them, that's all I need. I wanted them to be faint and didn't want them obscuring the picture. When I hover my mouse over one of the links, it brightens up. There are some other things that I'm thinking about doing with it, but it was a first try to get familiar with the process. Thanks for the great tutorial and I can see some great use of it in the future.

Mike
 
leeferr;bt193 said:
Yeah, I know they're indistinct, but it's for my use and as long as I can see them, that's all I need. I wanted them to be faint and didn't want them obscuring the picture. When I hover my mouse over one of the links, it brightens up.

You're welcome, and that's a great solution to the problem of obscuring the picture. I hope people realize they can do tricks like that with the button images. I had some similar ideas myself, but have not had time to try them out. What you have done makes perfect sense to me!

Thanks for the extra information, I'm sure it will help someone!
 
Thanks Ed. I just don't like the blocks around my text. As long as I can see the text (after all, it'll be the same each time that I launch), then that's all I need. I'm thinking about doing some little logos instead of text for each, but those thoughts really haven't taken shape yet. It opens up all sorts of possibilities. I don't know much about gifs, but I was wondering if gifs could be used in order to get me some animation in the buttons.

Mike
 
Back
Top