[HTML5] Mask to replace the missing window size

#1

Hi,
I am implementing a way to adapt game orientation on the fly, visualizing a game in both landscape and portrait modes, but to handle it I have to “unlock” the window size in project.xml:

previously it was set to
<window width="1280" height="720" unless="mobile"/>

now it is
<window width="0" height="0" unless="mobile"/>

so when I test the app on a desktop device I can resize the window of the browser and simulate the rotation of mobile devices by checking the window ratio (>=1 is landscape, <1 is portrait).
The problem is that when I set window width and height to 0 I am disabling the mask that normally hides what goes out of the app boundaries: is there a way to restore that “maks” without applying a mask to the whole app myself? Currently masks in Openfl can introduce some problems, so I’d like to avoid this high-level/bruteforce approach.

Thanks

#2

Oh boy, here I go again with the self promotion

You need to pick if you want to “fit” your content or have your content “bleed out”.
https://miltoncandelero.github.io/openfl/2019/03/25/resize-vs-responsive.html

#3

Well, I have already implemented all the calculations and they work perfect, but the bleeding items are not hidden with this approach: by enabling a resizable window you are unleashing the chaos of unmasked items :exploding_head:

#4

uhmm… the lazy approach? Frame it.
Masks are expensive, but adding a frame around it should be relatively easy and inexpensive. (I do have a game that does this but is unreleased yet so I cant show you :grimacing: ) (I remembered I do have something that uses a frame, maybe it isn’t the best approach but you get the idea)

This is what the super gameboy did. You could use black bars or something that makes sense in your game aesthetics

#5

They say, in case of WebGL, .scrollRect is implemented via “scissor rect” GL API, which is super-cheap operation, so you can try that instead of .mask.

1 Like
#6

Well… the frame approach could be good, yeah yeah: I just need 2 black rectangles to cover the left/right or top/bottom uncovered sides, by resizing/repositioning them at each window resize…

:thinking:

#7

Scroll rect at least in canvas created some problems similar to the mask ones. I don’t know what happens in WebGL, but the games are 95% canvas.

#8

Being that you said that you are using canvas, stay away from “beginFill” and “drawRect”. Instead make a new BitmapData(1,1,0XFF000000) (playing by memory here, make a 1px by 1px black solid rectangle) put it into a Bitmap and set width and height to your needs. You will get much better performance.

#9

My idea was to create 2 black Shapes and resize them, do you think it is more or less efficent than a 1x1 Bitmap? Resize should occur only once, unless you are sadic :sweat_smile:

#10

In my tinkering experience, shapes are less efficient to render than bitmaps.
The problem isn’t creating or resizing the shape, is the putting the shape on screen every frame.

I would go with 1x1 bitmaps resized.

#11

Oook! Thank you Milton!

1 Like