Using images in Transcendence

This is a moderated forum that collects tutorials, guides, and references for creating Transcendence extensions and scripts.
Post Reply
relanat
Militia Captain
Militia Captain
Posts: 941
Joined: Tue Nov 05, 2013 9:56 am

Current for 1.7a1a. Any mistakes or further info let me know, please. I'm still learning this stuff.

Using images in Transcendence is easy enough.. once you've worked it out.
Hopefully this will help modders by giving them a bit more info.

The images the game uses are kept in the Resources folder in the Transcendence_Source folder that appears when you decompile Transcendence using Transdata. To do this go to these pages; http://transcendence.kronosaur.com/guid ... =transData and http://forums.kronosaur.com/viewtopic.php?f=8&t=1129 and follow the directions. Any problems (it can be a bit exacting because computers are so fussy) ask for help on IRC or in the forum.

There are hundreds of images in the folder and some .wav files which are for sounds. If you want to have a different ship, station, missile, planet, star, anything you need to add your own graphics. You can, however, use any image here as many times as you like because the game can (and does) use images multiple times.
Most of the images have a double. One is called (for example) Makayev Factory.jpg and it has a counterpart MakyevFactoryMask.bmp which is a cutout image with a black background (called a mask). This station is called a Makayev Manufacturing Plant in-game. I think the reason there are two similar images has to do with placing images on top of other images (like your ship flying over the sun or a station) but it isn't necessary to know why. We just use them.

The mask image is normally a .bmp file. The forum won't attach .bmp files so I posted it as a .jpg here
Attachments
MakayevFactoryMask.jpg
MakayevFactoryMask.jpg (6.64 KiB) Viewed 6980 times
MakayevFactory.jpg
MakayevFactory.jpg (29 KiB) Viewed 6997 times
Last edited by relanat on Fri Apr 15, 2016 3:47 am, edited 1 time in total.
Stupid code. Do what I want, not what I typed in!
relanat
Militia Captain
Militia Captain
Posts: 941
Joined: Tue Nov 05, 2013 9:56 am

Stations

The code for the Makeyev station mentioned above is in the file CorporateHierarchy.xml which is in the Transcendence_Source folder as well. I recommend opening it with Note Pad Plus. The code is under the heading "stMakayevFactory", not Makayev Arms Dealer.

In this code there is a line:

Code: Select all

<Image imageID="&rsMakayevFactory;" imageX="0" imageY="0" imageWidth="150" imageHeight="256"/>
which tells the game to use this resource (when you see '&rs' at the beginning this is called a resource; game jargon) for the images for this station. Note that this isn't the images mentioned above, it's just an instruction for the game to use images which are defined elsewhere. This is because most objects in the game use more than one image and are often used multiple times. It saves typing them in many times.
'imageX=' and 'imageY=' are coordinates used by the game when looking at an image. 0,0 is at the top left corner of an image and runs to the right for 'x' and down for 'y' and they are measured in pixels. You will need a graphics program of some sort if you want to mess around with this. Microsoft Paint will do but is pretty basic. 'imageWidth=' is, not surprisingly, how wide the image is and 'imageHeight=' is how high the image is, again measured in pixels. In this case the Makayev images are exactly the same size as defined here (150x256) but this isn't always the case as we will see later.

In this case the images are defined right at the bottom of the CorporateHierarchy.xml file and it looks like this:

Code: Select all

<Image UNID="&rsMakayevFactory;" bitmap="Resources\MakayevFactory.jpg" bitmask="Resources\MakayevFactoryMask.bmp" loadOnUse="true"/>
Here the images to use are defined. The 'bitmap=' is the .jpg picture of the station and the 'bitmask=' is the .bmp mask with the black and white outline. I don't know what 'loadOnUse="true"' does, but I normally put it in anyway. Note that the image names have 'Resources\' in front of them. This tells the game to look in the Resources folder for these images. If you add your own different images in a mod you would need to alter this to let the game know where to look for your images.

So when the game uses a station it gets the images from the 'Image UNID' line and uses them with the info from the 'imageID' line.
It does this by getting the images "MakayevFactory.jpg" and "MakayevFactoryMask.bmp" and starting from the top left of the images (coord 0,0) measures across 150 pixels and down 256 pixels and uses that area as the image. In this example this is the whole image so it's an easy example.

