kippy 0.2.0 → 0.2.2

package/README.md

@@ -31,6 +31,9 @@ const game = new Game({
 
 // Start the game loop
 game.start();
+
+// You can also swap canvas if you want
+// game.setCanvas(someOtherCanvas);
 ```
 
 ### Create a scene
@@ -63,7 +66,8 @@ const entity = new Entity({
     sprite, // Entity's sprite to be rendered, type Sprite
     x, // Entity's x position (centered), type number
     y, // Entity's y position (centered), type number
-    rotation // Entity's rotation in radians, type number
+    rotation, // Entity's rotation in radians, type number
+    body, // Entity's physical body, type EntityBody
 });
 
 // Add it to a scene
@@ -84,18 +88,18 @@ A sprite represents what an entity looks like, the "graphics part", you can crea
 import { Sprite } from "kippy";
 
 const sprite = new Sprite({
-    texture, // Sprite's texture, can be HTMLImageElement, HTMLCanvasElement, OffscreenCanvas, ImageBitmap
+    texture, // Sprite's texture - HTMLImageElement, HTMLCanvasElement, OffscreenCanvas, ImageBitmap
     width, // Sprite's width, type number
     height // Sprite's height, type number
 });
 
 // Set sprite for an entity
-entity.setSprite(sprite);
+entity.sprite = sprite;
 ```
 
 ### Add controls
 
-Game controls like mouse presses, key presses, and mouse cursor traking (in the game canvas, not the web window) can be done by using the input handler from your `game` instance:
+Game controls like mouse presses, key presses, touch, and cursor traking (in the game canvas, not the web window) can be done by using the input handler from your `game` instance:
 ```js
 const input = game.input;
 ```
@@ -106,21 +110,49 @@ Then in a scene's `update` method, you can use these utilities to check for key
 input.isKeyDown(/* Character/key here */); // true if key is held, false otherwise
 input.isKeyPressed(/* Character/key here */); // true if key is pressed, false otherwise
 input.isKeyReleased(/* Character/key here */); // true if key is released, false otherwise
-// Mouse
-input.isMouseDown(/* 0 for left, 1 for right */); // true if mouse is held, false otherwise
-input.isMousePressed(/* 0 for left, 1 for right */); // true if mouse is pressed, false otherwise
-input.isMouseReleased(/* 0 for left, 1 for right */); // true if mouse is released, false otherwise
-input.mouseX; // Current X position of mouse
-input.mouseY; // Current Y position of mouse
+// Mouse/touch
+input.isPointerDown(/* 0 for left, 1 for right, 2 for touch */); // true if held, false otherwise
+input.isPointerPressed(/* 0 for left, 1 for right, 2 for touch */); // true if pressed, false otherwise
+input.isPointerReleased(/* 0 for left, 1 for right, 2 for touch */); // true if released, false otherwise
+input.pointerX; // Current X position of mouse/touch
+input.pointerY; // Current Y position of mouse/touch
 ```
 
 ### Physics
 
+For movements, currently you can create a `RigidBody`:
+```js
+// Create a rigid body
+const rigidBody = new RigidBody({
+    velocityX, // X velocity, type number
+    velocityY, // Y velocity, type number
+    rotationVelocity, // Angular/rotation velocity, type number
+    mass, // Entity's mass, type number
+    inertia, // Entity's inertia, type number
+    forceX, // Entity's force on X axis, type number
+    forceY, // Entity's force on Y axis, type number
+    torque, // Entity's torque/rotational force, type number
+});
+
+// Attach body to an entity
+entity.body = rigidBody;
+
+// And you can mutate these props to update movement every frame
+entity.body.velocityX; // Set with the matching parameter above, default is 0
+entity.body.velocityY; // Set with the matching parameter above, default is 0
+entity.body.rotationVelocity; // Set with the matching parameter above, default is 0
+entity.body.mass; // Set with the matching parameter above, default is 1
+entity.body.inertia; // Set with the matching parameter above, default is 1
+entity.body.forceX; // Set with the matching parameter above, default is 0
+entity.body.forceY; // Set with the matching parameter above, default is 0
+entity.body.torque; // Set with the matching parameter above, default is 0
+```
 
+Collisions to be added.
 
 ### Animation
 
-To be added, for now call `setSprite` to swap sprites for animations.
+To be added, for now mutate `entity.sprite` to swap sprites and create animations manually.
 
 ### Audio
 

package/dist/entity.d.ts

@@ -1,19 +1,18 @@
-import { RigidBody } from "./physics.js";
+import { EntityBody } from "./physics.js";
 import { Sprite } from "./sprite.js";
 export interface EntityOptions {
     sprite?: Sprite;
     x?: number;
     y?: number;
     rotation?: number;
-    body?: RigidBody;
+    body?: EntityBody;
 }
 export declare class Entity {
     sprite?: Sprite;
     x: number;
     y: number;
     rotation: number;
-    body?: RigidBody;
+    body?: EntityBody;
     constructor(options?: EntityOptions);
-    setSprite(sprite: Sprite): void;
     render(ctx: CanvasRenderingContext2D): void;
 }

package/dist/entity.js

@@ -11,9 +11,6 @@ export class Entity {
         this.rotation = options.rotation ?? 0;
         this.body = options.body;
     }
-    setSprite(sprite) {
-        this.sprite = sprite;
-    }
     render(ctx) {
         if (this.sprite) {
             ctx.save();

package/dist/game.d.ts

@@ -14,8 +14,8 @@ export declare class Game {
     input: Input;
     physics: Physics;
     constructor(options: GameOptions);
+    setCanvas(canvas: HTMLCanvasElement): void;
     setScene(scene: Scene): void;
-    setInput(input: Input): void;
     start(): void;
     loop(timestamp: number): void;
 }

package/dist/game.js

@@ -13,14 +13,15 @@ export class Game {
         this.input = options.input ?? new Input({ canvas: this.canvas });
         this.physics = options.physics ?? new Physics();
     }
+    setCanvas(canvas) {
+        this.canvas = canvas;
+        this.ctx = this.canvas.getContext("2d");
+    }
     setScene(scene) {
         this.scene?.exit();
         this.scene = scene;
         this.scene.init();
     }
-    setInput(input) {
-        this.input = input;
-    }
     start() {
         requestAnimationFrame(this.loop.bind(this));
     }

package/dist/input.d.ts

@@ -6,17 +6,17 @@ export declare class Input {
     keys: Set<string>;
     keysPressed: Set<string>;
     keysReleased: Set<string>;
-    mouseX: number;
-    mouseY: number;
-    mouseButtons: Set<number>;
-    mousePressed: Set<number>;
-    mouseReleased: Set<number>;
+    pointerX: number;
+    pointerY: number;
+    pointers: Set<number>;
+    pointersPressed: Set<number>;
+    pointersReleased: Set<number>;
     constructor(options: InputOptions);
     update(): void;
     isKeyDown(key: string): boolean;
     isKeyPressed(key: string): boolean;
     isKeyReleased(key: string): boolean;
-    isMouseDown(button?: number): boolean;
-    isMousePressed(button?: number): boolean;
-    isMouseReleased(button?: number): boolean;
+    isPointerDown(button?: number): boolean;
+    isPointerPressed(button?: number): boolean;
+    isPointerReleased(button?: number): boolean;
 }

package/dist/input.js

@@ -3,11 +3,11 @@ export class Input {
     keys = new Set(); // Key on hold
     keysPressed = new Set(); // Key pressed
     keysReleased = new Set(); // Key released
-    mouseX = 0; // Mouse coord x in canvas
-    mouseY = 0; // Mouse coord y in canvas
-    mouseButtons = new Set(); // Mouse button on hold
-    mousePressed = new Set(); // Mouse button pressed 
-    mouseReleased = new Set(); // Mouse button released
+    pointerX = 0; // Mouse/touch coord x in canvas
+    pointerY = 0; // Mouse/touch coord y in canvas
+    pointers = new Set(); // Mouse/touch on hold
+    pointersPressed = new Set(); // Mouse/touch pressed 
+    pointersReleased = new Set(); // Mouse/touch released
     constructor(options) {
         this.canvas = options.canvas;
         // Keyboard
@@ -21,21 +21,40 @@ export class Input {
             this.keys.delete(e.key);
             this.keysReleased.add(e.key);
         });
-        // Mouse
+        // Mouse and touch
         this.canvas.addEventListener("mousemove", (e) => {
             const rect = this.canvas.getBoundingClientRect();
-            this.mouseX = e.clientX - rect.left;
-            this.mouseY = e.clientY - rect.top;
+            this.pointerX = e.clientX - rect.left;
+            this.pointerY = e.clientY - rect.top;
         });
         this.canvas.addEventListener("mousedown", (e) => {
-            if (!this.mouseButtons.has(e.button)) {
-                this.mousePressed.add(e.button);
+            if (!this.pointers.has(e.button)) {
+                this.pointersPressed.add(e.button);
             }
-            this.mouseButtons.add(e.button);
+            this.pointers.add(e.button);
         });
         this.canvas.addEventListener("mouseup", (e) => {
-            this.mouseButtons.delete(e.button);
-            this.mouseReleased.add(e.button);
+            this.pointers.delete(e.button);
+            this.pointersReleased.add(e.button);
+        });
+        this.canvas.addEventListener("touchmove", (e) => {
+            e.preventDefault();
+            const rect = this.canvas.getBoundingClientRect();
+            const touch = e.touches[0];
+            this.pointerX = touch.clientX - rect.left;
+            this.pointerY = touch.clientY - rect.top;
+        });
+        this.canvas.addEventListener("touchstart", (e) => {
+            e.preventDefault();
+            if (!this.pointers.has(2)) {
+                this.pointersPressed.add(2);
+            }
+            this.pointers.add(2);
+        });
+        this.canvas.addEventListener("touchend", (e) => {
+            e.preventDefault();
+            this.pointers.delete(2);
+            this.pointersReleased.add(2);
         });
         // Prevent right-click menu
         this.canvas.addEventListener("contextmenu", (e) => {
@@ -46,7 +65,8 @@ export class Input {
     update() {
         this.keysPressed.clear();
         this.keysReleased.clear();
-        this.mousePressed.clear();
+        this.pointersPressed.clear();
+        this.pointersReleased.clear();
     }
     // Helper methods
     isKeyDown(key) {
@@ -58,13 +78,13 @@ export class Input {
     isKeyReleased(key) {
         return this.keysReleased.has(key);
     }
-    isMouseDown(button = 0) {
-        return this.mouseButtons.has(button);
+    isPointerDown(button = 0) {
+        return this.pointers.has(button);
     }
-    isMousePressed(button = 0) {
-        return this.mousePressed.has(button);
+    isPointerPressed(button = 0) {
+        return this.pointersPressed.has(button);
     }
-    isMouseReleased(button = 0) {
-        return this.mouseReleased.has(button);
+    isPointerReleased(button = 0) {
+        return this.pointersReleased.has(button);
     }
 }

package/dist/physics.d.ts

@@ -20,6 +20,7 @@ export declare class RigidBody {
     torque: number;
     constructor(options?: RigidBodyOptions);
 }
+export type EntityBody = RigidBody;
 export declare class Physics {
     update(entities: Entity[]): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kippy",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Kippy 2D web game engine for JS",
   "keywords": [
     "kippy",