totallyRonja/CabinGame
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

js demo

Browse source
This commit is contained in:
Ronja 2020-01-30 16:53:39 +01:00
commit 1d67b4b8e7
12 changed files with 268 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
node_modules
package-lock.json

BIN
Assets/2dPalette.aseprite Normal file
View file

Binary file not shown.

BIN
Assets/2dPaletteImage.aseprite Normal file
View file

Binary file not shown.

BIN
Assets/Background.aseprite Normal file
View file

Binary file not shown.

23
package.json Normal file
View file

@ -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"
}
}

9
server.js Normal file
View file

@ -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!'));

BIN
src/assets/Background.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/bunny.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 449 B

28
src/index.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
margin: 0;
padding: 0;
}
canvas {
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-crisp-edges;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
</style>
<script src="node_modules/pixi.js/dist/pixi.js"></script>
<script src="node_modules/ecsy/build/ecsy.js"></script>
</head>
<body>
<script src="src/demo.js" type="module"></script>
</body>
</html>

15
src/package.json Normal file
View file

@ -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"
}

175
src/src/demo.js Normal file
View file

@ -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);
});

16
src/tsconfig.json Normal file
View file

@ -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/"
]
}