Illustrative Loading Screen editing tutorial by MrGorsh

Guides on how to make skins, modify JPOG and much more

What do you think about this tutorial?

Helpful and understandable, top quality one!
4
80%
Not bad quality, still useful for modders.
0
No votes
I don't think it's much needed, but maybe someone does...
0
No votes
Not needed, everyone knows how to do this!
0
No votes
HoW dO i TyPe WoRdZ?? PlEaSe LiNk.
1
20%
 
Total votes : 5

Illustrative Loading Screen editing tutorial by MrGorsh

Unread postby MrGorsh » Thu, 17th Nov 2011 12:14

Illustrative Loading Screen and jp:og Background image editing Tutorial
by MrGorsh


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 true Skinning tutorial, but its effects are implemented ingame just like the skinning ones.

Let's get started!

I. Tools you need.

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


II. Files you need.
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


III. Step One - preparing your loading screen image.
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:
Image

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:

Image

Now you are ready and able to proceed into the step two!


IV. Step Two - Dividing your picture.

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

Image

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:

Image
and
Image

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:

Image   Image  
bkg_Lic_pc_1                                                         bkg_Lic_pc_2  
Image
            bkg_Lic_pc_3
Image   Image
bkg_Lic_pc_4                                                         bkg_Lic_pc_5  
Image
            bkg_Lic_pc_6

If everything went fine, congratulations, you have just finished taking Step Two into your better JPOG future!


V. Step Three - Implementing your Loading Screen ingame.

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:

Image

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:

Image

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:
Image
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.


VI. Checking the file.

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!


VII. Bonus download.
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.


Thank you for reading this tutorial and I hope it was helpful. Don't forget to give it a rating followed by constructive feedback!
Last edited by MrGorsh on Wed, 23rd Nov 2011 16:57, edited 1 time in total.
Image
Image
User avatar
MrGorsh
Friendly Herbivore
Friendly Herbivore
 
Posts: 127
Joined: Wed, 16th Feb 2011 9:37
Location: Poland
Gender: Male
User Title: Your Worst Nightmare

Re: Illustrative Loading Screen editing tutorial by MrGorsh

Unread postby Reprieve » Thu, 17th Nov 2011 22:04

Why do people keep making awesome things that need to be stickied? Now there are many stickies!
Image
User avatar
Reprieve
Park Admin
Park Admin
 
Posts: 6148
Joined: Thu, 17th Apr 2008 16:43
Location: In your worst nightmare
Gender: Male
User Title: flagellum dei

Re: Illustrative Loading Screen editing tutorial by MrGorsh

Unread postby Legion » Thu, 17th Nov 2011 22:45

Reprieve wrote:Why do people keep making awesome things that need to be stickied? Now there are many stickies!

We need a "like" button. Badly.
User avatar
Legion
Park Admin
Park Admin
 
Posts: 7284
Joined: Fri, 5th Jan 2007 23:34
Location: Portugal
Gender: Male
User Title: da webmastah!

Re: Illustrative Loading Screen editing tutorial by MrGorsh

Unread postby Reprieve » Fri, 18th Nov 2011 11:34

Legion wrote:
Reprieve wrote:Why do people keep making awesome things that need to be stickied? Now there are many stickies!

We need a "like" button. Badly.

Or a subforum of the endorsed, crème de la crème tutorials.
Image
User avatar
Reprieve
Park Admin
Park Admin
 
Posts: 6148
Joined: Thu, 17th Apr 2008 16:43
Location: In your worst nightmare
Gender: Male
User Title: flagellum dei

Re: Illustrative Loading Screen editing tutorial by MrGorsh

Unread postby Legion » Fri, 18th Nov 2011 21:11

Reprieve wrote:
Legion wrote:
Reprieve wrote:Why do people keep making awesome things that need to be stickied? Now there are many stickies!

We need a "like" button. Badly.

Or a subforum of the endorsed, crème de la crème tutorials.

Last time we tried to sponsor the good stuff was a flop, so... admin board to discuss this?
User avatar
Legion
Park Admin
Park Admin
 
Posts: 7284
Joined: Fri, 5th Jan 2007 23:34
Location: Portugal
Gender: Male
User Title: da webmastah!

Re: Illustrative Loading Screen editing tutorial by MrGorsh

Unread postby Reprieve » Fri, 18th Nov 2011 21:33

Legion wrote:
Reprieve wrote:
Legion wrote:We need a "like" button. Badly.

Or a subforum of the endorsed, crème de la crème tutorials.

Last time we tried to sponsor the good stuff was a flop, so... admin board to discuss this?

Or, as I like to call it, the batboard!
Image
User avatar
Reprieve
Park Admin
Park Admin
 
Posts: 6148
Joined: Thu, 17th Apr 2008 16:43
Location: In your worst nightmare
Gender: Male
User Title: flagellum dei

Re: Illustrative Loading Screen editing tutorial by MrGorsh

Unread postby superhans8 » Thu, 24th Nov 2011 7:45

You are now the mother of loading screen modders;)
Image
RAWR
yeah I spelled it the way

My entire mods in one link: viewtopic.php?f=38&t=7762
superhans8
Harmless Carnivore
Harmless Carnivore
 
Posts: 156
Joined: Wed, 23rd Jun 2010 6:07
Location: Isla Sorna
Gender: Male
User Title: JayPOG Gamer

Re: Illustrative Loading Screen editing tutorial by MrGorsh

Unread postby Reprieve » Thu, 24th Nov 2011 18:41

For which he gets:
Image
Image
User avatar
Reprieve
Park Admin
Park Admin
 
Posts: 6148
Joined: Thu, 17th Apr 2008 16:43
Location: In your worst nightmare
Gender: Male
User Title: flagellum dei

Re: Illustrative Loading Screen editing tutorial by MrGorsh

Unread postby MrGorsh » Fri, 25th Nov 2011 0:14

Well, I'm more than glad it turned to be seen as useful, as this is quite a minor and cosmetic modification :grin: I shall wear that badge of courage proudly then, right on my face! Or... maybe better on chest, traditions over whims.
Image
Image
User avatar
MrGorsh
Friendly Herbivore
Friendly Herbivore
 
Posts: 127
Joined: Wed, 16th Feb 2011 9:37
Location: Poland
Gender: Male
User Title: Your Worst Nightmare

Re: Illustrative Loading Screen editing tutorial by MrGorsh

Unread postby Reprieve » Fri, 25th Nov 2011 11:29

Still, it's the first detailed explanation of how to get a minor cosmetic change, so props for that.
Image
User avatar
Reprieve
Park Admin
Park Admin
 
Posts: 6148
Joined: Thu, 17th Apr 2008 16:43
Location: In your worst nightmare
Gender: Male
User Title: flagellum dei


Return to Tutorials

Who is online

Users browsing this forum: No registered users and 1 guest

Help keep this forum ad-free - please Donate


This free, ad-free forum is hosted by ForumLaunch