Canvas question
Monkey Forums/Monkey Programming/Canvas question
| ||
| Hello! I thought I understood how to use the mojo2's canvases properly, but apparently not... I'm lost... So, I have this piece of code in OnCreate(): Local deviceCanvas:Canvas = New Canvas(Null) canvas = New Canvas(Null) ' set background color deviceCanvas.SetAlpha(1.0) deviceCanvas.SetViewport(0, 0, DeviceWidth(), DeviceHeight()) deviceCanvas.Clear(1.0, 0.0, 0.0) ' deal with aspect ratios Local virtualAspectRatio:Float = 1.0 * VWIDTH / VHEIGHT Local deviceAspectRatio:Float = 1.0 * DeviceWidth() / DeviceHeight() If virtualAspectRatio > deviceAspectRatio ' device width is limiting canvas.SetViewport(0, DeviceHeight() / 2 - DeviceWidth() * virtualAspectRatio / 2, DeviceWidth(), DeviceWidth() * virtualAspectRatio) Else If virtualAspectRatio < deviceAspectRatio ' device height is limiting canvas.SetViewport(DeviceWidth() / 2 - DeviceHeight() * virtualAspectRatio / 2, 0, DeviceHeight() * virtualAspectRatio, DeviceHeight()) Else canvas.SetViewport(0, 0, DeviceWidth(), DeviceHeight()) End If canvas.SetProjection2d(0, VWIDTH, 0, VHEIGHT) Scenario #1: I don't draw anything in OnRender(). The entire background is red (as "deviceCanvas" is cleared to), as I think is expected. Right? Scenario #2: In OnRender() I do this: canvas.Clear(0.0, 1.0, 0.0) canvas.Flush() Since the since of "canvas" is smaller than "deviceCanvas", I see a green area in the middle of the screen. But here is the strange thing: The edges (i.e. the areas to the left and right of "canvas") are black. I would expect them to keep the color of "deviceCanvas" which is red. Seems like "canvas" is put on top of the entire device size even though it's smaller. And it defaults to black as a color outside its size/area. It's here I need some clarifications on how this work. I have read through the mojo2 docs, but cannot find those details in there. Thanks! |
| ||
| Maybe I should clarify and be more specific in what I am asking. In scenario #1 (see previous post), the screen looks like this: RRRRRRRRRRRRRRRRRRRRRRR RRRRRRRRRRRRRRRRRRRRRRR RRRRRRRRRRRRRRRRRRRRRRR RRRRRRRRRRRRRRRRRRRRRRR RRRRRRRRRRRRRRRRRRRRRRR Where R means red color. In other words, the screen is entirely covered in red. Seems okay to me, since "deviceCanvas" clears it to red. So far so good. Moving on to scenario #2, where the same code in OnCreate() happens, but not also some code is added into OnRender(). See above post. I am just adding a clear+flush for "canvas". I am clearing it to green, just to clearly see the differences on screen. The results then looks like this: BBBGGGGGGGGGGGGGGGBBB BBBGGGGGGGGGGGGGGGBBB BBBGGGGGGGGGGGGGGGBBB BBBGGGGGGGGGGGGGGGBBB BBBGGGGGGGGGGGGGGGBBB Where B means black and G means green. Since "canvas" is has a different aspect ratio than "deviceCanvas", the "canvas" won't fill up the entire screen. But that is okay, that is expected and wanted. I want the "canvas" to be centered on the screen and either fill upp full width or height (if the aspect ratio is different from "deviceCanvas"). So the green part is okay. What I don't understand is why there is a black part on the sides of the green. I though I here would have seen red instead, i.e. red from "deviceCanvas" which is painted beneath. How come "canvas" is taking over the entire screen? And why is it filling up with black on the sides of "canvas"? |
| ||
| It's working perfectly for me. Maybe it's your letter-boxing logic? It doesn't seem quite right. Keep in mind that the official "letterbox" example is a bit confusing since it doesn't explain the purpose of the calculation order. Here's an example, it should draw green inside of red as you're expecting. |
| ||
| @ImmutableOctet(SKNG): Big thank you, again (you helped me in my last thread as well), for pointing to an example! :-) Those examples are really good, since they are easy to read and very easy to understand. You are right, maybe it's something with my letter-boxing logic. I need to review it again. (And yes, the official letter-box example is a bit confusing...) Again, thanks a lot! :-) |
| ||
| @ImmutableOctet(SKNG): Haha, I see now (on Github) that you actually created this example now! So cool, and really useful! Thanks! :-) |
   |