20d ago

How to get artboard set to hug width and height during runtime

Hey, I'm using the WebGL2 renderer for my game. I've got a tooltip artboard that is set to hug it's contents so it will change based on the size of the text. This works well normally, but I want to render it to the left of the mouse if it's close to the edge of the screen or above if it's below. The artboard scales to fit the text in the editor, but the artboard object always reports the size I set it to. Is there a way to get the size that it hugs to for the layout in code?

And this is my JavaScript code:

this.height = this.artboard.height;
            this.width = this.artboard.width;

            // ensure tooltip is on screen
            if(Game.VisualMouseY + this.height > window.innerHeight) {
                this.stateMachine.offsetTransform.ty = Game.VisualMouseY - this.height;
            }
            if(Game.VisualMouseX + this.width > window.innerWidth) {
                this.stateMachine.offsetTransform.tx = Game.VisualMouseX - this.width + this.xOffset;
            }

            this.renderer.save();
            this.renderer.transform(this.stateMachine.offsetTransform);

            this.stateMachine.advance(elapsedTimeSec);
            this.artboard.advance(elapsedTimeSec);
            this.artboard.draw(this.renderer);
            this.renderer.restore();

In this case it always returns 491 and 221 even though it has shrunk to fit the size of the text.

2 replies

17d ago

I'm not actually sure. This has come up a couple of times, but it's trickier than it sounds. There are two main problems:

The Rive canvas fills the space of its parent div, not the other way around.
If you double the width of your div, the canvas will match that new width. If the artboard changes width, it will do its best to fill the space of the div, but can't change the div's size.
When your element is set to hug, the W value doesn't actually change. That means that even though you can get the width or bounds at runtime, they may not be accurate.

What's your timeline on this project? I know how to do it with data binding, but it's currently only in early access and the runtimes aren't supported yet.

16d ago

Hmm, sounds like there isn't a great way right now then until binding. That's probably fine, I would like to have a public demo by the end of the month, but right now it just offsets more than it needs to when the mouse is close to the edge of the screen. Most of the time it works fine and it's still always readable so I'll probably just leave as is until data-binding is available. Thanks Lance!