SpinoInWonderland
Hatchling
Posts : 88
Reputation : 7
Join date : 2016-06-09
 | Subject: Illustrative loading screen editing tutorial by MrGorsh  Mon Aug 15, 2016 11:06 am | |
| - MrGorsh wrote:
- [align=center][size=120]Illustrative Loading Screen and jp:og Background image editing Tutorial
by MrGorsh[/size][/align]
Hello. This tutorial focuses on changing the Loading Screen Jurassic Park logo (the one that famous GEP have changed). Have you grown bored of the plain old JP logo when charging your game? Or maybe you've been inspired by GEP logo? Now, you will be able to change this particular aspect of your Jurassic Park: Operation Genesis game all by yourself!
Technically, it's not a true skinning tutorial, but its effects are implemented ingame just like the skinning ones.
Let's get started!
[size=150]I. Tools you need.[/size]
Graphic modifying Software:
- Photoshop or GIMP + PaintNet (both with .dds plugin)
- Windows Paint
- Irfanview(optional, but useful)
.tml-oriented Software:
- ConvertCCT - used to extract bmp files from .tml files
- Hex Editor Neo - used to implement .dds files into .tml files
Download link to CCCT and HEN
[size=150]II. Files you need.[/size]
For editing the loading screen you need .tml files named bkg_Lic_pc and bkg_Lic_pc16 located in JPOG/Data/matlibs folder on your hard drive.
If you happen to mess with those files without making a backup copy and crash your game or you have only GEP loading screen files, below is what you need:
Download link to default loading screen files
You might also want to have two PNG files that will divide your image into the pieces needed for .dds converting (explained in "Step Two"). My first steps with this game modifying were taken without them, but I want to save YOUR time and make it more easy for you, as they help alot:
Dividing Set 1
Dividing Set 2
[size=150]III. Step One - preparing your loading screen image.[/size]
Loading screen image has a certain size restrictions, so if you prepare a different-size one, you will not be able to proceed into the implementing it ingame phase.
Picture size must be 640 pixels wide and 512 pixels high. 640x512 if you like. No exceptions.
In this tutorial we will work with the Jurassic Park /// wallpaper picture I prepared resized into the game needs:
After you have your picture ready with the size desired... open it with any of the image editors and resize it into 640pixels wide and 480 pixels high. This will flatten your picture, but it's necessary, because the game stretches loading image downwards, meaning if you leave the image as it is, you will lose 32 pixels from the bottom of it AND it will be stretched in height.
When you're done with it, open it with windows Paint and change the image attribute back into the 640 x 512 pixels. This will produce a necessary 32 pixels high white stripe at the bottom of the image, as presented here:
Now you are ready and able to proceed into the step two!
[size=150]IV. Step Two - Dividing your picture.[/size]
Step Two, part one - understanding the picture part arrangement.
If you want to implement your picture in-game, you will need to divide it, because in TML file, it's divided into six parts that are sticked together by the game as your loading screen. Funny and weird, eh? But that's how it works and we can't argue with it. First, you need to understand how which files are named and why. Paste CCT converter into the folder you hold the .tml file called bkg_Lic_pc. Drag the bkg_Lic_pc.tml file and "drop" it on CCT converter. This will open six .bmp files in your folder - they are the files extracted from the tml. as you can see, they are parts of one larger image and have certain names. Here is a list of their names and graphic explaining how they are arranged on the picture:
bkg_Lic_pc_1, bkg_Lic_pc_2, bkg_Lic_pc_3, bkg_Lic_pc_4, bkg_Lic_pc_5, bkg_Lic_pc_6
bkg_Lic_pc_1, bkg_Lic_pc_2, bkg_Lic_pc_4, bkg_Lic_pc_5 - these images need to be 256x256 pixels large.
bkg_Lic_pc_3, bkg_Lic_pc_6 - these images need to be 128x256 pixels large.
Step Two, part two - preparing the picture to be divided.
Now, as you understand the strange arrangement of the image parts, you need to divide your loading screen picture into them. Don't worry, on top of this tutorial, in the "Files needed" I have provided a qucik and easy access to the proper image dividing stuff. Just copy your loading screen image so that you have two. You will need them. On top of the first, paste Dividing Set 1, on top if the second, paste Dividing Set 2. Simple? If you're using Windows' paint for it, remember to set the opacity to the white background coloration while pasting, because if you don't, dividing image will cover all of your loading screen picture.
Now, our two loading screens divided look like this:
and
Step Two, part three - dividing picture into pieces.
Now you are able to divide your picture into pieces! Create new .bmp or .png file for them, copy-paste every part of the picture into them and name properely every file. Remember the file sizes that I stated above, do not miss one pixel by accident, or your work will be ruined! (I'm using Paint for it, as I can zoom closely and move the picture carefuly). After you're done cutting your picture into pieces, you should have set of images in your folder, looking like this:
 
bkg_Lic_pc_1 bkg_Lic_pc_2
bkg_Lic_pc_3
 
bkg_Lic_pc_4 bkg_Lic_pc_5
bkg_Lic_pc_6
If everything went fine, congratulations, you have just finished taking Step Two into your better JPOG future!
[size=150]V. Step Three - Implementing your Loading Screen ingame.[/size]
Step Three, part one - preparing the files.
Open your bkg_Lic_pc image parts in either Photoshop, or PaintNET. Save them as .dds format files. This is the only file format acceptable for implementing ingame, so you can't dodge this. For my photoshop, dds saving pop-up looks like this:
Step Three, part two - understanding the .tml structure.
Ok, now you have your files ready to be in-gamed. But you need to understand what's going on. Select every .dds file of your picture AND the bkg_Lic_pc.tml file, right-click them and select "Edit with Hex Editor Neo". Now scroll to the bottom of the .tml file you opened. You will see something like this:
This means that the .dds images in your .tml are arranged opposite to what is written on the bottom. 6th one is first on top and 1st one is the last on of the bottom. Get it? I hope so.
Step Three, part three - inserting images to the .tml.
In order to paste your images inside the tml file properely, you need to know how to get into certain places inside it. Below, I will give an explanation how to do it based on the tml structure shown above.
In order to find places where .dds files have their beginnings, scroll to the top of the .tml in your HexEditor, select first bit on the top left, then you need to select Edit / Find or just press Ctrl+F and then select Hex Bytes type of search. Insert following numbers:
after you click "Find" you will be taken to the bkg_Lic_pc_6 beginning in the tml. If you tap F3 or repeat the Edit/Search, Hex Editor will repeat your searching, taking you to bkg_Lic_pc_5. What does it mean?
Edit + Search / Ctrl+F - Hex Editor takes you to bkg_Lic_pc_6 part beginning
Ctrl+F + 1x F3 tap - Hex Editor takes you to bkg_Lic_pc_5 part beginning
Ctrl+F + 2x F3 tap - Hex Editor takes you to bkg_Lic_pc_4 part beginning
Ctrl+F + 3x F3 tap - Hex Editor takes you to bkg_Lic_pc_3 part beginning
Ctrl+F + 4x F3 tap - Hex Editor takes you to bkg_Lic_pc_2 part beginning
Ctrl+F + 5x F3 tap - Hex Editor takes you to bkg_Lic_pc_1 part beginning
After you paste proper file contains into the right places, you should notice they change their coloration to red - this will prevent you from pasting something into the previously pasted spot.
When you're done with replacing all parts of the Loading Screen in your .tml, save the file.
[size=150]VI. Checking the file.[/size]
Now you should drag your new, modified tml on top of the CCT converter to check if the files are arranged correctly, if any of them seems to have wrong picture pasted, or the tml crashes, this means you made a mistake during the .dds pasting process in Hex Editor and need to repeat it. if everything is ok, make a copy of bkg_Lic_pc and name it bkg_Lic_pc16.
Paste both into the JPOG/Data/matlibs folder.
Run your JPOG
Congratulations, you have successfuly changed your JPOG loading screen 
Files you might also be interested in editing the same way:
bkg_5star - popup that appears when your park reaches maximum rating
bkg_dinoped - background of the Dinopedia section of JPOG
Feel free to paste various tmls on top of the CCT converter to check what's inside them!
[size=150]VII. Bonus download.[/size]
As a proof of what have been done here, here are the tml's with the JP/// logo implemented as loading screen:
Download Link for JP/// Logo Loading Screen
Unzip. Paste into JPOG/Data/matlibs and check by yourself.
[size=180]Thank you for reading this tutorial and I hope it was helpful. Don't forget to give it a rating followed by constructive feedback![/size] _______________  deviantART: http://spinoinwonderland.deviantart.com/
Blog: http://sauropodomorphlair.blogspot.com/ | Imgur: http://spinoinwonderland.imgur.com/
Models | Skins | Mesozoic Revolution | |
|
