Speaking of weird issues, I asked several friends to tried it out. I also tested on Firefox and Edge.
We all got 960px as the width, but depending on the browser, the fonts were rendered differently. On Edge, for instance, the “Stop all runners from reaching the finish line!” was cut off on the side as it was too long. So yeah, there are issues to work out and adopting bitmap fonts would be a start.
Works for me.
Speaking of flogging a dead thread, a friend of mine and I ran into some interesting issues concerning the Iframe size issue.
Seems that there are multiple ways of scaling content on a browser, not just Chrome’s “hold Ctrl and scroll” to zoom. There’s also a dedicated scaling option in Windows 10, which you can find via pressing “Windows + I”, then navigate to system and display. Under display, you’ve got “Scale and layout”. The recommended default is 100%, i.e. no scaling, but the very next option is 125%. There are also advanced scaling settings there, etc.
Anyway, I built and setup develephant’s HTML5 demo project to https://xedur.com/demos/windowSizeDemo/. On my friend’s screen, the size dimensions were 1200x800, but the app itself said 960x640 as they should have been. So, I also set the scaling to 125% in Windows’ display settings and the results were identical.
So, the reason why @mr.badim also had the 1200x800 was because he somewhere has/had 125% scaling set up, either in his browser or the OS. If you load the demo project that I linked and it still appears to have a width of 1200 pixels on the screen, but it reads innerWidth: 960, then that’s due to browser or OS scaling.
Now, I checked out a few Unity HTML5 games, like https://smilodon.itch.io/angrymountaingods, to see if Unity handles things differently and the answer is no. When you apply browser or OS level scaling, then the games will get blurry.
To make things more chaotic, it seems that there’s no easy way to address this issue. There are projects like https://github.com/tombigel/detect-zoom, but its readme file and stack overflow answers on the subject suggest that identifying browser zoom is very difficult if not downright impossible for all browsers, Chrome seems to be particularly tough one. Now add OS scaling on top of that and I’m not sure if there’s any way to even remotely get that information for an HTML5 app.
So, what you can do is to:
use Iframe to constrain the app’s dimensions to what you have set up in config.lua. This will make your HTML5 app look good as long as no zoom/scaling is applied, and
let your user know that if they zoom in using the browser or if they are using scaling in their OS, that the game will appear blurry, and that if they want to experience the game like you’ve intended, then they should undo the zoom/scaling and reload the page.
I am a bit late to this particular party.
I only quickly skimmed through the comments, but if the issue is with the app windows being too large and the content within them not scaling appropriately, then wouldn’t the answer (at least temporarily) be to restrict the resolution that the apps via iframe? You’d load the default index.html that Corona produces via iframe and give the frame strict maximum width/height and aspect ratio values,
I think I have tryed it - still bug. But maybe I was doing iframe not right.
Can you make one and check out if it working?
Well, I have been setting up a page where I’m sharing my projects (it should be finalised in a few more evenings, the styles still need a bit more work, etc.), but for what I have uploaded so far, the graphics on the HTML5 demos are crisp.
You can try https://xedur.com/demos/Runners/ or https://xedur.com/demos/spyricPerformance/
I tryed, but it dosent look it works as you intended(I checked your css)
It enlarged not so much, but still - it is.
You using oversized art - to hide those art-related issues. That is an options when you have a small cartoon based art or vector style art. But not in option for bigger projects or pixel-art style.
Did you tweak the site’s CSS on your end or are you running the website at 125% scale, because the website’s max width is set to 960 pixels, i.e. your width of 1200 should be impossible unless you manually change it using your console or unless you are zooming in (on Chrome, for instance), at which point 125% times 960px becomes that 1200px.
If you are doing either of those things, then of course it won’t work like intended. If you are running the site as it, I don’t see any reason why it wouldn’t work as intended.
If you haven’t zoomed in or tampered with the css, then that is very strange indeed.
The Iframe and everything else on the page is within a wrapper that has a maximum width of 960, so a width of 1200 should be impossible. It also looks like you are using Chrome, so there shouldn’t be any issues with the browser compatibility either. I’m stumped.
The bug (or feature) here seems to be that Corona HTML5 apps seem to expand to take as much space as they are given, i.e. they don’t care about the settings in config.lua, so while that is the case, the only way to prevent them from scaling too much is to limit them via css.
Can you do me a favor, and sent two screenshots:
from your page with corona html5 content
from my page: http://theelitegames.net/tmp/html5_canvas_size_bug/
(plz dont resize images, or measure them before posting in any editor)
Thx!
Please see attachments.
In image a, the app’s size is correctly constrained to maximum of 960 pixels in width via css.
In image b, without such css, the app takes as much space on the screen as is available for it.
On your PC - yes. Others - not.
Did you tryed to publish your games anywhere?
I received a lot of negative feedback for html5 build state.
Atm html5 is not useable for any commercial purposes =(
(you welcome to prove me wrong)
I did manage to barely scrape together this one HTML5 game for Ludum Dare 45: https://xedur-spyric.itch.io/get-a-job-baby
There are also plenty of HTML5 by PonyWolf on Itchio: https://ponywolf.itch.io/
The games on Itchio do not suffer from the scaling issue as Itchio uses Iframes for them.
I agree that Corona’s HTML5 builds are not ready for commercial usage yet. There are all sorts of minor issues like fonts being misaligned, app freezing when touching anywhere outside the app window, the apps running slower than intended, and annoying crashes that should be fixed, etc. But, the HTML5 builds are in beta after all. The scaling issue, however, should be addressable with proper application of css as is evident on my GitHub pages site and Itchio.
Do the games on Itchio appear properly scaled to you? Also, could someone else chime in and let us know if this page (https://xedur.com/demos/Runners/) is set to 960 pixel width for them or is it set to something else?
Speaking of weird issues, I asked several friends to tried it out. I also tested on Firefox and Edge.
We all got 960px as the width, but depending on the browser, the fonts were rendered differently. On Edge, for instance, the “Stop all runners from reaching the finish line!” was cut off on the side as it was too long. So yeah, there are issues to work out and adopting bitmap fonts would be a start.
Works for me.
Speaking of flogging a dead thread, a friend of mine and I ran into some interesting issues concerning the Iframe size issue.
Seems that there are multiple ways of scaling content on a browser, not just Chrome’s “hold Ctrl and scroll” to zoom. There’s also a dedicated scaling option in Windows 10, which you can find via pressing “Windows + I”, then navigate to system and display. Under display, you’ve got “Scale and layout”. The recommended default is 100%, i.e. no scaling, but the very next option is 125%. There are also advanced scaling settings there, etc.
Anyway, I built and setup develephant’s HTML5 demo project to https://xedur.com/demos/windowSizeDemo/. On my friend’s screen, the size dimensions were 1200x800, but the app itself said 960x640 as they should have been. So, I also set the scaling to 125% in Windows’ display settings and the results were identical.
So, the reason why @mr.badim also had the 1200x800 was because he somewhere has/had 125% scaling set up, either in his browser or the OS. If you load the demo project that I linked and it still appears to have a width of 1200 pixels on the screen, but it reads innerWidth: 960, then that’s due to browser or OS scaling.
Now, I checked out a few Unity HTML5 games, like https://smilodon.itch.io/angrymountaingods, to see if Unity handles things differently and the answer is no. When you apply browser or OS level scaling, then the games will get blurry.
To make things more chaotic, it seems that there’s no easy way to address this issue. There are projects like https://github.com/tombigel/detect-zoom, but its readme file and stack overflow answers on the subject suggest that identifying browser zoom is very difficult if not downright impossible for all browsers, Chrome seems to be particularly tough one. Now add OS scaling on top of that and I’m not sure if there’s any way to even remotely get that information for an HTML5 app.
So, what you can do is to:
use Iframe to constrain the app’s dimensions to what you have set up in config.lua. This will make your HTML5 app look good as long as no zoom/scaling is applied, and
let your user know that if they zoom in using the browser or if they are using scaling in their OS, that the game will appear blurry, and that if they want to experience the game like you’ve intended, then they should undo the zoom/scaling and reload the page.