Added some animations

src/main.ts

@@ -16,7 +16,7 @@ function createWindow() {
     roundedCorners: false,
     resizable: false,
     fullscreen: false,
-    alwaysOnTop: false,
+    alwaysOnTop: true,
     icon: path.join(__dirname, "../assets/logo.png"),
     title: 'Desktop Daemon',
     webPreferences: {
@@ -27,7 +27,7 @@ function createWindow() {
   });
 
   window.loadFile(path.join(__dirname, "../index.html"));
-  window.webContents.openDevTools();
+  // window.webContents.openDevTools();
 }
 
 // Start

src/renderer.ts

@@ -13,22 +13,21 @@ canvas.height = screenHeight;
 
 function clearScreen() { ctx.clearRect(0, 0, screenWidth, screenHeight); }
 
-const file = new StaticSprite(ctx, './assets/files.png', [1, 0], 0.5);
 const sprite = new UnitController(ctx, {
 		spritesheetSrc: './assets/shadow_dog.png',
-		spriteAnimations: ['idle'],
+		spriteAnimations: [
+			{name: 'idle', y: 0, frames: 7},
+			{name: 'right', y: 3, frames: 9},
+			{name: 'left', y: 3, frames: 9, reverse: true},
+		],
 		spriteScale: 0.5,
 		spriteWidth: 575,
 		spriteHeight: 523,
-		spriteFrames: 7,
 	});
 
-(async () => {
-	sprite.vel = [20, 0];
-	while(true) {
+setInterval(() => {
+	requestAnimationFrame(() => {
 		clearScreen();
-		file.render(25, 25);
 		sprite.tick();
-		await sleep(1000 / FRAME_RATE);
-	}
-})();
+	})
+}, 1000 / FRAME_RATE);

src/sprites.ts

@@ -1,36 +1,45 @@
+export type SpriteAnimation = {
+	name: string;
+	y: number;
+	frames: number;
+	reverse?: boolean;
+}
+
 export class AnimatedSprite {
-	private animation = '';
-	private animationIndex = -1;
+	private animation: any = null;
+	private animationName = '';
 	private frame = -1;
 	private spriteSheet!: HTMLImageElement;
 
 	constructor(private ctx: CanvasRenderingContext2D,
 				public spritesheetSrc: string,
-				public spriteAnimations: string[],
+				public spriteAnimations: SpriteAnimation[],
 				public spriteScale = 1,
 				public spriteWidth = 100,
 				public spriteHeight = 100,
-				public spriteFrames = 10,
 	) {
 		this.spriteSheet = new Image();
 		this.spriteSheet.src = this.spritesheetSrc;
 	}
 
-	render(x: number, y: number, animation: string = this.animation) {
-		if(this.animation != animation) {
+	render(x: number, y: number, animation: string = this.animationName) {
+		if(this.animationName != animation) {
 			this.frame = 0;
-			this.animation = animation;
-			this.animationIndex = this.spriteAnimations.findIndex((a) => a == animation);
+			this.animation = this.spriteAnimations.find((a) => a.name == animation);
+			this.animationName = this.animation.name;
 		} else {
 			this.frame++;
-			if(this.frame >= this.spriteFrames) this.frame = 0;
+			if(this.frame >= this.animation.frames) this.frame = 0;
 		}
 
+		this.ctx.save();
+		this.ctx.translate(this.spriteWidth * this.spriteScale / 2 * (this.animation.reverse ? 1 : -1), 0);
+		this.ctx.scale(this.animation.reverse ? -1 : 1, 1);
 		this.ctx.drawImage(this.spriteSheet,
-			this.frame * this.spriteWidth, this.animationIndex * this.spriteHeight,
-			this.spriteWidth, this.spriteHeight,
-			x, this.ctx.canvas.height - (this.spriteHeight * this.spriteScale + y),
+			this.frame * this.spriteWidth, this.animation.y * this.spriteHeight, this.spriteWidth, this.spriteHeight,
+			x * (this.animation.reverse ? -1 : 1), this.ctx.canvas.height - (this.spriteHeight * this.spriteScale + y),
 			this.spriteWidth * this.spriteScale, this.spriteHeight * this.spriteScale);
+		this.ctx.restore();
 	}
 }
 

src/unit-controller.ts

@@ -1,20 +1,17 @@
 // const {FRAME_RATE} = require('./dist/constants.js');
 const {AnimatedSprite} = require('./sprites.js');
 
-// TODO - Move to import
-const FRAME_RATE = 10;
-
 export type SpriteOptions = {
 	spritesheetSrc: string,
-	spriteAnimations: string[],
+	spriteAnimations: any[],
+	spriteScale?: number,
 	spriteWidth?: number,
 	spriteHeight?: number,
-	spriteFrames?: number,
-	scale?: number,
 }
 
 export class UnitController {
 	private sprite!: typeof AnimatedSprite;
+	private random = 0;
 
 	public pos = [0, 0];
 	public vel = [0, 0];
@@ -22,14 +19,37 @@ export class UnitController {
 	constructor(private ctx: CanvasRenderingContext2D,
 				private spriteOptions: SpriteOptions,
 	) {
-		this.sprite = new AnimatedSprite(ctx, ...Object.values(spriteOptions));
+		this.sprite = new AnimatedSprite(ctx, spriteOptions.spritesheetSrc, spriteOptions.spriteAnimations, spriteOptions.spriteScale, spriteOptions.spriteWidth, spriteOptions.spriteHeight);
 	}
 
 	tick() {
-		this.pos = [this.pos[0] + (this.vel[0] / FRAME_RATE), this.pos[1] + (this.vel[1] / FRAME_RATE)];
+		// Randomly move the unit
+		if(this.random <= 0) {
+			const move = Math.random();
+			if(move < 0.333) this.vel = [0, 0];
+			else if(move < 0.666) this.vel = [-10, 0];
+			else this.vel = [10, 0];
+			this.random = Math.random() * 50;
+		}
+		this.random--;
+
+		// Calculate new position
+		this.pos = [this.pos[0] + this.vel[0], this.pos[1] + (this.vel[1] - 9.8)];
+		if(this.pos[0] < 0) {
+			this.pos[0] = 0;
+			this.vel[0] = 0;
+		} else if(this.pos[0] > this.ctx.canvas.width) {
+			this.pos[0] = this.ctx.canvas.width;
+			this.vel[0] = 0;
+		}
+		if(this.pos[1] < 0) this.pos[1] = 0;
+
+		// Decide on animation
 		let animation = 'idle';
-		// if(this.vel[0] < 0) animation = 'left';
-		// if(this.vel[0] > 0) animation = 'right';
+		if(this.vel[0] < 0) animation = 'left';
+		if(this.vel[0] > 0) animation = 'right';
+
+		// Draw
 		this.sprite.render(this.pos[0], this.pos[1], animation);
 	}
 }