• Stars
    star
    165
  • Rank 220,719 (Top 5 %)
  • Language
    JavaScript
  • Created over 11 years ago
  • Updated about 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Runtime pluggable renderers for EaselJS (Canvas 2D, WebGL, HTML DOM, SVG).

##EASELJS DYNAMIC RENDERERS:

This is an experiment that aims to provide runtime pluggable renderers for a subset EaselJS content. They allow you to create your content for EaselJS, then render it to a variety of surfaces (ex. Canvas, WebGL, HTML DOM) dynamically at runtime. It is really only intended as a proof of concept, and as a starting point for more complete renderers.

If you are not familiar with EaselJS already, this is not the best place to start.

Currently, most renderers support displaying Bitmap, BitmapAnimation, Container, and content that has had .cache() applied (ex. Shape, Text).

Currently, these renderers have only been developed for and tested in Webkit browsers, as proofs of concept. There is a lot of room for improvement and optimization. For example, it should be possible to extend these renderers to support Text directly, as well as providing mouse & possibly touch interaction for all surfaces. Most renderers (WebGL in particular) would also benefit from sprite sheet generation to reduce texture count, most likely via SpriteSheetBuilder.

##Supported surfaces:

Null renderer:

  • RendererNullMtx - no rendering. Useful for isolating calculation vs display costs.

Canvas 2D:

  • Renderer2DMtx - uses the EaselJS matrix class avoiding save & restore.
  • Renderer2D - transformation based renderer using save & restore.

HTML DOM:

  • RendererDOMMtx - uses the EaselJS matrix, persistent DOM elements & document fragments.
  • RendererDOMMtxStr - generates innerHTML on the surface div using matrix values.
  • RendererDOMStr - generates innerHTML on the surface div using transforms.

SVG:

  • RendererSVGMtx - uses the EaselJS matrix, persistent SVG elements & document fragments.
  • RendererSVGMtxStr - generates SVG strings using matrix values.
  • RendererSVGStr - generates SVG strings using transforms.

WebGL:

  • RendererWebGL - sample WebGL renderer. Lots of room for optimizations.

Flash:

  • RendererSWF - very rough, outdated Flash renderer. Included for reference only.

The renderers that are most stable, and would make the most sense to extend moving forward are: Renderer2DMtx, RendererDOMMtx, and RendererWebGL.

More Repositories

1

EaselJS

The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.
JavaScript
8,073
star
2

SoundJS

A Javascript library for working with Audio. It provides a consistent API for loading and playing audio on different browsers and devices. Currently supports WebAudio, HTML5 Audio, Cordova / PhoneGap, and a Flash fallback.
JavaScript
4,384
star
3

TweenJS

A simple but powerful tweening / animation library for Javascript. Part of the CreateJS suite of libraries.
JavaScript
3,505
star
4

PreloadJS

PreloadJS makes preloading assets & getting aggregate progress events easier in JavaScript. It uses XHR2 when available, and falls back to tag-based loading when not.
JavaScript
2,855
star
5

Zoe

Zoรซ is an open source tool for generating spritesheet images and frame data from SWF files. It enables illustrators to maintain a familiar workflow while generating animations for EaselJS and other formats.
ActionScript
328
star
6

CreateJS

Repo for combined CreateJS library. Mainly for CDNs.
227
star
7

sandbox

Contains demos, helper classes, experiments, and other resources that don't belong in the main repos.
JavaScript
150
star
8

Combined

Hosts the combined CreateJS library, and the tools for building it.
JavaScript
120
star
9

AdobeAnimateDemo

Mini game with visual assets created in Adobe Animate CC
JavaScript
103
star
10

EaselJS-NodeJS

A NodeJS compatible build of EaselJS.
89
star
11

html5ads

An in-depth white paper on building HTML5 advertising with CreateJS and Flash Pro. Includes supporting materials, sample banner ad, and helper classes.
JavaScript
72
star
12

localization

Repo for collaborative creation of localized documentation.
JavaScript
47
star
13

core

Core code shared by two or more CreateJS libraries. For example, the event model.
JavaScript
14
star
14

build

The CreateJS build tools & process.
CSS
10
star