Scale on HTML builds

Hi!

When building for mobile, there’s the concept of bleeding area. The scale is set to letterbox in the config.lua file and we can add images outside the content area. Depending on the width and height and the target device, these images are then drawn.
I’ve tried to use this concept on HTML but it’s not working as expected. The content area is clamped to the width and height defined on config.lua. There’s no bleeding area.
Is it possible to enable that behavior?

Thanks in advance,

I’m not 100% sure if I’m following you, because I don’t think that mobile devices have said concept of bleeding area. A mobile device’s screen size doesn’t change after the app has launched.

That being said, if you mean that could you have it so that your map extends to 2000x2000 pixels, and if the user were to drag their window to 2000px width, then the entire map would show, but at 1000px window width only half of the map would show, then yes, you can accomplish this.

Since this isn’t supported out of the box, at least not for now, you’d need to write your own “display system” where you are determining the size and position of all display objects on the screen. At it’s simplest, this could be a single display group that you just scale and anchor to one edge of the window.

On mobile we can add images out of the content area to avoid black bars when using letterbox. I’ve been doing this for a few years. The problem is that it doesn’t seem to work on HTML5. The images out of the content area are clamped and the “regular” black bars are shown instead.

One more thing. Is there a way to remove the Corona splash on HTML5 builds? I’ve tried to disable it in the build.lua (as shows below), but the Corona splash is still there.

splashScreen = 
{
    enable = false
}

Ah, right. That’s what you meant.

Yeah, the HTML5 builds seem to hard lock in the content area on launch, unlike with Windows builds, and the black bars are guaranteed to appear either vertically or horizontally unless you enforce config.lua’s original aspect ratio.

As for the splash screen, it’s not actually in the app. That splash screen is in the index.html file that loads and launches the app. You’ll need to remove it from there.

1 Like

Thanks XeduR!