ScoreDisplayNumberAndStar

ScoreDisplayNumberAndStar (from scenerystack/vegas) is an HBox that renders a score as "N ★" — a number followed by a single star icon. When the score is 0, the number is omitted and the star is drawn grayed-out (empty). It's a compact alternative to ScoreDisplayStars (which draws one star per point) for contexts where space is limited, such as inside a LevelSelectionButton's createScoreDisplay option.

import { ScoreDisplayNumberAndStar } from 'scenerystack/vegas';
import { NumberProperty } from 'scenerystack/axon';

A minimal example

const scoreProperty = new NumberProperty( 0 );

const scoreDisplay = new ScoreDisplayNumberAndStar( scoreProperty, {
  font: new PhetFont( 20 ),
  scoreDecimalPlaces: 0
} );

The display listens to scoreProperty directly and rebuilds its children whenever the score changes — there's no separate update() call to make.

Constructor

new ScoreDisplayNumberAndStar( scoreProperty: ReadOnlyProperty<number>, providedOptions?: ScoreDisplayNumberAndStarOptions )

Options

Option	Default	Effect
font	StatusBar.DEFAULT_FONT	Font for the numeric text
textFill	'black'	Fill color for the numeric text
scoreDecimalPlaces	0	Decimal places shown for the score number
starNodeOptions	{ starShapeOptions: { outerRadius: 10, innerRadius: 5 }, filledLineWidth: 1.5, emptyLineWidth: 1.5 }	Forwarded to the internal StarNode
spacing (HBox)	5	Horizontal space between the number and the star

It's an HBox, so it participates in layout like any other Node

ScoreDisplayNumberAndStar extends HBox — you can set maxWidth/maxHeight on it to constrain it inside a fixed-size background (which is exactly how LevelSelectionButton uses it), and its boundsProperty fires whenever the score changes and the child count (1 child — just the grayed-out star — when the score is 0, vs. 2 children — the number plus a filled star — otherwise) flips.