Fixed Potential graphics bug with Viewport and v2020-11-15

Jimmy

Active member
3rd Party Module Dev
Tutorial Author
Joined
Jan 2, 2020
Messages
912
With the latest version (V2020-11-05) you need to add a few lines if your game uses more than one canvas.
Below are 3 lines that will help fix your game. Be aware that It might be the case that you only need to add one or two of them.

So if your game has oversized sprites or de-arranged graphics.
Try do this for every canvas in either OnCreate or OnRender

Cerberus:
Local w:Int = DeviceWidth()
Local h:Int = DeviceHeight()
allcanvases.SetViewport 0,0,w,h
allcanvases.SetScissor 0,0,w,h
allcanvases.SetProjection2d 0,w,0,h
 

Jimmy

Active member
3rd Party Module Dev
Tutorial Author
Joined
Jan 2, 2020
Messages
912
Test code


Cerberus:
#HTML5_CANVAS_WIDTH = 1440
#HTML5_CANVAS_HEIGHT = 900

Import mojo2

Function Main()
    New MyApp
End

Class MyApp Extends App

    Field canvas:Canvas 
    Field readonlyimage:Image     
    Field layer2:Canvas
    Field layer3:Canvas
    Field image2:Image 
    Field image3:Image
    Field size:Int=32
    Field wx:Int, wy:Int
    Field tilemap:Int[512*512]
  
    Method OnCreate()

        readonlyimage = Image.Load("512x512sprites.png",0,0,0)
        image3 = New Image(readonlyimage.Width,readonlyimage.Height,,,0)
        image2 = New Image(256,256,0,0,0)
        layer2 = New Canvas(image2)
        layer3 = New Canvas(image3) 
        canvas = New Canvas
        SetSwapInterval 1
        SetUpdateRate 0 
    End

     Method OnRender()
        Local w=DeviceWidth, h=DeviceHeight     
        canvas.SetViewport 0,0,w,h ; canvas.SetScissor 0,0,w,h ; canvas.SetProjection2d 0,w,0,h ; canvas.Clear 0,0,0
      
          'layer3.SetViewport 0,0,w,h ; layer3.SetScissor 0,0,w,h ; layer3.SetProjection2d 0,w,0,h ' ADDING THIS THIS LINE FIXES IT
        
          layer3.Clear ;    layer3.DrawImage readonlyimage,0,0 ; layer3.Flush
        layer2.SetViewport 0,0,w,h ; layer2.SetScissor 0,0,w,h ; layer2.SetProjection2d 0,w,0,h ; layer2.Clear 0,0,0
        layer2.DrawImage readonlyimage,0,0
      
        ' You can also do this instead to fix it. Just change 256,256 to 512,512.
        ' Where older versions of Cerberus does not care of the value below
        ' The new version demands that the value below to be (in this case) 512x512 or the graphics will rearrange & stretch.
        layer2.DrawImage image3,256,256
      
        layer2.Flush
      
        Local somesize:Int = 600
        canvas.DrawRect 0,0,somesize,somesize,image2,0,0,256,256
        canvas.Flush
    End

End

Effect :

2.png


Original graphics :

1.png


Include this to the data folder to test the code yourself, please delete it afterwards.

Edit: Image deleted.
 
Last edited by a moderator:

MikeHart

Administrator
Joined
Jun 19, 2017
Messages
3,165
Thanks for the sample. Looks like the new code is overambitious regarding individual viewports. Will look at this in detail tonight.
 

Phil7

Administrator
CX Code Contributor
3rd Party Tool Dev
Joined
Jun 26, 2017
Messages
643
I will also have a look as this is a bug introduced by me. :oops:
 
Top Bottom