Global Game Jam takes place at the end of this month, and I was curious if the HTML5 capability of Corona is in a “good enough” state that I could take a crack at it for the jam?
Any specific issues or gotcha I should look out for?
I did a Corona HTML5 project for last Ludum Dare and apart from almost messing up with Lua file system (not a HTML5 specific issue), I had no issues then. The only issue that comes to mind is that apparently the images are rendered blurry (due to upscaling iirc) for HTML5.
Hi @XeduR
Any luck in enhancing blurry HTML5 graphics without having to use browser zoom and zoom out?
I would consider solving this a free ticket to paradise 
I need to make this look good on phone
http://fruits-001-site10.gtempurl.com/menues.html5/index.html?gameid=1
Thanks
XeduR previously wrote in some topic that he found out that Solar2d for html ignores the canvas resolution settings and that it works in low resolution by default, as far as I can tell, my solution fixes this problem + we get the adaptability of the project.
2 Likes
i did not yet test your code on mine … but seems it’s way better than what i have…
I have attached snapshots for your portal on 100% zoom and 25% zoom … not much of a difference … but text is more blurry
But this seems great … i will test on my code and let you know
Thanks.
I usually do a zoom lock for a web game so that the user does not have the opportunity to change it. It is also a good practice to create a font twice the size that you need and reduce it by 0.5 scale, so the density of the text increases and the text will be clearer.
1 Like
You are a genius
Everything looks much better …
I applied your code to mine … it is working perfectly but frankly speaking I’m still having some problems related to positioning my objects as I don’t really understand your code yet!
Some objects are placed where they should be … while othersome is shifting significantly … I think I have to properly apply the resize function to those objects … which doesn’t seem to be easy frankly speaking … but I will keep trying … at least everything looks much better … text and images
Thanks man.
1 Like
The canvas is centered and, accordingly, the reference point is located at the specified location in the image, the coordinates of the edges and dimensions of the window are in config variables that are updated when the window is resized.
local config = {
-- Project Size
width = 640,
height = 1136,
-- Autoupdate variables
left = 0,
right = 0,
top = 0,
bottom = 0,
contentWidth = 0,
contentHeigth = 0
}
I can make another sample project if needed 
upd:
The function states that after all calculations, if any object has the onResize method, it will be executed. This is necessary for positioning images along the edges of the window, based on this, you can write the automatic behavior of interface elements.
@XeduR @vlads
I have a big announcement to make, I’m so Happy and excited … I’m celebrating right now literally 
But First of All:
Thank you very much @Qugurun … your code is very important for me specially when I’m creating an app that has to be accessed via a laptop or desktop web browser, because I can’t just tell all users to zoom out to 25%, and i can’t force it programmatically
The project I’m working on, has quiet a few objects, and applying your code to it from the beginning would be very easy, but since i already wrote the code and positioned the objects, and had to hard code a few stuff (because of Arabic Characters that gives you a hard time aligning) so applying your code was something inevitable because i need clarity and i don’t want blurriness, but I was worried that it will take me a long time to go back to each object and I was more worried that a few stuff might not work, so i said i will start tomorrow line by line…
Buttttttt, i was playing with my phone, and opened my website, and opened the browser’s settings and hit the button Desktop Site … that was heaven … the website became crystal clear as if i was working on a laptop and zoomed out to 25% !!! or almost as good as an android app.
I was half happy … to be fully happy i had to make sure that this can be set programmatically, and it has to work on all browsers, you can’t just ask users to go and set it as a desktop site … just like you can’t ask them to zoom out
Just one line of HTML code needed to be modified in index.html and there you go
Finally … i have been waiting for years for this…
This only solves the problems for HTML5 Apps that need to be accessed via phone which is my case here … but for laptop or desktop browsers, your code enhances the graphics but doesn’t reach the level of zooming out
Just wanted to share with you all, because i keep giving Solar2D guys a hard time for this
by the way below are the line of code that need to be replaced:
Original:
<meta name="viewport" content="width=device-width, initial-scale=1.0">`
Replace with:
<meta name="viewport" content="width=1024">
1 Like
Since the configuration is periodically polled, you can change the width and height to larger values at the right time, for example, by clicking on a button to make the entire content smaller. I am glad that you are doing well.
You can write a function that would set the dimensions as a percentage of the key dimensions.
function set_config_size(width, height, value)
config.width = width/100.0*value
config.height = height/100.0*value
onResize()
end
set_config_size(640, 1136, 125)
This will increase the internal resolution of the game, thereby reducing the size of the content.
If you don’t need this kind of adaptability to access the entire screen area, you can use these settings instead of my solution. This will allow you to change the size of the canvas, which will also improve the clarity of the image.
window = {
defaultViewWidth = 1136,
defaultViewHeight = 640
},
application =
{
content =
{
width = 1136,
height = 640,
scale = "letterbox",
fps = 60,
},
}
If my previous solution does not suit you, then in order for you not to make edits to html every time, you can do it programmatically.
local browser = require("browser")
if system.getInfo("platform") == 'html5' then
print = browser.log
-------------------------------------------
-- set content width
local code = [[
let viewportMeta = document.querySelector('meta[name="viewport"]');
viewportMeta.setAttribute('content', 'width=1024');
]]
browser.JS(code)
-------------------------------------------
end
If you don’t need a mailbox, then you can change the code, and the origin of the coordinates x0 y0 will always be in the upper left corner.
function onResize()
local width = config.width
local height = config.height
local w = browser.width()
local h = browser.height()
if w > h then
width = config.height * w/h
height = config.height
else
width = config.width * h/w
height = config.width
end
if width*(w/width)<config.width then
width = config.width
height = config.width * h/w
end
if height<config.height then
width = config.height * w/h
height = config.height
end
stage.xScale = w/width
stage.yScale = h/height
config.left = 0
config.right = width
config.top = 0
config.bottom = height
config.contentWidth = width
config.contentHeight = height
for i=1, stage.numChildren do
local child = stage[i]
if child.onResize ~= nil then
child:onResize()
end
end
end
For text, you could change the standard behavior of creating text and not prescribe a scale change every time.
local _display_newText = display.newText
display.newText = function(text, x, y, font, size)
local result = _display_newText(text, x, y, font, size*2)
result:scale(0.5, 0.5)
return result
end
local myText = display.newText( "Hello Qugurun!", config.width/2, 200, native.systemFont, 36 )
This is really helpful. because every time you build you overwrite the previous files . thanks
My biggest problem with text is i have lots of it, and my app is bilingual … it is a business app not a game, that’s why it has so many text … and positioning text objects is relative and depends on each other. like lateral scroll views of menues … and when you have Arabic Words … anchoringY to 0 does not work as it expected, so i anchorY to 1, and when exported to HTML 5 it shifts and trims in a weird way … that’s why i have to add hardcoded offsets and stuff like that … and when you scale objects, the scale factor has to be taken in consideration when the object size is used to position the following object size (i mean you have to divide or multiply by the same scale factor)
I tried scaling up, it does enhance the text. I will use it in my future Laptop browser apps.
Thanks man