Fullscreen In Browser Problems

(fizzd) #1

This is sort of a last minute emergency, (deadline for IGF Student Competition in a day’s time!), but I’ve been having problems getting Flashpunk in full screen in browsers. It works fine in the Projector / stand-alone .exe, but in the browser, it just causes the game to hang.

I have now spent close to 2 hours trying different things I’ve found online. If anyone has done this successfully in Flashpunk before, please help!

Here is the code I’m using to do it in the Projector:

public function togglefullscreen():String
{
	if (FP.stage.displayState == "normal")
	{
		FP.stage.displayState = "fullScreenInteractive";
		FP.stage.scaleMode = StageScaleMode.SHOW_ALL;
		FP.stage.align = "";
		return 'fullscreen small';
	}
	else //if Fullscreen
	{
		if (FP.stage.scaleMode == StageScaleMode.SHOW_ALL)
		{
			FP.stage.scaleMode = StageScaleMode.NO_SCALE;
			return 'windowed';
		}
		else
		{
			FP.stage.displayState = "normal";
			return 'fullscreen';
		}
	}
}

The main problem afaik is the security in browsers; apparently in order to toggle full-screen, it needs to come from user input. (It does already come via user input, but I guess it’s because I’m using Flashpunk’s Input.check that Flash doesn’t recognize it as user input)

Considering the above, I tried following a second tutorial with this HERE. This time, in the browser nothing happens, but in the projector I get a ‘Full screen not allowed’ error!

(Yes i DO have full screen allowed under settings, and yes in my html file I have the parameter’s correctly, unless this code is wrong:

	<title>Rhythm Doctor</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="language" content="en" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<param name="allowFullScreen" value="true" />

	<param name="allowFullscreen" value="true" />
	<param name="allowFullScreenInteractive" value="true" />
	<script src="js/swfobject.js" type="text/javascript"></script>
	<script type="text/javascript">
		var flashvars = {
		};
		var params = {
			menu: "true",
			scale: "noScale",
			allowFullscreen: "true",
			allowFullScreen: "true",
			allowFullScreenInteractive: "true",
			allowScriptAccess: "always",
			bgcolor: "#804040"
		};
		var attributes = {
			id:"RhythmDoctor"
		};
		swfobject.embedSWF("RhythmDoctor.swf", "altContent", "100%", "100%", "10.0.0", "expressInstall.swf", flashvars, params, attributes);
	</script>
	<style type="text/css">
		html, body { height:100%; overflow:hidden; }
		body { margin:0; }
	</style>
 </head>  ```


(as you can, well should, see, I found both 'allowsFullScreen' and 'allowsfullScreen' on Adobe's website, so i just included both parameters as a precaution.)


So, my conclusion is I think this is due to FP.stage and stage, and how they work or something?

Thanks for reading!
(Jacob Albano) #2

Try surrounding your HTML code with three backticks, like so

```
<html here>
```

It’ll show up like this:

<html here>

Then we can all help you out more easily. :slight_smile:

(fizzd) #3

There we go :smile:

An alternative to this problem is simply disabling the fullscreen button if it is in a browser but not if it is in a projector. Which is my current solution right now, using Capabilities.playerType/

(Abel Toy) #4

You need to use an event listener so it’s treated as user input.

FP.stage.addEventListener(KeyEvent.KEY_DOWN, onFullScreen);

protected function onFullScreen(e:KeyEvent):void
{
	if(e.keyCode == Key.F)
	{
		toggleFullscreen();
	}
}```
(Jacob Albano) #5

I like as3/Flash a lot, but this kind of thing really makes me cringe. It’s so…impure feeling, that a function should arbitrarily fail because it wasn’t called in a certain context.

(Zachary Lewis) #6

Fullscreen will only work in response to user input to prevent malicious use of fullscreen. That’s why Flash ads don’t automatically go fullscreen once they load.

(fizzd) #7

Thanks AbelToy, that worked perfectly!

Well there was one niggle which isn’t really to do with the problem, but just in case anyone faces something similar:

Basically in order to have this F-for-fullscreen function implemented in all worlds, I had all my worlds extend a CommonWorld, which in turn extended Flashpunk’s World class.

In this CommonWorld, I put the addEventListener function in the ‘added’ function, together with the rest of the code in the corresponding functions.

The problem is that event listeners don’t get removed between worlds. So in effect every time I went to a new world, the fullscreen function would be called an additional time, every time I hit the F button.

To solve, I just had a static ‘hasaddedlistener’ function which sets itself to true once the listener has been added, and this condition is checked for before adding the listener. So in effect, there is only one listener for this Fullscreen function and it doesn’t get created multiple times.

Problem solved. Strange thing though: in my particular game I wanted fullscreen to also be toggleable from a menu selection. So this time, in my MenuWorld (which also extended CommonWorld), I added a second event listener for the Enter key, and moved my menu selecting function from the Input.Check in update, to a separate function called by this listener.

And for some reason, THIS listener gets destroyed every time you move out of the world! And so this listener had to just be created on the world.added every time the world changed to the MenuWorld.

Why is there a difference? Who knows!

(christopf) #8

Hi, i’m encountering the same problem with the multiple event listeners but cant solve it with the static function. If you still active in this forums can you maybe post your static function code?

(Zachary Lewis) #9

You can add this event listener in your main class once.

public class FullscreenGame extends Engine
{
  public function FullscreenGame()
  {
    super(800, 600);
    FP.stage.addEventListener(KeyEvent.KEY_DOWN, onKeyDown);
  }

  private function onKeyDown(e:KeyEvent):void
  {
    if (e.keyCode == Key.F)
    {
      toggleFullscreen();
    }
  }

  override public function init():void
  {
    super.init();
    FP.world = new GameWorld();
  }
}
(christopf) #10

yay, nearly simultanously a friend of me (VoEC from here), gave me the same advice. i changed it but my problem was i put something directly behind the else. nevermind, its working now perfectly. thanks ((:

(christopf) #11

It’s me again! :blush:

i did upload my swf to itch.io but once its in the browser the fullscreen isnt working. it doesnt hang as it did with @fizzd but it isnt happening anything either.

this is my code: (in standalone it works super)

        public function main()
        {
            super(480, 300, 60, false);    
        }
        
        override public function init():void
        {    
            super.init();
            
            FP.stage.scaleMode = StageScaleMode.SHOW_ALL;
            FP.stage.addEventListener(KeyboardEvent.KEY_DOWN, clickclick);
            FP.world = new menu;        
        }
       
        protected function clickclick(e:KeyboardEvent):void
        {
            if (e.keyCode == Key.O) {
                toggleFullscreen()
            }
        }    
        
        protected function toggleFullscreen():void
        {
            if (FP.stage.displayState == "normal")
            {
                FP.stage.displayState = "fullScreenInteractive";
                FP.stage.align = "";
            }
            else
            {
                FP.stage.displayState = "normal";
            }
        }

I also checked my index.html settings and fullscreen should be allowed. you have any idea?

//edit: I saved my game now as .air because in the declaration is written that fullscreen interactive is only working with air (if i read right). So i guess it isnt possible to play a swf in browser and enable a fullscreen out of it unless its a non interactive movie.


a little other question:

is there anyway to scale easily the whole game by 2? (ive seen a scale param in the index.html)


Found it: FP.screen.scale = value:Number;