itch.io Community » itch.io » Questions & Support

How do I set dimensions?

A topic by d14u82 created Mar 21, 2024 Views: 4,322 Replies: 18

Viewing posts 1 to 3

That question is not self-explanatory.

So, I've developed an app with the canvas reference resolution to 360 x 640. It looks perfect in Unity.

When I upload to itch.io and set the manual dimensions to 360x640, it cuts off the top and bottom of the app as if it doesn't fit.

Is this an itch issue or am I doing something wrong in Unity?

Also, I am unable to auto detect sizes. I think this is something I'm missing in Unity. Could someone point me in that direction?

These issues have occurred in every app/game I've uploaded to itch. I can't seem to get itch to recognize the same dimensions I'm developing the apps in.

I would greatly appreciate any feedback. Thank You.

Like Reply

redonihunter266 days ago

I do know nothing about unity. But your scale game does not scale. At all. The play screen in the middle stays the same size, no matter how I size and zoom my browser. Even with full screen it still does not scale. Only now, in fullscreen, the non scaled item is still the same size, while the surroundings did get scaled, despite the fullscreen setting. It should both (background and start box) adjust in size while zooming the browser and stay the "fullscreen" size while fullscreen no matter the zoom.

Make the game fullscreen, after zooming your browser in or out. Even better, go to fullscreen and then press ctrl+/-.

This is not how scaling is supposed to look. But that is the reason for the thread, I gather ;-)

My guess would be, you tell the engine somethin has to be a certain fixed size in a context where it should be adjustable (scaleable). So maybe you do give instructions not for the virtual screen that can be adjusted, but directly in absolute terms. Similar to when you give pixel values instead of relative values in css. That looks awful in a non adjust high res screen and is the reason people user their windows in 300% default zoom for that resolution, instead of benefitting from the high resolution. Even old full hd is default 150% zoom. So my virtual pixel resolution the browser tells the site is much smaller than my screen could handle.

If I type window.screen.width in the javascript console, it resolves to 1280 and not my screen width.

Scaling and sizing is awful. My sympathies.

Like Reply

d14u82266 days ago

Thanks for the feedback. That's not the game I'm working on at the moment, but I will go check that out and see what kind of scaling options I have. I don't remember how I scaled the play screen.

Like Reply

redonihunter265 days ago

Oh, you did say it occured in every game you uploaded. While you are at it, I think you did something with the mouse cursor, that should not be done. It is showing the cursor but you use mouse as input for turning. And on screen edge, the cursor stops and you cannot turn further.

https://docs.unity3d.com/Manual/webgl-canvas-size.html

I still do not know any unity, but from that read it sounds like you decoupled the the render, but should not have done so, since you do want the automatic scaling.

Like Reply

Evolutionary Games266 days ago

In Unity, look at Project Settings - Player - Resolution and Presentation - Set your default width and height there.

This game: https://evolutionarygames.itch.io/pattern-puzzles

I have the default resolution set to 450 x 800. The canvasses are created 550 x 800.

On itch.io my settings are: Embed in Page - Manually set size to 450 x 800 with orientation Portrait. I've disabled go full screen (don't tick the box), because then the game is cut-off.

Like Reply

redonihunter265 days ago

I've disabled go full screen

I hate you.

But seriously, why? Just whyyyy? :'-( There are very, very, very few games that benefit from this. Your's aint such a game. It is non fun to scroll down and up or resize browser window to actually see your game in full. I cannot turn my display in portrait mode. (Ok, sure, I could, with the graphics diver and turn my neck 90 degree, since I am talking about a computer screen)

Since basically all the unity games out there do handle this in the expeced manner, I guess you and op are missing something trivial and overdo something that should be handled by Unity automatically.

Like Reply

Evolutionary Games265 days ago

The game in window mode fits on my monitor which is standard 1920x1080 without scrolling. On itch.io you need to scroll past my banner once, on my own website, there's no scrolling needed but I've also disabled full screen. On the longest side it is 800 which fits well into a height of 1080.

