WIP
This commit is contained in:
parent
0125f5b7ab
commit
4b55f4799e
BIN
assets/files.png
Normal file
BIN
assets/files.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
assets/logo.png
Normal file
BIN
assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1018 B |
BIN
assets/shadow_dog.png
Normal file
BIN
assets/shadow_dog.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
BIN
assets/sprite_template.png
Normal file
BIN
assets/sprite_template.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 228 B |
21
index.html
21
index.html
|
|
@ -3,16 +3,21 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>TS Electron Template</title>
|
||||
<title>Desktop Daemon</title>
|
||||
<link rel="icon" type="img/png" src="assets/logo.png">
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Placeholder -->
|
||||
<h1>Versions:</h1>
|
||||
<p>Node.js - <span id="node-version"></span></p>
|
||||
<p>Chromium - <span id="chrome-version"></span></p>
|
||||
<p>Electron - <span id="electron-version"></span></p>
|
||||
|
||||
<!-- Put your code inside src/renderer.ts -->
|
||||
<canvas id="canvas"></canvas>
|
||||
<script src="./dist/renderer.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
1
src/constants.ts
Normal file
1
src/constants.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export const FRAME_RATE = 10;
|
||||
23
src/main.ts
23
src/main.ts
|
|
@ -1,14 +1,29 @@
|
|||
import {app, BrowserWindow} from "electron";
|
||||
import {app, BrowserWindow, screen} from "electron";
|
||||
import * as path from "path";
|
||||
|
||||
// Window factory
|
||||
function createWindow() {
|
||||
const primaryDisplay = screen.getPrimaryDisplay();
|
||||
const height = 250;
|
||||
|
||||
const window = new BrowserWindow({
|
||||
height: 600,
|
||||
width: 800,
|
||||
x: 0,
|
||||
y: primaryDisplay.workArea.height - height,
|
||||
height: height,
|
||||
width: primaryDisplay.size.width,
|
||||
frame: false,
|
||||
transparent: true,
|
||||
roundedCorners: false,
|
||||
resizable: false,
|
||||
fullscreen: false,
|
||||
alwaysOnTop: false,
|
||||
icon: path.join(__dirname, "../assets/logo.png"),
|
||||
title: 'Desktop Daemon',
|
||||
webPreferences: {
|
||||
nodeIntegration: true,
|
||||
contextIsolation: false,
|
||||
preload: path.join(__dirname, "preload.js")
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
window.loadFile(path.join(__dirname, "../index.html"));
|
||||
|
|
|
|||
|
|
@ -1,4 +1,34 @@
|
|||
/*
|
||||
This file is imported by index.html, you can put any code you want to run afer
|
||||
page load, here.
|
||||
*/
|
||||
const {FRAME_RATE} = require('./dist/constants.js');
|
||||
const {UnitController} = require('./dist/unit-controller.js');
|
||||
const {StaticSprite} = require('./dist/sprites.js');
|
||||
const {sleep} = require('./dist/utils.js');
|
||||
|
||||
const canvas = <HTMLCanvasElement>document.getElementById('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const screenHeight = window.innerHeight;
|
||||
const screenWidth = window.innerWidth;
|
||||
|
||||
canvas.width = screenWidth;
|
||||
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'],
|
||||
spriteScale: 0.5,
|
||||
spriteWidth: 575,
|
||||
spriteHeight: 523,
|
||||
spriteFrames: 7,
|
||||
});
|
||||
|
||||
(async () => {
|
||||
sprite.vel = [20, 0];
|
||||
while(true) {
|
||||
clearScreen();
|
||||
file.render(25, 25);
|
||||
sprite.tick();
|
||||
await sleep(1000 / FRAME_RATE);
|
||||
}
|
||||
})();
|
||||
|
|
|
|||
58
src/sprites.ts
Normal file
58
src/sprites.ts
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
export class AnimatedSprite {
|
||||
private animation = '';
|
||||
private animationIndex = -1;
|
||||
private frame = -1;
|
||||
private spriteSheet!: HTMLImageElement;
|
||||
|
||||
constructor(private ctx: CanvasRenderingContext2D,
|
||||
public spritesheetSrc: string,
|
||||
public spriteAnimations: string[],
|
||||
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) {
|
||||
this.frame = 0;
|
||||
this.animation = animation;
|
||||
this.animationIndex = this.spriteAnimations.findIndex((a) => a == animation);
|
||||
} else {
|
||||
this.frame++;
|
||||
if(this.frame >= this.spriteFrames) this.frame = 0;
|
||||
}
|
||||
|
||||
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.spriteWidth * this.spriteScale, this.spriteHeight * this.spriteScale);
|
||||
}
|
||||
}
|
||||
|
||||
export class StaticSprite {
|
||||
private spriteSheet!: HTMLImageElement;
|
||||
|
||||
constructor(private ctx: CanvasRenderingContext2D,
|
||||
public spritesheetSrc: string,
|
||||
public sprite: [number, number],
|
||||
public spriteScale = 1,
|
||||
public spriteWidth = 100,
|
||||
public spriteHeight = 100,
|
||||
) {
|
||||
this.spriteSheet = new Image();
|
||||
this.spriteSheet.src = this.spritesheetSrc;
|
||||
}
|
||||
|
||||
render(x: number, y: number) {
|
||||
this.ctx.drawImage(this.spriteSheet,
|
||||
this.sprite[0] * this.spriteWidth, this.sprite[1] * this.spriteHeight,
|
||||
this.spriteWidth, this.spriteHeight,
|
||||
x, this.ctx.canvas.height - (this.spriteHeight * this.spriteScale + y),
|
||||
this.spriteWidth * this.spriteScale, this.spriteHeight * this.spriteScale);
|
||||
}
|
||||
}
|
||||
35
src/unit-controller.ts
Normal file
35
src/unit-controller.ts
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
// 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[],
|
||||
spriteWidth?: number,
|
||||
spriteHeight?: number,
|
||||
spriteFrames?: number,
|
||||
scale?: number,
|
||||
}
|
||||
|
||||
export class UnitController {
|
||||
private sprite!: typeof AnimatedSprite;
|
||||
|
||||
public pos = [0, 0];
|
||||
public vel = [0, 0];
|
||||
|
||||
constructor(private ctx: CanvasRenderingContext2D,
|
||||
private spriteOptions: SpriteOptions,
|
||||
) {
|
||||
this.sprite = new AnimatedSprite(ctx, ...Object.values(spriteOptions));
|
||||
}
|
||||
|
||||
tick() {
|
||||
this.pos = [this.pos[0] + (this.vel[0] / FRAME_RATE), this.pos[1] + (this.vel[1] / FRAME_RATE)];
|
||||
let animation = 'idle';
|
||||
// if(this.vel[0] < 0) animation = 'left';
|
||||
// if(this.vel[0] > 0) animation = 'right';
|
||||
this.sprite.render(this.pos[0], this.pos[1], animation);
|
||||
}
|
||||
}
|
||||
3
src/utils.ts
Normal file
3
src/utils.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export function sleep(ms: number) {
|
||||
return new Promise(res => setTimeout(res, ms));
|
||||
}
|
||||
|
|
@ -1,14 +1,15 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"module": "commonjs",
|
||||
"noImplicitAny": true,
|
||||
"esModuleInterop": true,
|
||||
"sourceMap": true,
|
||||
"outDir": "dist",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"*": ["node_modules/*"]
|
||||
},
|
||||
"lib": ["dom", "es2015"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user