Is it possible to resize canvas?

[gontran]

Hello I make a screen1920x1080 then is too big for android is posible to resize the canvas and all the staff in it?

Thanks for the help

 

[Phil7]

for mojo you can use autofit in the folder examples\mojo\hitoro\autofit

 

[gontran]

Hello thanks for the answer. Ok I can doit with mojo2?

 

[Phil7]

No, I don't think it works with mojo2. But look at the example in Cerberus\examples\mojo2\letterbox
This is for desktop target, but it should work the same for android too.

Here is a simpler version of this example just streching to fill the screen.
On Html and Desktop target you can play with arrow up down and space to change the viewport size.
Be aware html does a internal stretch if you drag the splitter without changing the device resolution.

Strict

Import mojo2

' Set the parameters for a GLFW window, to make it resize visually.
#GLFW_WINDOW_WIDTH = 800
#GLFW_WINDOW_HEIGHT = 400
#GLFW_WINDOW_RESIZABLE = True
#GLFW_WINDOW_RENDER_WHILE_RESIZING = True


'Set the Android screen to landscape and let the user choose orientation for that.
#ANDROID_SCREEN_ORIENTATION="sensorLandscape"


' The size of our virtual window. This is the resolution you work with while rendering.
Const VWIDTH:Int = 320
Const VHEIGHT:Int = 240

Global viewW:Int = 200
Global viewH:Int = 100


Class MyApp Extends App

    Field myCanvas:Canvas
   
       
    Method OnCreate:Int()
        myCanvas = New Canvas()
        viewW = DeviceWidth()
        viewH = DeviceHeight()

        Return 0
    End
   
   
    Method OnUpdate:Int()  
        If KeyHit(KEY_UP)
            viewW += 10
            viewH += 10
            Print(viewW + " " + viewH)
        Endif
       
        If KeyHit(KEY_DOWN)
            viewW -= 10
            viewH -= 10
            Print(viewW + " " + viewH)
        Endif
       
        If KeyHit(KEY_SPACE)
            viewW = DeviceWidth()
            viewH = DeviceHeight()
        Endif

        Return 0
    End

   
    Method OnRender:Int()
       
        myCanvas.SetViewport(0, 0, viewW, viewH)
        myCanvas.SetProjection2d(0, VWIDTH, 0, VHEIGHT)
       
        'Here goes your drawing routine:
        myCanvas.Clear($c96d36)
        myCanvas.DrawText(VWIDTH + "x"+ VHEIGHT + " on " + viewW + "x" + viewH, VWIDTH/2, VHEIGHT/2, 0.5, 0.5)
        myCanvas.Flush()
        Return 0
    End
   
End


Function Main:Int()
    New MyApp
    Return 0
End

 

[gontran]

Hello , thanks for the example , it works perfect. In my app works too. now I need to reset my touch positions.

Thanks for the time

Regards

 

[gontran]

Hello again , ok I try to rezise the image but not works
I use this
Method OnCreate()
PantallaJuego = New Canvas
canvasWidth = 1920 ' the original size in my app
canvasHeight = 1080 ' the original size in my app
VWIDTH = DeviceWidth() 'the display in the divice
VHEIGHT = DeviceHeight()''the display in the divice


in the render
Method OnRender()
PantallaJuego.SetViewport(0, 0,canvasWidth,canvasHeight) '********** manejo de la pantalla y su dimencion
PantallaJuego.SetProjection2d(0, VWIDTH, 0, VHEIGHT) '******** la proyeccion de la imagen y que cuadre en la pantalla

and this is the image in my display
What i´m doing wrong??

 

[MikeHart]

You attached a HTML5 screenshot. But the code bits you posted above don't show anything regarding setting the size of the canvas in a html5 app. So I am not sure where the problem is.
Btw. please surround your code in [CODE] ....[/CODE] tags next time.

To set the initial size of the HTML5 canvas, add the following preprocessor directives before the Import mojo2 statement.

#HTML5_CANVAS_WIDTH=1920                 'Set the width of the canvas.
#HTML5_CANVAS_HEIGHT=1080                'Set the height of the canvas.

 

[gontran]

Sorry I attach the wrong file this is the emulator screen.

 

[MikeHart]

Maybe you missunderstood SetViewport and SetProjection2d . Don't touch SetViewport. With this command you set WHERE you want to see something. Just set SetProjection2d:

SetProjection2d(0,1919,0,1079)

 

[gontran]

Ooh my. Yes I see. Now it works. Thanks for the explanation.
Regards

 

[APC]

I am using Mojo2 and Pyro and I am updating one of my apps to with with Cerberus, it was originally developed with Monkey.
I am having a resize issue and I can't get the HTML or the Desktop to have the canvas size set to width = 1024 and Height = 768.
Did Playniax updated they Pyro Module to the latest Cerberus?
I am using this version on Mac Book Pro cerberus-v2020-05-09

Here is my code

Field cw: Int = 300
Field ch: Int = 150
Field canvas:Canvas
Const WIDTH:Int = 1024
Const HEIGHT:Int =768

Method OnCreate:Int()
        'Set the update rate to 60 frames per second
        SetUpdateRate(60)

        canvas = New Canvas

        cw = DeviceWidth()
        ch = DeviceHeight()

        canvas.SetViewport(0, 0, cw, ch)
        canvas.SetProjection2d(0, WIDTH, 0, HEIGHT)

        img = New Image(cw, ch)
        img.SetHandle(0.0, 0.0)

        dp = New DataBuffer(cw * ch * 4)

       'Pyro set up
        letterBox = prCalcLetterbox(WIDTH, HEIGHT,[0, 0, DeviceWidth(), DeviceHeight()])

        guiLayer=New prGuiLayer()
        guiLayer.SetProjection WIDTH,HEIGHT
        guiLayer.SetAmbientLight 1,1,1,1
        guiLayer.Renderer.SetClearMode 0
        guiLayer.SetViewport letterBox[0],letterBox[1],letterBox[2],letterBox[3]
End
Method OnRender:Int()
        letterBox = prCalcLetterbox(WIDTH, HEIGHT,[0, 0, DeviceWidth(), DeviceHeight()])

        guiLayer.SetViewport letterBox[0], letterBox[1], letterBox[2], letterBox[3]
        guiLayer.SetOverlay canvas

        canvas.Clear

        draw()

        canvas.Flush()

        guiLayer.Render
        Return 0

    End

 

[MikeHart]

Nothing in your code changes the actual desktop size or the canvas size in html5. DeviceHeight and Width will always report back the actual size. 640/480 on HMTL5 by default and whatever your size is on Desktop. Nothing changed between Monkey-X and Cerberus-X in that regard. Only that you can set the initial canvas size for HTML5 now before you do a 1st build.

 

[APC]

Mark, I did, and I forgot to post it in my previous code.
at the beginning I added these :

Strict
#HTML5_CANVAS_WIDTH=1024                 'Set the width of the canvas.
#HTML5_CANVAS_HEIGHT=768                'Set the height of the canvas.
Import mojo2

For some reason it is not working, when I print the

DeviceWidth()
DeviceHeight()

It always prints 640/480 my display size is 2560 x 1600.

 

[APC]

I figured it out, all my screen coordinates were using DeviceWidth and DeviceHeight, I had to change to the Virtual Width and Height.

 

[MikeHart]

For some reason it is not working, when I print the

IF you added these after a first build, they don't get processed. You have to delete the build folder to have changed settings to be effective.
I have to optimize this,so you can change these values without deleting the build folder.