GGJ is coming up, is HTML5 ready?

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 :smile:

I need to make this look good on phone


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.


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


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 :wink:

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 :slight_smile:

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 :slight_smile:

by the way below are the line of code that need to be replaced:


<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

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');

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 
		width = config.width * h/w
		height = config.width 

	if width*(w/width)<config.width then
		width = config.width 
		height = config.width * h/w

	if height<config.height then
		width = config.height * w/h
		height = config.height

	stage.xScale = w/width
	stage.yScale = h/height

	config.left = 0
	config.right = width = 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 

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

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