[Documentation] Custom palettes (per image) for Ufopaedia articles

[Meridian]

Ufopedia articles, which have only a single picture on them could use a custom palette and take it directly from the picture.

See: https://github.com/MeridianOXC/OpenXcom/commit/fd90251f960da7b6b4b05780776d2be13e734770

There is no new ruleset, just a naming convention.
Images defined with "_CPAL" suffix will retain their original palette (other images are stripped of their original palette by OpenXcom).

Color of text, cursor and buttons in ufopedia is hardcoded, so there are only a few indexes that need to remain in a custom palette.
Here's the overview.
Also note that color index 0 is reserved in all palettes (for transparency).

Relevant article types:

|	| Palette	| Buttons	| Text	| Cursor	|
| 1 Craft	| PAL_UFOPAEDIA	| 240-244	| 240-249	| 252-255	|
| 2 Craft weapon	| PAL_BATTLEPEDIA	| 17-21	| 240-249	| 144-147	|
| 7 Image+Text	| PAL_UFOPAEDIA	| 84-88	| 240-249	| 252-255	|
| 3 Vehicles	| PAL_UFOPAEDIA	| 81-84	| 240-249	| 252-255	| added in August 2017
| 5 Armor	| PAL_BATTLEPEDIA	| 16-20	| 240-249	| 144-147	| added in November 2020
| 10-17 TFTD	|	|	|	|	| added in November 2020

Reserved colors for TFTD-style articles in xcom2 mods:

Code: [Select]

0           # transparent
3-7         # buttons
42-45       # cursor
55-59       # ammo (item articles only)
245-249     # text

Reserved colors for TFTD-style articles in xcom1 mods:
(if custom palettes are used, the background picture and the INFO button background will NOT be rendered, you need to integrate them into your custom palette image)

Code: [Select]

0                # transparent

33-37            # ammo (items)

134-138          # some buttons (ufos)
145-149          # some buttons (craft weapon, vehicle, item, armor)
209-213          # some buttons (facility)
240-244          # some buttons (image, craft)

134-143          # text (ufos)
209-213, 219-223 # text (facility)
240-249          # text (other)

144-147          # cursor (craft weapon, vehicle, item, armor)
252-255          # cursor (other)

Reserved colors for TFTD-style articles in mods that have changed their interface.rul file... check your interface.rul file.

Not relevant article types (just for future reference):

|	| Palette	| Buttons	| Text	| Cursor	|
| 4 Items	| PAL_BATTLEPEDIA	| 145-149	| 33-37, 240-249	| 144-147	|
| 6 Facilities	| PAL_BASESCAPE	| 65-69	| 209-213, 219-223	| 252-255	|
| 8 Text	| PAL_UFOPAEDIA	| 81-84	| 240-249	| 252-255	|
| 9 UFOs	| PAL_GEOSCAPE	| 134-138	| 134-138	| 252-255	|

PS: all 6 original palettes are attached. Please be aware of the difference between PAL_BATTLESCAPE and PAL_BATTLEPEDIA.

[Meridian]

Examples:
 - Craft article (pachyderm)
 - Craft weapon article (gauss cannon)
 - Image+Text article (tools & blades)

Code: [Select]

extraSprites:
  - type: BIG_CHARIOT_CPAL
    singleImage: true
    width: 320
    height: 200
    files:
      0: pachyderm_new.png
  - type: BIG_TOOLS_CPAL
    singleImage: true
    width: 320
    height: 200
    files:
      0: riven_new.png
  - type: BIG_GAUSS_CANNON_CPAL
    singleImage: true
    width: 320
    height: 200
    files:
      0: gauss_new.png
ufopaedia:
  - id: STR_CHARIOT
    image_id: BIG_CHARIOT_CPAL
  - id: STR_PRIMITIVE_WEAPONS_2
    image_id: BIG_TOOLS_CPAL
  - id: STR_GAUSS_CANNON_UC
    image_id: BIG_GAUSS_CANNON_CPAL


[Meridian]

(reserved)

[clownagent]

This is a really great improvement!


Sorry if the following question is stupid (I am not a coder):
If the color for text and buttons is hardcoded anyway, would it not be much easier to define the rgb colors for them directly in the code and do not let their colors rely on the image palette?
Then the modders do not have to fiddle with the image palette to get the text correct. The images can just be converted to 256 colors and used directly.

