Title screen graphics

A topic by Garry Francis created Feb 16, 2020 Views: 169 Replies: 12

Viewing posts 1 to 3

I'm looking for advice on title screen graphics. As the title screen is embedded in the project using base64 encoding, it can bloat the file size, so I'm trying to make it as efficient as possible.

I've designed the title screen for 320 x 240 pixels, i.e. 4:3 aspect ration. The file is saved as an 8-bit PNG, adaptive colour palette, no transparency. The file size before importing into Adventuron classroom is 26kb. The image looks great when viewed at 320 x 240, but when viewed in Adventuron, it gets scaled up and it looks like crap. Everything is pixelated and anti-aliasing becomes glaringly obvious. If I create it at a larger size, the file size becomes unacceptably large.

Any recommendations on the ideal image size for the title screen or how to get around the scaling issue? Or am I being too pedantic?

AdventuronHost5 years ago (1 edit)

You can get around the size limitation by using externally referenced graphics. You use something like

title : jpeg "my.jpg";

This will not render in the editor, but when you compile the game, the jpg file should be in the same folder as the compiled html.

Itch will allow you to upload a zip file for HTML game project that contains the html and the zip file and any subfolders you require. Just select the two files (assuming windows), right click, and "add to zip folder". You can also reference an external URL in the jpeg section in the graphics section, but not recommended as you'd have to host your own graphics.

Chris

AdventuronHost5 years ago

Oh, as far as the scaling issue goes, then show me the a screenshot of the issue please and measure the horizontal pixels of the rendered pixels if you can. It may get scaled in the upload to itch.

Garry FrancisSubmitted5 years ago

I didn't want to go mucking about with external files. I haven't uploaded to itch.io yet. I'll just live with the chunky-looking graphics and hope that users don't complain.

AdventuronHost5 years ago

Try content_width = <horz pixels in your image> and snap mode=full_snap. As long as your windows (OS level) scaling is not anything different to 100%, then it should scale the title image perfectly.

Garry FrancisSubmitted5 years ago

Tried that. No difference. Snap doesn't snap. Never has. Title screen image still scales up and down when you move the separator between the editing panel and the playing panel or when playing in windowed mode and you resize the window.

I'll just leave it at the default.

DethmunkSubmitted5 years ago (4 edits)

Given these are online cloud saved game files does the memory size really matter? I've used a 430 x 320 x 256 colour PNG which rocks up at about 31k extra. I guess if you're going for minimal through and through with your game that's fair enough. You could try less colour range which will help bring down the size further. 2 colour or 4 colour (like a BBC Micro) or 8 colour (Spectrum et al). Reducing the overall resolution size could help too, so it might just be Half the screen rather than the whole screen area and that will bring it down even further.
As for the visual quality, I did try it without the scanlines, but preferred the scanlines in the end. It looks retro and sometimes hides the scaling artifacts.

Garry FrancisSubmitted5 years ago

When compiled, all resources, including game data, game engine, fonts and graphics, are save in an HTML file. This needs to be downloaded to play. Obviously, the smaller the file, the quicker the download. I'm testing and fine tuning now. I might revisit the graphics later, but I do like my title screen, as it reflects the story and "flavour" of the game very well.

DethmunkSubmitted5 years ago (2 edits)

That's fair comment. Given the size of these games I doubt we're looking at huge Gigabytes of file here though (are we?). I wouldn't worry about it too much. Unless you've just created a monster of an adventure, in which case that sounds very interesting. ;-) For instance my adventure which is almost done weights in at a merge 1.78mb (its got a fair number of locations, masses of scenery objects and items and text and a new font and loading screen), which would take all of 5 seconds to download if that. ;-)

edit: Having said that I realise people have differing download rates, I have a whopping 196 mb/s download, while others have just 2 mb/s but even then this should take only seconds to download.

AdventuronHost5 years ago

Even though adventuron is technically 1.5mb, Html in modern browsers is now served gzipped, which means the engine compressed is about 370k. In addition, return visits are cached so no download, and JavaScript is only compiled the first visit them the compiled version is reloaded from the cache too. Should be quick even on slow mobile connections.

DethmunkSubmitted5 years ago

Very cool. Either way we shouldn't worry too much about memory size. Unless its some super descriptive adventure with a large number of locations and tons of high resolution graphics. ;)

Garry FrancisSubmitted5 years ago

And the editor seems to get really slow when you have lots of assets. Or is that just my imagination?

AdventuronHost5 years ago

The editor gets slower with more assets, but you really need a lot to make it properly slow these days ( I sped it up by a factor of 20x recently). I can optimize it a lot more, but like I said in the jam notes, I'm aiming not to add a lot of features at this point in time. You really don't need a lot of assets in a text only jam.

itch.io

Treasure Hunt Jam (Text Only)

Title screen graphics