zx-kit 0.2.1 → 0.2.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 +10 -4
- package/dist/renderer.d.ts +12 -9
- package/dist/renderer.d.ts.map +1 -1
- package/dist/renderer.js +17 -11
- package/dist/renderer.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -29,7 +29,7 @@ import { setupCanvas, C, CELL, drawText, initAudio, playPattern, initInput, tick
|
|
|
29
29
|
|
|
30
30
|
// Canvas — one call replaces the manual boilerplate
|
|
31
31
|
const canvas = document.getElementById('game') as HTMLCanvasElement
|
|
32
|
-
const ctx = setupCanvas(canvas,
|
|
32
|
+
const ctx = setupCanvas(canvas, 4) // scale=4, 256×192 game px → 1024×768 CSS px
|
|
33
33
|
|
|
34
34
|
// Input
|
|
35
35
|
initInput()
|
|
@@ -113,14 +113,20 @@ All functions work in **game pixels**. At `SCALE=4` each game pixel maps to a 4
|
|
|
113
113
|
|
|
114
114
|
Every draw function follows the ZX Spectrum **ink / paper** model: each 8×8 cell has one foreground (ink) and one background (paper) color.
|
|
115
115
|
|
|
116
|
-
#### `setupCanvas(canvas,
|
|
116
|
+
#### `setupCanvas(canvas, scale, width?, height?): CanvasRenderingContext2D`
|
|
117
117
|
|
|
118
|
-
Initialises a canvas element for pixel-perfect rendering. Sets dimensions, disables image smoothing, and
|
|
118
|
+
Initialises a canvas element for pixel-perfect scaled rendering. Sets canvas dimensions, applies CSS size, disables image smoothing, and calls `ctx.scale(scale, scale)` so all subsequent draw calls use game-pixel coordinates. **Replaces the manual canvas setup boilerplate.**
|
|
119
|
+
|
|
120
|
+
- `scale` — CSS pixels per game pixel (`4` = standard ZX Spectrum display)
|
|
121
|
+
- `width` — game pixels wide (default `256`)
|
|
122
|
+
- `height` — game pixels tall (default `192`)
|
|
119
123
|
|
|
120
124
|
```ts
|
|
121
125
|
const canvas = document.getElementById('game') as HTMLCanvasElement
|
|
122
|
-
const ctx = setupCanvas(canvas, 256
|
|
126
|
+
const ctx = setupCanvas(canvas, 4) // 256×192 game px → 1024×768 CSS px
|
|
127
|
+
const ctx = setupCanvas(canvas, 4, 256, 208) // taller canvas for status rows
|
|
123
128
|
// ctx.imageSmoothingEnabled is already false — no need to set it manually
|
|
129
|
+
// all draw calls use game-pixel coordinates — ctx.scale() is already applied
|
|
124
130
|
```
|
|
125
131
|
|
|
126
132
|
#### `mirrorSprite(src): Uint8Array`
|
package/dist/renderer.d.ts
CHANGED
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Initialises a canvas element for pixel-perfect
|
|
3
|
-
* Sets canvas dimensions, disables image smoothing,
|
|
4
|
-
*
|
|
2
|
+
* Initialises a canvas element for pixel-perfect scaled rendering.
|
|
3
|
+
* Sets canvas dimensions, applies CSS size, disables image smoothing, applies `ctx.scale()`,
|
|
4
|
+
* and returns the 2D context. All subsequent draw calls use game-pixel coordinates.
|
|
5
|
+
* Call once at game startup.
|
|
5
6
|
*
|
|
6
|
-
* @param canvas
|
|
7
|
-
* @param
|
|
8
|
-
* @param
|
|
9
|
-
* @
|
|
7
|
+
* @param canvas - The `<canvas>` element to configure
|
|
8
|
+
* @param scale - CSS pixels per game pixel (e.g. `4` for standard ZX Spectrum display)
|
|
9
|
+
* @param width - Canvas width in game pixels (default `256`)
|
|
10
|
+
* @param height - Canvas height in game pixels (default `192`)
|
|
11
|
+
* @returns The configured `CanvasRenderingContext2D` (already scaled — draw in game pixels)
|
|
10
12
|
*
|
|
11
13
|
* @example
|
|
12
14
|
* const canvas = document.getElementById('game') as HTMLCanvasElement
|
|
13
|
-
* const ctx = setupCanvas(canvas, 256
|
|
15
|
+
* const ctx = setupCanvas(canvas, 4) // 256×192 game px → 1024×768 CSS px
|
|
16
|
+
* const ctx = setupCanvas(canvas, 4, 256, 208) // taller canvas for status rows
|
|
14
17
|
*/
|
|
15
|
-
export declare function setupCanvas(canvas: HTMLCanvasElement,
|
|
18
|
+
export declare function setupCanvas(canvas: HTMLCanvasElement, scale: number, width?: number, height?: number): CanvasRenderingContext2D;
|
|
16
19
|
/**
|
|
17
20
|
* Flips an 8×8 sprite horizontally. Returns a new `Uint8Array`.
|
|
18
21
|
* Use to derive left-facing sprites from right-facing definitions at module load time.
|
package/dist/renderer.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAGA
|
|
1
|
+
{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,MAAM,EACb,KAAK,SAAM,EACX,MAAM,SAAM,GACX,wBAAwB,CAS1B;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,UAAU,GAAG,UAAU,CAUxD;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CACxB,GAAG,EAAE,wBAAwB,EAC7B,MAAM,EAAE,UAAU,EAClB,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EACpB,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GACzB,IAAI,CAUN;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,CACtB,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,MAAM,EACZ,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EACpB,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAC1B,IAAI,CAYN;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CACtB,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,MAAM,EACZ,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EACpB,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAC1B,IAAI,CAIN;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAC9B,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,MAAM,EACZ,CAAC,EAAE,MAAM,EACT,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAC1B,IAAI,CAGN;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,MAAM,EAClB,UAAU,GAAE,MAAgB,GAC3B,IAAI,CAWN"}
|
package/dist/renderer.js
CHANGED
|
@@ -1,24 +1,30 @@
|
|
|
1
1
|
import { C, CELL } from './palette.js';
|
|
2
2
|
import { getCharRow } from './font.js';
|
|
3
3
|
/**
|
|
4
|
-
* Initialises a canvas element for pixel-perfect
|
|
5
|
-
* Sets canvas dimensions, disables image smoothing,
|
|
6
|
-
*
|
|
4
|
+
* Initialises a canvas element for pixel-perfect scaled rendering.
|
|
5
|
+
* Sets canvas dimensions, applies CSS size, disables image smoothing, applies `ctx.scale()`,
|
|
6
|
+
* and returns the 2D context. All subsequent draw calls use game-pixel coordinates.
|
|
7
|
+
* Call once at game startup.
|
|
7
8
|
*
|
|
8
|
-
* @param canvas
|
|
9
|
-
* @param
|
|
10
|
-
* @param
|
|
11
|
-
* @
|
|
9
|
+
* @param canvas - The `<canvas>` element to configure
|
|
10
|
+
* @param scale - CSS pixels per game pixel (e.g. `4` for standard ZX Spectrum display)
|
|
11
|
+
* @param width - Canvas width in game pixels (default `256`)
|
|
12
|
+
* @param height - Canvas height in game pixels (default `192`)
|
|
13
|
+
* @returns The configured `CanvasRenderingContext2D` (already scaled — draw in game pixels)
|
|
12
14
|
*
|
|
13
15
|
* @example
|
|
14
16
|
* const canvas = document.getElementById('game') as HTMLCanvasElement
|
|
15
|
-
* const ctx = setupCanvas(canvas, 256
|
|
17
|
+
* const ctx = setupCanvas(canvas, 4) // 256×192 game px → 1024×768 CSS px
|
|
18
|
+
* const ctx = setupCanvas(canvas, 4, 256, 208) // taller canvas for status rows
|
|
16
19
|
*/
|
|
17
|
-
export function setupCanvas(canvas, width, height) {
|
|
18
|
-
canvas.width = width;
|
|
19
|
-
canvas.height = height;
|
|
20
|
+
export function setupCanvas(canvas, scale, width = 256, height = 192) {
|
|
21
|
+
canvas.width = width * scale;
|
|
22
|
+
canvas.height = height * scale;
|
|
23
|
+
canvas.style.width = `${width * scale}px`;
|
|
24
|
+
canvas.style.height = `${height * scale}px`;
|
|
20
25
|
const ctx = canvas.getContext('2d');
|
|
21
26
|
ctx.imageSmoothingEnabled = false;
|
|
27
|
+
ctx.scale(scale, scale);
|
|
22
28
|
return ctx;
|
|
23
29
|
}
|
|
24
30
|
/**
|
package/dist/renderer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderer.js","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAEtC
|
|
1
|
+
{"version":3,"file":"renderer.js","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAEtC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,WAAW,CACzB,MAAyB,EACzB,KAAa,EACb,KAAK,GAAG,GAAG,EACX,MAAM,GAAG,GAAG;IAEZ,MAAM,CAAC,KAAK,GAAG,KAAK,GAAG,KAAK,CAAA;IAC5B,MAAM,CAAC,MAAM,GAAG,MAAM,GAAG,KAAK,CAAA;IAC9B,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,GAAG,KAAK,IAAI,CAAA;IACzC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,GAAG,KAAK,IAAI,CAAA;IAC3C,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAE,CAAA;IACpC,GAAG,CAAC,qBAAqB,GAAG,KAAK,CAAA;IACjC,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IACvB,OAAO,GAAG,CAAA;AACZ,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,YAAY,CAAC,GAAe;IAC1C,MAAM,GAAG,GAAG,IAAI,UAAU,CAAC,CAAC,CAAC,CAAA;IAC7B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QAC3B,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;QACrB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YAC3B,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC;gBAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;QACvC,CAAC;QACD,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;IACZ,CAAC;IACD,OAAO,GAAG,CAAA;AACZ,CAAC;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,UAAU,CACxB,GAA6B,EAC7B,MAAkB,EAClB,CAAS,EAAE,CAAS,EACpB,GAAW,EAAE,KAAa;IAE1B,GAAG,CAAC,SAAS,GAAG,KAAK,CAAA;IACrB,GAAG,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,CAAA;IAC9B,GAAG,CAAC,SAAS,GAAG,GAAG,CAAA;IACnB,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC;QACjC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;QACxB,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC;YACjC,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC;gBAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;QAChE,CAAC;IACH,CAAC;AACH,CAAC;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,QAAQ,CACtB,GAA6B,EAC7B,IAAY,EACZ,CAAS,EAAE,CAAS,EACpB,GAAW,EAAE,KAAc;IAE3B,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxB,GAAG,CAAC,SAAS,GAAG,KAAK,CAAA;QACrB,GAAG,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,CAAA;IAChC,CAAC;IACD,GAAG,CAAC,SAAS,GAAG,GAAG,CAAA;IACnB,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC;QACjC,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;QAClC,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC;YACjC,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC;gBAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;QAChE,CAAC;IACH,CAAC;AACH,CAAC;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,QAAQ,CACtB,GAA6B,EAC7B,IAAY,EACZ,CAAS,EAAE,CAAS,EACpB,GAAW,EAAE,KAAc;IAE3B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACrC,QAAQ,CAAC,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,CAAA;IAChE,CAAC;AACH,CAAC;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,gBAAgB,CAC9B,GAA6B,EAC7B,IAAY,EACZ,CAAS,EACT,IAAY,EACZ,GAAW,EAAE,KAAc;IAE3B,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAA;IACrD,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,CAAA;AACvC,CAAC;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,WAAW,CACzB,KAAa,EACb,KAAa,EACb,UAAkB,EAClB,aAAqB,CAAC,CAAC,KAAK;IAE5B,IAAI,IAAI,GAAG,CAAC,CAAA;IACZ,MAAM,UAAU,GAAG,KAAK,GAAG,CAAC,CAAA;IAC5B,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,EAAE;QAC1B,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAA;QACzE,IAAI,EAAE,CAAA;QACN,IAAI,IAAI,IAAI,UAAU,EAAE,CAAC;YACvB,aAAa,CAAC,EAAE,CAAC,CAAA;YACjB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,UAAU,CAAA;QAClD,CAAC;IACH,CAAC,EAAE,UAAU,CAAC,CAAA;AAChB,CAAC"}
|