Bug- Make the text larger makes headers/images massive

Game Development
1

Hi there, I’ve found a bug in the CS system I think. I don’t think there is a fix? Even pressing the “make the text larger” button once, causes headers to become massive and pixilated. (Make the text smaller does not do this.)

I’ve got a few games with headers that I realise will be affected (including HG submissions.) A lot of other habits also use images and title images which I’m guessing will also potentially be affected. Any way to prevent it? (I’m guessing not.) Example below:

Correct size:

Screenshot_20241105-134937
Screenshot_20241105-1349372400×1080 324 KB

1x increased text size

Screenshot_20241105-134957
Screenshot_20241105-1349571920×864 70.5 KB

3 Likes
2

I think this is less a bug and just down to the very simplistic css styling in use. If CS lets you alter that before uploading or publishing you could probably resolve it yourself if CoG don’t want to change anything.

2 Likes
3

Increase the initial size. The app automatically resize the image to fit, so when you make it too small, it has nothing to work with.

2 Likes
4

This will actually be an issue for any project with picture headings (like “Chapter 1” in fancy png styling) in HG and COG (not just my hobby projects) I would have thought? I’ll have to take a look.

It’s not a gamebreaking deal, but does look terrible. My coding skills arent amazing, I’d have to see if I could work out how to hack it or not on my hobby projects at least.

Yes and no up to a point. The initial image is fine. If I increase the size it is too big on the default setting. But increase the text size by about 2 points (2x make text larger) and it blows the image up to about 20+ x it’s original size so it’s way out of proportion even if it can’t tell the difference between images and text in the size increase command.

The other way though that could bypass this (maybe) would be to make all the images much wider than that need to be if not a full “box” shaped image but transparent in the unused space, as the bigger title picture didn’t seem to be as badly affected.

2 Likes
5

I see no difference with images that are already scaled down because they’re wider than the available area, so, yeah, making them wider sounds like a way to go.

That sounds weird though. You should be able to change text size without changing everything’s size. Or alternatively, call it zooming instead of text size change.

1 Like
6

Yes, it will (and does - I tested on some dashingdon wips) affect all choicescript games.

You can poke around in your browsers devtools (F12 for chrome/chromium based browsers and firefox by default) and live edit the CSS to see what affects what. Brave shows me very little in the way of CSS styling when I use it to change to a font I find easier to read (IBM Plex Serif Text for those interested).

That said, while I’m not an expert on web development, I do have some skill in that area and still consider CSS to be some kind of voodoo black magic so I wish you luck in your tinkering and hope that CoG come up with a more universal solution for folks.

Edit: Digging some more in Brave’s dev tools I would suggest setting your image to look good at 680px wide - that appears to be the max width of the central column where the games text and images are seen.

1 Like
7

Good to know. Thanks!

1 Like
8

I was just going post about this problem but found there was already a topic about it.

Won’t this bug get fixed? ;_; If you make the text smaller than default, pictures become giantic. If you make the text bigger than default, pictures become gigantic. That behaviour can be seen for example in Ghost Simulator character’s portraits at stats screen.

2 Likes
9

I just checked a game I have up in cogdemos with pictures and headers. Increasing text size unfortunately still also increases the size of the pictures. I don’t think there’s anything that can be easily done about it as the setup is probably fairly simplistic and just magnifies everything in the game. But, it doesn’t seem to be doing what it was to me way back which was for every increase in text size, blowing up the images to be absolutely massive.

In saying that, as a habit now since that happened, I now make headers so that they have blank space to the edges of the page even if the image is in the center to help reduce any scaling weirdness because the game thinks the image is larger than it is so this may be the factor that has been fixed rather than the game itself if it’s still playing up on others?

Edit: Sorry saw you said smaller. On my game at least it is shrinking pictures not making them larger.

1 Like
10

This is one of my games that is playing up with this bug for example: The Depths of Madness by Jacic
Making the text larger or smaller messes the images up badly. I’m uncertain if the program has been updated since last year (If there was a bug update I missed it), otherwise it may have to do with the images not being as wide as the page which is unfixable without reformatting all the images with transparent larger backgrounds to see if that fixes things.

2 Likes
11

I’m on a hike but I remember this!
The printImage function replaces the image width with [the text size as a percentage].

You can see this when you make the text smaller, image widths become 90% of the available screen width, then 80% at a size smaller

But it doesnt do this for the default text size because “textSize” (or whatever it is called) isn’t assigned

2 Likes
12

Yes exactly, either bigger or smaller text, it messes up images just like in the Ghost Simulator portraits, but never on the default text XD

I have small pictures of 50x50 that act as icons, and they get messed up becoming GIANT destroying the stats screen x_x

In saying that, as a habit now since that happened, I now make headers so that they have blank space to the edges of the page even if the image is in the center to help reduce any scaling weirdness because the game thinks the image is larger than it is so this may be the factor that has been fixed rather than the game itself if it’s still playing up on others?

@Jacic could you elaborate? Which dimensions did you find out don’t get messed up too much? I’m afraid I’ll have to use BIGGER icons but that will probably not fit so well as it did in my demo x_x

13

The best width is 640 pixels :+1:

2 Likes
14

Thank you, I’ll try that. It’s a big ouch because I had the icons aligned to the left of a stat bar, it fitted nicely, but probably with 640 witdh won’t @_@

15

Oh wait are the images aligned left? That splits the text into 2 columns, so the max width an image can be is 50℅

If you use 320 instead of 640 it should look right for that?

But if you reaaaalllyy want it to be a certain size, you can do something in style.css - not sure if you can publish if you edit that file though?

2 Likes
16

Oh, that’s what it’s doing! Makes complete sense now.

Nope, you can’t play in the style file for published HG games. (If you’re not though, then play around in it however you like :slight_smile: )

Yep that sounds about right (my headers in the game that isn’t playing up are about 700px wide), but I have my images centrally aligned. I agree, try it at half that for a left align and see what it looks like as hopefully that’ll work. Worst case you could try extending the “canvas size” with transparent blank space to the right so your text isn’t larger but the size of the image is without moving the left side of the image.

1 Like