A vertical scrolling menu with animated selection, gradient backgrounds, and scrollbar support.
[heading: "Description"]CarouselMenu provides a visually appealing vertical menu system with smooth animations, gradient backgrounds, auto-hiding scrollbar, and customizable appearance. It's used throughout the game for navigation menus.
[heading: "Key Features"] [list] * Smooth vertical scrolling * Animated selection indicators * Gradient background effects * Customizable colors and alignment * Page-based navigation support * Auto-hiding scrollbar * Visual feedback for interactions * Selection animation with glow effect [/list] [heading: "Constructor"] [table header] [ Parameter | Type | Description ] [ x | Number | X position ] [ y | Number | Y position ] [ width | Number | Menu width in pixels ] [ height | Number | Menu height in pixels ] [ config | Object | Configuration options ] [/table] [heading: "Configuration Options"] [table header] [ Option | Type | Default | Description ] [ animate | Boolean | true | Enable animations ] [ align | String | 'left' | Text alignment (left/right) ] [ bgcolor | String | '#3498db' | Background color ] [ fgcolor | String | '#ffffff' | Text color ] [ disableScrollBar | Boolean | false | Disable scrollbar ] [ disableConfirm | Boolean | false | Disable confirm action ] [ disableCancel | Boolean | false | Disable cancel action ] [ inactiveAlpha | Number | 0.4 | Alpha for unselected items ] [ activeAlpha | Number | 0.9 | Alpha for selected items (peak) ] [ margin | Object | {top:4,bottom:4,left:4,right:4} | Content margins ] [/table] [heading: "Methods"] [table header] [ Method | Parameters | Description ] [ addItem | (text, callback, data) | Adds menu item with optional custom data ] [ update | () | Processes input and animations ] [ navigate | (direction, page) | Changes selection (page=true for page scroll) ] [ selectIndex | (index) | Selects item at specific index ] [ updateSelection | () | Updates visual selection state ] [ adjustScroll | () | Adjusts scroll to keep selection visible ] [ updateScrollBar | () | Updates scrollbar position ] [ showScrollBar | () | Shows scrollbar with fade out timer ] [ hideScrollBar | () | Hides scrollbar immediately ] [ updateItemPositions | () | Updates positions of visible items ] [ confirm | () | Activates selected item with animation ] [ animateSelection | (item, callback) | Animates selection (glow + fade) ] [ cancel | () | Handles cancel action with animation ] [ animateCancel | (callback) | Animates cancel (slide out) ] [ clear | () | Removes all items ] [ destroy | () | Cleans up resources ] [/table] [heading: "Properties"] [table header] [ Property | Type | Description ] [ config | Object | Menu configuration ] [ viewport | Object | Menu display dimensions ] [ items | Array | Menu items array ] [ selectedIndex | Number | Currently selected item ] [ scrollOffset | Number | Scroll position ] [ itemHeight | Number | Height of each item (8px) ] [ itemSpacing | Number | Spacing between items (1px) ] [ visibleItems | Number | Number of visible items ] [ isAnimating | Boolean | Whether menu is animating ] [ inputEnabled | Boolean | Whether input is accepted ] [ scrollBar | Graphics | Scrollbar graphics ] [ onSelect | Phaser.Signal | Selection changed signal ] [ onConfirm | Phaser.Signal | Item confirmed signal ] [ onCancel | Phaser.Signal | Cancel pressed signal ] [/table] [heading: "Item Data Structure"] [table header] [ Property | Type | Description ] [ textContent | String | Display text ] [ callback | Function | Activation callback ] [ data | Object | Custom data for styling (bgcolor, fgcolor, etc.) ] [/table] [heading: "Signals"] [table header] [ Signal | Parameters | Description ] [ onSelect | (index, item) | Selection changed ] [ onConfirm | (index, item) | Item confirmed ] [ onCancel | () | Cancel pressed ] [/table] [heading: "Example Usage"] [codeblock javascript] const menu = new CarouselMenu(0, 30, 100, 80, { bgcolor: "#9b59b6", fgcolor: "#ffffff", align: 'left' }); menu.addItem("Play", () => startGame(), { bgcolor: "#00cc00" }); menu.addItem("Settings", () => openSettings()); menu.addItem("Exit", () => exitGame(), { bgcolor: "#cc0000" }); menu.onSelect.add((index, item) => { console.log(`Selected: ${item.textContent}`); }); menu.onConfirm.add((index, item) => { console.log(`Confirmed: ${item.textContent}`); }); [/codeblock] [footer: "© Retora 2026"]