How to create margins?

Hi,

the goal/problem is this: I need free space around the game (top, right, bottom and left) to display banner ads and/or a navigation bar. Unfortunately, these elements need to be on top of (over) the game, so I need to make sure these don't overlap any game UI elements.

For the bottom and right side it's pretty easy: I just reduce window.innerHeight and window.innerWidth by x pixels after export and the game thinks it's smaller and adjusts accordingly. No problem!

For the top and left side this works in some frameworks with marginTop and marginLeft (so moving the canvas further down or to the right). But not in Construct 3. This is where a pointer issue occurs. When you click on a button (as an example), the new (visual) position of the button is not taken into account, but the original one. Not good :)

Questions:

1.) Is there a way to solve this pointer issue after exporting? So to let the subsequently set values of marginLeft and marginTop flow into other variables?

2.) If this has to be solved in the game. What would be the most elegant method?

I tried adding a spacer. In landscape it should be on the left side (width of x pixels, full height) and in portrait mode at the top (full width, with x pixels height).

Is there a behavior that could make this easier for me?

I tried this manually:

On the one hand, I have problems setting the full width/height, and on the other hand, the value for height or width (e.g. 100px) seems to get smaller or larger when resizing. In short, it doesn't seem to work front or back.

My goal? If I have a spacer, I could position the UI element based on this spacer.

Basically, this seems to be a very complicated and time-consuming method. Isn't there an easier way?

Thanks a million in advance!

As for adding some margin outside of the canvas, I don't think Construct likes that. But construct games can run in an iframe, so you could add a custom index.html that has the game running in an iframe and add the margin to the iframe. I think that should work, but I'd not want to bother with it.

Instead adding it in the game should be very much possible and not too hard. First there's the anchor behavior construct.net/en/make-games/manuals/construct-3/behavior-reference/anchor which I found has some quirks to it, but overall is useable.

Setting the spacer manually there's a couple of things to think about:

- You can detect device orientation in the browser plugin "is portrait/landscape" construct.net/en/make-games/manuals/construct-3/plugin-reference/browser

- The plugin also has the request fullscreen action, which offers different scaling modes that you may have to take into consideration. That is likely why your bar changes size when resizing. You might want to refer to this construct.net/en/tutorials/supporting-multiple-screen-17

- There are system expressions to get the desired full width/height/etc. of the viewport. ViewportBottom(layer), ViewportLeft(layer). ViewportRight(layer), ViewportTop(layer), ViewportMidX(layer), ViewportMidY(layer), ViewportWidth(layer), ViewportHeight(layer)

- You have to pass a layer into these, so I recommend creating a layer on top specifically just for your bar. And most likely you'd want to set it up for UI-type stuff so with parallax 0,0 and scalerate 0 construct.net/en/make-games/manuals/construct-3/project-primitives/layers

WackyToaster Thank you for your quick and very detailed answer :)

An iFrame is not possible. I depend on the environment in which the game is to be shown afterwards. The navigation bar is placed on the game as an overlay by this environment, so I don't think an extra layer makes sense, correct? If the navigation were in-game, then yes. But only space should be created and the UI elements should be pushed further down (or to the right) in order to avoid the overlap mentioned.

I have now created a sprite "Spacer" (1x1) and positioned it in the top left corner via "Anchor" (thanks for the confirmation). In theory it now behaves as it should, but I still have problems with the size. Full width and height works now, but how do I ensure a constant height/width of 100 pixels?

If I simply use "Set size" with the value 100, then the value changes proportionally to the window size:

If I make the window smaller, this value also becomes smaller. How can I make 100px fixed?

Thanks :)