I need to create an area (a simple transparent square of 150x150 pixels) inside my game screen where I can insert images that the player can scroll. Anything that exceeds the edges of the area must be cut off.
To make you understand better what I'm talking about, I leave you a simple example of a CodePen (it's not an example of a real game, but the scrolling and cutting effect is what I would like to obtain): https://codepen.io/shadeed/pen/jOMrxYO
Initially I thought of inserting a check inside the images, where I checked if the image was > or < of the upper and lower y points of the area. If the image was outside the area I set an opacity equal to 0 (so no longer visible and hidden).
But this method created two problems:
- The image didn't get a cut effect (i.e. it wasn't shown halfway when it was in a position halfway between an edge of the area)
- I use the same object also for instances that are outside the area. If I make a control on the same object I risk that any instances present in the scene would be hidden if not inside the area
Can anyone give me some advice on how to properly set up a scrolling area like this?