> For the complete documentation index, see [llms.txt](https://r-type-1.gitbook.io/r-type-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://r-type-1.gitbook.io/r-type-documentation/user-documentation/tutorials/new-graphics.md).

# New Graphics

## Create new animation

you can add your own models to projectiles, players, enemies, bosses and backgrounds.\
Using png format

####     1. Add your png spritesheets to the **resources** folder

&#x20;      Add their path from directory root underneath <mark style="color:blue;">**`cmrc_add_resource_library(`**</mark> \
&#x20;      only the client needs those resources, so only add it inside <mark style="color:blue;">**`function(build_client)`**</mark>

{% code title="CMakeLists.txt" %}

```cpp
    cmrc_add_resource_library(
        client-resources

        ALIAS client::rc
        NAMESPACE client

        // Add the path to your new file here
        resources/r-typesheet1.png
        resources/r-typesheet2.png
        resources/r-typesheet3.png
        resources/r-typesheet5.png
        resources/r-typesheet7.png
        resources/r-typesheet8.png
        resources/r-typesheet9.png
        ...
```

{% endcode %}

{% hint style="warning" %}
Always recompile after changing the resource files since\
cmrc loads them into the executable
{% endhint %}

#### &#x20;   2. Create new Animation::AnimationID enum

```cpp
enum AnimationID {
    Orb,
    Vortex,
    Cluster,
    Laser,
    Lost,
    SpaceshipLightblue,
    SpaceshipPink,
    SpaceshipGreen,
    SpaceshipRed,
    SpaceshipDarkblue,
    SpaceshipRGB,
    Background,
    Death,
    // Only add new enums down here
};
```

{% hint style="danger" %}
Always add your new enum at the end of the list to not change values
{% endhint %}

#### &#x20;   3. Add a new instance of Animation::Sheet&#x20;

* Go to the **`std::map<> sheets`** in src/shared/ECS/components.hpp
* Add your new **`Animation::AnimationID`** enum and an instance of the **`Sheet`** struct

{% code title="src/shared/ECS/components.hpp" %}

```cpp
static std::map<Animation::AnimationID, Animation::Sheet> Sheets = {
    {Animation::AnimationID::Orb, {"resources/r-typesheet3.png", 1, 1, 16, 16, 12, 1, 1, 0, 0}},
    {Animation::AnimationID::Vortex, {"resources/r-typesheet30a.png", 1, 3, 32, 32, 3, 1, 2, 0, 0}},
    {Animation::AnimationID::Cluster, {"resources/r-typesheet32.png", 0, 0, 259, 142, 2, 3, 1, 1, 1}},
    {Animation::AnimationID::Laser, {"resources/r-typesheet43.png", 1, 41, 48, 4, 8, 1, 2, 0, 0}},
    {Animation::AnimationID::Lost, {"resources/lost.png", 0, 0, 639, 513, 8, 1, 1, 0, 0}},

    {Animation::AnimationID::SpaceshipLightblue, {"resources/r-typesheet42.png", 1, 3, 32, 16, 5, 1, 0, 0, 1, 0.2}},
    {Animation::AnimationID::SpaceshipPink, {"resources/r-typesheet42.png", 1, 20, 32, 16, 5, 1, 0, 0, 1, 0.2}},
    {Animation::AnimationID::SpaceshipGreen, {"resources/r-typesheet42.png", 1, 37, 32, 16, 5, 1, 0, 0, 1, 0.2}},
    {Animation::AnimationID::SpaceshipRed, {"resources/r-typesheet42.png", 1, 54, 32, 16, 5, 1, 0, 0, 1, 0.2}},
    {Animation::AnimationID::SpaceshipDarkblue, {"resources/r-typesheet42.png", 1, 71, 32, 16, 5, 1, 0, 0, 1, 0.2}},
    {Animation::AnimationID::SpaceshipRGB, {"resources/r-typesheet42.png", 1, 3, 32, 16, 1, 5, 0, 1, 0, 0.2}},
    
    {Animation::AnimationID::Background, {"resources/background.png", 0, 0, 256, 64, 1, 1, 0, 0, 0, 0, 1}},
    {Animation::AnimationID::Death, {"resources/background.png", 0, 0, 256, 64, 1, 1, 0, 0, 0, 0, 1}},
};
```

{% endcode %}

the Sheet is defined as:

{% code title="src/shared/ECS/components.hpp" %}

```cpp
struct Sheet {
    std::string path;
    float startX;
    float startY;
    float frameWidth;
    float frameHeight;
    int animWidth;
    int animHeight;
    int separationX;
    int separationY;
    // adds the same frames in reverse to the animation
    bool reverse;
    double interval = 0.1;
    bool tile = false;
};
```

{% endcode %}

| struct Sheet variables:                                                                                                     |
| --------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">**`std::string path`**</mark> = path to .png file in resources folder                             |
| <mark style="color:blue;">**`float startX, startY`**</mark> = x and y position of the upper left pixel from first frame     |
| <mark style="color:blue;">**`float frameWidth, frameHeight`**</mark> = width and height of single frame in sprite sheet     |
| <mark style="color:blue;">**`int animWidth, animHeight`**</mark> =  number of horizonal and vertical frames in sprite sheet |
| <mark style="color:blue;">**`int separationX, separationY`**</mark> = pixels between two frames in sprite sheet             |
| <mark style="color:blue;">**`bool reverse`**</mark> = if true doesnt repeat the animation at the end but reverses it        |
| <mark style="color:blue;">**`double interval`**</mark> = seconds between two frames of animation                            |
| <mark style="color:blue;">**`bool tile`**</mark> =  only for backgrounds to infinitely repeat                               |

{% hint style="info" %}
the **`path`** will only be found if you have [loaded it into the client executable](#1.-add-your-png-spritesheets-to-the-resources-folder)
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://r-type-1.gitbook.io/r-type-documentation/user-documentation/tutorials/new-graphics.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.