# How to create the LEVELS with EDITOR

Open Game Scene: Go to <mark style="color:green;">Tools</mark> -> <mark style="color:green;">SpotTheDifferencesGameToolkit</mark> -> <mark style="color:green;">Game scene</mark> OR use a hotkeys <mark style="color:orange;">Alt+2</mark>

<figure><img src="/files/Zs4nioz5GC3JXL2jSf0J" alt=""><figcaption></figcaption></figure>

1. Go <mark style="color:green;">Tools</mark> -> <mark style="color:green;">SpotTheDifferencesGameToolkit</mark> -> <mark style="color:green;">Level Editor</mark> -> <mark style="color:green;">Editor</mark> OR use a hotkey <mark style="color:orange;">C</mark>

   <figure><img src="/files/ROH2DUnmEXIQt0n2H9AG" alt=""><figcaption></figcaption></figure>

2. The **Level Editor** tab is used to set the level number, background, enable/disable the timer, and create a new level. All other level settings are configured in the **Hierarchy** tab.

   <figure><img src="/files/JPYcIOAiDBw8MrmOKzlQ" alt=""><figcaption></figcaption></figure>

3. **Create a new level** by clicking the **"+"** button.<br>

   <figure><img src="/files/6QRwqLG3bEjmLIqpGLpU" alt=""><figcaption></figcaption></figure>

4. **Set the desired background** for the level.

   <figure><img src="/files/WgHbzutAwcKUg8MZfkbu" alt=""><figcaption></figcaption></figure>

5. This background will also be displayed in the Play Menu

   <figure><img src="/files/yuOqo4JweECcEOHGsB2f" alt=""><figcaption></figcaption></figure>

6. **Specify whether the level is timed.** If so, set the required number of seconds.

   <figure><img src="/files/PQuDSPWkmHA9OgMat3a7" alt=""><figcaption></figcaption></figure>

7. For example, let's create Level 2. Click the **"+"** button. You'll see the same scene as in the very first level. This is the default scene, which we will modify.

   <figure><img src="/files/7bIm0E7ZCjAj4uroMWx1" alt=""><figcaption></figcaption></figure>

8. First, let's add a background for our level (it will also be displayed in the Play Menu).

   <figure><img src="/files/QWuYeTpRARJXiCBjPUqy" alt=""><figcaption></figcaption></figure>

9. We can make this a timed level, so check the box and set the time to 60 seconds, for example.

   <figure><img src="/files/nZ5PIUE5rF7pxCQwfGyN" alt=""><figcaption></figcaption></figure>

10. To add an object to the scene, go to the **Hierarchy** and click the **"+"** next to the word **Level**.

    <figure><img src="/files/51iHnlYS4uqTIORXrG4P" alt=""><figcaption></figcaption></figure>

11. A default **Stage Object** will be created.

    <figure><img src="/files/5fJroPAC832hMW9k9uMv" alt=""><figcaption></figcaption></figure>

12. Now, let's go to the folder with textures for this level. Since this is an example of creating Level 2, go to <mark style="color:green;">**Sprites**</mark>**&#x20;->&#x20;**<mark style="color:green;">**Backgrounds**</mark>**&#x20;->&#x20;**<mark style="color:green;">**background-2**</mark><mark style="color:green;">.</mark> Here you'll find all the objects we'll use to create the puzzle.<br>

    <figure><img src="/files/CBnuybWQ4Yv10xkW6kLL" alt=""><figcaption></figcaption></figure>

13. Now, we need to drag the necessary sprite into the **Hierarchy**, inside the **Stage Object** (drag the images one by one).<br>

    <figure><img src="/files/iTvBTGQcIdU1xbvjf6pC" alt=""><figcaption></figcaption></figure>

    For example, these two sprites will be used as one element (an abstract painting in a frame), but they will look different on each screen. On the first screen, we will see **art-1**, and on the second, **art-2**.

14. Rename the **Stage Object** to something convenient for you, for your own ease.<br>

    <figure><img src="/files/Ig2o6XN8qHPAEN3qJfIP" alt=""><figcaption></figcaption></figure>

