@vitykovskiy/canvas-sprite-animations 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +41 -79
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,37 +1,19 @@
|
|
|
1
|
-
# sprite-animations
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
- predictable positioning and scaling;
|
|
10
|
-
- a separate playground for asset validation and config tuning.
|
|
11
|
-
|
|
12
|
-
## Current package structure
|
|
13
|
-
|
|
14
|
-
```text
|
|
15
|
-
src/
|
|
16
|
-
core/
|
|
17
|
-
animation-player.ts
|
|
18
|
-
sprite-sheet.ts
|
|
19
|
-
index.ts
|
|
20
|
-
renderers/
|
|
21
|
-
create-canvas-sprite-renderer.ts
|
|
22
|
-
index.ts
|
|
23
|
-
types.ts
|
|
24
|
-
index.ts
|
|
1
|
+
# @vitykovskiy/canvas-sprite-animations
|
|
2
|
+
|
|
3
|
+
Framework-agnostic TypeScript library for 2D sprite animation on HTML canvas.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @vitykovskiy/canvas-sprite-animations
|
|
25
9
|
```
|
|
26
10
|
|
|
27
|
-
##
|
|
11
|
+
## Links
|
|
28
12
|
|
|
29
|
-
-
|
|
30
|
-
-
|
|
31
|
-
- `sprite-animations/renderers`
|
|
32
|
-
- `sprite-animations/types`
|
|
13
|
+
- GitHub: https://github.com/Vitykovskiy/sprite-animations
|
|
14
|
+
- Playground: https://vitykovskiy.github.io/sprite-animations/
|
|
33
15
|
|
|
34
|
-
##
|
|
16
|
+
## Usage
|
|
35
17
|
|
|
36
18
|
```ts
|
|
37
19
|
import {
|
|
@@ -39,7 +21,7 @@ import {
|
|
|
39
21
|
createCanvasSpriteRenderer,
|
|
40
22
|
createSpriteSheet,
|
|
41
23
|
loadSpriteSheetImage,
|
|
42
|
-
} from "sprite-animations";
|
|
24
|
+
} from "@vitykovskiy/canvas-sprite-animations";
|
|
43
25
|
|
|
44
26
|
const loadedImage = await loadSpriteSheetImage("/assets/hero.png");
|
|
45
27
|
|
|
@@ -64,69 +46,49 @@ const player = createAnimationPlayer({
|
|
|
64
46
|
const renderer = createCanvasSpriteRenderer();
|
|
65
47
|
```
|
|
66
48
|
|
|
67
|
-
##
|
|
49
|
+
## Entry Points
|
|
50
|
+
|
|
51
|
+
- `@vitykovskiy/canvas-sprite-animations`
|
|
52
|
+
- `@vitykovskiy/canvas-sprite-animations/core`
|
|
53
|
+
- `@vitykovskiy/canvas-sprite-animations/renderers`
|
|
54
|
+
- `@vitykovskiy/canvas-sprite-animations/types`
|
|
55
|
+
|
|
56
|
+
## API
|
|
68
57
|
|
|
69
58
|
- `loadSpriteSheetImage(...)`
|
|
70
59
|
Loads a sprite sheet from a URL, `HTMLImageElement`, or `ImageBitmap`.
|
|
71
60
|
|
|
72
61
|
- `createSpriteSheet(...)`
|
|
73
|
-
|
|
62
|
+
Creates a regular-grid sprite sheet model.
|
|
74
63
|
|
|
75
64
|
- `createAnimationPlayer(...)`
|
|
76
|
-
|
|
65
|
+
Controls playback state and frame timing.
|
|
77
66
|
|
|
78
67
|
- `createCanvasSpriteRenderer(...)`
|
|
79
|
-
Draws a resolved frame to
|
|
80
|
-
|
|
81
|
-
## Timing policy
|
|
82
|
-
|
|
83
|
-
- If only `fps` is set, playback advances frame-by-frame using frame duration.
|
|
84
|
-
- If only `duration` is set, frames are resolved from elapsed progress across the full animation.
|
|
85
|
-
- If both `fps` and `duration` are set, `duration` has priority and `fps` acts as an update-frequency cap, which means frame skipping is allowed.
|
|
86
|
-
|
|
87
|
-
## Canvas rendering contract
|
|
88
|
-
|
|
89
|
-
- The renderer only draws a requested frame.
|
|
90
|
-
- Positioning is controlled through `{ x, y }` draw options.
|
|
91
|
-
- Scaling is applied at draw time and does not mutate sprite sheet metadata.
|
|
68
|
+
Draws a resolved frame to `CanvasRenderingContext2D`.
|
|
92
69
|
|
|
93
|
-
##
|
|
70
|
+
## Timing Policy
|
|
94
71
|
|
|
95
|
-
|
|
72
|
+
- If only `fps` is set, playback advances frame-by-frame.
|
|
73
|
+
- If only `duration` is set, frames are resolved from elapsed progress.
|
|
74
|
+
- If both `fps` and `duration` are set, `duration` has priority and `fps` acts as an update cap.
|
|
96
75
|
|
|
97
|
-
##
|
|
98
|
-
|
|
99
|
-
Current scaffold validation commands:
|
|
100
|
-
|
|
101
|
-
```bash
|
|
102
|
-
tsc --noEmit -p tsconfig.json
|
|
103
|
-
npm test
|
|
104
|
-
npm run playground:build
|
|
105
|
-
npm pack --dry-run
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
## Playground
|
|
109
|
-
|
|
110
|
-
Run the dev playground locally:
|
|
111
|
-
|
|
112
|
-
```bash
|
|
113
|
-
npm install
|
|
114
|
-
npm run playground:dev
|
|
115
|
-
```
|
|
76
|
+
## Scope
|
|
116
77
|
|
|
117
|
-
|
|
78
|
+
Current MVP scope:
|
|
118
79
|
|
|
119
|
-
-
|
|
120
|
-
|
|
80
|
+
- regular grid sprite sheets
|
|
81
|
+
- canvas rendering
|
|
82
|
+
- runtime playback with `fps` and/or `duration`
|
|
83
|
+
- predictable positioning and scaling
|
|
121
84
|
|
|
122
|
-
|
|
123
|
-
Rebuilds the library and runs runtime regression tests.
|
|
85
|
+
Not included in MVP:
|
|
124
86
|
|
|
125
|
-
-
|
|
126
|
-
|
|
87
|
+
- JSON atlas support
|
|
88
|
+
- framework adapters
|
|
89
|
+
- WebGL renderer
|
|
90
|
+
- state machine / animation graph
|
|
127
91
|
|
|
128
|
-
|
|
129
|
-
Verifies the package contents with `npm pack --dry-run`.
|
|
92
|
+
## License
|
|
130
93
|
|
|
131
|
-
|
|
132
|
-
Emits the dev playground into `playground-dist/` so it does not overwrite library artifacts in `dist/`.
|
|
94
|
+
MIT
|