Graphic Consistency

Hey so I'm brand new to C2 and game dev in general but I'm a programming student so I know some loops, logic, etc. Thanks in advance for time/help. The pic below is a shop screen for a first-person dungeon crawler I'm working on. My question is about scaling images.

Short version: When using sprite graphics, should all my objects (sprites, sprite fonts, tilemaps, backgrounds) be the same size? That way if I blow them up they all look equally distorted. Or is it better to use them closer to their original size?

Long version: I'm using 7Soul's stuff for my game (UI and Icons). All the tilemaps, sprites, etc. are 16x16. I'm also using the spritefont Alagard. I split work between home and school and at home I can use blackhornet's GYFM to resize the font. Since I'm impatient and have down time, I've done some resizing via Littera and Photoshop. The problem I'm running into, however, is that my text looks nice and sharp while by background & tilemaps are fuzzy. Should I just make everything 16x16 (or close to that) then scale up everything? Even background images?

Here's a screengrab that shows my problem pretty well:

Sorry for the novel and thanks for the help!

P.S. Clint Bellanger deserves huge credit for inspiring me to start this with free resources for his game Heroine Dusk. It's even available on GitHub!

I usually like the retro style using sprites at their native tiny sizes and change the fullscreen in browser project property to letterbox integer scale which seems like it may give you the desired results looking at the screenshot.

Otherwise you should scale up each sprite the same amount, it starts getting fuzzy when the size of the image being displayed has to be stretched from the original image. Depending on the window size you are targeting I used a standard x10 to keep it simple but you may need more.

Hope that answers your question.. I fought with the same issue for a long time before figuring it out.

When you scale up, use "nearest neighbor" interpolation.

Thirstyy So what you're saying is use native size for everything and just rely on the browser to upscale everything? Either that or up size everything to x10. Currently my layout sizes are 640x480 and based on what you've said I think I'll just upscale everything to where ~ 160x120 will work (that's the native resolution of Heroine Dusk).

bclikesyou What do you mean? I did a quick search and couldn't find anything for "nearest neighbor" in C2. I checked the project properties and set the Sampling to "Point"

Sometimes when you change from linear to point in sampling you need to re-import the images that were imported before the change. I don't know why that's the case but I just go into the image editor and press the refresh button and I'm good to go.

I am facing kind of the same issue in my current game project as I really want to get exact pixel perfect assets in my game.

As Thirstyy said, using the Letterbox integer scale can really help to do so. Because this preserves the aspect ratio of your assets by scaling to an integer scale; like 1x, 2x, 3x, etc. This can be really useful if you want your game to run on different screensizes such as targeting multiple kind of mobile devices. There is a good tutorial from Scirra here: https://www.scirra.com/tutorials/73/sup ... reen-sizes

For example, my game is going to be played on iOS and Android. As reference resolution, I picked 1136x640 pixels, which is the standard Retina iPhone 5 landscape resolution. By designing my assets 2x higher than its original size, I realized that my assets render better when viewing at scaling sizes.

Hope this help, and I wish you good luck in your projects. <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":-)" title="Smile">

My bad. I usually re-scale my graphics outside of Construct (in Photoshop or Pyxel Edit).

"Nearest Neighbor" interpolation is an option in Photoshop when you resize an image (Image > Image Size). It finds the nearest color and uses the same thing. Retains sharp edges that we all love our pixel art to have

bclikesyou I split work on my project between home and school/work and I only have Photoshop at school/work and when I get home I really miss knowing what all the buttons do (sorry GIMP). Also no worries.

— Thanks for the explanation. I understand what you (and the tutorial) are saying about targeting an aspect ratio. However, I hate how fuzzy stuff gets. So would it be feasible to have an options menu with select display sizes? I'd focus on completing the game in one size before manually re-scaling everything. Or is that the way to do it? Just make the game in one display size with no scaling and THEN focus on scaling? Aaaanyway yeah eventually I want some version of this to be on iOS and Android so I think I'll aim for 1136x640. Thanks again!

I realized in the GitHub for Heroine Dusk there are pre-scaled versions of pretty much everything ranging from 160x120 to like 1600x900 or something huge like that.

bclikesyou Holy crap PyxelEdit. Literally changed my life. Seriously I was using GIMP/Photoshop(without nearest neighbor) and it was taking forever to resize stuff. Oh man. Thank you so much.

SentrytheDefiant No prob! Pyxel Edit is my go-to for all my animations and small sprites. If it had a type feature, I wouldn't use Photoshop at all for pixel art.

If you need any tips/help with Pyxel Edit, let me know!