15. Initially, any added image appears on the first screen and in the workspace where we place all the objects.<br>

    <figure><img src="/files/jAaNzGiOuS6EPSrXrd0w" alt=""><figcaption></figcaption></figure>

16. In the workspace, place both paintings inside the frame.<br>

    <figure><img src="/files/AOGt44wBq9FAI3CAqDBI" alt=""><figcaption></figcaption></figure>

17. Next, go back to the **Hierarchy** and specify which picture should be shown on which screen. **1** stands for **Screen 1**, and **2** stands for **Screen 2**. Just click the number to change its value.<br>

    <figure><img src="/files/Bwuo9uxdjCjceM8HuQgU" alt=""><figcaption></figcaption></figure>

    Let's see how it looks. It works! We can see the first image on Screen 1 and the second image on Screen 2. They look very similar, but they are still different—take a closer look.<br>

    <figure><img src="/files/9cgLaRblp4WAMwG0QACH" alt=""><figcaption></figcaption></figure>

18. Let’s consider a scenario where the image will be visible on only one screen. To do this, create a **Stage Object** again by clicking the **"+"** button. Let’s say it’s a plant leaf in a pot. Drag the leaf into the **Stage Object**, rename the object. In the workspace, position it against the background. Then, in the editor, specify which screen you want this object to appear on. Let’s make it **Screen 2**. Perfect!<br>

    <figure><img src="/files/45A7C82otK6TIq1FrjPI" alt=""><figcaption></figcaption></figure>

19. Now, let’s look at a scenario where one object overlaps another. It’s better not to do this, but if needed.\
    ![](/files/zsqrtCSA3PjkuqcSgu3p)<br>

    Go to the **Inspector** and change the **Order in Layer** to a lower or higher number to adjust the layer.

    <figure><img src="/files/DT6fe2o53DegZhsWzDKC" alt=""><figcaption></figcaption></figure>

20. Repeat these steps for all the planned objects.

21. Click **Play** to test the level.<br>

    <figure><img src="/files/mehfiJWUyYhXwM9caXXb" alt=""><figcaption></figcaption></figure>

22. You can delete a level in <mark style="color:green;">**Asset**</mark>**&#x20;->&#x20;**<mark style="color:green;">**Scenes**</mark>**.**<br>

    <figure><img src="/files/al2OnGS0EQ80NHQIGN7p" alt=""><figcaption></figcaption></figure>

    And in <mark style="color:green;">**Assets**</mark>**&#x20;->&#x20;**<mark style="color:green;">**Resources**</mark>**&#x20;->&#x20;**<mark style="color:green;">**Levels**</mark><br>

    <figure><img src="/files/TiKFpA0LsOzimR6PRcyI" alt=""><figcaption></figcaption></figure>

23. To test the whole game, go to the **Main Scene**, then go to <mark style="color:green;">**Tools**</mark>**&#x20;->&#x20;**<mark style="color:green;">**SpotTheDifferencesGameToolkit**</mark>**&#x20;->&#x20;**<mark style="color:green;">**Game scene**</mark> OR use the hotkey <mark style="color:orange;">**Alt+1**</mark>. Then, press **Play** in Unity.

24. To reset settings, go to <mark style="color:green;">**Tools**</mark>**&#x20;->&#x20;**<mark style="color:green;">**SpotTheDifferencesGameToolkit**</mark>**&#x20;->&#x20;**<mark style="color:green;">**Reset PlayerPref**</mark>

***

🎥 For a more detailed overview, watch our [VIDEO](https://www.youtube.com/watch?v=15LgQ6llv4k) guide

❓ If you have any further questions, don't hesitate to ask us. We will be happy to help you understand the project on [DISCORD](https://discord.gg/dE3WS8d)\
\
**💖** Thank you for choosing our Assets! **💖**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.candy-smith.com/main/spot-the-differences-game-toolkit/how-to-create-the-levels-with-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
