Hi, still on my quest to adapt my game to html5.
The game itself works now, but I need to work on the integration to the webpage.
1/ I want the game to keep running in the background.
It’s not design to be able to jump frames.
Should I do it within the OpenFl project, or should I have an extra script running on the page to call requestanimationframe?
2/ I want my game to behave like flash, when set to no scalemode.
I want my canvas to be resized, and to trigger an event, not scaled.
Is it possible?
Lime uses request animation frame on HTML5, by “background” do you mean when the user changes tabs? It will stop dispatching events at that point, perhaps you can pause the game entirely (like Actuate.pauseAll) then resume when the user returns?
Do you mean you want it to resize to the window size (so canvas width == window width) or do you mean you want a set canvas size, with CSS scaling to match the window size?
Thank you for your answers.
Well, my game is multiplayer, that’s why I don’t want to pause anything…
But well, I’ll deal with it. I’ll just pile the events and make them displayed in one frame…
Or maybe can I base myself on timeouts when I detect no more frames…
I’ll give it a try.
As for the resizing, I want the canvas width updated to match its container ( window or anything ), not the canvas scaled ( that is, I believe, the default behavior ). To make it short: I want a pixel on the canvas to be a physical pixel.
Lime is designed to either scale the canvas to match the parent element size using either width/height or CSS scale with letterboxing, depending on whether your window width/height is set to fullscreen (0) or not.
The default for HTML5 is full, so it scales to match the parent DIV. Add <template path="templates" /> and “templates/html5/index.html” with your own custom page. The parent element you use for embedding will define the project size, and it sounds like you want the default width/height=0 behavior to match the parent element size 
Indeed, it’s working.
Thank you very much.
For those passing by and looking for answers, the template path should be
templates/html5/template/index.html
( when in doubt, check the templates folder in the openfl library and just set the same local path as whatever file you want to override )
And then set 0 for width and height in the line:
lime.embed (“openfl-content”, 0, 0, “::WIN_FLASHBACKGROUND::”);
It will change the canvas size and triggers the resize event whenever the container changes size.
It doesn’t trigger a redrawing of the scene thought, and whatever was outside the view before won’t be visible. That shouldn’t be too complicated to deal with.
@singmajesty it would be nice if openfl was able to switch behavior depending on the stage.scalemode.
1 Like
Do you mean that it triggers a RESIZE, but waits to dispatch an ENTER_FRAME so your code can handle the change?
I’ve thought about stage.scaleMode, I think the current behavior is pretty good as a default, I suppose I’ve been afraid of weird issues with coordinates or other problems, but there’s a pull request for scale mode that might solve that (not sure)
I don’t know it it is related to the enterframe event, I redraw only when necessary, not every frames, so it doesn’t matter if it is triggered or not.
I have a sprite in which I draw using drawtiles.
It is centered into the screen, but it’s shadow goes up to the edge.
When the resize event is triggered, I recenter my element, but its shadow isn’t redrawn. So if the new area is bigger, you see the shadow cut where the canvas border used to be. Next time the draw function is called again, everything is redrawn considering the new dimensions.
I guess it’s just a matter of throwing a flag somewhere for redrawing. But as I said I can do that myself.
As for the rest, everything seems to work fine. No problem with coordinates, no glitches… You should consider it.
