• Hey Guest! Ever feel like entering a Game Jam, but the time limit is always too much pressure? We get it... You lead a hectic life and dedicating 3 whole days to make a game just doesn't work for you! So, why not enter the GMC SLOW JAM? Take your time! Kick back and make your game over 4 months! Interested? Then just click here!

Multiple colors in one text string?

B

BandiPat

Guest
So what I'm trying to do here is to change the color of text at a certain point, specifically for a "tutorial" section. I planned it to look something like this:

PRESS AND HOLD B TO FIRE

What I tried to do, I highly doubted would work as I knew it didn't work that way:
Code:
draw_text(room_width/2,128,"PRESS AND HOLD"+draw_set_color(c_red)+"B"+draw_set_color(c_black)+"TO FIRE");
Quite obviously I feel dumb for even thinking that might have worked.
It didn't work.
Is it possible for this to be pulled off, and how do you go about doing it?
 
P

Paolo Mazzon

Guest
This is a common problem, and the simple answer is you can't have multiple colours in one text string. That said, you can make your own draw_text function that parses bb code, I did something like that for one of my marketplace assets. There is also some free ones that do that on the marketplace like this (That one actually does some as well.) if you want to check them out.

EDIT: Probably doesn't matter to what you're doing, but using bb parsing is very heavy. So if you plan on drawing paragraphs at a time, put them on a surface or you will get a big frame drop.
 
Last edited by a moderator:
A

Ahsan Anik

Guest
So what I'm trying to do here is to change the color of text at a certain point, specifically for a "tutorial" section. I planned it to look something like this:

PRESS AND HOLD B TO FIRE

What I tried to do, I highly doubted would work as I knew it didn't work that way:
Code:
draw_text(room_width/2,128,"PRESS AND HOLD"+draw_set_color(c_red)+"B"+draw_set_color(c_black)+"TO FIRE");
Quite obviously I feel dumb for even thinking that might have worked.
It didn't work.
Is it possible for this to be pulled off, and how do you go about doing it?



draw_text(room_width/2,128,"PRESS AND HOLD ");
draw_set_color(c_red);
draw_text(room_width/2,128,"B ");
draw_set_color(c_black);
draw_text(room_width/2,128," TO FIRE");

I did not change the width or length so you need to adjust it according to your room and then u need to add x position with the width to make them one string. As example: draw_text(room_x+room_width/2, room_y, string); or draw_text(room_x+5+room_width/2, room_y+25, string);

I am a highly beginner. I am still watching the tutorial of the website and making according to it. I just tried to change the font of default score in the tutorial and I was able to change the color and font of the string "SCORE" and the dynamic score in the same string with different style. Before I did that, I saw this thread and after I was successful, I am just trying to help you with the trick. Please let me know if it works and I am sorry if it does not, for wasting your time. Have a good day! :)



Capture2.PNG Capture1.PNG Capture2.PNG
 
W

Wraithious

Guest
one way I know works good is to use string_width(String), this code example:
Code:
//Line 1
draw_set_color(color1);
draw_text(20,0,"Press ");
draw_set_color(c_lime);
draw_text(20+string_width("Press "),0,"SPACE ");
draw_set_color(color1);
draw_text(20+string_width("Press SPACE "),0,"to throw automatic homing missle.");
//line 2
draw_text(20,15,"Player 1- Press ");
draw_set_color(c_blue);
draw_text(20+string_width("Player 1- Press "),15,"ENTER ");
draw_set_color(color1);
draw_text(20+string_width("Player 1- Press ENTER "),15,"to shoot, ");
draw_set_color(c_purple);
draw_text(20+string_width("Player 1- Press ENTER to shoot, "),15,"ARROWS ");
draw_set_color(color1);
draw_text(20+string_width("Player 1- Press ENTER to shoot, ARROWS "),15,"to move.");
//line 3
draw_text(20,30,"Player 2- Press ");
draw_set_color(c_olive);
draw_text(20+string_width("Player 2- Press "),30,"SHIFT ");
draw_set_color(color1);
draw_text(20+string_width("Player 2- Press SHIFT "),30,"to shoot, ");
draw_set_color(c_aqua);
draw_text(20+string_width("Player 2- Press SHIFT to shoot, "),30,"W,");
draw_set_color(c_red);
draw_text(20+string_width("Player 2- Press SHIFT to shoot, W,"),30,"A,");
draw_set_color(c_black);
draw_text(20+string_width("Player 2- Press SHIFT to shoot, W,A,"),30,"S,");
draw_set_color(c_fuchsia);
draw_text(20+string_width("Player 2- Press SHIFT to shoot, W,A,S,"),30,"D ");
draw_set_color(color1);
draw_text(20+string_width("Player 2- Press SHIFT to shoot, W,A,S,D "),30,"to move.");
gives these results:
infoDisplay1.png
 
