8Dromeda Blog

[All Posts] [<< >>] [2013-07-23]

Soilnar July Update Part 1: Scaling

Since the April update... ehm.

Yeah I know! It's been too long without posting!

*pulls up git log*

Seriously. There are multiple screenfuls of commits.

Continuing from April 1st, 2013

After the previous update I tweaked and fixed some UI and drawing stuff, tuned movement and added mud which is slow to drive on. Then I left Soilnar for a month, and then came back and optimized some network stuff.

A Solution to Scaling HTML

My laptop's 1600x1200 LCD broke and I had to fall back to it's original 1024x768 panel. This made me realize the current 3x pixel size wasn't suitable for all displays that I want to support.

Soilnar's game and UI graphics basically consists of: 1) images that are pre-scaled to desired sizes, 2) UI CSS rules and 3) the UI font.

Pre-scaling images to multiple sizes was trivial. However, CSS wasn't. CSS is designed for automatically scaling layouts without any kind of "steps". That simply wasn't an option here, because everything needs to match the pixel-perfectly scaled images at 1x, 2x and 3x.

I needed something that would make it easy to toggle the page layout and fonts between different multiples of certain size, by javascript, whenever a resize event was caught. I considered these alternatives:

• Directly setting element styles using JS: This would lead to terrible code, and terrible mix of logic and presentation. (actually some of this is already done because of how canvases work, and how vertical positioning works. It's disgusting.)
• Switching stylesheets using JS: Much better. But I would need to maintain separate stylesheets for each scaling step. Not good
• Preprocessing stylesheets on server-side: The client-side would look similar to the previous alternative, but there wouldn't be a need to maintain multiple stylesheets by hand.
• Preprocessing stylesheets using JS: So then I figured there probably already are many solutions to this that can also do additional useful things. It turns out some of them can do it directly in the browser. Normally I would probably be against such, but as this is a game that won't work anyway without heavy scripting support, it's quite acceptable.

I went with LESS, ran on the client side. It clearly requires the least developer effort and provides additional useful things like "mixins" (CSS rules referring to others, with parameters). There is a runtime-callable update function that takes in parameters, allowing arbitrary switching of scaling when the window is resized.

This required no server-side code whatsoever, which is awesome.

Thus, Soilnar now works reasonably well on window sizes in the range of 600x400 to 1920x1200, selecting a suitably scaled versions of UI and game graphics as the window size changes.

I Hate Fonts Now

Fonts in soilnar need to readably fit of a lot of stuff on the screen.

With the original 3x image scaling, Soilnar uses the font Lionel Micro NBP. This is a 5x8px font, which makes it 10x16px when scaled by a factor of 2. It suits with the aesthetic, is very readable and the size is just right.

But now Soilnar works with 2x image scaling too. If the same font size is used, it matches the image scaling, but is way too large to fit the required information on the screen. I ended up with four alternatives:

• Use the same font and use it at 4/3=1.333 scaling. This results in quite a blurry font. It still kind of looks like a pixel font, but is much harder to read.
• Use the same font at 1x scaling. This results in a considerably smaller font compared to UI elements, making it look odd and hard to read.
• Use a Nx6 pixel font scaled by 2. These kinds of fonts are hard to find and almost unreadable, and based on my experience, the odder the font, the more fucked up it's alignment and everything is.
• Use a different font. This allows maximizing readability, but the font won't be so pixellated.

I tried each of these, and because of readability, I chose to use a different font. The chosen font is NBP Informa FiveSix, which, being a bitmap font, is better than nothing, but doesn't have terribly much of "pixel" feel to it due to it's high resolution.

At 1x image scaling, the choice is trivial: We'll just use the font used at 3x, but scaled by 1 instead of 2. It's too large, but nothing else would be readable at all.

To be continued...

As I'm trying to learn to make more reasonably sized posts, I'll leave other things for next posts.

Looking at this git log, it seems there's at least this thing called "minor change events", the bitaeli fuel implementation, maybe some supply/demand considerations, maybe something about logging(?), pushable rocks, and last but most huge: the new ore system and how it relates to world generation. Oh and smooth drilling movement. And maybe some insight to the issues in the performance tuning of this thing.

I'm teasing you by having shut down the pre-alpha server for the moment. 8) I'm planning to start it with a fresh world after this series of blog posts.

...Or actually I might delay it further than that, as it's still lacking some key things that I at least personally would like to play with.

- A of 8Dromeda

Soilnar July Update Part 1: Scaling: http://t.co/a9EujgTLeU

— 8Dromeda Games (@8dromeda) July 23, 2013