Hello!

commit 1d67b4b8e73308e5e03fed5bd22b5b61c811cc8f Author: Ronja Date: Thu Jan 30 16:53:39 2020 +0100 js demo diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2f94b93 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +package-lock.json diff --git a/Assets/2dPalette.aseprite b/Assets/2dPalette.aseprite new file mode 100644 index 0000000..bb17534 Binary files /dev/null and b/Assets/2dPalette.aseprite differ diff --git a/Assets/2dPaletteImage.aseprite b/Assets/2dPaletteImage.aseprite new file mode 100644 index 0000000..19ea42a Binary files /dev/null and b/Assets/2dPaletteImage.aseprite differ diff --git a/Assets/Background.aseprite b/Assets/Background.aseprite new file mode 100644 index 0000000..33312e2 Binary files /dev/null and b/Assets/Background.aseprite differ diff --git a/package.json b/package.json new file mode 100644 index 0000000..400da33 --- /dev/null +++ b/package.json @@ -0,0 +1,23 @@ +{ + "name": "cabin_server", + "version": "1.0.0", + "description": "", + "main": "server.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "start": "node server.js" + }, + "repository": { + "type": "git", + "url": "git+ssh://git@gitlab.com/totallyRonja/cabingame.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://gitlab.com/totallyRonja/cabingame/issues" + }, + "homepage": "https://gitlab.com/totallyRonja/cabingame#readme", + "dependencies": { + "express": "^4.17.1" + } +} diff --git a/server.js b/server.js new file mode 100644 index 0000000..afd2bed --- /dev/null +++ b/server.js @@ -0,0 +1,9 @@ +const express = require('express'); +var path = require("path"); +const app = express(); + +express.static.mime.define({'application/javascript': ['js']}); + +app.use(express.static('src')) + +app.listen(8080, () => console.log('Listening on port 8080!')); diff --git a/src/assets/Background.png b/src/assets/Background.png new file mode 100644 index 0000000..5709f13 Binary files /dev/null and b/src/assets/Background.png differ diff --git a/src/assets/bunny.png b/src/assets/bunny.png new file mode 100644 index 0000000..79c3167 Binary files /dev/null and b/src/assets/bunny.png differ diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..ccd432e --- /dev/null +++ b/src/index.html @@ -0,0 +1,28 @@ + + + + Hello! + + + + + + + + + + + + \ No newline at end of file diff --git a/src/package.json b/src/package.json new file mode 100644 index 0000000..d085101 --- /dev/null +++ b/src/package.json @@ -0,0 +1,15 @@ +{ + "name": "cabin", + "version": "1.0.0", + "description": "", + "main": "index.js", + "dependencies": { + "ecsy": "^0.2.1", + "pixi.js": "^5.2.0" + }, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC" +} diff --git a/src/src/demo.js b/src/src/demo.js new file mode 100644 index 0000000..2fb531e --- /dev/null +++ b/src/src/demo.js @@ -0,0 +1,175 @@ +const NUM_ELEMENTS = 60; +const SPEED_MULTIPLIER = 1; +const SHAPE_SIZE = 10; +const SHAPE_HALF_SIZE = SHAPE_SIZE / 2; + +// Initialize pixi +let canvasWidth = 81; +let canvasHeight = 144; +const app = new PIXI.Application({ + width: canvasWidth, + height: canvasHeight, + backgroundColor: 0xFFFFFF, + resolution: 1, + antialias: false, +}); +document.body.appendChild(app.view); + +PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; +PIXI.settings.ROUND_PIXELS = true; + +recalculateSize(); + +window.addEventListener( 'resize', recalculateSize, false ); + +function recalculateSize(){ + let multiplier = Math.min(0, 0); + app.view.style.width = canvasWidth * "px"; + app.view.style.height = "720px"; +} + +const bgTex = PIXI.Sprite.from('../assets/Background.png'); +app.stage.addChild(bgTex); + +//---------------------- +// Components +//---------------------- + +// Velocity component +class Velocity { + constructor() { + this.x = this.y = 0; + } +} + +// Position component +class Position { + constructor() { + this.x = this.y = 0; + } +} + +// Shape component +class Shape { + constructor() { + this.shape = null; + } +} + +// Renderable component +class Renderable extends ECSY.TagComponent {} + +//---------------------- +// Systems +//---------------------- + +// MovableSystem +class MovableSystem extends ECSY.System { + // This method will get called on every frame by default + execute(delta) { + // Iterate through all the entities on the query + this.queries.moving.results.forEach(entity => { + var velocity = entity.getComponent(Velocity); + var position = entity.getMutableComponent(Position); + position.x += velocity.x * delta; + position.y += velocity.y * delta; + + if (position.x > canvasWidth + SHAPE_HALF_SIZE) position.x = - SHAPE_HALF_SIZE; + if (position.x < - SHAPE_HALF_SIZE) position.x = canvasWidth + SHAPE_HALF_SIZE; + if (position.y > canvasHeight + SHAPE_HALF_SIZE) position.y = - SHAPE_HALF_SIZE; + if (position.y < - SHAPE_HALF_SIZE) position.y = canvasHeight + SHAPE_HALF_SIZE; + }); + } +} + +// Define a query of entities that have "Velocity" and "Position" components +MovableSystem.queries = { + moving: { + components: [Velocity, Position] + } +} + +// RendererSystem +class RendererSystem extends ECSY.System { + // This method will get called on every frame by default + execute(delta) { + + // Iterate through all the entities on the query + this.queries.renderables.results.forEach(entity => { + var shape = entity.getComponent(Shape); + var position = entity.getComponent(Position); + this.drawShape(position, shape); + }); + + //app.renderer.render(app.stage); + } + + drawShape(position, shape) { + if(!shape.onStage){ + app.stage.addChild(shape.shape); + shape.onStage = true; + } + + shape.shape.x = position.x; + shape.shape.y = position.y; + } +} + +// Define a query of entities that have "Renderable" and "Shape" components +RendererSystem.queries = { + renderables: { components: [Renderable, Shape] } +} + +// Create world and register the systems on it +var world = new ECSY.World(); +world + .registerSystem(MovableSystem) + .registerSystem(RendererSystem); + +// Some helper functions when creating the components +function getRandomVelocity() { + return { + x: SPEED_MULTIPLIER * (2 * Math.random() - 1), + y: SPEED_MULTIPLIER * (2 * Math.random() - 1) + }; +} + +function getRandomPosition(){ + return { + x: Math.random() * canvasWidth, + y: Math.random() * canvasHeight + }; +} + + +function getRandomShape() { + let graphics = new PIXI.Graphics(); + if(Math.random() >= 0.5) { + graphics.beginFill(0x888888); + graphics.lineStyle(1, 0x222222); + graphics.drawCircle(0, 0, SHAPE_HALF_SIZE); + } else { + graphics.beginFill(0xf28d89); + graphics.lineStyle(1, 0x800904); + graphics.drawRect(-SHAPE_HALF_SIZE, -SHAPE_HALF_SIZE, SHAPE_SIZE, SHAPE_SIZE); + } + + return { + shape: graphics + }; +} + +for (let i = 0; i < NUM_ELEMENTS; i++) { + world + .createEntity() + .addComponent(Velocity, getRandomVelocity()) + .addComponent(Shape, getRandomShape()) + .addComponent(Position, getRandomPosition()) + .addComponent(Renderable) +} + +// Run! +app.ticker.add((delta) => { + // Run all the systems + world.execute(delta); +}); \ No newline at end of file diff --git a/src/tsconfig.json b/src/tsconfig.json new file mode 100644 index 0000000..e9abbc4 --- /dev/null +++ b/src/tsconfig.json @@ -0,0 +1,16 @@ +// not used because typescript is weird + +{ + "compilerOptions": { + "outDir": "./dist/", // path to output directory + "sourceMap": true, // allow sourcemap support + "strictNullChecks": false, // enable strict null checks as a best practice + "module": "commonjs", // specify module code generation + "target": "es6", // specify ECMAScript target version + "allowJs": true, // allow a partial TypeScript and JavaScript codebase + + }, + "include": [ + "./src/" + ] +} \ No newline at end of file