From 1f5af5199d8f3b8f72f169105f75bc908dedaf6d Mon Sep 17 00:00:00 2001 From: _Bastler <_Bastler@bstly.de> Date: Thu, 13 May 2021 15:24:35 +0200 Subject: [PATCH] animated tiles --- front/package.json | 101 +++++++++---------- front/src/Phaser/Game/GameScene.ts | 14 ++- front/src/Phaser/Shaders/OutlinePipeline.ts | 102 ++++++++++---------- front/yarn.lock | 42 ++------ 4 files changed, 121 insertions(+), 138 deletions(-) diff --git a/front/package.json b/front/package.json index b16da5fe..c4ea20a3 100644 --- a/front/package.json +++ b/front/package.json @@ -1,51 +1,52 @@ { - "name": "workadventurefront", - "version": "1.0.0", - "main": "index.js", - "license": "SEE LICENSE IN LICENSE.txt", - "devDependencies": { - "@types/google-protobuf": "^3.7.3", - "@types/jasmine": "^3.5.10", - "@types/quill": "^1.3.7", - "@typescript-eslint/eslint-plugin": "^2.26.0", - "@typescript-eslint/parser": "^2.26.0", - "css-loader": "^5.1.3", - "eslint": "^6.8.0", - "html-webpack-plugin": "^4.3.0", - "jasmine": "^3.5.0", - "mini-css-extract-plugin": "^1.3.9", - "sass": "^1.32.8", - "sass-loader": "10.1.1", - "ts-loader": "^6.2.2", - "ts-node": "^8.10.2", - "typescript": "^3.8.3", - "webpack": "^4.42.1", - "webpack-cli": "^3.3.11", - "webpack-dev-server": "^3.10.3", - "webpack-merge": "^4.2.2" - }, - "dependencies": { - "@fontsource/press-start-2p": "^4.2.2", - "@types/simple-peer": "^9.6.0", - "@types/socket.io-client": "^1.4.32", - "axios": "^0.21.1", - "generic-type-guard": "^3.2.0", - "google-protobuf": "^3.13.0", - "nes.css": "^2.3.0", - "phaser": "3.24.1", - "phaser3-rex-plugins": "^1.1.42", - "queue-typescript": "^1.0.1", - "quill": "1.3.6", - "rxjs": "^6.6.3", - "simple-peer": "^9.6.2", - "socket.io-client": "^2.3.0", - "webpack-require-http": "^0.4.3" - }, - "scripts": { - "start": "webpack-dev-server --open", - "build": "webpack --config webpack.prod.js", - "test": "ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json", - "lint": "node_modules/.bin/eslint src/ . --ext .ts", - "fix": "node_modules/.bin/eslint --fix src/ . --ext .ts" - } -} + "name": "workadventurefront", + "version": "1.0.0", + "main": "index.js", + "license": "SEE LICENSE IN LICENSE.txt", + "devDependencies": { + "@types/google-protobuf": "^3.7.3", + "@types/jasmine": "^3.5.10", + "@types/quill": "^1.3.7", + "@typescript-eslint/eslint-plugin": "^2.26.0", + "@typescript-eslint/parser": "^2.26.0", + "css-loader": "^5.1.3", + "eslint": "^6.8.0", + "html-webpack-plugin": "^4.3.0", + "jasmine": "^3.5.0", + "mini-css-extract-plugin": "^1.3.9", + "sass": "^1.32.8", + "sass-loader": "10.1.1", + "ts-loader": "^6.2.2", + "ts-node": "^8.10.2", + "typescript": "^3.8.3", + "webpack": "^4.42.1", + "webpack-cli": "^3.3.11", + "webpack-dev-server": "^3.10.3", + "webpack-merge": "^4.2.2" + }, + "dependencies": { + "@fontsource/press-start-2p": "^4.2.2", + "@types/simple-peer": "^9.6.0", + "@types/socket.io-client": "^1.4.32", + "axios": "^0.21.1", + "generic-type-guard": "^3.2.0", + "google-protobuf": "^3.13.0", + "nes.css": "^2.3.0", + "phaser": "^3.54.0", + "phaser-animated-tiles": "Informatic/phaser-animated-tiles#2d5c66a9bc426dd4cb2d856c1d599494a74f8067", + "phaser3-rex-plugins": "^1.1.42", + "queue-typescript": "^1.0.1", + "quill": "1.3.6", + "rxjs": "^6.6.3", + "simple-peer": "^9.6.2", + "socket.io-client": "^2.3.0", + "webpack-require-http": "^0.4.3" + }, + "scripts": { + "start": "webpack-dev-server --open", + "build": "webpack --config webpack.prod.js", + "test": "ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json", + "lint": "node_modules/.bin/eslint src/ . --ext .ts", + "fix": "node_modules/.bin/eslint --fix src/ . --ext .ts" + } +} \ No newline at end of file diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index ca5ff914..544bd0c4 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -89,6 +89,7 @@ import {TextUtils} from "../Components/TextUtils"; import {touchScreenManager} from "../../Touch/TouchScreenManager"; import {PinchManager} from "../UserInput/PinchManager"; import {joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey} from "../Components/MobileJoystick"; +import AnimatedTiles from "phaser-animated-tiles"; export interface GameSceneInitInterface { initPosition: PointInterface|null, @@ -133,9 +134,10 @@ export class GameScene extends ResizableScene implements CenterListener { MapPlayers!: Phaser.Physics.Arcade.Group; MapPlayersByKey : Map = new Map(); Map!: Phaser.Tilemaps.Tilemap; - Layers!: Array; + Layers!: Array; Objects!: Array; mapFile!: ITiledMap; + animatedTiles!: AnimatedTiles; groups: Map; startX!: number; startY!: number; @@ -252,6 +254,7 @@ export class GameScene extends ResizableScene implements CenterListener { message: this.originalMapUrl ?? file.src }); }); + this.load.scenePlugin('AnimatedTiles', AnimatedTiles, 'animatedTiles', 'animatedTiles'); this.load.on('filecomplete-tilemapJSON-'+this.MapUrlFile, (key: string, type: string, data: unknown) => { this.onMapLoad(data); }); @@ -394,12 +397,12 @@ export class GameScene extends ResizableScene implements CenterListener { this.physics.world.setBounds(0, 0, this.Map.widthInPixels, this.Map.heightInPixels); //add layer on map - this.Layers = new Array(); + this.Layers = new Array(); let depth = -2; for (const layer of this.gameMap.layersIterator) { if (layer.type === 'tilelayer') { - this.addLayer(this.Map.createStaticLayer(layer.name, this.Terrains, 0, 0).setDepth(depth)); + this.addLayer(this.Map.createLayer(layer.name, this.Terrains, 0, 0).setDepth(depth)); const exitSceneUrl = this.getExitSceneUrl(layer); if (exitSceneUrl !== undefined) { @@ -448,6 +451,7 @@ export class GameScene extends ResizableScene implements CenterListener { this.initCamera(); + this.animatedTiles.init(this.Map); this.initCirclesCanvas(); // Let's pause the scene if the connection is not established yet @@ -1082,13 +1086,13 @@ ${escapedMessage} this.cameras.main.setZoom(ZOOM_LEVEL); } - addLayer(Layer : Phaser.Tilemaps.StaticTilemapLayer){ + addLayer(Layer : Phaser.Tilemaps.TilemapLayer){ this.Layers.push(Layer); } createCollisionWithPlayer() { //add collision layer - this.Layers.forEach((Layer: Phaser.Tilemaps.StaticTilemapLayer) => { + this.Layers.forEach((Layer: Phaser.Tilemaps.TilemapLayer) => { this.physics.add.collider(this.CurrentPlayer, Layer, (object1: GameObject, object2: GameObject) => { //this.CurrentPlayer.say("Collision with layer : "+ (object2 as Tile).layer.name) }); diff --git a/front/src/Phaser/Shaders/OutlinePipeline.ts b/front/src/Phaser/Shaders/OutlinePipeline.ts index 9c123c48..b39fa1fa 100644 --- a/front/src/Phaser/Shaders/OutlinePipeline.ts +++ b/front/src/Phaser/Shaders/OutlinePipeline.ts @@ -1,59 +1,59 @@ -export class OutlinePipeline extends Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline { +export class OutlinePipeline extends Phaser.Renderer.WebGL.Pipelines.MultiPipeline { - // the unique id of this pipeline - public static readonly KEY = 'Outline'; + // the unique id of this pipeline + public static readonly KEY = 'Outline'; - /** - * @param {Phaser.Game} game - the controller of the game instance - */ - constructor(game: Phaser.Game) - { - super({ - game: game, - fragShader: ` - precision mediump float; + /** + * @param {Phaser.Game} game - the controller of the game instance + */ + constructor(game: Phaser.Game) + { + super({ + game: game, + fragShader: ` + precision mediump float; - uniform sampler2D uMainSampler; - uniform vec2 uTextureSize; + uniform sampler2D uMainSampler; + uniform vec2 uTextureSize; - varying vec2 outTexCoord; - varying float outTintEffect; - varying vec4 outTint; + varying vec2 outTexCoord; + varying float outTintEffect; + varying vec4 outTint; - void main(void) + void main(void) + { + vec4 texture = texture2D(uMainSampler, outTexCoord); + vec4 texel = vec4(outTint.rgb * outTint.a, outTint.a); + vec4 color = texture; + + if (outTintEffect == 0.0) { - vec4 texture = texture2D(uMainSampler, outTexCoord); - vec4 texel = vec4(outTint.rgb * outTint.a, outTint.a); - vec4 color = texture; - - if (outTintEffect == 0.0) - { - color = texture * texel; - } - else if (outTintEffect == 1.0) - { - color.rgb = mix(texture.rgb, outTint.rgb * outTint.a, texture.a); - color.a = texture.a * texel.a; - } - else if (outTintEffect == 2.0) - { - color = texel; - } - - vec2 onePixel = vec2(1.0, 1.0) / uTextureSize; - float upAlpha = texture2D(uMainSampler, outTexCoord + vec2(0.0, onePixel.y)).a; - float leftAlpha = texture2D(uMainSampler, outTexCoord + vec2(-onePixel.x, 0.0)).a; - float downAlpha = texture2D(uMainSampler, outTexCoord + vec2(0.0, -onePixel.y)).a; - float rightAlpha = texture2D(uMainSampler, outTexCoord + vec2(onePixel.x, 0.0)).a; - - if (texture.a == 0.0 && max(max(upAlpha, downAlpha), max(leftAlpha, rightAlpha)) == 1.0) - { - color = vec4(1.0, 1.0, 0.0, 1.0); - } - - gl_FragColor = color; + color = texture * texel; } - ` - }); - } + else if (outTintEffect == 1.0) + { + color.rgb = mix(texture.rgb, outTint.rgb * outTint.a, texture.a); + color.a = texture.a * texel.a; + } + else if (outTintEffect == 2.0) + { + color = texel; + } + + vec2 onePixel = vec2(1.0, 1.0) / uTextureSize; + float upAlpha = texture2D(uMainSampler, outTexCoord + vec2(0.0, onePixel.y)).a; + float leftAlpha = texture2D(uMainSampler, outTexCoord + vec2(-onePixel.x, 0.0)).a; + float downAlpha = texture2D(uMainSampler, outTexCoord + vec2(0.0, -onePixel.y)).a; + float rightAlpha = texture2D(uMainSampler, outTexCoord + vec2(onePixel.x, 0.0)).a; + + if (texture.a == 0.0 && max(max(upAlpha, downAlpha), max(leftAlpha, rightAlpha)) == 1.0) + { + color = vec4(1.0, 1.0, 0.0, 1.0); + } + + gl_FragColor = color; + } + ` + }); + } } diff --git a/front/yarn.lock b/front/yarn.lock index d8ff4d71..424af9d6 100644 --- a/front/yarn.lock +++ b/front/yarn.lock @@ -1829,7 +1829,7 @@ eventemitter3@^3.1.2: resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7" integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q== -eventemitter3@^4.0.0, eventemitter3@^4.0.4: +eventemitter3@^4.0.0, eventemitter3@^4.0.7: version "4.0.7" resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f" integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw== @@ -1887,15 +1887,6 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2: dependencies: homedir-polyfill "^1.0.1" -exports-loader@^1.1.0: - version "1.1.1" - resolved "https://registry.yarnpkg.com/exports-loader/-/exports-loader-1.1.1.tgz#88c9a6877ee6a5519d7c41a016bdd99148421e69" - integrity sha512-CmyhIR2sJ3KOfVsHjsR0Yvo+0lhRhRMAevCbB8dhTVLHsZPs0lCQTvRmR9YNvBXDBxUuhmCE2f54KqEjZUaFrg== - dependencies: - loader-utils "^2.0.0" - schema-utils "^3.0.0" - source-map "^0.6.1" - express@^4.17.1: version "4.17.1" resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134" @@ -2596,16 +2587,6 @@ import-local@^2.0.0: pkg-dir "^3.0.0" resolve-cwd "^2.0.0" -imports-loader@^1.1.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/imports-loader/-/imports-loader-1.2.0.tgz#b06823d0bb42e6f5ff89bc893829000eda46693f" - integrity sha512-zPvangKEgrrPeqeUqH0Uhc59YqK07JqZBi9a9cQ3v/EKUIqrbJHY4CvUrDus2lgQa5AmPyXuGrWP8JJTqzE5RQ== - dependencies: - loader-utils "^2.0.0" - schema-utils "^3.0.0" - source-map "^0.6.1" - strip-comments "^2.0.1" - imurmurhash@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" @@ -3777,6 +3758,10 @@ pbkdf2@^3.0.3: safe-buffer "^5.0.1" sha.js "^2.4.8" +phaser-animated-tiles@Informatic/phaser-animated-tiles#2d5c66a9bc426dd4cb2d856c1d599494a74f8067: + version "2.0.2" + resolved "https://codeload.github.com/Informatic/phaser-animated-tiles/tar.gz/2d5c66a9bc426dd4cb2d856c1d599494a74f8067" + phaser3-rex-plugins@^1.1.42: version "1.1.44" resolved "https://registry.yarnpkg.com/phaser3-rex-plugins/-/phaser3-rex-plugins-1.1.44.tgz#83588ab2801c5b3a80a18be4f0ae37f1f32096b0" @@ -3787,14 +3772,12 @@ phaser3-rex-plugins@^1.1.42: papaparse "^5.3.0" webfontloader "^1.6.28" -phaser@3.24.1: - version "3.24.1" - resolved "https://registry.yarnpkg.com/phaser/-/phaser-3.24.1.tgz#376e0c965d2a35af37c06ee78627dafbde5be017" - integrity sha512-WbrRMkbpEzarkfrq83akeauc6b8xNxsOTpDygyW7wrU2G2ne6kOYu3hji4UAaGnZaOLrVuj8ycYPjX9P1LxcDw== +phaser@^3.54.0: + version "3.54.0" + resolved "https://registry.yarnpkg.com/phaser/-/phaser-3.54.0.tgz#46b191e46059aab2a9a57f78525c60b595767eee" + integrity sha512-/1XVI6J2siS0OGwJez7vLbRjars1zb//EvJdYMVyd3wNTUf5DHrvYUj1f6TsEISr4vjnbrNtS66QIuPbGU8x6A== dependencies: - eventemitter3 "^4.0.4" - exports-loader "^1.1.0" - imports-loader "^1.1.0" + eventemitter3 "^4.0.7" path "^0.12.7" picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1: @@ -4777,11 +4760,6 @@ strip-ansi@^6.0.0: dependencies: ansi-regex "^5.0.0" -strip-comments@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-2.0.1.tgz#4ad11c3fbcac177a67a40ac224ca339ca1c1ba9b" - integrity sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw== - strip-eof@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"