Make on-screen controls follow camera

0 favourites
  • 8 posts
From the Asset Store
Supports keyboard, mouse and gamepads. Supports several gamepads at once.
  • Hi there,

    I'd like to make my on-screen controls follow the camera but also stay stationary in it's position in the frame.

    Thank you!

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • So although there's an "anchor" behavior, I find it to be pretty bad and jittery. What I do is create a "GUI" layout, rename the layer to "GUI", mark it as global, and set the "Parallax" under "Screen & zoom" for the layer to 0% x 0%. Note that this layer will override any other layout's layer named "GUI".

    Now all you have to do is add a layer called "GUI" to your other layouts and boom, fixed position GUI!

    Of course you could call it like "HUD" or "Controls", and just add that layer to any layout you want the HUD/Controls to be visible in. The import thing is that you add a layer with the same name to any layout you want the controls visible in as C3 will replace it with the global layer.

    And in case you are wondering, Parallax is supposed to allow the layer to scroll at a different rate than the rest of the layout. By setting it to 0% x 0%, you're forcing it to never scroll (giving you a stable fixed position on the screen at all times).

  • wow thank you for this! i will give it a shot right now.

    i was trying to use pin but haven't had much luck yet.

    will let you know how it goes!

  • okk i'm struggling haha i'm extremely new to construct.

    would you be able to make a demo file for me?

    i couldn't find where to mark it as global and i don't see the parallax option.

    i went to layout folder, right clicked and made a new layout called GUI but that's as far as i could go :(

    So although there's an "anchor" behavior, I find it to be pretty bad and jittery. What I do is create a "GUI" layout, rename the layer to "GUI", mark it as global, and set the "Parallax" under "Screen & zoom" for the layer to 0% x 0%. Note that this layer will override any other layout's layer named "GUI".

    Now all you have to do is add a layer called "GUI" to your other layouts and boom, fixed position GUI!

    Of course you could call it like "HUD" or "Controls", and just add that layer to any layout you want the HUD/Controls to be visible in. The import thing is that you add a layer with the same name to any layout you want the controls visible in as C3 will replace it with the global layer.

    And in case you are wondering, Parallax is supposed to allow the layer to scroll at a different rate than the rest of the layout. By setting it to 0% x 0%, you're forcing it to never scroll (giving you a stable fixed position on the screen at all times).

  • After opening the GUI layout, look at the "Layers" window (typically bottom right corner) - or Menu -> View -> Bars -> Layers Bar.

    In there there should be a single entry called "Layer 1" or something. Rename it to "GUI". Then left click on it, and the properties box should now show the layer properties. That's where you'll see the Parallax and Global options.

  • Here's an example project. Also forgot to mention to set the GUI layer to transparent.

    Use the arrow keys to move. Make sure you click run project (or have Layout 1 active when you press 1).

    https://drive.google.com/file/d/1sjCdCOOtuGa0eguPVfMh15fc9NC30TrV/view?usp=share_link

  • Oh thanks so much!

    I appreciate the time and effort! Going to give it a try :)

    After opening the GUI layout, look at the "Layers" window (typically bottom right corner) - or Menu -> View -> Bars -> Layers Bar.

    In there there should be a single entry called "Layer 1" or something. Rename it to "GUI". Then left click on it, and the properties box should now show the layer properties. That's where you'll see the Parallax and Global options.

  • I got it working! Thank you so much!

    Here's an example project. Also forgot to mention to set the GUI layer to transparent.

    Use the arrow keys to move. Make sure you click run project (or have Layout 1 active when you press 1).

    https://drive.google.com/file/d/1sjCdCOOtuGa0eguPVfMh15fc9NC30TrV/view?usp=share_link

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)