U

Ulcius

Guest
Just found this amazing dialogue system for GMS and felt like sharing it.
I needed certain words be a different colour while still i wanted to maintain the letter by letter typing
And this system offers that and even more. Simply amazing. Once you sort out how it works it will be extremely easy to import it into your project however you need
https://friendlycosmonaut.itch.io/dialoguesystem
 

Phabbits

Member
I also had the same issue as the OP, so I wanted to share the script I made to do it.

Using the function made by YellowAfterLife to split a string on a delimiter, I created a script with only a string as the input:

GML:
scr_draw_hint("This is your *active crime* for#standing next to an empty#artifact stand")
For output like:
1649019530046.png

GML:
/// @function scr_draw_hint(hint)
/// @description Draws text using red for emphasis
/// @param hint | Text to draw with words in red delimeted by ** and newlines by #
function scr_draw_hint(hint) {
    // Setup drawing
    draw_set_font(fnt_menu)
    draw_set_halign(fa_left)
    draw_set_valign(fa_top)
    draw_set_color(c_white)

    var vx = camera_get_view_x(view_camera[0])
    var vy = camera_get_view_y(view_camera[0])
    var vw = camera_get_view_width(view_camera[0])
    
    // Split by (#) for new lines
    var hint_lines = scr_string_split(hint, "#")
    var lines = array_length(hint_lines)
    
    // Draw string line by line
    var dy = vy
    for (var i=0; i<lines; i++) {
        var _width = string_width(hint_lines[i])
        var _height = string_height(hint_lines[i])
        var dx = vx + vw/2 - _width/2
        // Draw background box
        draw_set_color(c_black)
        draw_rectangle(dx, dy, dx + _width, dy + _height, false)
        
        // Now split based on emphasis (*)
        var hint_emphasis = scr_string_split(hint_lines[i], "*")
        var emphasis_changes = array_length(hint_emphasis)
        
        // Draw every other section of line with emphasis
        var emphasis = false
        for (var j=0; j<emphasis_changes; j++) {
            if emphasis {
                draw_set_color(c_red)
            }
            else {
                draw_set_color(c_white)
            }
            draw_text(dx, dy, hint_emphasis[j])
            
            dx += string_width(hint_emphasis[j])
            emphasis = not emphasis
        }
        dy += _height
    }
}
GML:
/// @function scr_string_split(str, delimiter)
/// @description From YellowAfterLife - https://yal.cc/gamemaker-split-string/
function scr_string_split(str, delimiter) {
    var s = str, d = delimiter;
    var rl = ds_list_create();
    var p = string_pos(d, s), o = 1;
    var dl = string_length(d);
    ds_list_clear(rl);
    if (dl) while (p) {
        ds_list_add(rl, string_copy(s, o, p - o));
        o = p + dl;
        p = string_pos_ext(d, s, o);
    }
    ds_list_add(rl, string_delete(s, 1, o - 1));
    // create an array and store results:
    var rn = ds_list_size(rl);
    var rw = array_create(rn);
    for (p = 0; p < rn; p++) rw[p] = rl[|p];
    ds_list_destroy(rl)
    return rw;
}
 
Top