Trouble making a scrollable/draggable textbox

Hello! For several days now, I’ve been trying to make a textbox where the player can drag the text to reveal more of it, assuming it exceeds the height of the textbox. I’ve already gotten most things to work, except for one: preventing the player from being able to continue dragging the text once it hits the top/bottom of the box. I’ve tried multiple approaches to solving this, but keep returning to “enforce camera boundaries”, since that seems to be the general consensus on this issue.

The textbox is going to be part of a larger scene, but for the purposes of troubleshooting, I created another, very simplified scene. Here, the only objects are the textbox (named “bg”, a global object), the text, and the mask. They’re all on different layers, in ascending order.

“Drag camera” works fine on its own. But adding “enforce camera boundaries” prevents me from being able to drag anymore, and oddly seems to add padding to the left and the top? In the actual engine I have the text flush against the left side of bg, but when I preview it’s both lower down and farther right. I’ve experimented with many different boundaries for the top and the bottom, and nothing seems to work entirely. The values in the screenshot are just some of many.

I’m pretty new to game development and GDevelop itself, so please be patient if I have any follow-up questions. Thank you!

Hello and welcome. I am using drag camera extension in my current project too.

Enforcing camera boundaries is kind of tricky. You have to make sure not to constrain it too small. It should at least be the size of the screen. Then you can’t drag the layer of that camera anywhere of course. Because to be able to drag a layer, camera boundaries of that layer have to be larger than the screen on at least one side.

You can try something like this.

The left and top boundary are kept at 0. Assuming your text is somewhere 0 or below, this will keep its position relative to 0. So for instance my text is at 127x 30y. With the top set to 0, the camera will never go above 0 (Iy, 2y, 3y, etc), showing the top of my text perfectly as it was placed in the scene editor. Left is set to 0 because you don’t need the camera to go anymore rightward but it should at least be set where the screen starts.

Next the right boundary. I kept it to the SceneWindowWidth, so my text will not scrunch up into a skinny looking text. Again, in the scene editor your text object is set up correctly within the confines of 0, 0, SceneWindowWidth, so there is no need to change these (since in this project your text does not need to go any more leftward than where it is now).

The only boundary you want to change is the bottom. Because your text is set up perfectly in relation to the SceneWindowHeight, but your text might grow beyond the mask, and we can’t read anything past the mask if we can’t move TextLayer up. We have to expand the bottom boundary in order to move TextLayer up. In that case we need to set it to SceneWindowHeight, because at very least it needs to be that big. Then we can add to that the BoundingBoxBottom of Text, because we need to move TextLayer up at least enough to see the BoundingBoxBottom of Text. Basically that is equal to the Height of Text + Text.Y(). That makes it be able to go up way too far though, so we can subtract the Mask BoundingBoxBottom (or maybe bg in your case) so it will only go up far enough that all the text can be read and no further. Really just goes up the difference between the Text BBB and the Mask (bg) BBB.

2 Likes

It worked! Thank you so, so much, and thank you for explaining your logic in such detail. It really helped me understand camera boundaries better. Have a wonderful day! <3

1 Like

I’m glad my explanation helped, because I kind of botched it because I kept referring to “moving a layer” and of course, that’s just what it appears we are doing. It looks like we are “moving the layer up” but we are really moving the camera on the layer down. So I just want to add that to clarify, so I don’t confuse anyone coming to this topic with the same issue.

Also I really should have started my condition with Touch/Mouse down before the other 2 conditions, since a cursor can still be on an object when a player is not interacting with it, such as when a player has just released the mouse on an object. And for that event there is no reason for it to keep firing if the player is no longer interacting with the text.

1 Like

An update for @goblin-queen or anyone interested in the subject of this topic.

I’ve changed my project format from “No Changes to the Game Size” to “Adjust Width to Fill Screen (extend or crop)”. When I did this I had to change the right camera boundary from SceneWindowWidth to a hard coded number of the original game width the scene was designed for, otherwise my messages appeared off center. The bottom boundary is fine (possibly because I am resizing the width and not height). So just something to be mindful of if your game is resizable and this isn’t working in your project, try hard coding the values of your original scene size in one or the other of the SceneWindow expressions until it looks right.

CameraWidth()

Or

CameraWidth(“LayerName”,0)

1 Like