easelbone

A GUI engine combining EaselJS and Backbone.js. Originally developed for use with Flash CC HTML5 output, but can be used with any EaselJS content.

Features

• Navigatable views with keyboard and mouse support
• UI controls: sliders, checkboxes, selectboxes, and buttons
• Scrollable containers with list and float layouts
• Text rendering with auto-sizing and emoji support
• Alpha mask support
• Asset loading and management
• Built on top of AMD modules (RequireJS)
• Opt-in dirty rendering (new easelbone.Views.Root({ ..., dirtyRendering: true })): the stage ticks every frame but repaints only when something changed — MovieClip frames, tweens, text redraws, mouse activity, or an explicit rootView.invalidate() call. Views can return false from tick() when static to skip repaints entirely. rootView.heartbeatInterval (ms, default 1000) controls the safety-net repaint cadence that guarantees a periodic redraw even if nothing else invalidates the stage.

Documentation

Visit the documentation and examples page for a full overview of the library and live demos.

Installation

npm install easelbone

Or with Bower:

bower install easelbone

Examples

Live examples are hosted on GitHub Pages:

• Controls — Sliders, checkboxes, selectboxes, and buttons
• Scrollable Areas — Scrollable container demo
• Float Layout — Float layout demo
• Alpha Mask — Alpha mask demo
• Background & Fill — Background fill and placeholder demo
• BigText — Auto-sizing text rendering demo
• Emoji Text — Text rendering with emoji support
• Benchmark — Performance stress test with paint/tick statistics

Pull request previews are automatically deployed to https://catlabinteractive.github.io/easelbone/pr/<PR_NUMBER>/examples/.

Development

# Install dependencies
npm install
npx bower install

# Build
npm run build

# Watch for changes
npx grunt watch

# Headless tests (need `npx playwright install chromium` once)
npx http-server dist -p 8080 --silent &   # serve the build first
npm run smoke                             # every example page renders cleanly
npm run test:baseline                     # BigText vertical centering (self-serving)

Note: BigText fits and centers text on the measured glyph bounds (TextMetrics.actualBoundingBox*), so the drawn ink never leaves the available space and manual BigText.setFontOffset(...) calls are no longer needed in modern browsers — even for decorative fonts whose glyphs extend beyond their em box or advance widths. Registering an offset still works and takes precedence (restoring the fully legacy behavior for that font), as does the legacy heuristic on browsers without extended TextMetrics.

License

MIT