vue-easeljs demos

Meet Gary.

Gary is an example of vue-easeljs in action.

The background is an <easel-bitmap> element.

The Gary image is an <easel-sprite> element.

When the canvas is clicked, a Vue event causes Gary to start running!

As Gary runs up and down the canvas, custom code causes their scale to increase and decrease.

Gary's speed changes with their scale.

If you change the Scale, this changes Gary's base scale and adjustments are made as they run back and forth.

Gary has a shadow, which is a black <easel-shape> ellipse with an alpha of .3 to make it mostly transparent.

When Show Points is checked, four <easel-shape> elements appear. These are the points Gary runs to.

When Show Labels is checked, Gary's name is displayed above their head with an <easel-text>. The text is yellow with a shadow to make it stand out.

Gary is inside of an <easel-container> element, along with their name and their shadow.

Gary's sprite has 7 frames. When they are standing still, Gary uses one frame. When they are running upstage, there are two other frames. When they are running downstage, there are two more.

When Gary is running right-to-left, there are two more frames. And when Gary needs to run left-to-right, Gary reuses the same sideways frames and sets :flip="true".

See Gary's code here!