@ekolabs/aframe-spritesheet-component
npm i @ekolabs/aframe-spritesheet-component

@ekolabs/aframe-spritesheet-component

Animated spritesheet support for A-Frame

by EkoLabs

1.2.0 (see all)License:Apache-2.0TypeScript:Not Found
npm i @ekolabs/aframe-spritesheet-component
Readme

A-Frame Spritesheet Component

Animated spritesheet support for A-Frame.

Demo / Using spritesheets

Spritesheets are a common way to play pre-rendered animation. This component allows you to load up a spritesheet image to an a-image element and easily control its animation. It allows usage of two types of spritesheet formats:

Rows and Cols

A grid representing all frames of the animation. All of the frames must be of the same dimensions, and the animation index is assumed to be scanned left to right, top to bottom. If your last frame is not the one on the bottom right, you'll have to specify the index of the last frame using the lastFrame property.

JSON data format

The spritesheet image file can be made more compact by using a dictionary automatically generated with TexturePacker. This will help reduce file size.

Browser

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-spritesheet-component/dist/aframe-spritesheet-component.min.js"></script>
</head>

<body>
  <a-scene>
    <!-- rows/cols format-->
    <a-image src="spritesheet.png" sprite-sheet="cols:8; rows: 3; progress: 0;"></a-image>
    <!-- json format -->
    <a-image src="spritesheet.png" sprite-sheet="dataUrl: spritesheet.json; progress: 0;" ></a-image>
  </a-scene>
</body>

npm

Install via npm:

npm install aframe-spritesheet-component

Then require and use.

require('aframe');
require('aframe-spritesheet-component');

API

PropertyDescriptionDefault Value
progressA value between 0 and 1 that represents animation progression. the index of the animation frame is calculated from this attribute. Used if no frameIndex or frameName specified0
frameIndexExplicit index of the animation frame to use. Used if no frameName specifiednull
frameNameExplicit name of the animation frame to use, if using dataUrlnull
colsnumber of cols in the spritesheet image (not needed if using dataUrl)1
rowsnumber of rows spritesheet image (not needed if using dataUrl)1
firstFrameindex of the first frame of the animation, ordered left to right starting at the first row0
lastFrameindex of the last frame of the animation, ordered left to right starting at the first row . If not specified and not using the JSON format, value is rows * cols - 1null
cloneTextureif using separate instances of the same image, set this to truefalse
dataUrlIf using a JSON format, url pointing to the json filenull

Acknowledgment

Walking pig sprite taken from glitchthegame.com, under a Public Domain Dedication license.

Interesting bit of Trivia: Tiny Speck, the company behind the now-defunct Glitch game is now actually Slack!

Author

Developed by Opher Vishnia of Eko

License

Apache 2

Downloads/wk

11

GitHub Stars

33

LAST COMMIT

1yr ago

MAINTAINERS

2

CONTRIBUTORS

3

OPEN ISSUES

5

OPEN PRs

6
VersionTagPublished
1.2.0
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial