Jurassic Mods
Would you like to react to this message? Create an account in a few clicks or log in to continue.

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

3 posters

Go down

What do you think about this tutorial?

Illustrative Loading Screen and jp:og Background image editing Tutorial by MrGorsh Vote_lcap100%Illustrative Loading Screen and jp:og Background image editing Tutorial by MrGorsh Vote_rcap 100% 
[ 4 ]
Illustrative Loading Screen and jp:og Background image editing Tutorial by MrGorsh Vote_lcap0%Illustrative Loading Screen and jp:og Background image editing Tutorial by MrGorsh Vote_rcap 0% 
[ 0 ]
Illustrative Loading Screen and jp:og Background image editing Tutorial by MrGorsh Vote_lcap0%Illustrative Loading Screen and jp:og Background image editing Tutorial by MrGorsh Vote_rcap 0% 
[ 0 ]
Illustrative Loading Screen and jp:og Background image editing Tutorial by MrGorsh Vote_lcap0%Illustrative Loading Screen and jp:og Background image editing Tutorial by MrGorsh Vote_rcap 0% 
[ 0 ]
Illustrative Loading Screen and jp:og Background image editing Tutorial by MrGorsh Vote_lcap0%Illustrative Loading Screen and jp:og Background image editing Tutorial by MrGorsh Vote_rcap 0% 
[ 0 ]
 
Total Votes : 4
 
 

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

Post  MrGorsh Thu Nov 17, 2011 7:40 am

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!

(Hope it's in proper forum section D:)

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:
Illustrative Loading Screen and jp:og Background image editing Tutorial by MrGorsh Jp3wallpaper

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:

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

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

Illustrative Loading Screen and jp:og Background image editing Tutorial by MrGorsh Scaled.php?server=411&filename=imagestructure

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

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

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:

Illustrative Loading Screen and jp:og Background image editing Tutorial by MrGorsh Scaled.php?server=37&filename=bkglicpc1   Illustrative Loading Screen and jp:og Background image editing Tutorial by MrGorsh Scaled.php?server=263&filename=bkglicpc2  
bkg_Lic_pc_1                                                         bkg_Lic_pc_2  
Illustrative Loading Screen and jp:og Background image editing Tutorial by MrGorsh Scaled.php?server=408&filename=bkglicpc3
            bkg_Lic_pc_3
Illustrative Loading Screen and jp:og Background image editing Tutorial by MrGorsh Scaled.php?server=836&filename=bkglicpc4   Illustrative Loading Screen and jp:og Background image editing Tutorial by MrGorsh Scaled.php?server=534&filename=bkglicpc5
bkg_Lic_pc_4                                                         bkg_Lic_pc_5  
Illustrative Loading Screen and jp:og Background image editing Tutorial by MrGorsh Scaled.php?server=195&filename=bkglicpc6
            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:

Illustrative Loading Screen and jp:og Background image editing Tutorial by MrGorsh Scaled.php?server=62&filename=ddsk

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:

Illustrative Loading Screen and jp:og Background image editing Tutorial by MrGorsh Scaled.php?server=695&filename=tmlstructure

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:
Illustrative Loading Screen and jp:og Background image editing Tutorial by MrGorsh Scaled.php?server=687&filename=searchef
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 Smile



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!

MrGorsh
MrGorsh
Herrerasaurus
Herrerasaurus


Back to top Go down

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

Post  jfgoofy Thu Apr 12, 2012 11:05 am

Links don't work! Can you please reupload them?
jfgoofy
jfgoofy
Camarasaurus
Camarasaurus


Back to top Go down

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

Post  T-rex Raptor Thu May 17, 2012 6:13 am

jfgoofy wrote:Links don't work! Can you please reupload them?
what link`s do you need and i will give it to you. Very Happy
T-rex Raptor
T-rex Raptor
Dilophosaurus
Dilophosaurus


Back to top Go down

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

Post  jfgoofy Mon May 28, 2012 5:49 pm

T-rex Raptor wrote:
jfgoofy wrote:Links don't work! Can you please reupload them?
what link`s do you need and i will give it to you. Very Happy

Uh, where are they?
jfgoofy
jfgoofy
Camarasaurus
Camarasaurus


Back to top Go down

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

Post  T-rex Raptor Mon May 28, 2012 7:46 pm

jfgoofy wrote:
T-rex Raptor wrote:
jfgoofy wrote:Links don't work! Can you please reupload them?
what link`s do you need and i will give it to you. Very Happy

Uh, where are they?
the links are broken but i can reupload them.
T-rex Raptor
T-rex Raptor
Dilophosaurus
Dilophosaurus


Back to top Go down

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

Post  Sponsored content


Sponsored content


Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum