How do I change the size of the screen?

Monkey Targets Forums/HTML5/How do I change the size of the screen?

Lindsay

(Posted 2014) [#1]

It defaults to 640x480 - how do I make it something else? I've seen examples elsewhere of things like #GLFW_WINDOW_WIDTH = 1024 but nothing that tells me how to do it for an HTML5 target. Thanks!

Goodlookinguy

(Posted 2014) [#2]

Go into the build folder for the game, then the html5 folder, open MonkeyGame.html in a text editor. Do a replace all 640 with whatever width and replace all 480 with whatever height. Save that file and then run the game.

therevills

(Posted 2014) [#3]

You can do it natively, within Diddy there is a command called "SetGraphics" which does it but since the new MonkeyGame.html it is not working correctly, I'll have a look tonight.

Lindsay

(Posted 2014) [#4]

OK, thanks. Until I'm a registered developer the closest I can get to testing on my iDevice is via HTML and right now it's squeezed into the top half of the window.

On a related note: is it possible to resize, or even hide, the console area?

Thanks,
Lindsay

therevills

(Posted 2014) [#5]

Again you can alter the template as suggested by GLG, look for GameConsole, just add some simple HTML to hide the div eg:

<div style="display: none;"><textarea id="GameConsole" readonly></textarea></div>

Or you could set up an Extern so you can do it in code.

ziggy

(Posted 2014) [#6]

@therevills: I did something in JungleGui to prevent the new html template from breaking my fullscreen function. Maybe it's useful to you therevills. You can see the EnableAutoSize function here: https://code.google.com/p/junglegui/source/browse/junglegui.monkey just in case it's useful.

nikoniko

(Posted 2014) [#7]

I do some compilation from ziggy code and apply to diddy based project (don't test to pure monkey project or other framework yet)

I added new function SetHTMLSize(CanvasWidth, CanvasHeight)

Function SetHTMLSize:Void(_w:Int, _h:Int, _canvasName:String = "GameCanvas")
	#If TARGET="html5"
		EnableAutoSize()
		win.eval("var canvas=document.getElementById( '" + _canvasName + "' );")
		'win.eval("CANVAS_WIDTH = "+_w+"; CANVAS_HEIGHT = "+_h+";")
		win.eval("canvas.width = "+_w+"; canvas.height = "+_h+";")
		win.eval("if( canvas.updateSize ) canvas.updateSize();")
		
	#End
End

It uses ziggy's EnableAutoSize() and win.eval() implementation. Call it in Create method as I show in the example code below.
Attention: diddy's SetScreenSize() function has a parametr aspect ration set to True (It is False by default)

Strict

Import diddy

#If TARGET="html5"
	Import dom
	Extern Private
		Global win:windowExtended = "window"
		Class windowExtended Extends dom.Window = "Window"
			Field innerWidth:Int
			Field innerHeight:Int
			Method eval:Object(parameter:String) = "eval"
		End
	Public
#END


Function EnableAutoSize:Void(canvasName:String = "GameCanvas")
	#If TARGET="html5"
		Local elem:= document.getElementById(canvasName)
		If elem <> Null Then
			elem.setAttribute("style", "");
		EndIf
		win.eval("var canvas=document.getElementById( '" + canvasName + "' );canvas.onresize=null;");
		win.eval("window.onresize=function (e) {var canvas=document.getElementById( '" + canvasName + "' ); canvas.width = window.innerWidth; canvas.height = window.innerHeight; canvas.style='outline:initial;';} ;")
		win.eval("window.onresize()")
		
	#End
End

Function SetHTMLSize:Void(_w:Int, _h:Int, _canvasName:String = "GameCanvas")
	#If TARGET="html5"
		EnableAutoSize()
		win.eval("var canvas=document.getElementById( '" + _canvasName + "' );")
		'win.eval("CANVAS_WIDTH = "+_w+"; CANVAS_HEIGHT = "+_h+";")
		win.eval("canvas.width = "+_w+"; canvas.height = "+_h+";")
		win.eval("if( canvas.updateSize ) canvas.updateSize();")
		
	#End
End




Function Main:Int()
	New MyGame()
	Return True
End

Class MyGame Extends DiddyApp
	Method Create:Void()
    
    SetHTMLSize(480, 800)
    SetScreenSize(480, 800, True)
    
    Print DeviceWidth() + " = " + DeviceHeight() 
		Start(GameScreen.GetInstance())
	End
End