html5 fullscreen



  • Re: Fullscreen in html5

    I am trying to make it so users can toggle fullscreen in html5 (or any target for that matter). That way if they are on a platform like kongergate, they can get a larger screen (not sure if this is possible).

    Right now I have in my playstate:

    if (FlxG.keys.justPressed.ENTER)
    			FlxG.fullscreen = !FlxG.fullscreen;
    

    and have tried adding to my project.xml file

    <window fullscreen="true" if="html5" />
    

    as well as removing/toggling to true the existing line for html5 target:

    <window if="html5" resizable="false" />
    

    Any ideas?


  • administrators

    When the "just pressed enter" code is executed, the following is logged to the dev console:

    This is similar to the security restrictions in Flash, see here for a more detailed explanation.

    So what does "user-initiated" mean in practice? You are allowed to toggle fullscreen in the callback function of a button for instance, since the click event is user-initiated. The following works with OpenFL 8 (so HaxeFlixel dev branch only right now):

    package;
    
    import flixel.ui.FlxButton;
    import flixel.FlxG;
    import flixel.FlxState;
    
    class PlayState extends FlxState
    {
    	override public function create():Void
    	{
    		var button = new FlxButton(0, 0, "Fullscreen", function() FlxG.fullscreen = !FlxG.fullscreen);
    		button.screenCenter();
    		add(button);
    	}
    }
    

    I'm not sure why it doesn't work with 3.6.1, maybe the events were wired up differently on the OpenFL side back then. It shouldn't be too long now until a Flixel version with OpenFL 8 support is released though. :)



  • I assume that just pressed is async with respect to html events which then will not work. Perhaps you can call addEventListener on window and catch Enter or F11. That should count as user initiated as well.

    I am new to haxe so here is the js code that works.

    window.addEventListener("keydown", function(ev) {
        if(ev.key=="F11" /* or Enter if you want */) {
           var thing = document.getElementById("mything");
           thing.webkitRequestFullscreen();
           ev.preventDefault();
           ev.stopPropagation();
        } 
    });
    

Log in to reply
 

Looks like your connection to HaxeFlixel was lost, please wait while we try to reconnect.