How to Draw Scrollable Textbox UI?

How can we draw a textbox for game messages that auto-scrolls like this one:

I want to reduce it's opacity and maybe use some sprites on it. I tried to use Wade_drawFunctions but nothing appeared, not even the wade.drawFunctions.drawRect_, I guess I'm using it wrong, what's the proper way to draw this type of rect?

Thanks in advance.

All 4 Comments

I would advise doing this via html

Wade_drawFunctions  working only in 2d mode - check use your layer webgl or not



I think krumza has a good point there: if you need to do some complex UI that involves lots of text and user input, it's probably best done in HTML if that is an option. After all, that's what HTML and CSS are made for.

You can also do it in Wade, with or without custom draw functions. But like krumza said, if it's very complex I wouldn't recommend it. 

How are you using these draw functions? I can't tell if it's right or wrong without seeing the code that you've tried.

Some draw functions only work in canvas 2d mode and not in webgl. If you look in your browser's console, wade will give you a warning if you try to use a 2d-only draw function on a webgl layer. Some functions work for both 2d and webgl, but not drawRect_ for example.

In general, you can do a scrollable text box like that with an object that contains a background Sprite - with its own opacity, which you can control like this in code:

Sprite.setDrawModifiers({type: 'alpha', alpha: 0.5});

On top of that sprite, a TextSprite with some text. You will need to call TextSprite.setMaxLines(), TextSprite.setMaxWidth(), TextSprite.setLineHeight() etc. to make it fit in your box.

And finally, separate objects for the scroll bar and the up and down buttons.

If you open the Wade editor and then the repo browser (orange icon in the top bar) and scroll down to the bottom, there are a couple of repositories that contain UI graphical elements (boxes, scroll bars and buttons) that you can use to get started with that.


I was trying to do this myself very recently, but I found that there was one thing that was missing that would have made it soooo much easier.

So here's a new feature request for you Gio: we need a function TextSprite.setFirstLine(). Without that it is quite difficult to do the scrolling bit


Very good call - I'm adding it to the list of features for version 4.1, it should be easy to do.

Post a reply
Add Attachment
Submit Reply
Login to Reply