From 1d67b4b8e73308e5e03fed5bd22b5b61c811cc8f Mon Sep 17 00:00:00 2001 From: Ronja Date: Thu, 30 Jan 2020 16:53:39 +0100 Subject: [PATCH] js demo --- .gitignore | 2 + Assets/2dPalette.aseprite | Bin 0 -> 580 bytes Assets/2dPaletteImage.aseprite | Bin 0 -> 596 bytes Assets/Background.aseprite | Bin 0 -> 4788 bytes package.json | 23 +++++ server.js | 9 ++ src/assets/Background.png | Bin 0 -> 1379 bytes src/assets/bunny.png | Bin 0 -> 449 bytes src/index.html | 28 ++++++ src/package.json | 15 +++ src/src/demo.js | 175 +++++++++++++++++++++++++++++++++ src/tsconfig.json | 16 +++ 12 files changed, 268 insertions(+) create mode 100644 .gitignore create mode 100644 Assets/2dPalette.aseprite create mode 100644 Assets/2dPaletteImage.aseprite create mode 100644 Assets/Background.aseprite create mode 100644 package.json create mode 100644 server.js create mode 100644 src/assets/Background.png create mode 100644 src/assets/bunny.png create mode 100644 src/index.html create mode 100644 src/package.json create mode 100644 src/src/demo.js create mode 100644 src/tsconfig.json 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 0000000000000000000000000000000000000000..bb1753443443f7eb95638979d0655272b253034d GIT binary patch literal 580 zcmb`Fy-Pw-7>8d?AsR}p3>Uu!3yN?kDF_QQXy|JQ8fx$>8zO_ih^AI)$x0iFsG+r~ zKcGQqaBc_;?9&PwA}VO;_8c|*2YTT==iYNJ=l8sq6V!_oPjq6EI;j_(h{PDRa*0kY zvTv#_{^L`Q)4$&gm1ByBXBk7fL^-^QrZ$QsQ>Ju8(N_cnxF&paYwvt z9mE$|Owq&D0micMiwh7fvnu%HNoih?jO2M7BzxYcqqYpNkAs&61IS!qKNHMBPM z0UCq`*BSx?5zz`7Br0g=_8hN4U!eDLo^$Uxm-Bnx%T2V1lrA-C6B|Plk!6NeI+I^C zwJ1)m|EN1o|Ek*?sdfU~42Rx`{1aE=-lO}QD|&ObrsVC6DH2Y{U~n-4J(FRW&&`AVIj8!x1v56@;V`9t^u3+`hL2h75bnF zIzS(H#2eO8e38WzO&k%#4mG@x!U!E)l!$4fKtACl6H6w61o>2$-U@$9SvVwa?4&mI z;Rp|Q-P$twJFHUw$M$K`D3v;#nSCQwsdRT`k5b8UxzlxckX)@+d)&u4hxEp@`VVrF BnScNQ literal 0 HcmV?d00001 diff --git a/Assets/Background.aseprite b/Assets/Background.aseprite new file mode 100644 index 0000000000000000000000000000000000000000..33312e209a65b3d392aa1456edf2fc6d3f89fb42 GIT binary patch literal 4788 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 eh console.log('Listening on port 8080!')); diff --git a/src/assets/Background.png b/src/assets/Background.png new file mode 100644 index 0000000000000000000000000000000000000000..5709f13c023c76268eed6ed1c860aa1d282efce3 GIT binary patch literal 1379 zcmV-p1)TbcP)Px#V^B;~MPtWJK8Z*sTtXQl7A)xX0F~(y zPKhQfME>Vt{;o9HW*(tAB8!`}OjKbwKTRJZF#rGm>h1H@+~>f{-1ptY%a&qxL?197 z5C8xGWMEf40000XbW%=J|NsC0|NsC0|NsC0|NsC0|NsC0|NsC0|NsC0|NsC00H49o zApigbfk{L`RA_<4n%j=+APhzOQd{lQv{HgJ^Z);O!rg!|hGBXv^_Da%d)rRP?S`;7 z@HQf12yrI)2i~BIY-b=tXckIDHodiDVXHA@F(?zBr9VitHp?YdVX1cEr9-Mq?yWkrqRp)5ND5_K0puLoDOx8;LQ< zUFR)U{g83mwUT;7@}hpe$AB3F{hfQERN0>rsCG7)q{AKbJsXO=jQ&gd# zW1==bLX_>59+`Qo8lhXL|Cq<7rb;42;$T@J!960o%y30PV;E;D;y~Pxh+5(}8Y0m3tiwJSt9 zSYkJciui!W9b4gkBGklONJZ9oB4*;!s8Ft92XU;iV`qT~L}QaJA#*yS6mpSPh$@W` z&aZz(jE&e3XZn%J>rRdPh^6F$7>|2Y9($csjn`8e`Ao{k6m$W<^kj$Yj#37t|C{3; zD2bwiCE}vCxK=_$4YAP6im!+zij|&-Oh~2GlR4h6{M_h2db>BmXDUWhL z3MtO6x1Pm?-S!HR^-vKZj@NQ+Cp5x#*UQB0KuuKV;d8D9C4&Xu`*9kf)yQDfWS%HSzwYS@5+yG8V}ch%O+PAJ zBSX}R;?}fIoY2U6%SuMxYvS5ALycEwNTeU9%0X<9Bhq0%>Z)H67so;hE{>WTqRKkZ z3zQ>b-+2Eo;rWV!s3{3_4Uq29XjF*zC)F&mQ(BE{*ESo^6*6(+h;-187{==~Lddo_ zd|r$8n*At?WFk*g7J-d40PeY)5=U1|mC+L!6OivVb41_)659V}h`Dqssb>oRo9-zZ z*KCE$Y3FH9_p%=+x$?1E8K=#h>EoV8h3f7e)Y0=yY4#n`k<;2;DWAkhGu}1=qKeo` zwkI^6cf{HlXgWM@*F$lkADq6!g@g0Nd(nNu@N&JGD~=HMy8*>G!&WJ*%}F%x=hy4` za9yM#O6IR}nDcnNUSIF$VZWa#aqXS6Mp{ZPnPO~F%=7(vysXBfCeC+{uki7FSc$&a z9C0G-)@MxE2(4*DpJ0QyJ(f}bF2brx&1k=v^iW(PI>Gd5IseQg<SOJFMz`0@qn1GK$9W|wOohG3Lai}FkWLtiT<2<{JbM8>W7|R$! zUuNqg#gmKmsTnILy&K;zJjd^_40xy)%EA1>FWWk~LFpr>Et|!Hv(V>Hs9!2xEQJ>~!qz76HLsxFXdG zs5~GjUDeD6dXvG$_#HtoUok|M-X@BSTy{VK4P?TJZcz}O&FVzD0fZu8Yajr@?2aYL r_Q@_>J=ju&>AqoA-=wzwF98MsNX4 + + + 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