Optimal Resolution for Node.js games

0 favourites
From the Asset Store
Adjusting the game screen for different resolutions (Letterbox scale)
  • Ashley

    For my games, it has not crashed in my experience and its not a memory leak, I can increase the size of the "cache" nw.exe process just by adding more dummy un-used large sprites to an assets layout (never called). If its a 2048 x 2048 sprite, the cache increase by 16MB so I know its actually loading all the asset from disk into cache.

    This is problematic under 2 scenario:

    1. Very large games, can indeed overwhelm the 32bit OS restriction on 4GB total memory and crash. Klang's dev have reported this, so the game will only work on 64 bit OS. It's not that his layout is that big or complex, the game layout itself doesn't use much but all the assets (big game, high fidelity assets) in cache uses a lot of memory. This was due to the expectation that C2 has functional layout-by-layout memory management (which it does) but we didn't know about Chromium caching everything up to a few weeks ago.

    2. Android does this with Crosswalk, I've seen this behavior myself. Games have a very large memory footprint if there's lots of assets due to shared vram & system ram, so there's assets of the current layout in system ram, there's assets in vram, then there's assets being held in cache by chromium, all in the same system ram pool. It does end up crashing quite soon due to these devices using so much memory for background tasks, when we have well designed layouts to fit <200mb. This means bigger games with lots of smaller layouts is still a no-go. I haven't tested on Safari & iOS to see if it behaves like Chromium, but I suspect not since I never saw such skyrocketing memory use of my own games on iOS as compared to Android.

    I know this isn't on your end, it's a Chromium/NW.js thing, but other devs should know to avoid making that huge epic game thinking its gonna be okay as long as they get clever on layout management.

  • I've made an observation long time ago, when looking at loading times and performance when using hd assets, that there might be an issue, and ultimately decided I'll go with pixelart, but with the idea that after completion of the game I'll redo those assets in hd, and see if game will still work well.

  • megatronx yeah I'd have to do my own bench marks to make sure it'd be worth it. I've done a lot of the art myself in the game (and I'm not really an artist - not that I didn't put the hours in!).. so if I could make the game run considerably faster on slower machines I'd consider it, since I'd be forced to work with a real artist -- I don't have time to learn pixel-art style!

    I originally picked 1920x1080 not knowing anything really... I was working with an artist at the time and he was being snooty about HD graphics and I was like, okay, let's do HD. So now, 2 years later (and the artist is long gone) here I am.

    anyways just wondering if anyone on here went through the same decision making, of having to decide the best resolution for NW.js - it of course depends on the game, but performance is a genuine factor.

  • Hmm... I can't say that I've ever really thought that performance would be an issue at 1920x1080. The only machines my game doesn't run on are the old laptops at work, and their GPUs don't even support webGL. I'm trying a single large layout (100,000 x 60,000px) and performance hasn't been an issue yet.

    If I ever do run into issues, I'll come up with an alternative method or cut some of the offending content, but I know everyone doesn't fly by the seat of their pants like me when it comes to game design.

  • megatronx yeah I'd have to do my own bench marks to make sure it'd be worth it. I've done a lot of the art myself in the game (and I'm not really an artist - not that I didn't put the hours in!).. so if I could make the game run considerably faster on slower machines I'd consider it, since I'd be forced to work with a real artist -- I don't have time to learn pixel-art style!

    I originally picked 1920x1080 not knowing anything really... I was working with an artist at the time and he was being snooty about HD graphics and I was like, okay, let's do HD. So now, 2 years later (and the artist is long gone) here I am.

    anyways just wondering if anyone on here went through the same decision making, of having to decide the best resolution for NW.js - it of course depends on the game, but performance is a genuine factor.

    For me it was a nightmare and took very long time to make decision of dropping hd assets and going with pixelart. But the longer that decision took, the more other things I did in construct and ultimately, in the end it was easier to go with pixelart. Pixelart is not that difficult.

  • For me it was a nightmare and took very long time to make decision of dropping hd assets and going with pixelart. But the longer that decision took, the more other things I did in construct and ultimately, in the end it was easier to go with pixelart.

    yes, probably in the "grand scheme of things" switching art assets/resolution would probably only take a week... but having the actual art done would take considerably longer.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Hmm... I can't say that I've ever really thought that performance would be an issue at 1920x1080. The only machines my game doesn't run on are the old laptops at work, and their GPUs don't even support webGL.

    have you tried your game on a laptop with HD4000 Intel graphics? my guess is it would be very laggy. The unevenness about C2 dev is that you make a low budget game, but users can't have a low budget computer to play it! I worry about the backlash of users that get upset the game isn't smooth because it's a 2D game and requires hardware acceleration. But alas you can't please everyone. I think has the right idea by setting minimum requirements at AMD/Nvidia cards.. that way you cover yourself.

  • >

    > For me it was a nightmare and took very long time to make decision of dropping hd assets and going with pixelart. But the longer that decision took, the more other things I did in construct and ultimately, in the end it was easier to go with pixelart.

    >

    yes, probably in the "grand scheme of things" switching art assets/resolution would probably only take a week... but having the actual art done would take considerably longer.

    Cool thing is that you don't really need to switch resolution if you are using high quality image. You're only left with making and replacing assets. Another cool thing about making the game in pixel style first is that after switching assets, which is just a pragmatic process, you won't have that many objects on the screen anyway! And btw, for pixelart games I use half ( 860x540 ) or just a quarter ( 430x270 ) of hd resolution. It upscales perfectly, layouts remains small, controls are more responsive, and if you want to replace assets, it takes only a moment. Thought in my current project I'm using 640x360, which also does upscale perfectly, but for different reasons... I don't remember what were they thought?!! ;D But for artistic reasons I do scale that layout a bit.

    I tell you what: try making your game in 860x540, use high quality image, and keep all assets hd first, but then gradually lower their resolution, starting with the obvious assets of lowest priority of importance. And then make them even lower res and compensate with shaders, but have them disabled if you're running below 55fps; with no shaders it will work okeish on older, integrated cards. If it still wont work well, and still fps is low, set events to change image quality to low. Good news is that on laptop screens low quality in such resolution will barely be noticeable. GL!

    What genre is your game?

    EDITED

  • megatronx my genre is top-down space shooter.. unbound layout. So I have pretty big background graphics.. nebulas, star, planets etc.. the nebulas are the most worrisome because there needs to be a lot to give the levels some "life" (color), otherwise it's all bland black and white stars...I'll be posting the trailer this week.. here's my parallax test vid.

    https://vimeo.com/137027609

    keep all assets hd first, but then gradually lower their resolution, starting with the obvious assets of lowest priority of importance.

    Do you mean make my current graphics lowres, by Shift-click dragging the corner of the sprite in the Layout view? or are you saying to scale them down in PS?

    I was originally thinking of doing exactly what you are saying as a way to test performance - like who cares what the graphics look like, just make all my current assets tiny and run the game. But I have so many things on my plate I decided to come to the boards to see if anyone was ever wondering the same thing. i.e. is it a worth while test?

  • I think aesthetics are more important than resolution/style because you can have hd graphics that look horrible if the aesthetics are awkward. You can have low-res pixel graphics that look amazing if their aesthetics are great. The good thing is, that it takes more than just graphics to determine if a game is great.

  • megatronx my genre is top-down space shooter.. unbound layout. So I have pretty big background graphics.. nebulas, star, planets etc.. the nebulas are the most worrisome because there needs to be a lot to give the levels some "life" (color), otherwise it's all bland black and white stars...I'll be posting the trailer this week.. here's my parallax test vid.

    https://vimeo.com/137027609

    >

    > keep all assets hd first, but then gradually lower their resolution, starting with the obvious assets of lowest priority of importance.

    >

    Do you mean make my current graphics lowres, by Shift-click dragging the corner of the sprite in the Layout view? or are you saying to scale them down in PS?

    I was originally thinking of doing exactly what you are saying as a way to test performance - like who cares what the graphics look like, just make all my current assets tiny and run the game. But I have so many things on my plate I decided to come to the boards to see if anyone was ever wondering the same thing. i.e. is it a worth while test?

    You can still make it look like a blast!

    Optimize in PS, not in c2 and not by shift-drag. This doesn't do anything if you are using high quality scaling -it will still load full res image and then it will shrink it. But it works in reverse too: if you have sprite 16x16 and game running in 430x270 and high resolution scaling, and you are outputting this in full hd, that 16x16 sprite becomes 4 times the size when rendered, it becomes 64x64, and takes as much memory, even thought it is still looking like 16x16. But now imagine something different: that your sprite is 64x64 but shrank down in c2 layout editor to 16x16 and the game is still 430x270. In high quality scaling and in full screen and in full hd it again becomes 64x64. But now it is not upscaled 16x16 sprite - it is that original 64x64! Now check this: if the pc is not strong enough to output assets in full hd, you switch renderer to low quality scalling, and now this 16x16 is rendered as 16x16 but upscaled to fit the screen.

    So what you need to do, is to set your games resolution to half hd i wrote above, make all sprites in the editor half the size, but load original hd assets, and those will render now differently depending on the type of scaling.

    And now going back to your question about optimising the graphics: you do this in photoshop. For example that nebula could be done differently: instead of having interlaced 16-bit or higher png, you can set its saturation and levels in ps, and also replace transparency with black colour, then export as 8-bit png, and in c2 editor set it's blending mode, making black background becoming transparent.

    Also, exactly on images like nebula, you could try lowering their resolution in PS, because when rendered in high quality, the outline might not be perfectly smooth, but if you work it out, it being lower resolution might be barely visible.

    Stars in the background you can easily slash by half of their resolution, and in c2 use sharpener and maybe some polishing one to give more brightness ( thought here I can't remember if the shaders will also render in full hd if high quality scaling is on, or not )

  • have you tried your game on a laptop with HD4000 Intel graphics? my guess is it would be very laggy.

    I haven't tested it with a NW.js build, but I have tested the browser version. Chrome says the game runs between 50-55 fps using the built in fps counter, and it's not unplayable by any means.

    megatronx has been around a while, and I would trust that he knows what he's talking about. Besides, I'm just doing this as a hobby so performance on old laptops isn't really something I think about.

  • But now imagine something different: that your sprite is 64x64 but shrank down in c2 layout editor to 16x16 and the game is still 430x270. In high quality scaling and in full screen and in full hd it again becomes 64x64. But now it is not upscaled 16x16 sprite - it is that original 64x64! Now check this: if the pc is not strong enough to output assets in full hd, you switch renderer to low quality scalling, and now this 16x16 is rendered as 16x16 but upscaled to fit the screen.

    So what you need to do, is to set your games resolution to half hd i wrote above, make all sprites in the editor half the size, but load original hd assets, and those will render now differently depending on the type of scaling.

    okay got it! sounds good, I will definitely check this out. Awesome.. thanks! So when you mentioned before keep decreasing the asset resolution.. you mean find a point where it looks good without looking too blurry for that low-quality setting?

    btw, I can't imagine anyone playing my game windowed, it will always be fullscreen, I'm not giving them the option if I can help it.

    Is high quality scaling a run-time modifiable parameter? i.e. could I have a user change this setting while the game is running?

    And now going back to your question about optimising the graphics: you do this in photoshop. For example that nebula could be done differently: instead of having interlaced 16-bit or higher png, you can set its saturation and levels in ps, and also replace transparency with black colour, then export as 8-bit png, and in c2 editor set it's blending mode, making black background becoming transparent.

    I've done this (blend mode to additive) on black backgrounded images before, but I had no idea it saved memory... it sounds familiar, but I guess I never really looked into it! How much of a difference does it make? I have a TON of images that have LOTS of transparency. Should I convert them all???

  • The good thing is, that it takes more than just graphics to determine if a game is great.

    this goes without saying... I believe in art and it's not what you have, it's what you do with what you have. So black and white rectangles could be amazing if presented amazingly.

  • - please file a bug report if there is too much memory use - the point of layout-by-layout loading is to keep the memory use down, so we want to make sure that is working.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)