Optimal Resolution for Node.js games

Discussion and feedback on Construct 2

Post » Mon Nov 09, 2015 1:13 am

megatronx wrote: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.
B
88
S
29
G
14
Posts: 1,154
Reputation: 15,003

Post » Mon Nov 09, 2015 1:27 am

ryanrybot wrote: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 @Silverforce has the right idea by setting minimum requirements at AMD/Nvidia cards.. that way you cover yourself.
B
88
S
29
G
14
Posts: 1,154
Reputation: 15,003

Post » Mon Nov 09, 2015 1:30 am

jobel wrote:
megatronx wrote: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
My professional Royalty Free Music at Scirra Assets Store
--------------------------------
Specs: i5 2500, 16gb of ram, gtx 770, win 7, Focusrite Scarlett 8i6, Mackie mr8mk2, Alesis 320, browsing the net on chrome.
B
85
S
27
G
20
Posts: 1,962
Reputation: 18,651

Post » Mon Nov 09, 2015 1:49 am

@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

megatronx wrote: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?
B
88
S
29
G
14
Posts: 1,154
Reputation: 15,003

Post » Mon Nov 09, 2015 2:20 am

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.
B
41
S
19
G
65
Posts: 1,085
Reputation: 37,842

Post » Mon Nov 09, 2015 2:38 am

jobel wrote:@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

megatronx wrote: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 )
My professional Royalty Free Music at Scirra Assets Store
--------------------------------
Specs: i5 2500, 16gb of ram, gtx 770, win 7, Focusrite Scarlett 8i6, Mackie mr8mk2, Alesis 320, browsing the net on chrome.
B
85
S
27
G
20
Posts: 1,962
Reputation: 18,651

Post » Mon Nov 09, 2015 4:41 am

jobel wrote: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.
Be sure to check out my Metroidvania game, A Hole in the Earth
B
59
S
24
G
3
Posts: 359
Reputation: 5,683

Post » Mon Nov 09, 2015 5:03 am

megatronx wrote: 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?

megatronx wrote: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???
Last edited by jobel on Mon Nov 09, 2015 5:10 am, edited 1 time in total.
B
88
S
29
G
14
Posts: 1,154
Reputation: 15,003

Post » Mon Nov 09, 2015 5:09 am

Prominent wrote: 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.
B
88
S
29
G
14
Posts: 1,154
Reputation: 15,003

Post » Mon Nov 09, 2015 11:33 am

@Silverforce - 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.
Scirra Founder
B
387
S
230
G
87
Posts: 24,249
Reputation: 192,240

PreviousNext

Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 5 guests