I don't understand the playdate.graphics.setImageDrawMode() : how to make black screen transparents?

Hello ! I am trying to draw a black background, and then some white elements.
What I want (if that's possible), is that the white color in my sprites is drawn white, that the black color is drawn transparent, and ideally that if a white color is drawn in front of another sprite that has white color, it becomes black so it can be seen no matter what (especially usefull to make sure the text is visible no matter what).

Of course, if seems that the playdate.graphics.setImageDrawMode() function is perfect for me. From what I understood, kDrawModeXOR should be the value I have to use for what I need.
First of all, I draw a black sprite that has the size of the screen to act as a black background (I never understood how to make the playdate.graphics.setBackgroundColor() work - if you can explain that too, that'be nice).

The problem is that, when I use kDrawModeXOR, even though the white color in my sprites are drawn white as expected, the black color on my sprite are drawn black and not transparent.
I have no idea if the white color would become black if in front of a white color, because with the black color being visible and not transparent, that never happens.

You can see that my knob images have a black background (and I want it to be transparent), and the elements that should be visible are white. In my code, I use gfx.setImageDrawMode(gfx.kDrawModeXOR) in a function I call once at the init.
But in the end, black is not drawn transparent but black.


Thanks a lot for your help!

Each Sprite has its own draw mode


Yes, I saw that you could change the drawMode of an individual sprite, but I'd like to change it for all of them at once if possible.
Does this mean that I need to call the function to change the drawMode every time a sprite is drawn? The thing with the sprite objects is that they draw themselves (if I understood correctly, in the gfx.sprite.update() function that I call on main) so I don't really understand how to access the precise instruction where it's drawn, to maybe change its drawMode.

I thought that, by changing the drawMode, it'll change it for all the sprites that will be drawn after the instruction untill I change the drawMode again.

I think I did not really understand how drawMode works in fact... like, when I call it once on the init() function of my main, I see that it has an effect, but not the one I'm expected when I read the documentation (for example it says that with the playdate.graphics.kDrawModeXOR, any black pixels will appear transparent, but it's not the case when I use it.

Maybe some code for a minimal example would help?

If you need to set it once for every sprite, you can set it inside your sprite constructor method.

Hi! I'm sorry I took so much time to answer, I had tons of work, I could not work on that project for the last couple of weeks.

So, to help you guys help me, I created an empty project (you can see the screens).
What I want is my object Text to be visible no matter the color of what's behind it, so basically to be drawn white when what's behind is black and vice versa.
it was my understanding that that's what playdate.graphics.setImageDrawMode() is made for, but I just can't figure how to make it work...

On the example you can see with my three screenshots, I tried to put every drawMode in the gfx.setImageDrawMode() function, and noneof the draw mode had the effect I'm looking for. So I'm pretty sure I just did not understand how this work. I guess I'm not using the function as it shoud be used... Can you tell me how I'm supposed to do? My goal is to have the class of my games that draw text (and maybe other stuff too) to be drawn black or white, depending on what's behind them...

Here are the screenshots. You can see that the text is drawn white on black background, but not black in the white background, for example... I can put a screenshot of the rectangle class, but it just draw a black rectangle so I'm not sure it's useful. Thanks again for your help, and again sorry I took so much time to answer.

You want to use either




depending on your specifics.

But because you're using Sprites you would draw to the image in the sprite normally and then set the draw mode of the sprite to XOR/NXOR.

Ooooh ok I get it! Thanks a lot!
I did not understand the difference between using the setImageDrawMode() func as a general function or as a func to be called by the object itself (I am learning OOP currently thanks to the playdate, so I'm not used to it yet).

Thanks again!

1 Like