Problem with mojo2 / images and "alpha maps"

Monkey Forums/Monkey Beginners/Problem with mojo2 / images and "alpha maps"

lukas_ (Posted 2017) [#1]

Hey! First post, hobby programmer who's not actually very good at it, blah blah ... So I've tried to play around with mojo2 a bit and came upon something I don't understand. Basically, here's what I'm trying to do: I have an image called alphaMap onto which I render stuff with different alpha values in opaque blend mode. I have another image called inkMap onto which I first render some stuff and then the alphaMap in opaque blend mode. To make sure that only the alpha values are passed on, I use SetColorMask(False, False, False, True). I want to render this inkMap onto some background image, which kind of works, but for some reason, even where the alpha values of the inkMap should be 0, it looks like there's some sort of additive stuff going on. So if the base picture for my ink is just a red plane, white background stays white, but gray turns into light red and black into red. This isn't happening if I directly render alphaMap onto the background. Not using SetColorMask also works, but kind of defies what I'm trying to do. I suppose there's an easier or more elegant way to get this result with mojo2, and I'd be grateful if someone pointed me into the right direction. Still, I don't understand why this addition is going on. Is there something about Images / Canvases I don't understand, or am I missing something else? Here's a full example code. Not very clean, but hopefully gets my point across: Import mojo2 Class MainWindow Extends App Field alphaMap:Image Field alphaCanvas:Canvas Field inkMap:Image Field inkCanvas:Canvas Field bgImg:Image Field bgCanvas:Canvas Field windowCanvas:Canvas Field drawInk:Bool Method OnCreate:Int() drawInk = False windowCanvas = New Canvas() alphaMap = New Image(DeviceWidth(), DeviceHeight(), 0, 0) alphaCanvas = New Canvas(alphaMap) inkMap = New Image(DeviceWidth(), DeviceHeight(), 0, 0) inkCanvas = New Canvas(inkMap) bgImg = New Image(DeviceWidth(), DeviceHeight(), 0, 0) bgCanvas = New Canvas(bgImg) 'Initialize a test background bgCanvas.SetBlendMode(BlendMode.Opaque) For Local x:Int = 0 Until DeviceWidth() / 20 For Local y:Int = 0 To DeviceHeight() / 20 Local value:Float = ((x + y) Mod 2) * 0.5 + 0.5 bgCanvas.SetColor(value, value, value, 1) bgCanvas.DrawRect(x * 20, y * 20, 20, 20) Next Next bgCanvas.Flush() 'Initialize a test alpha map alphaCanvas.SetBlendMode(BlendMode.Opaque) For Local x:Int = 0 Until DeviceWidth() For Local y:Int = 0 Until DeviceHeight() alphaCanvas.SetColor(0, 1, 1, Exp(-((DeviceWidth() * 0.5 - x) * (DeviceWidth() * 0.5 - x) + (DeviceHeight() * 0.5 - y) * (DeviceHeight() * 0.5 - y)) * 0.2 / DeviceWidth())) alphaCanvas.DrawPoint(x, y) Next Next alphaCanvas.Flush() Return 0 End Method Method OnUpdate:Int() If(KeyHit(KEY_ESCAPE)) EndApp End If If(KeyHit(KEY_SPACE)) drawInk = Not drawInk End If Return 0 End Method Method OnRender:Int() 'Prepare ink inkCanvas.SetBlendMode(BlendMode.Opaque) inkCanvas.Clear(1, 0, 0, 0) inkCanvas.SetColorMask(False, False, True, True) inkCanvas.DrawImage(alphaMap, 0, 0) inkCanvas.SetColorMask(True, True, True, True) inkCanvas.Flush() 'Prepare window windowCanvas.Clear() windowCanvas.SetColor(1, 1, 1, 1) windowCanvas.DrawImage(bgImg, 0, 0) If(drawInk) windowCanvas.DrawImage(inkMap, 0, 0) Else windowCanvas.DrawImage(alphaMap, 0, 0) End If windowCanvas.Flush() Return 0 End Method Method OnLoading:Int() Return 0 End Method End Class Function Main:Int() New MainWindow() Return 0 End Function I'd be thankful for any insights :)