Also when you dock at a Makayev Manufufacturing Plant you will see this image of the station in the LHS of the dockscreen. The game does this automatically. You can, however, override this image by using "defaultBackgroundID=" in the station UNID description (I won't explain this here).

Image

Another simple example is the CSC Europa wreck defined in the file PointJuno.xml.

Image

It has

Code: Select all

<Image imageID="&rsCSCWreckage;" imageX="0" imageY="0" imageWidth="332" imageHeight="320"/>
and

Code: Select all

<Image UNID="&rsCSCWreckage;" bitmap="Resources\CSCWreckage.jpg" bitmask="Resources\CSCWreckageMask.bmp" loadOnUse="true" />
Same code. Different images and because the wreck of the Europa is much larger than a Makayev Plant the 'imageWidth=' and 'imageHeight=' values are larger (332 x 320 for the CSC wreck and 150 x 256 for the Makayev Plant). This determines how big the station looks in the game. The Europa will be roughly twice the size of a Makayev Plant.
Stupid code. Do what I want, not what I typed in!
relanat
Militia Captain
Militia Captain
Posts: 941
Joined: Tue Nov 05, 2013 9:56 am

Items

Items are, well,.. items. Weapons, barrels, ROMs, shields, tuna.. er, better make that salmon, etc. You see images of them when you buy them at stations, loot them out of wrecks, install them, use them. Lots of times in other words.

There are a lot of them so rather than have even more images in the Resources folder the game uses images made up of lots of little pictures.
Here is "Items1.jpg". It is 384 x 864 pixels and has 33 separate images combined into one.

Image

The handy thing here is that all the individual images are the same size, 96 x 96 pixels. This makes it a good example to learn from. This can happen because you will only ever see these images in lists, dock services screens or when you 'U'se them by pressing 'U' from your ship. No different sizes are needed like for stations and ships.

We will use the Gem of Despair as an example. Its in the UsefulItems.xml file. It has the code:

Code: Select all

<Image imageID="&rsItems1;" imageX="0" imageY="576" imageWidth="96" imageHeight="96"/>
But the second piece of code that is needed isn't in the same file. It's been placed in CorePlaceholders.xml.

Code: Select all

<Image UNID="&rsItems1;" bitmap="Resources\Items1.jpg" bitmask="Resources\Items1Mask.bmp" />
This is because many different items use these two images. Shields, ore, mines, autons and many more items all refer to '&rsItems1;' for their image. It doesn't need to be in every file or even the same file because the game will find it and use it so long as it exists somewhere.

So for the Gem of Despair the game goes to the 'Items1' images and goes to the coordinates 'X=0' and 'Y=576' (0,576). So it goes across the top if the image for 0 pixels (or stays at the left hand edge in other words) and down 576 pixels. This will be the top left corner of the image. It then measures across 96 pixels from there and down 96 pixels. This area becomes the image for the Gem. And, hey presto, it's the area on the left edge about 3/4 of the way down that has the blue gem image in it.

Note that if you put in 'imageX="576" imageY="0"' (reverse the coordinates) you wont get any image. This is because the game looks for the area at 576,0 which is up the top well past the right hand side of 'Items1'. In this case the code displays exactly what it sees, which is nothing because there isn't a picture there. Unfortunately the game doesn't tell you that there isn't anything there (damhik).

As another example we'll use the Scramble Mnemonic Cube from StdType.xml.
Its image code is:

Code: Select all

<Image imageID="&rsItems1;" imageX="192" imageY="288" imageWidth="96" imageHeight="96"/>
It uses the same code for the 'Image UNID=' as the Gem of Despair, ie "&rsItems1;".

So the game goes to the images 'Items1.jpg' and 'Items1Mask.bmp'. It then goes across 192 pixels and down 288 pixels. From that point it measures across 96 pixels for the width and down 96 pixels for the height. This area will be the image for the cube and indeed it is. The green cube thing.

Again note, if you get the coordinates reversed (288,192) you will end up with the picture of the ammo box and ammo (288 across and 192 down) which is above and right of the green cube.

This is a fairly easy example to use because all the coordinates are going to be multiples of 96 because all the individual pictures are 96 x 96 pixels. If you want a harder example have a look at BattleArenaSegments.jpg. George deserves a medal for working that out!
Stupid code. Do what I want, not what I typed in!
relanat
Militia Captain
Militia Captain
Posts: 941
Joined: Tue Nov 05, 2013 9:56 am

Ships

Ships are different in that they use quite a few images.

There is the image of the ship when its flying around. This is actually a long series of pictures of the ship facing at different angles which are run through quickly so it appears to be rotating (like stop motion photography). There is one of these (and a mask) for every ship that appears in the game.

For playerships (eg the Wolfen) there is also the image of the ship which appears when you select the ship you want to fly at the beginning of the game (which I think is the same image that appears when you go to the Ship's Interior screen), the ship's armor display at the bottom right of the screen, the shield image and the images of the armor segments that appear to fade as your ship gets damaged.

========================
As the first example we'll use the Charon Frigate (scCharonFrigateRaider) from CharonPirates.xml because I think it looks really cool (although they have killed me quite a number of times).

Its image code is:

Code: Select all

<Image imageID="&rsCharonFrigateImage;" imageWidth="140" imageHeight="140"/>
and from the bottom of the same file,

Code: Select all

<Image UNID="&rsCharonFrigateImage;"	bitmap="Resources\CharonFrigate.jpg" bitmask="Resources\CharonFrigateMask.bmp"  loadOnUse="true"/>
The 'Image UNID=' info is often at the bottom of the same file so its worth checking there first if you're looking for it.

Interestingly there are no 'imageX=' and 'imageY=' coordinates here. This is because the game will automatically assume the coordinates are 0,0 unless told otherwise. I included them in the station image examples above only to show how images work. They didn't need to be there.

The images are actually 140 x 2800 pixels so I wont show all of it here just the top part. The full image goes down for 20 ship images.

Image

So you can see what looks lke a ship turning is actually just the next picture down being shown really quickly so you can't see the individual frames. The 2800 pixel height of the images divides by the width (140) to give 20. This is what is known as a 20 facings ship (other examples are 40 facings or 120 facings ships). For one complete spin of the ship when it is flying it runs through the 20 images and then starts at the top again (or the other way if the ship spins in the opposite direction). The more facings a ship has the smoother it looks when it turns, plus it's sometimes easier to aim with more facings in your ship. The game assumes that a ship image has 20 facings unless told otherwise as we will see later.

================================
On to playerships. Using the Wolfen as an example.
The Wolfen is quite common in the game, not just as a playership. In the Resources folder there are a number of images of it or used by it..
ArmorHUD_Wolfen.bmp
ArmorHUDShip_Wolfen.jpg
MediumShips1.jpg and MediumShipMask.bmp
ShieldsHUDWolfen..jpg and ShieldsHUDDefaultMask.bmp
ShipsWolfenGunship.jpg and ShipsWolfenGunshipMask.bmp
WolfenGunshipHD.jpg and WolfenGunshipHDMask.bmp
WolfenLarge.jpg and WolfenLargeMask.bmp
and more

In Commonwealth.xml there is a Wolfen Gunship with the image code:

Code: Select all

<Image imageID="&rsMediumShips1;" imageX="768" imageY="0" imageWidth="48" imageHeight="48"/>
and from StdTypes.xml

Code: Select all

<Image UNID="&rsMediumShips1;" bitmap="Resources\MediumShips1.jpg" bitmask="Resources\MediumShips1Mask.bmp" />
This is the Wolfen you see flying around doing its own thing. Its image is found in MediumShips1.jpg and MediumShipsMask.bmp and is mixed in alongside other medium sized ships. The game selects out the Wolfen image by going across 768 pixels (and down 0 pixels), starting from there and getting an image 48 pixels by 48 pixels as the starting image. It then uses the 19 other Wolfen images below to make the ship look like it is turning.

Image

===================================
In KorolovShipping.xml you will find Volkov, a Wolfen-based wingman.

Code: Select all

<Image imageID="&rsWolfenGunship;" imageX="0" imageY="0" imageWidth="48" imageHeight="48" rotationCount="40"/>
and from StdPlayerShips.xml:

Code: Select all

	<Image UNID="&rsWolfenGunship;" bitmap="Resources\ShipsWolfenGunship.jpg" bitmask="Resources\ShipsWolfenGunshipMask.bmp" loadOnUse="true"/>
The images here are 48 x 1920 pixels. This makes it a 40 facings ship and in the 'imageID=' line above you will see at the end 'rotationCount="40"'. This lets the game know there are 40 images of the ship to scroll through, not the default 20 facings.

======================== ========
Finally there is the Wolfen Playership. this is the one you pilot if you select Wolfen at the beginning of a game.
Its in PlayerShips.xml and has the code:

Code: Select all

<Image imageID="&rsWolfenGunshipHD;" imageX="0" imageY="0" imageWidth="48" imageHeight="48" rotationCount="120"/>
and once again from StdPlayerShips.xml,

Code: Select all

<Image UNID="&rsWolfenGunshipHD;" bitmap="Resources\WolfenGunshipHD.jpg" bitmask="Resources\WolfenGunshipHDMask.bmp" loadOnUse="true"/>
As you can see by the 'rotationCount=' value this is a 120 facings ship. The images are 48 x 5760.

Note in all these versions of the Wolfen the image is 48 pixels square. This determines how big the ship looks when you are flying around. These ship sizes vary from small like the Hornet Battlepod 32x32 up to big like the Phobos Dreadnought and CSCs at 256x256.

=============================
Version 1.7a1a has 20 facings versions of all ships. It also has 40 and 120 facings versions of the Wolfen, Sapphire and EI500. There is an expansion pack call Stars Of The Pilgrims HD available at kronosaur.com which has 120 facings versions of all or at least most ships (not sure on this).

============================
Two final concerns for playerships. At the bottom of StdPlayerShips.xml there are more listings for the Wolfen.

Code: Select all

<Image UNID="&rsWolfenArmor;"		      bitmap="Resources\ArmorHUD_Wolfen.bmp" />
<Image UNID="&rsArmorHUDShip_Wolfen;" bitmap="Resources\ArmorHUDShip_Wolfen.jpg" />
<Image UNID="&rsWolfenLarge;"		      bitmap="Resources\WolfenLarge.jpg"	bitmask="Resources\WolfenLargeMask.bmp" 	loadOnUse="true" />
and in Compatibility10.xml

Code: Select all

<Image UNID="&rsWolfenShields;" bitmap="Resources\ShieldsHUD_Wolfen.bmp" />
The armor and shield images are already well explained in other tutorials or posts. Briefly you need a shield display as well as an armor display and the armor segments which go with it. The main thing to know is that you need these to have a playership.

The other is the 'UNID="&rsWolfenLarge;"'. This is a 320 by 320 pixel image of the ship which is used when you select your playership at the beginning of the game and (I think) appears when you go to the Ship's Interior screen. This image should always be 320 x 320 pixels no matter how large or small your ship is.

PS The Deimos destroyer has this code:

Code: Select all

<Image imageID="&rsDeimos;" imageWidth="170" imageHeight="170" rotationOffset="-30"/>
I have no idea what rotationOffset does. Just letting you know it exists.

PPS Another example of using ship images is a tricky bit of coding by George which shows freighter and Charon ship images and information in the Korolov Shipping stations. I don't understand the code but I'm impressed by the outcome.
Last edited by relanat on Fri Apr 15, 2016 3:50 am, edited 1 time in total.
Stupid code. Do what I want, not what I typed in!
relanat
Militia Captain
Militia Captain
Posts: 941
Joined: Tue Nov 05, 2013 9:56 am

Reserved for dockscreens
Stupid code. Do what I want, not what I typed in!
relanat
Militia Captain
Militia Captain
Posts: 941
Joined: Tue Nov 05, 2013 9:56 am

Other stuff

Stars, planets and asteroids all have their own images and masks. So do stargates, missiles and explosions.
There are many different nebula and space images that form the background of space scenes as well as backgrounds for when you start the game, finish the game or die during the game.
There is also the reactor display at the top left, the weapons/targeting display at the bottom left and the LRS (long range scanner) at the top right of the cockpit view.
Dockscreens are a whole other area where you can muck about with images too.
Enjoy messing about with this stuff. It's fun.
Stupid code. Do what I want, not what I typed in!
RPC
Fleet Admiral
Fleet Admiral
Posts: 2876
Joined: Thu Feb 03, 2011 5:21 am
Location: Hmm... I'm confused. Anybody have a starmap to the Core?

This is a really good resource, gonna move this to Modding Resources so it doesn't get lost in page 5 of Shipyards.
Tutorial List on the Wiki and Installing Mods
Get on Discord for mod help and general chat
Image
Image
Der Tod ist der zeitlose Frieden und das leben ist der Krieg
Wir müssen wissen — wir werden wissen!
I don't want any sort of copyright on my Transcendence mods. Feel free to take/modify whatever you want.
NMS
Militia Captain
Militia Captain
Posts: 569
Joined: Tue Mar 05, 2013 8:26 am

rotationOffset changes the point that the ship spins around so that it's not at the center of the square.
RPC
Fleet Admiral
Fleet Admiral
Posts: 2876
Joined: Thu Feb 03, 2011 5:21 am
Location: Hmm... I'm confused. Anybody have a starmap to the Core?

NMS: what is the format for rotation offset? Is it just:
rotationOffset= "x,y" ?

I've only seen single digits so I'm not sure how Trans figures out how to offset.
Tutorial List on the Wiki and Installing Mods
Get on Discord for mod help and general chat
Image
Image
Der Tod ist der zeitlose Frieden und das leben ist der Krieg
Wir müssen wissen — wir werden wissen!
I don't want any sort of copyright on my Transcendence mods. Feel free to take/modify whatever you want.
NMS
Militia Captain
Militia Captain
Posts: 569
Joined: Tue Mar 05, 2013 8:26 am

I suspect it only works on the front-to-back axis.
Post Reply