Design How do you create crisp, high definition graphics and fonts in GMS?

otterZ

Member
So, I was playing @RefresherTowel 's game, Spaceslingers yesterday, and I noticed that the graphics and type/fonts in this game were very crisp and clear. My UI, type and graphics look retro in comparison, pixel-is in comparison with at times blurry text where I've increased size of the font using draw_text_transformed, after increasing the yscale and xscale values to 1.5 for example.

RefresherTowel gave me some sound guidance, which I very much appreciate, as in using vector graphics and the way he outputs his graphic images to PNG files. This has gotten me on the right path.

My question is . . . how do you personally get crisp images, text and graphics in your games (not the pixel type retro look - strikingly clear instead)?

*Do you use an outside graphics editor instead of the sprite editor?
*Do you use the new 9 slice feature?
*Do you just import crisp images then scale down the size of them via code?
*Do you just import super big size fonts and scale those down?
*Does room size have any bearing on making graphics look sharper or doesn't it matter? As in if I made a big room 4K size with 4K size graphics and it just scaled down to smaller sizes nice and clearly . . . would that work?
*Do surfaces come into this?
*What am I missing here?

My room sizes are 1280 by 720 and I am using the sprite editor to make buttons and UI parts etc. It is okay but is very pixel art-like. I like pixel art, but I would like to also be more skilled in making crisp and stunning graphics and text that show up nicely on 4K or 5K computer screens for example for different styles of games/projects.

I would be interested in how you personally go about making crisp graphics before I start experimenting with test projects.

Thank you for taking the time to read my question :)
 

TsukaYuriko

☄️
Forum Staff
Moderator
My first consideration regarding anything visual is "will there be zoom or scaling?" because, those (and visual effects) aside, everything will look exactly as it looks in the editor. I don't just mean zooming as a game feature, such as zooming the camera in during action-heavy scenes or something. I also mean stuff that's outside of your control.

For example, if your room size is 720p and you're playing in full screen on a 3840p (4K) monitor, then of course the answer is yes, there will be scaling. If you want to eliminate this scaling, your game's native resolution would have to match the target monitor's resolution of 3840p. For something to appear perfectly clear, the native resolution has to be identical to the target resolution, as that means no scaling will be applied. This is not always possible, though, especially with 2D games where you can't just dynamically adjust the internal render resolution and have everything magically adapt.

Be careful not to make your game look great on 4K monitors but like a squashed mess on 1080p monitors, though. This happens when you design your game assets around 4K and forget to check how they will downscale.
 

Rayek

Member
I would advice against preparing all your 2d game assets at 4K resolution. Currently, on Steam 68% of gamers play on 1920x1080 screens, and ~8% on 2560x1440 screens. Leaving out the double-width widescreen gamers, only 2.5% of all gamers play on a 4K screen.

The remainder (~12%) of gamers plays on lower resolution screens than 1920x1080.

Also keep in mind that more than 40% of steam GPUs have 4gb or less of VRAM. Creating a 4K game requires around 23MB VRAM per 3840p image. With more complex graphics heavy levels at that resolution your game will be running out of video memory fast. Not to mention that such large textures require to be cut up into smaller pieces for lower level GPUs to handle them in the first place. And performance will degrade. It is possible to compress images in VRAM, but I Gamemaker does not support (as far as I am aware? Perhaps it is done in the background?).

And what about all those people with integrated video?

Anyway, keep it at 1920x1080 resolution. That is bog-standard for high-res 2d games, and @RefresherTowel also targets that resolution for game asset design.

Another consideration: you will probably will have to ad extra levels of detail to your graphics to do a 4K screen justice. Which means much more work for the artist potentially.

*Do you use an outside graphics editor instead of the sprite editor?

Yes, always. In my case a combination of PhotoLine, Krita, InkScape, some Affinity, and ProMotion NG for pixel art. Also Blender for rendered stuff. OpenToonz for more elaborate 2d animation work. I NEVER use the built-in GM sprite editor. It is much too limited for my work.

*Do you just import crisp images then scale down the size of them via code?
When preparing assets for 1920x1080 highres 2d game assets, I generally work at that precise required 1 on 1 pixel resolution.
If assets must be scaled up and down it depends on the circumstances.

*Do you just import super big size fonts and scale those down?
No, I prefer to use the game engine's native font rendering, if I can help it. Unless the game requires a special graphical font, then I use high-res bitmaps. Or a low-res bitmap font for pixel art style games.

