Post by Adventuron in Comments on "Deck the Halls, Gieves"

Adventuron Christmas Jam (Illustrated Text Adventure Jam) » Community

Viewing post in Comments on "Deck the Halls, Gieves"

Hi,

I had a brief look at there are a couple of things that I noticed. First is that the font looks like of non-crisp. I think it's because you are using a bitmap font that requires integer scaling. A quick hack with the CSS revealed that the font requires fonts sizes in multiples of 16 pixels. To configure this in your game, go to the assets / fonts section of your source code, and inside your font section, make sure the following parameters are set ....

  userfont_something: base_ttf "......." vert_pixels = "16"  horz_pixels = "8"  snap_vert = "true";

This will force your font to display only in cleanly scalable increments.

The other issue is that your game doesn't have the correct settings set on itch.

Please pay attention to 9E, 9F, and 9G, in the following guide:

Adventuron - Uploading To itch.io

Oh, one more thing, you can make the directions clickable in your main text like this:

<north<3>>[n]

Really love seeing this look and feel, and really really love the Wodehouse vernacular. No way in the world I would switch that off - but it's really going above and beyond to have parameterised it. It's rather spiffing in fact.

Chris

Verdant Tome3 years ago

Thanks for the tips, old chap!

I had set those values in the font definition, but I had incorrectly assumed that the 8x14 font would be 8x14 pixels. The site that I downloaded it from did mention something about scaling, so this is probably related. However, setting the definition to 8x16 has made the text teeny-tiny, and very difficult to read on my laptop's 1366x768 screen. Is there some way to force Adventuron to be a bit more liberal with the scaling? I found that if I use the browser's zoom functionality to zoom out one step to 90%, Adventuron will automatically make the font a much more readable size. And if I zoom in to 200% it looks great, but between 100% and 150% or so, the text is too small to read comfortably. Playing with the zoom makes me think that Adventuron has a pretty robust scaling system that unfortunately just happens to break down only at resolutions around my laptop's screen resolution.

I tried adjusting "font_scale_multiplier", but nothing seemed to happen. I also fudged the font size to 16x32, which made the text blow up massively in the editor (to what looked more like 3x or 4x rather than 2x) for some reason, but worked in a compiled version. However, I'm assuming that this would interfere with Adventuron's scaling system, so I'm loathe to do it. I also tried adjusting the "columns" property in the theme; at 40 columns the text was a good size and very sharp, but the display was limited to the middle 2/5 of the screen. Other column settings that I tried all looked similar to the 80 columns that I started with.

By the way, when adjusting the zoom level in Firefox 83.0, the font still showed non-integer scaling at many levels, with either blurring or distortion visible on the letters. From working on another game in JavaScript/HTML5, I know what a pain it can be to get browsers to scale pixel art in integers. Even when you give them the perfect resources and instructions, they seem determined suddenly to change their behaviour to something else only in those "perfect" cases! In the end, I gave up for my HTML5 game and just resigned myself to having slightly blurry pixels. My target resolution is so low by modern standards that most people will hardly notice anyway.

Checking the itch.io settings on my beta, it looks like I missed 9E. Oops!

And thanks for pointing out how to make clickable directions. One of my beta testers also found that instances of defined nouns are automatically made clickable in the text, which I didn't know about.

Adventuron3 years ago

In addition to the font level settings provided earlier, here are my recommended scaling options, which should be good at all screen sizes, and result in a crisp font:

themes {

   theme {
      theme_settings {
         font    = ????
         columns = 72
      }
      screen {
         widescreen_horz_ratio = 1
         snap_mode             = column
      }
   }
}