altv-issues icon indicating copy to clipboard operation
altv-issues copied to clipboard

Published 20 hours ago • verified publisher icon altmp

Rml Spritesheet Images are invisible

Open vanlueckn opened this issue 3 years ago • 0 comments

Description of the problem

As soon as I try to use RML spritesheets instead of the SRC attribute, the image becomes invisible or white.

Reproduction steps

Include element in an RML document and load an image via a spritesheet.

Expected behaviour

The image should be visible.

Additional context

The RML-Debugbar shows that the Element is there but invisible: image

I want to use the Spritesheet for circular progress bars: https://mikke89.github.io/RmlUiDoc/pages/cpp_manual/element_packages/progress_bar.html

My rml code:

<rml>
    <head>
        <link type="text/rcss" href="base.rcss"></link>
        <link type="text/rcss" href="speedo.rcss"></link>
    </head>
    <body>
        <div class="speedo-container">
            <img sprite="speedo" width="400px" height="400px"/>
            <progress class="speedo-inner-container" direction="clockwise" start-edge="bottom" value="200" max="360">
                <div class="speedo-needle"></div>
                <div class="speedo-needle-label">80</div>
                <div class="speedo-needle-label2">KM/H</div>
                <div class="speedo-needle-label3">0.25</div>
            </progress>
        </div>
    </body>
</rml>

My rcss code:

@spritesheet
{
	src: speedometer_sprite.png;
	speedo: 0px 0px 400px 400px;
    speedo-fill: 0px 400px 400px 400px;
}

img{
    height: 400px;
    width: 400px;
}

.speedo-container{
    width: 100vw;
    height: 100vh;
    font-family: "Code";
}

.speedo-needle{
    position: absolute;
    width: 2px;
    height: 40px;
    background-color: #F65E2C;
    right: 199px;
    bottom: 38px;
    z-index: 10;
    transform: rotateZ(0deg);
    transform-origin: 0 -120px;
}

.speedo-needle-label{
    font-weight: bold;
    font-family: "Code";
    font-size: 50px;
    color: #ffffff;
    position: absolute;
    width: 400px;
    text-align: center;
    top: 130px;
}

.speedo-needle-label2{
    font-weight: bold;
    position: absolute;
    font-family: "Code";
    font-size: 14px;
    color: #ffffff;
    width: 400px;
    text-align: center;
    top: 180px;
    opacity: 0.5;
}

.speedo-needle-label3{
    font-weight: bold;
    position: absolute;
    font-family: "Code";
    font-size: 14px;
    color: #ffffff;
    width: 400px;
    text-align: center;
    top: 220px;
    opacity: 0.5;
}

.speedo-inner-container{
    position: absolute;
    decorator: image(speedo);
    width: 400px;
    height: 400px;
    right: 0;
    bottom: 0;
    fill-image: speedo-fill;
}

Operating system

Windows 11

Version

10.10 (release)

Scope

client

vanlueckn avatar Jun 10 '22 20:06 vanlueckn