How to make quick and easy chapter headers


#22

As I said, today I’ll be answering the question, “What if we add color to our image?” And the short answer is, well, it depends on the image and what effect you’re going for. Okay, so it’s impossible to offer a catch all, but here we’ll cover a range of options, along with some tricks to getting the best looking chapter headers when you add color.

First, of course, is the very simple, “just go with it”. If a chapter header has color, but still looks perfectly fine with the colors are inverted, you can always just leave it. For this choice, I’m just going to borrow the headers from Werewolves: Haven Rising for an example. We can see that, when inverted, we aren’t using the very werewolfy browns, but the blue with the yellow on the bottom looks very much like an implicit skyline in the country or something similar. It may not carry the same connotations, but it doesn’t detract from the game.

Next, we have another simple option, which is to make sure to use colors which work well on both the light and dark backgrounds. In this example, we’re making a vampire game and we want a few drops of blood on the chapter header. After making those, we realize we can’t invert the colors, so we pick a silvery grey for the text, since that should be readable on both the standard and black backgrounds. Then, rather than using *text_image, we just use *image so that it doesn’t invert on the black background.

Third, if we have a chapter header where the text is unreadable on one of the backgrounds because it blends in, we can add a border to the text so that the text is always over an appropriately visible color. For this example, we’re making a cutesy game with a pastel rainbow chapter header, that doesn’t show up on the standard background.

Now, the first thing we do is select the area we want to make the border. To do that with text, we right click on the text, and select Path from Text, then we go to the menu bar and click on Select > From Path. This will mean we have the text itself selected. Next, to get select the right space for the border, we click on Select > Grow… to open the grow menu. Here I’m using a border of 3px, which will be on the thinner side for smaller devices, but should still be enough. See below for an example.

Now that we have the border area selected, we want to actually make the boarder. But before we can do that, we need to make a new layer so that the border can be moved. Here I’m doing so by right clicking on the layer list, then selecting New Layer…, and as with creating the header, it’s important to remember to make sure the Layer Fill Type is set to transparency. After we have the new layer selected, we can use the Bucket Fill Tool, and pour the border black. You may notice that covered the text. Well, we made sure to create the new layer just for this. We just need to move the border layer under the text layer in the layer list, and then you should have your header.

And there we have it. We just use *image (as above), and on the black background, the border is hardly noticeable, while on the standard background, you can see it makes the pastels pop.

And just for example, this is a header with a dark text that we put a white border on. Now, lets cover a couple of things that I didn’t mention above. First, to color the text like these two headers I used essentially the same method as the borders to create the colored text. Just select the text as you did before, without selecting Grow, then use the Blend Tool on a new layer to make a gradient version of the text. Second, in the below chapter header, you may notice there is a feathering effect on the border. To accomplish this, rather than select Grow, we just select Border instead, up the selection by a few pixels, then select Feather border. You can play around with various options to get some very complex looking text.

56 44

Now, for our final method of handling colored headers, we found we’ve made something which just can’t be inverted, and can’t be made to be legible on both a light and dark background. For this example, we have a game set on Mars, and so we have a prominent red planet which needs to stay red, and our text is split by a thin line, which we can’t add a border to (at least without ruining the aesthetic). Well for this, we just make two different headers, one for a light background, and the second for a dark background.

Now that we have those, we use one of the special choicescript variables: choice_nightmode. We make sure to put both headers in, and just use this:

*if choice_nightmode
  *image chapter1_nightmode.png center Chapter One: Landing
*if not(choice_nightmode)
  *image chapter1_daymode.png center Chapter One: Landing

And we display the appropriate header for each background.


#23

Eyyy… I never know about that :frowning_face:


Anyway, just curious.
What is the hexcolor code for the dark mode in ChoiceScript? I noticed that the black isn’t true #000000 black (thanks to turning off the screen).


#24

It’s actually not documented anywhere. (I know, I know, I’m going to.) In fact, when Dan first implemented nightmode it wasn’t there either. It was only after noticing that some headers used color and didn’t look right inverted that it was implemented. As for it not being documented, it’s one of those things that I’ve added to games myself in games where necessary (which has only been like once or twice).

(Technically I should have argued more that it should be locked as a 1 to 1 replacement because right now you can actually change the game based on whether or not it’s nightmode, but I’m also the kind of person that would abuse that for effect, so, :woman_shrugging:)

As for the colors, #F7F4F1 is the sepia background and #242424 is the black, but I actually recommend using #000000 and #FFFFFF for borders because they blend in very well, and that slight difference does help make things pop a little more.


#25

@RETowers Do you know of any reason why *text_image might not invert colors when switching to nightmode? I made black-colored headers and inserted them in the game using *text_image, but for some reason they don’t change when the background is changed to black! :thinking:


#26

That’s really weird. I put black text headers into Oedipus very recently and they change to white in night mode (and back again) ok. Have you tested it on Dashingdon’s? Maybe there’s an issue with your CS package if testing it on your computer locally?


#27

Maybe you forgot to save or upload the file?


#28

@Jacic I tried uploading it on Dashingdon and it worked on there!! :astonished: I guess it is an issue with either my version of CS or CS-IDE! Thanks for the suggestion!


#29

Have you tried running it in a browser, locally? If it works there, then something must have happened to CSS filters in CSIDE.


#30

Not as far as I’m aware. Either you should be using a version which includes *text_image, or, if you’re not, the game should crash on the image with an invalid command. I can’t think of any reason it wouldn’t invert properly.


#31

Hmm, well, it doesn’t crash, and it displays the image in sepia/white just fine, just not black—I think it’s something to do with CS-IDE then! Maybe @CJW might have a theory? :slight_smile:


#32

Hi rinari, yes sorry, this was a bug in CSIDE. It has been fixed here, it’s just waiting on the next release/update to ship. Sorry for the inconvinience :disappointed_relieved:


#33

Oh not at all! It’s not an inconvenience haha, I just thought I was doing something wrong! Glad to hear it’s a known thing, thanks for answering! :grinning:


#34

I just found this. Thanks for the help, I’ll be able to come up with something nice for my story soon!


#35

I tried to use Gimp but it wouldn’t let me change the font. I’d change it and it would just immediately change it back to Sans as soon as I clicked away.


#36

Highlight the texts first, and then change the font.


#37

Wow, I’m starting to wish I found this sooner! I’ll have to play around with it sometime soon. Thanks for the guide!