kippy 0.1.0 → 0.2.1

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
@@ -81,50 +85,74 @@ entity.rotation; // Initialized from the "rotation" param above, 0 if not specif
 
 A sprite represents what an entity looks like, the "graphics part", you can create a sprite like this:
 ```js
+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 with the `Input` class:
+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:
 ```js
-const input = new Input({
-    canvas
-});
-
-// You can assign it into a game during initialization
-const game = new Game({
-    // other stuff
-    input
-})
-// or after
-game.setInput(input);
+const input = game.input;
 ```
 
 Then in a scene's `update` method, you can use these utilities to check for key presses:
 ```js
 // Keyboard
-input.isKeyDown(/* Character/key here */); // Key hold
-input.isKeyPressed(/* Character/key here */); // Key press
-input.isKeyReleased(/* Character/key here */); // Key released
+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 */); // Mouse hold
-input.isMousePressed(/* 0 for left, 1 for right */); // Mouse press
-input.isMouseReleased(/* 0 for left, 1 for right */); // Mouse released
+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
 ```
 
 ### Physics
 
-To be added, will have rigidBody for entities with collision and movement-related stuff.
+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 mutate `entity.sprite` to swap sprites and create animations manually.
 
 ### Audio
 

package/dist/entity.d.ts

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

package/dist/entity.js

@@ -3,14 +3,13 @@ export class Entity {
     x;
     y;
     rotation;
-    constructor(options) {
+    body;
+    constructor(options = {}) {
         this.sprite = options.sprite;
-        this.x = options.x || 0;
-        this.y = options.y || 0;
-        this.rotation = options.rotation || 0;
-    }
-    setSprite(sprite) {
-        this.sprite = sprite;
+        this.x = options.x ?? 0;
+        this.y = options.y ?? 0;
+        this.rotation = options.rotation ?? 0;
+        this.body = options.body;
     }
     render(ctx) {
         if (this.sprite) {

package/dist/game.d.ts

@@ -1,18 +1,21 @@
 import { Input } from "./input.js";
+import { Physics } from "./physics.js";
 import { Scene } from "./scene.js";
 export interface GameOptions {
     canvas: HTMLCanvasElement;
     input?: Input;
+    physics?: Physics;
 }
 export declare class Game {
     canvas: HTMLCanvasElement;
     ctx: CanvasRenderingContext2D;
     scene?: Scene;
     lastTime: number;
-    input?: Input;
+    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

@@ -1,22 +1,27 @@
+import { Input } from "./input.js";
+import { Physics } from "./physics.js";
 export class Game {
     canvas;
     ctx;
     scene;
     lastTime = 0;
     input;
+    physics;
     constructor(options) {
         this.canvas = options.canvas;
         this.ctx = this.canvas.getContext("2d");
-        this.input = options.input;
+        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));
     }
@@ -24,12 +29,20 @@ export class Game {
     loop(timestamp) {
         const dt = (timestamp - this.lastTime) / 1000;
         this.lastTime = timestamp;
-        // Update state, clear canvas, re-render
-        this.scene?.update(dt);
-        this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
-        this.scene?.render(this.ctx);
-        // Update input info
-        this.input?.update();
+        if (this.scene) {
+            // Update input info
+            this.input.update();
+            // Update game logic
+            this.scene.update(dt);
+            // Update physics info
+            this.physics.update(this.scene.entities);
+            // Render
+            this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+            this.scene.render(this.ctx);
+        }
+        else {
+            throw new Error("Can not run game loop without a scene");
+        }
         requestAnimationFrame(this.loop.bind(this));
     }
 }

package/dist/physics.d.ts

@@ -0,0 +1,26 @@
+import { Entity } from "./entity";
+export interface RigidBodyOptions {
+    velocityX?: number;
+    velocityY?: number;
+    rotationVelocity?: number;
+    mass?: number;
+    inertia?: number;
+    forceX?: number;
+    forceY?: number;
+    torque?: number;
+}
+export declare class RigidBody {
+    velocityX: number;
+    velocityY: number;
+    rotationVelocity: number;
+    mass: number;
+    inertia: number;
+    forceX: number;
+    forceY: number;
+    torque: number;
+    constructor(options?: RigidBodyOptions);
+}
+export type EntityBody = RigidBody;
+export declare class Physics {
+    update(entities: Entity[]): void;
+}

package/dist/physics.js

@@ -0,0 +1,36 @@
+export class RigidBody {
+    velocityX;
+    velocityY;
+    rotationVelocity;
+    mass;
+    inertia;
+    forceX;
+    forceY;
+    torque;
+    constructor(options = {}) {
+        this.velocityX = options.velocityX ?? 0;
+        this.velocityY = options.velocityY ?? 0;
+        this.rotationVelocity = options.rotationVelocity ?? 0;
+        this.mass = options.mass ?? 1;
+        this.inertia = options.inertia ?? 1;
+        this.forceX = options.forceX ?? 0;
+        this.forceY = options.forceY ?? 0;
+        this.torque = options.torque ?? 0;
+    }
+}
+export class Physics {
+    update(entities) {
+        for (const entity of entities) {
+            if (entity.body instanceof RigidBody) {
+                // Acceleration/apply force
+                entity.body.velocityX += entity.body.forceX / entity.body.mass;
+                entity.body.velocityY += entity.body.forceY / entity.body.mass;
+                entity.body.rotationVelocity += entity.body.torque / entity.body.inertia;
+                // Positional update
+                entity.x += entity.body.velocityX;
+                entity.y += entity.body.velocityY;
+                entity.rotation += entity.body.rotationVelocity;
+            }
+        }
+    }
+}

package/dist/sprite.js

@@ -4,7 +4,7 @@ export class Sprite {
     height;
     constructor(options) {
         this.texture = options.texture;
-        this.width = options.width || this.texture.width;
-        this.height = options.height || this.texture.height;
+        this.width = options.width ?? this.texture.width;
+        this.height = options.height ?? this.texture.height;
     }
 }

package/index.d.ts

@@ -3,3 +3,4 @@ export * from "./dist/scene.js";
 export * from "./dist/entity.js";
 export * from "./dist/sprite.js";
 export * from "./dist/input.js";
+export * from "./dist/physics.js";

package/index.js

@@ -3,3 +3,4 @@ export * from "./dist/scene.js";
 export * from "./dist/entity.js";
 export * from "./dist/sprite.js";
 export * from "./dist/input.js";
+export * from "./dist/physics.js";

package/package.json

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