Add an image to another image

SDK Development Discussion
,
1

I have a sprite which has an image of a box, and I want to put images on the box image so the box can be shown containing various things, and the box will need to move around.

So, what I need to do is take the box image, and draw other images on it (so I don't have to create sprites for each of those things and move them around together).

It seems all of the image drawing methods go to the screen. Is there a way to draw images on an existing image?

2

Here is a function that redirects all drawing from the screen to an image: Inside Playdate

1 Like
3

Looks like playdate.graphics.lockFocus(image) is what I am looking for. Thanks @Benzalo

1 Like
4

Also consider `pushContext' which works very similarly.

The difference is that lockFocus/unlockFocus only alternate between drawing on the screen vs. drawing to a specific destination image. Whereas pushContext/popContext are more flexible: they still redirect drawing to an image, but when you "pop" back at the end, you are returned to drawing WHEREVER you were drawing before. Doesn't have to be the screen itself.

So you can have drawing set to one image context, do some stuff, push a different context, then return to the former context without any need to keep track of where that was. popContext keeps track of that for you.

1 Like
5

sorry to bump this thread, but it doesn't actually clearly state the solution to the posted question.

it took me a bit more sifting through the docs to arrive at this. sharing for others that may find their way here wondering the same thing I was -

local imageToDrawTo = gfx.image.new(100, 100)
local imageToDraw = gfx.image.new("path/to/image")
gfx.pushContext(imageToDrawTo)
	imageToDraw:draw(10, 20)
gfx.popContext()

image has a variety of draw methods you can call which normally draw to the screen, but you can rescope it to draw to a different image via pushContext. very handy!

2 Likes