I designed the game to be played on mobile devices (it's published on Huawei App Gallery and at Amazon). That's why I have an odd portrait resolution (450 x 800). If I was designing it for PC I would've used different dimensions.

I suppose the other developers are creating their browser games using resolutions more suited to desktops that can resize based on desktop dimensions.

We can program the cameras to fit black bars and force a resolution when necessary. I didn't in this case, because the game was okay on all my test devices.

Like Reply

d14u82265 days ago

I did build one app before that looked good everywhere, including here on itch. The ONLY app I've ever released to Google PlayStore. It didn't look right on MY device because I have a very awkward screen resolution. My screen aspect ratio on my phone is 18:41.

Like Reply

redonihunter265 days ago

Your game does not even fit in my browser when I set my browser zoom to 100% and put the browser itself in fullscreen to hide the tabs and clutter. Let me guess. Your windows desktop zoom is set to 100% or 125%.

You should never count pixels of actual display, because you never work on actual pixels, except when getting direct access to the screen. It is always scaled. My screen could handle about 2000 pixel in height. Yet my browser would tell your game, should it ask, that is has window.screen.height = 720 and this is not even factoring in the zoom level of the browser. And I double checked. This is the recommended setting of windows display setting.

Issues like this are usually dealt with by clicking the fullscreen button. No scrolling to the exact point that it fully fills the screen, no accidental offscrolling, no wasted pixels, also no clutter like tabs and status bars.

So as a player naturally I would expect those game engines to be super developer friendly for basic stuff like that. Guess this is not so.

What you need is an aspect ratio and an idea how big the user interface elements have to be to be of use, in relation to the full display size. Also I randomly picked a 5 year old huawe spec, a p30 has this resolution: 1080 x 2340 pixels, 19.5:9 ratio. You have over 2000 pixels on that device in height. Guess you are working on a viewport there too.

Like Reply

Evolutionary Games264 days ago

I actually used the recommended dimensions suggested by Huawei App Gallery since 95% of people who play my browser games find them on the Huawei App Gallery and the other 5% go directly to my website.

Like Reply

Eldwood265 days ago

Yeah, it fits your monitor, which is great if you're the only one to play it. On my monitor (2160p, no desktop scaling, no browser scaling), it's unpleasantly small. Full screen would fix this. (Also, there's some text (?) on the bottom of the game that gets cut off.)

Like Reply

Evolutionary Games264 days ago

Thanks for the feedback. I've enabled full screen mode on itch.io. (Itch.io's full screen, not Unity's).

There is no text on the bottom when you play the game. Only the start screen has the instructions, and below the instructions a banner ad, showcasing my other games. (If the instructions are cut-off, the game would be unplayable, because you wouldn't see the bottom rows of tiles.)

Like Reply

redonihunter264 days ago

I've enabled full screen mode on itch.io. (Itch.io's full screen, not Unity's).

Does not work. The "fullscreen" is not fullscreen. Oh, the browser goes fullscreen and it is different than regular fullscreen with F11.

But try pressing ctrl + and - . The browser zoom setting still get's applied. Anyone not browsing with 100% zoom will not see the game in fullscreen.

I randomly tried a few other games that are Unity and web. Some work, some do not even have a fullscreen button. There even seems to be an issue with staying "fullscreen", but rendering the game to a lower resolution. The Unity fullscreen button seemed to be the most reliable.

It is a shame that developers have to do this manually and is not handled in a plug&play fashion easy to implement. And a shame it is, because resizing screen resolution is old, not new. With crt displays this was common. The whole display would be analogous set to a new hardware resolution. You could never be sure what the pixel resolution would be. One would excpect time tested solutions to this kind of problems.

Like Reply

Evolutionary Games264 days ago

I believe Unity has done an overhaul of their web browser backend in their latest beta version. Perhaps this is an issue they addressed.

I prefer to use Clickteam Fusion for web games - but with this particular game I encountered a bug in Fusion, so rewrote it in Unity (it was quicker than rewriting it in Fusion to overcome the bug). All my other browser games are written in Clickteam Fusion.

Like Reply

d14u82265 days ago

What reason would your default resolution be different than your canvasses?

As a web developer, screen resolutions were so easy to work with. But as a game developer, I hate it lol. As far as I know, fluid layouts such as 100% screen width isn't even a thing. Trying to figure out sizes that scale with every device is not easy, especially since not every device will be your reference resolution or default resolution.

Like Reply

Evolutionary Games265 days ago

To give the canvas more space to scale on different sizes like 600 x 800. I have it at 550 x 800 with the setting match 80% of the height.

You can program the camera to adjust itself when necessary. Test the screen width and height and if it's too far from your target, it can change the projection size (orthographic) etc. Just do a search on setting the camera size in Unity. There are multiple options.

Wouldn't it be nice if mobile screens all had the same resolution?!

Like Reply

d14u82265 days ago

I do know how to change the camera settings in code, but how can I detect a user's resolution in code? Any idea?

Like Reply

Evolutionary Games265 days ago

There's one example here

Like Reply

d14u82263 days ago

Thanks for that. I'll check it out

Like Reply

This topic has been auto-archived and can no longer be posted in because there haven't been any posts in a while.