Cholmondely wrote: ↑Sun Apr 03, 2022 7:31 am
default_text_color = redColor;
The "default_text_color" is set in the gui-settings.plist file, not in the mission screen definition. And changing it in gui-settings would simply make all your text that colour, not specific lines.
Cholmondely wrote: ↑Sun Apr 03, 2022 7:31 am
How do I make it work, and furthermore how do I produce something in multi-colour (red & yellow text) as shown above?
It is possible to make individual lines a specific colour, but you have to design your screens a little differently. Colours can be applied to the choices each mission screen has by using the "color:{colordefinition}" option on the definition. Obviously, in your specific case, you don't want the lines of text to be selectable by the player, but you can also make a choice unselectable by adding the option "unselectable:true" to the choice definition.
To make this work, though, there are other hurdles to jump. You would have to build your screen of text line by line, taking into account with width of text (which would change based on the current font), and then include some way of notifying the code you want to change the colour at a particular point.
OK, big code dump incoming...
The following should work (and I've tested it to confirm):
Add the following code to your Hints_Station_Bar.js:
Code: Select all
//-------------------------------------------------------------------------------------------------------------
this.processText = function (text) {
var final = [];
var colors = [];
var columnWidth = 32; // this is the maximum display width available
var paras = text.split("\n");
var color = "";
for (var i = 0; i < paras.length; i++) {
var line = "";
// special case for a blank line
if (paras[i].length == 0 && i < paras.length - 1) {
final.push("");
colors.push(color);
continue;
}
var words = paras[i].split(" ");
for (var j = 0; j < words.length; j++) {
// look for a colour change
if (words[j].indexOf("{color:") >= 0) {
// get the color deinition
color = words[j].substring(words[j].indexOf("{color:") + 7, words[j].indexOf("}"));
if (color == "reset") color = ""; // check for a reset to set the color back to the default
// remove the color definition from the word
words[j] = words[j].substring(0, words[j].indexOf("{color:")) + words[j].substring(words[j].indexOf("}") + 1);
}
// can we fit this word into the line?
if (defaultFont.measureString(line + " " + words[j]) > columnWidth) {
final.push(line); // put the current line into the final array
colors.push(color);
line = ""; // clear the text
}
line += (line.length == 0 ? "" : " ") + words[j];
}
if (line.trim() != "") {
final.push(line); // make sure any leftovers are put into the array
colors.push(color);
line = "";
}
}
// return all the data we compiled in a dictionary
return {
lines: final,
colors: colors
};
}
//-------------------------------------------------------------------------------------------------------------
// returns true if a HUD with allowBigGUI is enabled, otherwise false
this.$isBigGuiActive = function $isBigGuiActive() {
if (oolite.compareVersion("1.83") <= 0) {
return player.ship.hudAllowsBigGui;
} else {
var bigGuiHUD = ["XenonHUD.plist", "coluber_hud_ch01-dock.plist"]; // until there is a property we can check, I'll be listing HUD's that have the allow_big_gui property set here
if (bigGuiHUD.indexOf(player.ship.hud) >= 0) {
return true;
} else {
return false;
}
}
}
Then change the "this.showBar" function to look like this:
Code: Select all
this.showBar = function () {
// grab the text from the descriptions
var text = expandDescription("[hints_bar_gossip]");
var breakdown = this.processText(text);
var defaultColor = "yellowColor";
var displayLines = 26;
if (this.$isBigGuiActive() == false) displayLines = 20;
var choices = {};
// add the text lines to the choices dictionary
for (var i = 0; i < breakdown.lines.length; i++) {
choices["line_" + (i < 10 ? "0" : "") + i.toString()] = {
text: breakdown.lines[i],
alignment: "LEFT",
color: (breakdown.colors[i] == "" ? defaultColor : breakdown.colors[i]),
unselectable: true
}
}
// add some spacers to push the text to the top of the screen
for (var i = 0; i < displayLines - breakdown.lines.length; i++) {
choices["spacer" + i] = {
text: "",
unselectable: true
}
}
// add a final choice to inform the player what to do next
choices["z_end"] = {
text: "Press enter to continue"
}
mission.runScreen({
title: "The Local Bar",
screenID: "show_bar",
exitScreen: "GUI+SCREEN_INTERFACES",
choices: choices,
overlay: "litf_bg_localbar.png", //This adds the bar image behind the message
})
}
And you're done. If you run this as is, you shouldn't see any differences in the text displayed. But, you can now add colour definitions to your descriptions like this:
Code: Select all
"Success in combat needs a lot of preparation. Personally, I meditate every morning and then take a bubblebath. I find that that makes all the difference.\n\n{color:redColor}Yeah, you could use a bath right now, Calvin Clean.",
Some rules for use:
1. The color can only be applied
per line, not per word. So, attempting something like this:
Code: Select all
"This {color:greenColor}is {color:orangeColor}a {color:purpleColor}test",
isn't going to make those individual words different colors. In this example, the result will be a purple line that reads "This is a test". You best bet is to put the color definition immediately after a "\n".
2. Once you change the color, every line that comes after it will have that color, until you either change the color again, or use "{color:reset}" to reset the colour back to default.
3. The color definition can not have any spaces in it. If you want to use an rgb definition do it like this "{color:(1,0,0)}". I know you probably don't know what an rgb definition is, but for clarity it refers to color definition system that uses a decimal value to represent the red, green and blue (hence, RGB) values of the desired color. So, (1,0,0) is a color where the red component is fully on, while the green and blue values are fully off, which results in a red color (and is the equivalent of "redColor" in Oolite). (1,1,1) would be white, (0.5,0.5,0.5) would be a shade of grey, and (0,0,0) would be black.
4. The named colors you can use are the same for the rest of Oolite: blackColor, darkGrayColor, lightGrayColor, whiteColor, grayColor, redColor, greenColor, blueColor, cyanColor, yellowColor, magentaColor, orangeColor, purpleColor and brownColor.
Let me know how it goes.
Edit: Fixed small but code-breaking bug, and put the exitScreen option into the runScreen code.