@ekolabs/aframe-spritesheet-component
Advanced tools
Animated spritesheet support for A-Frame.
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:
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.
The spritesheet image file can be made more compact by using a dictionary automatically generated with TexturePacker. This will help reduce file size.
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>
Install via npm:
npm install aframe-spritesheet-component
Then require and use.
require('aframe');
require('aframe-spritesheet-component');
| Property | Description | Default Value |
|---|---|---|
| progress | A 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 specified | 0 |
| frameIndex | Explicit index of the animation frame to use. Used if no frameName specified | null |
| frameName | Explicit name of the animation frame to use, if using dataUrl | null |
| cols | number of cols in the spritesheet image (not needed if using dataUrl) | 1 |
| rows | number of rows spritesheet image (not needed if using dataUrl) | 1 |
| firstFrame | index of the first frame of the animation, ordered left to right starting at the first row | 0 |
| lastFrame | index 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 - 1 | null |
| cloneTexture | if using separate instances of the same image, set this to true | false |
| dataUrl | If using a JSON format, url pointing to the json file | null |
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!
Developed by Opher Vishnia of Eko
Apache 2
FAQs
Animated spritesheet support for A-Frame
The npm package @ekolabs/aframe-spritesheet-component receives a total of 3 weekly downloads. As such, @ekolabs/aframe-spritesheet-component popularity was classified as not popular.
We found that @ekolabs/aframe-spritesheet-component demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.