change resolution

flashjaysan

New member
Joined
Oct 13, 2021
Messages
4
Hi! I did some forum research but couldn't find something satisfying but I have to admit I'm not really good at finding stuff in forums.
I also searched in the mojo API but to no avail as well. I may be doing it the wrong way.

So I'd like to know how to set the resolution of a game. In BlitzMax it's as easy as calling Graphics(width, height) but with that Mojo class, I thought it would be in its constructor.
Another related question is, if I set the resolution of a game, does it sets the window size in Desktop export and the canvas size in HTML export ? Can I stretch this afterwards (for example for a pixelart like experience in fullscreen) ?
Let's take an example. If I want to set a window/canvas to 640x360, how do I do it and when ?

Code:
Strict

Import mojo


Class MyGame Extends App
    Method OnCreate()
        SetUpdateRate(60)
    End


    Method OnRender()
        Cls(100, 100, 100)
    End
End


Function Main: Int()
    New MyGame()
End
 

dawlane

Well-known member
CX Code Contributor
Joined
Jun 21, 2017
Messages
895
To set the desktop, use SetDeviceWindow.
For HTML, see the sections on HTML in the App Config Setting.
For 'filtering' on what to do with each target, e.g. desktop/html see the pre-processor section in the Cerberus Language Reference section.

You should also look at the Auto Fit example that comes with Cerberus.
 

Jimmy

Well-known member
3rd Party Module Dev
Tutorial Author
Joined
Jan 2, 2020
Messages
1,105
It's valuable to know that In HTML5 you need to set these to change the size, and you cannot
change anything afterwards programmatically as far as I know:

#HTML5_CANVAS_WIDTH=640 'Set the width of the canvas.
#HTML5_CANVAS_HEIGHT=480 'Set the height of the canvas.
#HTML5_CANVAS_RESIZE_MODE=1 '0=locked, 1=stretch, 2=resize
#HTML5_CONSOLE_SHOW=True 'Set it to False to hide the splitter and console DIV in your file.


If you use the above and put any size that matches your screens ratio into the canvas_height & width, and then click fullscreen in the browser after starting it up..you will get a stretched fullscreen. You will get a slight aa effect if you don't set the exact resolution.

You can read the resolution using two sets of commands, the first command reads the windowsize and the other one reads the screensize.
In HTML5 both will give you the same size and that will be 640x480 (default size) or whatever you set using the declarations above.

The two command-sets to get sizes programmatically are :

Code:
' You can read these in OnCreate for instance
Local sw:=DeviceWidth ' screen (same as window in html5)
Local sh:=DeviceHeight

Local ww:=DeviceWindowWidth ' window
Local wh:=DeviceWindowHeight

I think there is a 3:rd commandset that gives you a scaled version I cannot remember what command that was, it was added recently.
 
Last edited:

MikeHart

Administrator
Joined
Jun 19, 2017
Messages
3,281
From what I know, you can not change the resolution on your mobile devices. They have a fixed one.
 

magic

Active member
3rd Party Module Dev
3rd Party Tool Dev
Joined
Mar 5, 2018
Messages
215
For android search for something getDeviceWidth getDeviceHeight. This function return width in pixel of user device native pixel. you then scale your game to user resolution. some people call this virtual screen.

say you develop your game at 800x400. Then when you get user width is say 1280. you create a scale factor for your game as:
sf = 1280 / 800
Then in onRender you just scale your canvas like.. scale sf,sf

For detail you can search for virtual screen in example code.
 

oddchild

New member
Joined
Jul 18, 2017
Messages
18
thanks for your reply. i am looking through the examples and the index and not finding the virtual screen that you mentioned...
 

magic

Active member
3rd Party Module Dev
3rd Party Tool Dev
Joined
Mar 5, 2018
Messages
215
Sorry, the exact example at ..Cerberus\examples\mojo\hitoro\autofit\simpledemo.cxs
He call autoFit. The code has virtual screen setup using:

SetVirtualDisplay 1000, 500 '<-----this is your design game resolution. It will fit any user device resolution
 

magic

Active member
3rd Party Module Dev
3rd Party Tool Dev
Joined
Mar 5, 2018
Messages
215
This is my version which is more simple
Code:
Import mojo2
Global canvas:Canvas
Global VSCREENX#=1000 ,VSCREENY#=800 , FRAMERATE#=60 '<====set your game resolution
Global RATIOX:Float,RATIOY:Float

Function Main();New MyApp;End
Class MyApp Extends App
    Method OnCreate()
        SetUpdateRate FRAMERATE
        RATIOX = Float(DeviceWidth()) / Float(VSCREENX) 'calc the Ratio
        RATIOY = Float(DeviceHeight()) / Float(VSCREENY)
        canvas = New Canvas
    End
    Method OnRender()
        canvas.PushMatrix()
            canvas.Scale RATIOX, RATIOY
            '===========================================
            
            canvas.DrawRect(0,0,100,100)
            canvas.DrawRect(900,0,100,100)
            canvas.DrawRect(0,700,100,100)
            canvas.DrawRect(900,700,100,100)
            
            '===========================================
        canvas.PopMatrix()
        canvas.Flush()
    End
End
 

oddchild

New member
Joined
Jul 18, 2017
Messages
18
thanks so much! i made a bunch of letter learning games for monkeyx for syrian refugees, it was working on some devices others too small this is a big help!
 
Top Bottom