*Does room size have any bearing on making graphics look sharper or doesn't it matter? As in if I made a big room 4K size with 4K size graphics and it just scaled down to smaller sizes nice and clearly . . . would that work?
Avoid, avoid, avoid. See technical considerations above.

Just design at 1920x1080. A waste of time and resources to do otherwise. As @TsukaYuriko notes, any scaling will almost always degrade the sharpness somewhat. Scaling at exact numbers (25%, 50%, 100%, 200%, 300%, 400%) reduces this quality loss generally. But scaling up a 1920x1080 game to 3840x2160 will just double the pixel sizes and sharpness will be reduced.

That said, it also depends on the upscale algorithm, the quality of the screen, the distance a player sits from the screen, their eyesight, brightness levels, and whether the graphics are sharpened with a shader fillter before upscaling.

*What am I missing here?
Experience? :)

It really is quite simple, in effect, when working on a 2d high resolution game:
  • pick as your game's base resolution 1080p. 1920x1080
  • create your assets with this resolution in mind.
  • don't use the built-in sprite editor in GM. Install good illustration and image editing software.
  • decide on a 2d high resolution art style. For example Hollow Knight uses a relatively simple stylized comic style. Games like Skull Girlz rely on an 2d animation Westernized Japanese Manga style. Both are hand-drawn and animated. For such styles a good image editor with animation support is required. Krita, Photoshop,...

    Cuphead was (I believe) animated on paper and scanned in for clean-up and coloured. This could be done OpenToonz easily - just bring your talent!

    Other high res 2d games utilize vector illustation-made graphics. Inkscape, Illustrator, Affinity Designer... Then export to the required base resolution for your 1920x1080 game.

  • A tiled approach still works well even for high res 2d games. It just means larger tiles, or smaller tiles with graphics cut into smaller pieces - or both! Tiled (free tile editor) comes with a good example installed which demonstrates the use of higher resolution assets in a tiled game level.
 
Last edited:
*Do you use an outside graphics editor instead of the sprite editor?
Yes, but you already know this.

*Do you use the new 9 slice feature?
It wasn't available when I was working on Spaceslingers, but I probably wouldn't have used it anyway (I already had a custom 9 slice script that I had written previously and I didn't use it). The reason for this is two part:
1) I had some elements in most boxes that wouldn't work well either scaled or repeated without having to set annoying hard-coded limits into the 9 slice.
2) Since Spaceslingers is not a super huge game, I didn't need to be very worried about file sizes or memory use, so I could simply create each dialogue/UI asset at the size I wanted it and fuggedaboutit.

*Do you just import crisp images then scale down the size of them via code?
I didn't individual scale down assets ever, I simply draw them onto the GUI layer and the GUI layer itself would be resized for different screen sizes (or just drawn in the normal Draw layer, for non-GUI related elements).

