CrossCode Marquee GUI

This mod provides automatically scrolling "marquee" elements. In CrossCode, a game where GUI design is space constrained at the best of times and almost entirely manual, you may find it useful as a CrossCode modder to wrap any text that may be too long to fit in a certain space in an aesthetically pleasing scrolling box. I created this mod for CCMultiworldRandomizer because I needed to replace the text in shop buttons and quest dialog boxes with potentially very long strings without wrapping.

Demos (from CCMultiworldRandomizer)

A single Marquee text box moving automatically:

demo-one.mp4

A more manual approach, starting and stopping on hover:

demo-manual.mp4

And, finally, one with multiple moving parts:

demo-multi.mp4

How to use

For a full list of possible functions, visit marquee.d.ts.

This mod provides the following classes:

codetriangle.marquee.TextMarqueeGui

A marquee GUI that contains a simple text box.

To construct, use:

new codetriangle.marquee.TextMarqueeGui(text: string, width: number, settings?: TextMarqueeGui.Settings);

where settings is of type:

interface Settings extends sc.TextGui.Settings {
	autoScroll?: boolean;  // Whether or not to automatically scroll
	scrollSpeed?: number;  // Scrolling speed, in pixels per second
	holdTime?: number;     // How long, in seconds, to hold the marquee before going back
	holdOnReset?: boolean; // Whether or not to hold when the position is reset
}

Like a normal text box, you can setText() on it. You can also activate() and deactivate() it to stop the scrolling; while reset() sets its position to 0.

codetriangle.marquee.ItemMarqueeGui

A marquee GUI that contains a simple text box prefaced by an item icon.

To construct, use:

new codetriangle.marquee.ItemMarqueeGui(icon: string, text: string, width: number, settings?: TextMarqueeGui.Settings);

This class has the same interface as TextMarqueeGui and is functionally the same in all respects except that it has an icon out in front that does not move.

codetriangle.marquee.MarqueeGroup

Sometimes it is desirable for multiple marquees to move at the same time despite being different lengths. A MarqueeGroup helps orchestrate that.

Example usage is shown:

let marquee1 = new codetriangle.marquee.TextMarqueeGui("A long text", 100);
let marquee2 = new codetriangle.marquee.TextMarqueeGui("A very long text", 100);
let marquee3 = new codetriangle.marquee.TextMarqueeGui("A very super really long text", 100);

let marqueeGroup = new codetriangle.marquee.MarqueeGroup();
marquee1.addToGroup(marqueeGroup);
marquee2.addToGroup(marqueeGroup);
marquee3.addToGroup(marqueeGroup);

That's all there is to it! Once you add all three marquees to the UI somewhere, once the longest of them finishes scrolling, the hold timer will begin on each and then they will start scrolling back.