thank you for playing and the detailed feedback, I appreciate it!! you're right about the pixel inconsistencies, I have a ton to learn there. Any intro tutorials or resources you would recommend? I'm very new to this stuff, "nearest neighbor" and "linerar interpolation" went right over my head lol. The enemies were meant to be the same color scheme, I'm not sure why Wrath ended up that way, but I waited until the last 2 days to start cause I'm lazy and ran out of time to fix it. Is the basic idea to have a starting pixel size of 16x16, 32x32, etc and then scale up to a viewport at a ratio of 16:9? If I were to make all the art for a game in a 16x16 template and then scale up to a 256 by 188 window would I avoid those scaling issues? Thank you again for the detailed comment! Gonna go check out your game now :)
Viewing post in Do What I Say - GoedWare Jam #11 Isolation jam comments
When it comes to upscaling an image (making it bigger), your image editing software will try to calculate the color of each new pixel that gets added to the resulting image to make it bigger. These new pixels are calculated using one of many techniques, most of which add new colors or blurry pixels close to the edges of your sprites. This is normally not the desired outcome when it comes to pixel art. With pixel art, you usually want clean edges and to keep consistency with your color palette.
"Nearest neighbor" is the name of one technique that only copies the color of the closest pixel to create a new pixel when upscaling. This results in the desired effect of clean edges (not blurry) and an "unbroken" color palette.
You can read more about scaling algorithms here.
Now, I believe that for your game you may have used the scale property of your enemy objects to make them seem bigger. If this is true, this means that your game engine is scaling your sprites with one of the other techniques. To fix this, I believe GameMaker Studio 1.4 used to have a global setting to turn texture interpolation off, so there should be something similar for GameMaker Studio 2 if that's what you are using. On the other hand, if you are scaling your sprites before importing them to GameMaker, your image editing software should have a dropdown menu when using the scaling tool that lets you select what kind of interpolation to use. Simply select "nearest neighbor" when scaling pixel art.
Now, here is the thing, to keep consistency with pixel art you want to have the same scale on all sprites/images regardless of interpolation algorithm used. So, either scale everything the same amount, or keep the scale at 1.0 on every single sprite.
For example, for my game, I chose a game resolution of 480x270 and I drew all sprites according to that size; the cow sprite is 36x24 for example. All sprites are 36x24 but the entire game viewport is then scaled to the right window size keeping the aspect ratio during gameplay.
I recommend you watch this video about Inconsistencies with game art.
Also, there is this series of Pixel art classes by AdamCYounis that you can watch too.
I recommend both of those channels btw.
Hope this helped a little.
First of all, thank you so much for taking the time and effort to write such a detailed and thought out response! Much appreciated!
So, for this game, I made the sprites at (basically random) larger sizes in GIMP and then scaled the image down to 64x64 or whatever to then be imported to GM2. So basically if I had "nearest neighbor" selected before scaling down in GIMP the blurriness/etc. would not have appeared?
Following your example, how did you decide on a resolution of 480x270? And how did you know to draw the sprites at 36x24? In my head, I would think that to apply the 16:9 aspect ratio to a 36x24 sprite would mean you want a resolution of 576x216 for the game (as that is the result of 16*36 and 9*24), but I must be missing some key part (more likely parts) of this. I'm also confused by game resolution vs. viewport vs game window, are those terms interchangable? Sorry for all the questions, I am very new to this stuff.
I will be checking out both of the links you sent me, thank you again.
No worries, if you don't get a chance to answer all those questions, you have already set me down the right path :)
if I had "nearest neighbor" selected before scaling down in GIMP the blurriness/etc. would not have appeared?
Correct, you would not get blurriness, but I would still advice trying to draw your sprites at their final resolution and avoid scaling them altogether.
how did you decide on a resolution of 480x270?
So, 16:9 is the most common aspect ratio with 1080p (1920x1080) being the most common monitor resolution used according to steam. Your game's resolution is gonna depend on various things, mainly the kind of game you are making and your art style. For pixel art games you normally pick a low resolution that scales cleanly to as many resolutions that use 16:9 aspect ratio, especially to 1080p. Most common game resolutions for pixel art games are 320x180 and 640x360. I picked 480x270 because I felt 320x180 was too low resolution for my game as I wanted higher detail on some aspects of the game that I couldn't get with that resolution. I could've tried with 640x360 (might still try later), but I felt 480x270 was good enough for what I wanted to make.
480x270 scales cleanly (as in you multiply both numbers by integers) to: 960x540, 1920x1080, 3840x2160. So I got the most popular resolutions covered.
This video by AdamCYounis may help you on choosing a resolution.
how did you know to draw the sprites at 36x24?
I usually start by creating an image the size of the game's resolution filled with a single color that would represent the background of the game (green in this case). I then draw a sprite on a different layer of that image trying to keep it at a size that makes sense. For this game, I knew I would need to place many sprites of around the same size on the scene, so I drew the cow's sprite small-ish compared to the game's resolution. I populated the full image with copies of the sprite to make a mockup of how the game would end up looking. When I was happy with the size of the characters, I then just copied the cow sprite to a separate image of the resulting size (which was 36x24) and exported that image. I later made all other sprites using the cow sprite as reference for size.
You don't really need to confine your sprites to 8x8, 16x16, 64x64, etc. as modern game engines don't have problems with sprites of resolutions that are not powers of 2. There is a benefit to using sprites of sizes that are powers of 2 when it comes to texture page sizes, but I wouldn't worry about that.
game resolution vs. viewport vs game window, are those terms interchangable?
The game window is the final size that your game is rendered to. A game window with a different size than your game's resolution will scale or not scale your game's resolution to match it. Whether it scales your game or not depends on how you set it up. I don't remember for gamemaker, but in Godot there is a stretch mode and aspect settings that you use for this. On itch, the embed size is basically your game window size. For example, I chose 960x540, so my game is scaled to that resolution for the embedded version and, because of the settings I used in Godot, the game is scaled evenly without adding artifacts to the image. Note that the version of Godot that I am using currently has a problem with some web browsers (Firefox at least) and itch web embed, so it might pop-up a new window instead of playing embedded in the page.
A viewport is an area of the game window where your game will be rendered. Generally, there is a main viewport that you draw your game to, and this main viewport can be composed of one or more viewports. For example when making splitscreen games, you can use one viewport for each player's camera view to be displayed.
Game resolution is the resolution of your main viewport, this will get stretched (or not, depending on settings) to the player's game window.
I know it seems complicated, but you really get used to it with practice. Just keep making games, following tutorials. and trying different things and you will get the hang of it.
I hope this helps!