*Do you just import super big size fonts and scale those down?
No, I did two separate things with text. Any text that needed some "effect" (let's say a glow or something like that) was just prebuilt into the image, so as I was drawing the dialogue boxes in Inkscape, I was adding the text there and importing it all as one image. Whenever I had text that could change in-game (such as the things your manager dude says to you after you die, which changes), I just imported a nice free font into GMS and draw it with the standard draw_text_*() functions.

*Does room size have any bearing on making graphics look sharper or doesn't it matter? As in if I made a big room 4K size with 4K size graphics and it just scaled down to smaller sizes nice and clearly . . . would that work?
Room size has absolutely no bearing on any aspect of graphical creation. What's important is the area of the monitor covered by the game window. Spaceslingers could have had 200 000x200 000 sized rooms and it wouldn't have changed anything I did with the graphics. The thing that would change how I approached the graphics is either targeting a different resolution or a different aspect ratio. Spaceslingers is designed for a 1920x1080 window (or 1080p, as the kids call it), so I sized my graphics appropriately to fit onto that real estate. If I was targeting a smaller resolution, I would've drawn the graphics at a different size.

For instance, Alchementalist is targeting a very small pixel art style, totally different to Spaceslingers obviously, which means that while the game might be scaled up to 1920x1080, I'm actually targeting an aspect ratio of around 320x180 (or 16:9). Anything I draw, such as the GUI, needs to fit within those 320x180 pixels I have to work with (well, technically, I'm allowing separate scaling for the GUI, a suggestion by @Nocturne, but that isn't necessary for the base functionality). More technically, the Camera Width is set to 320 and the Camera Height is set to 180. I then scale the Viewport Width and the Viewport Height by the amount I want, keeping it within multiples of 2 (so the Viewport Width might be set to 1920 and the Viewport Height might be set to 1080, which lines up as 6 times the Camera Width and Camera Height). By doing this, I don't need to worry about any other resolution besides 320x180 when I'm creating the graphics, and the Viewport scaling will natively handle the different resolutions (as long as I'm not multiplying the Camera size by, say, 2.5 or 3.7 or some odd number that doesn't divide into 320x180 with no remainder). If I did want to implement a different aspect ratio, I would still maintain the 16:9 aspect ratio of 320x180 and I would simply have either black bars on the sides or top of the screen (depending on the ratio) or I would draw some repeated pattern or something in the GUI layer in the areas that sit outside of the 16:9 ratio.

*Do surfaces come into this?
The only time I was using surfaces in Spaceslingers was when I needed something to be scrollable. For instance, the level select layout with the galaxies is a surface and I draw it with draw_surface_part() (I think, I may just be calculating whether a position should be displayed and drawing it to a surface if it should and then just drawing the whole surface, but either way, I'm only using surfaces for scrolling). Anything that doesn't involve scrolling is just drawn with draw_sprite() or draw_sprite_ext() if I want some tweened movement going on. Surfaces are not used for scaling at all.

To make the overall point more clear: I have no code in the game to handle scaling. The scaling is all done by starting with nice crisp graphics, having "interpolate colours between pixels" turned on (this is only turned on because of the anti-aliased nature of my drawn graphics for Spaceslingers, in Alchementalist I have it turned off because it would blur the pixels if I had it on) and then letting GMS' inbuilt systems do their thing.
 
Last edited:

otterZ

Member
Thank you so much @RefresherTowel , @Rayek and @TsukaYuriko , I really appreciate your guidance.

You gave me so many details and straight up advice. Okay, 1080p - 1920, 1080 it is and I'll aim to make the graphics clear using Gimp / Photoshop to create crisp graphics and just drop them in.
Not as complicated as I was imagining which is nice.

I did have a bunch of questions / confusion, but you have answered everything. It's clear as day what to do now.

So many interesting details and facts you gave me. I will have to re-read this thread to absorb them all as you took the time to give me such a great head start to creating better graphics.

Awesome, I am blown away by how kind you guys are. I hope in time, as I gain more experience in GMS that I can help beginners in the same way. Thank you again.
 

Khao

Member
Something worth mentioning.

Don't think that just because your assets are built for 1080p, it automatically means your game doesn't "support" 4K.

My game usses 1080p assets for characters.



Left is a zoomed-in screenshot of my game running at 1080p. Right is the exact same scene running at 4K. Both of these images are showing the same 1080p character as-is. Upscaling still does a fantastic job at keeping the sprite smooth, and it also greatly improves the look of rotated sprites (such as the platform the character is standing on).

It's obviously a bit blurrier than a game with native 4K assets, but you might seriously be surprised at how well a 2D 1080p game can look when you just run it at 4K. So even if your plan is to support 4K displays, you can totally end up with something that looks great with just 1080p assets.
 

Rayek

Member
Also important (but often overlooked) is that game assets' sharpness or visual fidelity may be affected by the export/prep method or workflow and the software used.

For example, in my experience exporting assets directly from Illustrator at the required scale/size for your game is... not the best approach. Illustrator's vector to bitmap rendering leaves something to be desired. Edges look too soft, rather than crisp - which may cause rather soft looking edges when HD 1080p assets are scaled up to 4K.

It does of course also depend on the game engine used, but the point is: if your game asset doesn't look as crisp as it could from the start, it is only going to get worse down the game rendering pipeline.

My solution is 1) avoid Illustrator :D for bitmap asset export, 2) render the vectors at a much higher bitmap resolution than required and scale down the bitmaps with a tool that supports an optimized and suitable downscaling algorithm like Catmull-Rom (which retains crisp edges and details much better than for example Photoshop's resampling algorithms).

It can also be very useful to sharpen a bitmap asset before downscaling, and sharpen a wee bit after. The resampling method may have a pretty high impact on overall crispness, though. And sharpening comes at a cost if overdone, though it depends a bit on the sharpening algorithm. Photoshop's preferred downsampling automatically sharpens the result, which base result I dislike.

I tend to output my vector-based graphics at 3 times the required game asset scale, scale down with Catmull-Rom and a bit of pre-sharpening and perhaps a wee bit of post sharpening. This results in incredibly crisp looking art. And also tends to compress better (blurry edges increase file size somewhat), and result in better looking edge-background transitions.

Not to mention FAR more control over the final colour conversion (indexed number of colours, as well as transparency mask quality).

If I am working on bitmap drawn assets, likewise I always work on 2 to 4 times the required resolution. Not only allows this for a more flexible workflow and prepare for unexpected changes in the scale of objects in the game design later on - this workflow also again ensures that I am able to control the edge and detail quality to a tee with aforementioned down-scaling process.

I remain in total control over the final rendering quality of my game assets. If something must be exported with fuzzy edges - I can do that too this way. Number of colours, crispness, file size, transparency mask control... All possible (to an extent, of course).

Anyway, always keep this in the back of your mind: poor quality in, poor quality out.
 

otterZ

Member
Something worth mentioning . . .
Great! Good to know. Yeah, still looks great even at 4K. Nice artwork and colour scheme by the way.

. . . Anyway, always keep this in the back of your mind: poor quality in, poor quality out.
Thank you for going into detail about your workflow @Rayek . That was a fascinating breakdown of your workflow. Wow, I am armed up with some new skills now. Plus learnt a bunch of new things.

My existing game project has a 1280 x 720 resolution and I was thinking of changing the resolution to 1920 x 1080 (which would take a hell of a lot of work), but now I am thinking that I can make the graphics in the existing 1280 x 720 version as crisp as they can be using these methods, but in my next game use a 1920 x 1080 resolution from the get go.

I plan to start a new game pretty soon, so I am looking forward to employing a lot of this valuable advice.
 

JackTurbo

Member
For example, in my experience exporting assets directly from Illustrator at the required scale/size for your game is... not the best approach.
When was the last time you worked with illustrator? As a graphic designer by trade I used to avoid all raster exports from both illustrator and InDesign like the plague for exactly this reason, however this is definitely no where near the issue it used to be with the newer versions of the packages
 

otterZ

Member
Hmm. I usually use GIMP - perhaps I should look into whether GIMP is the best software to use or not for preparing graphics for games . . .
 

Rayek

Member
When was the last time you worked with illustrator? As a graphic designer by trade I used to avoid all raster exports from both illustrator and InDesign like the plague for exactly this reason, however this is definitely no where near the issue it used to be with the newer versions of the packages
A few months ago. I do have the latest Adobe CC installed via work, and I had to export an asset that was given to me in Illustrator format.

That's when I tested the rendered bitmap output at the required resolution, and it still outputs too soft edges and details - the anti-aliasing is of questionable quality. This issue still pops up from time to time on the Adobe support forums.

For that asset I exported it in Illustrator at 4 times the required resolution and used Color Quantizer to scale it down by a factor of 4 with Catmull-Rom and a bit of pre/post-sharpening.

The end result looked noticeably better in regards to details, edges, and anti-aliasing compared to the direct Illustrator output.
 

Rayek

Member
Hmm. I usually use GIMP - perhaps I should look into whether GIMP is the best software to use or not for preparing graphics for games . . .
If you do not plan to use vector-based graphics, Gimp will do fine for bitmap drawn ones.
Krita is also excellent for drawn game assets. Photoshop obviously too. So many options out there...

As long as the image editor features the standard layer stuff and good drawing tools almost any software will suffice.

For vector-based art InkScape, Affinity Designer, Illustrator, etcetera works well.

If you need to do animation (most game designer do) Krita and OpenToonz have nice animations tools. Of course, Photoshop also does animation. Quite a few game artists still use Animate CC (or an older version of Flash).

The tool by itself doesn't magically turn anyone into an skilled artist. That takes time, learning, effort, and practice.

I use PhotoLine as my main design 'hub' with a variety of tools surrounding it: Inkscape, Krita, Blender, Pro Motion NG, Color Quantizer, OpenToonz, and more.

Try stuff out, and decide which apps suit your particular style and workflow best.
 

otterZ

Member
If you do not plan to use vector-based graphics, Gimp will do fine for bitmap drawn ones . . .
Thanks Rayek, that's great as I know GIMP quite well. My workflow at the moment involves using GIMP, Blender and Pixalmator Pro, using a Mac.

My first beginner project (after the Asteroids tutorial) in GMS was meant to be just a test project, but it ran away with itself into a full blown game. Even though I've made a lot of errors and had to redo a lot of things, due to lack of experience, I also have leant a bunch of stuff + gained a lot of knowledge on better graphics thanks to yourself and everyone replying to this thread. So . . . I am itching to start a new project/game soon where I can this time get more things right from the get go and try to code that little bit more elegantly and neatly to be more readable etc.

Cheers :)
 
Top