[Meridian]

The whole screen is using 256 colors only.
It's not about single pictures really.
Even if I hardcoded the text, buttons, etc. you would still need to leave some color indexes empty in your picture... so that I can squeeze those colors there... or I would just overwrite some of them.

PS: for those who need an exaggerated example: imagine you would have a picture with 256 shades of green and text would use 5 shades of red. Now you have 260 colors in total, which just doesn't fit into the screen's palette. Either you have to sacrifice 5 green shades for red text color; or use some of the green shades for text too. Can't have both.

[clownagent]

The whole screen is using 256 colors only.
It's not about single pictures really.
Even if I hardcoded the text, buttons, etc. you would still need to leave some color indexes empty in your picture... so that I can squeeze those colors there... or I would just overwrite some of them.

Ah ok, this 256 color limitation seems to be really hard limit in OXCOM.

I have tried to prepare a correctly paletted image and it worked great(image attached).

However the preparation was quite complicated:
1. Transformed the image to 237 colors (256-19) to get the image palette
2. Then manpiulated the palette by hand for the 19 text/cursor indices (took ~10 min)
Used mtpaint for this and the manual changing of palette was quite time consuming.

Is there any method or script/program, which could make step 2 faster?

[Meridian]

I use IrfanView, Microsoft Paint and Notepad++.
It takes me about 2-3 minutes.

1. (irfanview) prepare your image in full color, resize and cut it to 320x200
2. (paint) open a pre-made 320x600 image with reserved colors (the bottom two thirds contain just reserved colors, upper third is empty)
3. (paint) paste the resized image into pre-made template
4. (irfanview) take the composite image and decrease color depth to 256 colors... please note that this contains the correct colors already... the bottom two thirds of the composite image make sure that reserved colors make it to the palette unchanged and (usually) on the top of the color list
5. (irfanview) export palette into text file
6. (notepad++) open the palette file and remove the top colors (those are the reserved ones)
7. (notepad++) from pre-made text file, copy-paste the removed colors back into palette file... now in correct order and in correct positions
8. (irfanview) take the original full color resized and cut picture again and apply the new reordered palette on it... and save

Steps 2 and 7 use pre-made resources, which you only really need to create once; thus saving a lot of time.

There's probably a lot better way to do this... but this was sufficient for me.
I'm sure the PhotoShop users will come up with something much better

PS: beautiful picture of Caladan... <drools>
PS2: also check out this GIMP plugin (by Tylor), which automates the work (not tested by me): https://openxcom.org/forum/index.php/topic,5290.0.html

Code: [Select]

0 0 0 # color 0, file index 4
224 224 240 # colors 81-88, file index 85-92
212 212 232
204 204 224
196 192 220
184 184 212
176 172 204
164 160 196
156 152 188 # end
156 148 188 # colors 240-249, file index 244-253
124 120 148
92 92 108
60 60 68
28 28 32
140 204 184
104 164 152
72 124 120
44 80 84
20 40 44 # end
252 252 164 # colors 252-255, file index 256-259
220 232 140
192 212 120
164 192 104 # end


[clownagent]

Thank you very much for this.

The fact that palette files are just text makes it much easier.   

[ivandogovich]

Hey Meridian, I'm trying to work this out.  Can you explain what the "top colors" in step 6 means?

6. (notepad++) open the palette file and remove the top colors (those are the reserved ones)

[Meridian]

Did you use my reserved colors image template (step 2)?
Looks like you didn't.

If you did, the "reserved colors" would be on the top (because the template image is full of them).
In step 6, you basically move them from the top, to the positions where they belong (where OpenXcom expects them).

[ivandogovich]

Ok, I worked this out with Meridian on Discord Chat. 

For further clarification (for my own understanding of the process):
Line 6: "remove the top colors" 
   - these are 23 lines starting on line 4

Line 7: "copy-paste the removed colors back into palette file... now in correct order and in correct positions
   - Line 4 "0 0 0" is there to replace the bright green color "181 230 29" that will be the first color (and transparent in the palette)
   - Ensure that you remove the comments from the premade text file or it will mess up the palette.

Once I got all that sorted, I successfully produced this lovely image:

[Meridian]

First post updated with more options.