From b28a154a92418447d1555171416d8c83cc297a72 Mon Sep 17 00:00:00 2001 From: ztimson Date: Sat, 6 Aug 2022 22:45:35 -0400 Subject: [PATCH] Added some animations --- src/main.ts | 4 ++-- src/renderer.ts | 19 +++++++++---------- src/sprites.ts | 33 +++++++++++++++++++++------------ src/unit-controller.ts | 40 ++++++++++++++++++++++++++++++---------- 4 files changed, 62 insertions(+), 34 deletions(-) diff --git a/src/main.ts b/src/main.ts index b716803..43fc763 100644 --- a/src/main.ts +++ b/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 diff --git a/src/renderer.ts b/src/renderer.ts index 6aaab8c..e01aae1 100644 --- a/src/renderer.ts +++ b/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); diff --git a/src/sprites.ts b/src/sprites.ts index b815389..3ad9a0a 100644 --- a/src/sprites.ts +++ b/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(); } } diff --git a/src/unit-controller.ts b/src/unit-controller.ts index 08add2d..1f0f5f3 100644 --- a/src/unit-controller.ts +++ b/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); } }