Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Base Layer explanation and adding user's intention #44

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Base Layer explanation and adding user's intention #44

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
46f35d9
Base Layer explanation and adding user's intention
LuniMoon Mar 31, 2023
351d236
Generalising tips
LuniMoon Apr 3, 2023
652268f
Updated wiki version
LuniMoon Apr 7, 2023
a92043d
Sections re-structuring
LuniMoon Apr 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 21 additions & 14 deletions docs/gdevelop5/tutorials/follow-player-with-camera/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,36 +11,43 @@ This article includes instructions for implementing this functionality either wi

!!! tip

Learn more about [layers and cameras](https://wiki.gdevelop.io/gdevelop5/interface/scene-editor/layers-and-cameras/#cameras) and [how to keep UI objects on screen](/gdevelop5/tutorials/keep-ui-on-screen).
GDevelop [assigns a single camera per layer](https://wiki.gdevelop.io/gdevelop5/interface/scene-editor/layers-and-cameras/#cameras). It is recomended to start by placing the main objects o the "Base Layer", and add other layers after.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

o[n] the "Base Layer"
recom[m]ended

Typo

It is recommended to start by placing the main objects o the "Base Layer"

It's not, users can use the "Base Layer" for UI if they want to.

GDevelop [assigns a single camera per layer]()

It doesn't give an indication of what the linked page could be and the purpose of linking the page is not to repeat ourselves. What if layer can have several camera one day? We probably don't want to change 36 pages.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

recomended > recommended

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
GDevelop [assigns a single camera per layer](https://wiki.gdevelop.io/gdevelop5/interface/scene-editor/layers-and-cameras/#cameras). It is recomended to start by placing the main objects o the "Base Layer", and add other layers after.
GDevelop [assigns a single camera per layer](https://wiki.gdevelop.io/gdevelop5/interface/scene-editor/layers-and-cameras/#cameras). It is recomended to start by placing the main objects on the "Base Layer", and add other layers after.



## Follow an object smoothly
## Follow an object (character) smoothly

Adding the **Smooth Camera** [behavior](https://wiki.gdevelop.io/gdevelop5/behaviors#adding_a_behavior_to_an_object) to the character make the camera follow it automatically. The **Move camera closer** action can still be used to avoid a 1-frame delay.
Add the **Smooth Camera** [behavior](https://wiki.gdevelop.io/gdevelop5/behaviors#adding_a_behavior_to_an_object) to the object that will be followed.
The extension's parameters such as "catch up" and "speed" can be modified to personalize the smoothness of the camera.

!!! tip

Learn [how to install new extensions](/gdevelop5/extensions/search) by following a step-by-step guide.
Learn [how to install](https://gdevelop-wiki-git-fork-lunimoon-patch-2-gdevelop.vercel.app/gdevelop5/extensions/search/) new extensions by following a step-by-step guide.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't add this kind of links https://gdevelop-wiki-git-fork-lunimoon-patch-2-gdevelop.vercel.app/.
This is a generated link based on a version of your fork (the edits that you're doing for this PR).
Instead you should use a link starting by /gdevelop5/.....

in other words the previous version before the edit was correct.

Suggested change
Learn [how to install](https://gdevelop-wiki-git-fork-lunimoon-patch-2-gdevelop.vercel.app/gdevelop5/extensions/search/) new extensions by following a step-by-step guide.
Learn [how to install](/gdevelop5/extensions/search) by following a step-by-step guide.


### Follow an object with several cameras

## Move several layers together
Copy link
Contributor

@D8H D8H Mar 31, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is an important part of the actual solution. It should not be too far in the doc.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I trust you're right.
Tho, I read the article as someone which issue is simple (a basic, beginner's issue): I wanted to follow a single character, with a single camera, and because I come from design (we're very methodical and organised with layers) I had multiple layers with objects (background, base layer, foreground).
So, after learning that all i needed to do was to place my platform (on background) on the base layer along with my character, my issue was fixed. So, the information of knowing how to move several layers together wasn't valuable for me. That's why I moved it to the bottom (true, I've been reading with my use case in mind, so I'm ignorant of others).

I'm starting to be afraid that the article might be failing to resolve the issue (and the reason why we're doing documentation efforts): users struggle to self-diagnose the issue they're experiencing, and feel they have to "guess" from the (so perceived) isolated answers on the web.
I do wonder if the structure of the article should be:

  • Which extension to use, and how to install it (done on the first chunk)
  • Why are layers a camera, and how do they work? (I tried to address this on the tooltip)

Ending the article here could theorically cover the basics but as we've observed, there can be different intentions on this single title (I wonder if they should be H2 on the article), such as...

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Why are layers a camera, and how do they work? (I tried to address this on the tooltip)

This is the role of this other page:

  • Simply following a platformer object (keeping it simple on the base layer)

Using only one layer is not a simple solution, it's a just bad solution.

Some platforms and decorations need to be behind the player. If they are on the same layer, new platforms will be added on top of the player. The creator will need to change the z-order of the character each time there is something new and setting the player a big z-order won't cut it because new instances will always be the maxiumum z-order + 1.

Even for a very basic game, not using layers is a ticket to an UX hell.

image

It can be a new section.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. I know the existence of the Layers and Cameras wiki (it's included in one of the tooltips).
As for the layers, I see what you're saying: for changing Z positioning, I'd like to eventually merge layers with instances.
But for layer usage, like I said, I am very methodical with my layers, so I did separate them on my project as follows: backgrounds, base layer (in which I had my platform) character, and foreground. I had my character in my "character" layer, not on "base layer". After some help from y'all, I moved my character to the "base layer" but not the platform in which it was standing (which caused my character to float in the middle of the scene). My problem was there.

Tristan did suggested adding an extension called "copy camera position" (or something like that) but: 1. I got annoyed that I had to add yet another extension (I wonder if this is what a user meant by "relying too much on extensions"), 2. I didn't understand why I had to copy other camera's possitions.

So, maybe the solution is partially there: instead of giving them a "fake solution" (keeping most of the graphics on the base layer), pointing them to the "proper solution" -> creating a link to another article on why and how to copy camera position to follow a single camera. 🤷

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. I know the existence of the Layers and Cameras wiki (it's included in one of the tooltips). As for the layers, I see what you're saying: for changing Z positioning, I'd like to eventually merge layers with instances. But for layer usage, like I said, I am very methodical with my layers, so I did separate them on my project as follows: backgrounds, base layer (in which I had my platform) character, and foreground. I had my character in my "character" layer, not on "base layer". After some help from y'all, I moved my character to the "base layer" but not the platform in which it was standing (which caused my character to float in the middle of the scene). My problem was there.

This advice was to give you the shortest way to have something that works. It's fine to give this advice to someone that is lost as a temporary solution. It's not fine in an official documentation.

Tristan did suggested adding an extension called "copy camera position" (or something like that) but: 1. I got annoyed that I had to add yet another extension (I wonder if this is what a user meant by "relying too much on extensions"), 2. I didn't understand why I had to copy other camera's positions.

Layers can be copied just like this, but Tristan's extension make it easier to do. I think it's better in an extension because it avoids to have a lot of actions that almost do the same thing directly in the engine (which could be overwhelming for beginners).
image

So, maybe the solution is partially there: instead of giving them a "fake solution" (keeping most of the graphics on the base layer), pointing them to the "proper solution" -> creating a link to another article on why and how to copy camera position to follow a single camera. 🤷

The existing page has a section for this "Move several layers together".

Games can contain a lot of objects. Using several layers is a way to keep a project organized, but also to manage camera movements. All layers (except for UI layers) should likely be moved the same way when a character is followed. *Read more on [how cameras and layers](https://wiki.gdevelop.io/gdevelop5/interface/scene-editor/layers-and-cameras/#dimensions-and-angle-of-the-camera) work.*

Games can contain a lot of objects and using several layers is a good solution to organize a project. All layers (except for UI layers) should likely be moved the same way when a character is followed.
To follow a single object with different layers (each layer has a single camera), install the **[Copy camera settings](https://wiki.gdevelop.io/gdevelop5/extensions/copy-camera-settings/)** extension. It allows to copy the main camera's position to a secondary camera.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
To follow a single object with different layers (each layer has a single camera), install the **[Copy camera settings](https://wiki.gdevelop.io/gdevelop5/extensions/copy-camera-settings/)** extension. It allows to copy the main camera's position to a secondary camera.
To follow a single object with different layers (each layer has a single camera), install the **[Copy camera settings](/gdevelop5/extensions/copy-camera-settings/)** extension. It allows to copy the main camera's position to a secondary camera.


The [copy camera settings](https://wiki.gdevelop.io/gdevelop5/extensions/copy-camera-settings/) extension allows to copy a camera position to another one. The camera that follows the player can be copied to any other camera layers.
### Keep a character at the exact center of the camera
D8H marked this conversation as resolved.
Show resolved Hide resolved

To configure the camera to center on an object, go to the [event sheet](https://wiki.gdevelop.io/gdevelop5/events) and **add an Action** *(no need to set a Condition)* called **"Center the camera on an object"**.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
To configure the camera to center on an object, go to the [event sheet](https://wiki.gdevelop.io/gdevelop5/events) and **add an Action** *(no need to set a Condition)* called **"Center the camera on an object"**.
To configure the camera to center on an object, go to the [event sheet](/gdevelop5/events) and **add an Action** *(no need to set a Condition)* called **"Center the camera on an object"**.


## Keep an object at the exact center of the screen

To configure the camera to follow an object, go to the [event sheet](https://wiki.gdevelop.io/gdevelop5/events) and **add an Action** *(no need to set a Condition)* called **"Center the camera on an object"**.

After that, select the character that will be followed by the camera and check that the layer of the character is selected.
Select the object that will be followed by the camera and make sure that the layer where the object is placed is selected.

The **Action** should look like this:

![](pasted/20230316-155732.png)

!!! tip

To get closer to the character with the camera (zoom-in), use the action **Move camera closer**.


## Make a custom camera following (advanced)

To add camera inertia and a smoother transition watch [this video tutorial](https://youtu.be/yUNisggNh7s?t=84) to learn how to use the Camera Center positions on the X and Y axis, along with `lerp` expressions and formulas.

## Make a custom camera following

To add camera inertia and a smoother transition watch [this video tutorial](https://youtu.be/yUNisggNh7s?t=84) to learn how to use the Camera Center positions on the X and Y axis, along with `lerp` expressions and formulas.
## You might be interested in:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This title is meaningless.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## You might be interested in:

- How to [keep UI objects on screen](/gdevelop5/tutorials/keep-ui-on-screen).