kippy 0.2.0 → 0.2.1
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 +36 -4
- package/dist/entity.d.ts +3 -4
- package/dist/entity.js +0 -3
- package/dist/game.d.ts +1 -1
- package/dist/game.js +4 -3
- package/dist/physics.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -31,6 +31,9 @@ const game = new Game({
|
|
|
31
31
|
|
|
32
32
|
// Start the game loop
|
|
33
33
|
game.start();
|
|
34
|
+
|
|
35
|
+
// You can also swap canvas if you want
|
|
36
|
+
// game.setCanvas(someOtherCanvas);
|
|
34
37
|
```
|
|
35
38
|
|
|
36
39
|
### Create a scene
|
|
@@ -63,7 +66,8 @@ const entity = new Entity({
|
|
|
63
66
|
sprite, // Entity's sprite to be rendered, type Sprite
|
|
64
67
|
x, // Entity's x position (centered), type number
|
|
65
68
|
y, // Entity's y position (centered), type number
|
|
66
|
-
rotation // Entity's rotation in radians, type number
|
|
69
|
+
rotation, // Entity's rotation in radians, type number
|
|
70
|
+
body, // Entity's physical body, type EntityBody
|
|
67
71
|
});
|
|
68
72
|
|
|
69
73
|
// Add it to a scene
|
|
@@ -84,13 +88,13 @@ A sprite represents what an entity looks like, the "graphics part", you can crea
|
|
|
84
88
|
import { Sprite } from "kippy";
|
|
85
89
|
|
|
86
90
|
const sprite = new Sprite({
|
|
87
|
-
texture, // Sprite's texture
|
|
91
|
+
texture, // Sprite's texture - HTMLImageElement, HTMLCanvasElement, OffscreenCanvas, ImageBitmap
|
|
88
92
|
width, // Sprite's width, type number
|
|
89
93
|
height // Sprite's height, type number
|
|
90
94
|
});
|
|
91
95
|
|
|
92
96
|
// Set sprite for an entity
|
|
93
|
-
entity.
|
|
97
|
+
entity.sprite = sprite;
|
|
94
98
|
```
|
|
95
99
|
|
|
96
100
|
### Add controls
|
|
@@ -116,11 +120,39 @@ input.mouseY; // Current Y position of mouse
|
|
|
116
120
|
|
|
117
121
|
### Physics
|
|
118
122
|
|
|
123
|
+
For movements, currently you can create a `RigidBody`:
|
|
124
|
+
```js
|
|
125
|
+
// Create a rigid body
|
|
126
|
+
const rigidBody = new RigidBody({
|
|
127
|
+
velocityX, // X velocity, type number
|
|
128
|
+
velocityY, // Y velocity, type number
|
|
129
|
+
rotationVelocity, // Angular/rotation velocity, type number
|
|
130
|
+
mass, // Entity's mass, type number
|
|
131
|
+
inertia, // Entity's inertia, type number
|
|
132
|
+
forceX, // Entity's force on X axis, type number
|
|
133
|
+
forceY, // Entity's force on Y axis, type number
|
|
134
|
+
torque, // Entity's torque/rotational force, type number
|
|
135
|
+
});
|
|
136
|
+
|
|
137
|
+
// Attach body to an entity
|
|
138
|
+
entity.body = rigidBody;
|
|
139
|
+
|
|
140
|
+
// And you can mutate these props to update movement every frame
|
|
141
|
+
entity.body.velocityX; // Set with the matching parameter above, default is 0
|
|
142
|
+
entity.body.velocityY; // Set with the matching parameter above, default is 0
|
|
143
|
+
entity.body.rotationVelocity; // Set with the matching parameter above, default is 0
|
|
144
|
+
entity.body.mass; // Set with the matching parameter above, default is 1
|
|
145
|
+
entity.body.inertia; // Set with the matching parameter above, default is 1
|
|
146
|
+
entity.body.forceX; // Set with the matching parameter above, default is 0
|
|
147
|
+
entity.body.forceY; // Set with the matching parameter above, default is 0
|
|
148
|
+
entity.body.torque; // Set with the matching parameter above, default is 0
|
|
149
|
+
```
|
|
119
150
|
|
|
151
|
+
Collisions to be added.
|
|
120
152
|
|
|
121
153
|
### Animation
|
|
122
154
|
|
|
123
|
-
To be added, for now
|
|
155
|
+
To be added, for now mutate `entity.sprite` to swap sprites and create animations manually.
|
|
124
156
|
|
|
125
157
|
### Audio
|
|
126
158
|
|
package/dist/entity.d.ts
CHANGED
|
@@ -1,19 +1,18 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { EntityBody } from "./physics.js";
|
|
2
2
|
import { Sprite } from "./sprite.js";
|
|
3
3
|
export interface EntityOptions {
|
|
4
4
|
sprite?: Sprite;
|
|
5
5
|
x?: number;
|
|
6
6
|
y?: number;
|
|
7
7
|
rotation?: number;
|
|
8
|
-
body?:
|
|
8
|
+
body?: EntityBody;
|
|
9
9
|
}
|
|
10
10
|
export declare class Entity {
|
|
11
11
|
sprite?: Sprite;
|
|
12
12
|
x: number;
|
|
13
13
|
y: number;
|
|
14
14
|
rotation: number;
|
|
15
|
-
body?:
|
|
15
|
+
body?: EntityBody;
|
|
16
16
|
constructor(options?: EntityOptions);
|
|
17
|
-
setSprite(sprite: Sprite): void;
|
|
18
17
|
render(ctx: CanvasRenderingContext2D): void;
|
|
19
18
|
}
|
package/dist/entity.js
CHANGED
package/dist/game.d.ts
CHANGED
|
@@ -14,8 +14,8 @@ export declare class Game {
|
|
|
14
14
|
input: Input;
|
|
15
15
|
physics: Physics;
|
|
16
16
|
constructor(options: GameOptions);
|
|
17
|
+
setCanvas(canvas: HTMLCanvasElement): void;
|
|
17
18
|
setScene(scene: Scene): void;
|
|
18
|
-
setInput(input: Input): void;
|
|
19
19
|
start(): void;
|
|
20
20
|
loop(timestamp: number): void;
|
|
21
21
|
}
|
package/dist/game.js
CHANGED
|
@@ -13,14 +13,15 @@ export class Game {
|
|
|
13
13
|
this.input = options.input ?? new Input({ canvas: this.canvas });
|
|
14
14
|
this.physics = options.physics ?? new Physics();
|
|
15
15
|
}
|
|
16
|
+
setCanvas(canvas) {
|
|
17
|
+
this.canvas = canvas;
|
|
18
|
+
this.ctx = this.canvas.getContext("2d");
|
|
19
|
+
}
|
|
16
20
|
setScene(scene) {
|
|
17
21
|
this.scene?.exit();
|
|
18
22
|
this.scene = scene;
|
|
19
23
|
this.scene.init();
|
|
20
24
|
}
|
|
21
|
-
setInput(input) {
|
|
22
|
-
this.input = input;
|
|
23
|
-
}
|
|
24
25
|
start() {
|
|
25
26
|
requestAnimationFrame(this.loop.bind(this));
|
|
26
27
|
}
|
package/dist/physics.d.ts
CHANGED