Mojo2: Canvas.SetScissor not working properly?

Monkey Forums/Monkey Bug Reports/Mojo2: Canvas.SetScissor not working properly?

Leo Santos

(Posted 2015) [#1]

Hi,

While testing Mojo2, I noticed that Canvas.SetScissor doesn't seem to work well when the canvas is resized to a larger size than the one the app was launched. It seems to cut off drawing beyond the original canvas height (in html5) and both height and width (desktop, Mac).

In html5, you can test this by setting CANVAS_RESIZE_MODE to 2 in the MonkeyGame.html file, so that the canvas is resized instead of stretched.

In Desktop, you need to have:
#GLFW_WINDOW_RESIZABLE=True
#GLFW_WINDOW_RENDER_WHILE_RESIZING=True

To see this, simply resize the canvas to a larger size.
Thanks!
Leo.

marksibly

(Posted 2015) [#2]

Sample code?

Leo Santos

(Posted 2015) [#3]

Will do as soon as i get back home from work.
Thanks!

Leo Santos

(Posted 2015) [#4]

It seems to exhibit the issue whenever the canvas is scaled up. Here's a pretty basic code that will do it.
(in html5, it is necessary to change the CANVAS_RESIZE_MODE to 2 in the MonkeyGame.html file, otherwise the problem won't be noticeable)

Import mojo2

Class MyApp Extends App

	Field canvas:Canvas
	
	Method OnCreate()
		canvas=New Canvas
	End
	
	Method OnRender()
		canvas.SetScissor( 0, 0, DeviceWidth, DeviceHeight )
		canvas.Clear
		canvas.DrawRect( MouseX-100, MouseY-100, 200, 200 )
		canvas.DrawText( DeviceWidth + "," + DeviceHeight, 10, 10 )
		canvas.Flush
	End
End

Function Main()
	New MyApp
End

Just scale the canvas area by dragging the bottom, and the box will not be drawn beyond the original canvas size.

marksibly

(Posted 2015) [#5]

You need to change SetScissor to SetViewport.

Rendering is always clipped to the viewport regardless of scissor. The scissor just offers a way to clip stuff *within* the viewport.

By default, scissor is set to 0,0,10000,10000 which effectively disables it.

Leo Santos

(Posted 2015) [#6]

Hmmm, still didn't work! Now it stretches the drawing, try resizing the canvas in this:
https://dl.dropboxusercontent.com/u/446189/ScissorTest/MonkeyGame.html

Import mojo2

Class MyApp Extends App

	Field canvas:Canvas
	
	Method OnCreate()
		canvas=New Canvas
	End
	
	Method OnRender()
		canvas.SetViewport( 0, 0, DeviceWidth, DeviceHeight )
		canvas.Clear
		canvas.DrawRect( MouseX-100, MouseY-100, 200, 200 )
		canvas.DrawCircle( 100, 100, 50 )
		canvas.DrawText( canvas.Width + "," + canvas.Height, 10, 10 )
		canvas.Flush
	End
	
End

Function Main()
	New MyApp
End

Am I still doing something wrong?

Leo Santos

(Posted 2015) [#7]

And on Desktop, this gives the same result (stretching):

#GLFW_WINDOW_WIDTH=854
#GLFW_WINDOW_HEIGHT=480
#GLFW_WINDOW_FULLSCREEN=False
#GLFW_WINDOW_RESIZABLE=True
#GLFW_WINDOW_RENDER_WHILE_RESIZING=True

Import mojo2

Class MyApp Extends App

	Field canvas:Canvas
	
	Method OnCreate()
		canvas=New Canvas
	End
	
	Method OnRender()
		canvas.SetViewport( 0, 0, DeviceWidth, DeviceHeight )
		canvas.Clear
		canvas.DrawRect( MouseX-100, MouseY-100, 200, 200 )
		canvas.DrawCircle( 100, 100, 50 )
		canvas.DrawText( canvas.Width + "," + canvas.Height, 10, 10 )
		canvas.Flush
	End
	
End

Function Main()
	New MyApp
End

ImmutableOctet(SKNG)

(Posted 2015) [#8]

@Leo Santos: Use 'SetProjection2d' in 'OnRender', or when 'OnResize' is called. That'll resize it properly, instead of stretching to the window.

Just do this:

canvas.SetProjection2d(0, DeviceWidth(), 0, DeviceHeight())

You will still need to use 'SetViewport' with it, though.

Leo Santos

(Posted 2015) [#9]

That works, thanks.

Would be cool to make that more clear in the Docs eventually, since it used to work with a single line in Mojo 1. I totally missed the fact that setting the projection was necessary from the examples, and from a beginner's perspective the difference between SetProjection2D and SetViewport isn't clear (although I see it now). Nothing that a tutorial on Mojo2 rendering wouldn't fix!

Cheers.

Danilo

(Posted 2015) [#10]

Thanks ImmutableOctet(SKNG)! Had the same resize/stretching problem with HTML5 example yesterday.
Works now, thanks to your solution:

Method OnResize:Int()
    canvas.SetProjection2d(0, canvas.Width, 0, canvas.Height)
    canvas.SetViewport(0, 0, canvas.Width, canvas.Height)
    OnRender()
    Return 0
End

ImmutableOctet(SKNG)

(Posted 2015) [#11]

@Danilo: You should probably avoid calling 'OnRender' in 'OnResize'. I brought up 'OnResize' because you can set the projection in there, then do everything else in 'OnRender'. If you want it to redraw when you resize the application, enable 'GLFW_WINDOW_RENDER_WHILE_RESIZING' with the preprocessor. The example Leo Santos posted enables this. If you're messing with multiple viewports (Like I am), then you'll want to manually set the viewport every time you render. The projection just needs to be set when the resolution changes.

Danilo

(Posted 2015) [#12]

I was using the HTML5/JS target, that's why I didn't use any #GLFW_WINDOW_* constants.
But doesn't seem to make a difference when removing the OnRender() call, so it probably gets called automatically with OnResize()...