Picture This – DevLog 03 – Handling Images


As we discussed before in Devlog 02, each image in the game uses the same template. Whenever I create a new level I have to instance a new object from that template and just assign it a new image. There were some hurdles to take to get it to work just like that without any extra setup however.

First issue to tackle was the picture frame. In the image just above here you can see this white frame. It’s an PNG file with an alpha channel so we can place it ontop of our photos. However not all photos are the same size and since I wanted to quickly make new levels I did not want to cut and crop an image each time I added a new one.

Luckily Godot has some nice build in feature we can use which will mask any pixel which is outside of our frame.

Light2d’s masking option

In GOdot’s Light2D node we can find a mode dropdown menu. We can set this to mask.

As its texture we use the inside of the picture frame, in our case a square.

Then we set our item cull mask to the desired number. In our case this would be 2.

Now we have to set all the images we want to be influenced by this cull mask to the same channel. In our case this would be the image sprite. The Picture frame sprite we set to a different channel as we dont want the light2d to mask any of it.

Et voila, the image is now masked.

Without LIght2d Mask
With Mask

That works nicely. However there is a problem with it. What would happen if we add another image object? Exactly that will also be masked, unless we set that imageobject to another channel. THat would quickly mean that we have 15+ channels we need to manage. There is ofcourse the option to assign channels in code automatically but I chose another option.


Each node2d in Godot has a Z-index. You can see the Z index as an appartment building when viewed from above. Each floor would be a z index. The higher the number, the more likely it will overlap other floors, or in our case other nodes. We can use this index to assign to nodes to to prevent them from interfering with eachother. I chose to use this to fix my masking issue, here is how.

Because at the start of a level I gather all the present image objects and put them in a array, I know how many images I have.

Then in the image object script (remember image object has this script as its instanced from a template) I get this array and see what the index number is from that object. I add +1 to that value to make sure we don’t use 0 and I store this values as its base Z index value and set it.

In a second function I can add any number to the base value to increase it. I need to increase it with a value higher than the amount of images we can have otherwise I would still get interference from an image’s mask. In this example I just overwrite it with a hard 15 whenever the player click and drags the image. Why do we do it when the player drags? and not just from the start? Because we need to make sure that whenever the player moves an image it’s allways the highest in the z-index stack.

As soon as the player lets go of the image we reset it back to its base value so it will not longer be the highest in the stack when the player clicks another image.

And that’s it! We can now add images without having to worry about it’s size and dimensions.

Hope you enjoyed this quick and dirty devlog. See you again soon !