How to translate within SafeArea width

Solar2D General Questions/Discussion
#1

I am trying to move display objects to left of the screen using translate. With the standard recycling of the display objects if they go beyond the screen.

for i = 1, #backgrounds do
		local b = backgrounds[i]
		b:translate(-(math.round(dX)), 0)
	end

When I start the game I see the backgrounds respecting the safeArea on iPhoneX. And they look like this:

Screen Shot 2020-08-25 at 11.48.55 AM
Screen Shot 2020-08-25 at 11.48.55 AM169Ă—626 42.7 KB

However as soon as I start moving the objects, the notch re-appears. And they seems to move with full screen width instead of the safeContentWidth.
During the move my screen looks like this

Screen Shot 2020-08-25 at 11.49.32 AM
Screen Shot 2020-08-25 at 11.49.32 AM155Ă—618 62.4 KB

How do I translate within the bounds of safearea width ?

#2

Using the SafeArea setting does not mean that nothing will show up outside of that area as you have just experienced. :slightly_smiling_face:

If you want to keep that area black as in your first image, then you’ll need to create a newContainer and dump all your display objects and groups in there. You can adjust the size of the container as you see fit, but I suppose you can use the SafeArea width and height ,and center it on the screen.

Nothing will show outside of the container’s boundaries if you insert them there so you can scroll your background and it will still look like image 1 and not like image 2.

#3

Thank you @Siu

Is there an example of how to create a container. I have am not sure how to create one, or how it will look like ?

#4

Sure, this is more or less what you would do:

local container = display.newContainer(display.safeActualContentWidth,display.safeActualContentHeight)

container.x = display.contentCenterX
container.y = display.contentCenterY

local bg = display.newImageRect("bg.png", 600, 800)

container:insert(bg)

Containers work the same as display groups, might be tricky at first to understand how it works…

When you first create any display object in a normal project setting (you didn’t change any of the default alignments) 0,0 would be at the top left of your screen, and so to center it on the screen you would use display.contentCenterX and display.contentCenterY, or any other formula that works for you.

Now, when you create the Container, it is also positioned at 0,0 by default (top left of screen), so when you insert your background image inside the Container, you would want to move the container to the center of the screen instead of the image itself. This is pretty much what the sample code above does.

For your scrolling background, you would scroll the image itself, not the Container.
And as it scrolls to the left it will no longer be visible once it reaches
(container.width*.5 + bg.width*.5) * -1
or
(-container.width*.5 - bg.width*.5)

You can read more about Containers here:
https://docs.coronalabs.com/guide/graphics/container.html

Also, I know I mentioned dumping everything in the Container, but if you’re positioning everything according to the SafeArea then technically you only need to insert your scrolling background in the Container.

Later on you might discover that filling the black area might be a good thing, but we’ll leave that for another topic. :slightly_smiling_face:

2 Likes
#5

Thank you soo much for such a great explanation. I will play with this and update.