diff --git a/.eslintrc.yml b/.eslintrc.yml index 11286c7..5cc11ca 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -5,10 +5,8 @@ [ "eslint:recommended", "plugin:@typescript-eslint/recommended", - "plugin:prettier/recommended" + "plugin:prettier/recommended", ], - rules: { - "quotes": [2, "double"], - "indent": ["warn", 2, { "SwitchCase": 1 }], - } + rules: + { "quotes": [2, "double"], "indent": ["warn", 2, { "SwitchCase": 1 }] }, } diff --git a/README.md b/README.md index b15003f..12bfbdb 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,16 @@ ## ๐ŸŽฎ Simple 2D Game Framework for [PixiJS](https://pixijs.com) using [Viteโšก](https://vitejs.dev/) -Demo +Demo (old) ### Highlights ๐ŸŒŸ +- Latest PixiJS version (8) - Typescript - Blazing fast builds and HMR through Vite - Scene management - Automagic asset loading per scene (sounds, spritesheets, textures, spine) - Keyboard input handling -- Spine! +- Spine! (Waiting for PixiJS 8 support) ## Usage ๐Ÿ› ๏ธ diff --git a/package-lock.json b/package-lock.json index 36118df..f950a20 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,10 +8,10 @@ "name": "pixi-framework", "version": "0.0.0", "dependencies": { - "@pixi/sound": "^5.2.0", + "@pixi/sound": "^6.0.0", "gsap": "^3.11.4", - "pixi-spine": "^4.0.4", - "pixi.js": "^7.2.4" + "pixi.js": "^8.0.2", + "ts-key-enum": "^2.0.12" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^5.49.0", @@ -467,442 +467,23 @@ "node": ">= 8" } }, - "node_modules/@pixi-spine/base": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/@pixi-spine/base/-/base-4.0.3.tgz", - "integrity": "sha512-0bunaWebaDswLFtYZ6whV+ZvgLQ7oANcvbPmIOoVpS/1pOY3Y/GAnWOFbgp3qt9Q/ntLYqNjGve6xq0IqpsTAA==", - "peerDependencies": { - "@pixi/core": "^7.0.0", - "@pixi/display": "^7.0.0", - "@pixi/graphics": "^7.0.0", - "@pixi/mesh": "^7.0.0", - "@pixi/mesh-extras": "^7.0.0", - "@pixi/sprite": "^7.0.0" - } - }, - "node_modules/@pixi-spine/loader-base": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/@pixi-spine/loader-base/-/loader-base-4.0.4.tgz", - "integrity": "sha512-Grgu+PxiUpgYWpuMRr3h5jrN3ZTnwyXfu3HuYdFb6mbJTTMub4xBPALeui+O+tw0k9RNRAr99pUzu9Rc9XTbAw==", - "peerDependencies": { - "@pixi-spine/base": "^4.0.0", - "@pixi/assets": " ^7.0.0", - "@pixi/core": "^7.0.0" - } - }, - "node_modules/@pixi-spine/loader-uni": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/@pixi-spine/loader-uni/-/loader-uni-4.0.3.tgz", - "integrity": "sha512-tfhTJrnuog8ObKbbiSG1wV/nIUc3O98WfwS6lCmewaupoMIKF0ujg21MCqXUXJvljQJzU9tbURI+DWu4w9dnnA==", - "peerDependencies": { - "@pixi-spine/base": "^4.0.0", - "@pixi-spine/loader-base": "^4.0.0", - "@pixi-spine/runtime-3.7": "^4.0.0", - "@pixi-spine/runtime-3.8": "^4.0.0", - "@pixi-spine/runtime-4.1": "^4.0.0", - "@pixi/assets": " ^7.0.0", - "@pixi/core": "^7.0.0", - "@pixi/display": "^7.0.0", - "@pixi/graphics": "^7.0.0", - "@pixi/mesh": "^7.0.0", - "@pixi/mesh-extras": "^7.0.0", - "@pixi/sprite": "^7.0.0" - } - }, - "node_modules/@pixi-spine/runtime-3.7": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/@pixi-spine/runtime-3.7/-/runtime-3.7-4.0.3.tgz", - "integrity": "sha512-zuopKtSqjRc37wjW5xJ64j9DbiBB7rkPMFeldeWBPCbfZiCcFcwSZwZnrcgC+f4HIGo0NeviAvJGM8Hcf3AyeA==", - "peerDependencies": { - "@pixi-spine/base": "^4.0.0", - "@pixi/core": "^7.0.0" - } - }, - "node_modules/@pixi-spine/runtime-3.8": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/@pixi-spine/runtime-3.8/-/runtime-3.8-4.0.3.tgz", - "integrity": "sha512-lIhb4jOTon+FVYLO9AIgcB6jf9hC+RLEn8PesaDRibDocQ1htVCkEIhCIU3Mc00fuqIby7lMBsINeS/Th0q3bw==", - "peerDependencies": { - "@pixi-spine/base": "^4.0.0", - "@pixi/core": "^7.0.0" - } - }, - "node_modules/@pixi-spine/runtime-4.0": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/@pixi-spine/runtime-4.0/-/runtime-4.0-4.0.3.tgz", - "integrity": "sha512-2Y8qhxRkg/yH/9VylGsRVAd5W+dXVPhHTjFk0RR9wEUzTCkdZ17pE+56s2nESi2X3sYNKkz8FowfaqIvXnVGxw==", - "peerDependencies": { - "@pixi-spine/base": "^4.0.0", - "@pixi/core": "^7.0.0" - } - }, - "node_modules/@pixi-spine/runtime-4.1": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/@pixi-spine/runtime-4.1/-/runtime-4.1-4.0.3.tgz", - "integrity": "sha512-jK433snCQMC4FUPiDgyIcxhiatvRNSxqgs0CgHjjQ0l8GlY6gPpkkdThQ6GsFNme1SUZ4uvnWwawXFIGjW1IpQ==", - "peerDependencies": { - "@pixi-spine/base": "^4.0.0", - "@pixi/core": "^7.0.0" - } - }, - "node_modules/@pixi/accessibility": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/accessibility/-/accessibility-7.2.4.tgz", - "integrity": "sha512-EVjuqUqv9FeYFXCv0S0qj1hgCtbAMNBPCbOGEtiMogpM++/IySxBZvcOYg3rRgo9inwt2s4Bi7kUiqMPD8hItw==", - "peerDependencies": { - "@pixi/core": "7.2.4", - "@pixi/display": "7.2.4", - "@pixi/events": "7.2.4" - } - }, - "node_modules/@pixi/app": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/app/-/app-7.2.4.tgz", - "integrity": "sha512-eJ2jpu5P28ip07nLItw6sETXn45P4KR/leMJ6zPHRlhT1m8t5zTsWr3jK4Uj8LF2E+6KlPNzLQh5Alf/unn/aQ==", - "peerDependencies": { - "@pixi/core": "7.2.4", - "@pixi/display": "7.2.4" - } - }, - "node_modules/@pixi/assets": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/assets/-/assets-7.2.4.tgz", - "integrity": "sha512-7199re3wvMAlVqXLaCyAr8IkJSXqkeVAxcYyB2rBu4Id5m2hhlGX1dQsdMBiCXLwu6/LLVqDvJggSNVQBzL6ZQ==", - "dependencies": { - "@types/css-font-loading-module": "^0.0.7" - }, - "peerDependencies": { - "@pixi/core": "7.2.4", - "@pixi/utils": "7.2.4" - } - }, - "node_modules/@pixi/color": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/color/-/color-7.2.4.tgz", - "integrity": "sha512-B/+9JRcXe2uE8wQfsueFRPZVayF2VEMRB7XGeRAsWCryOX19nmWhv0Nt3nOU2rvzI0niz9XgugJXsB6vVmDFSg==", - "dependencies": { - "colord": "^2.9.3" - } - }, - "node_modules/@pixi/compressed-textures": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/compressed-textures/-/compressed-textures-7.2.4.tgz", - "integrity": "sha512-atnWyw/ot/Wg69qhgskKiuTYCZx15IxV35sa0KyXMthyjyvDLCIvOn0nczM6wCBy9H96SjJbfgynVWhVrip6qw==", - "peerDependencies": { - "@pixi/assets": "7.2.4", - "@pixi/core": "7.2.4" - } - }, - "node_modules/@pixi/constants": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/constants/-/constants-7.2.4.tgz", - "integrity": "sha512-hKuHBWR6N4Q0Sf5MGF3/9l+POg/G5rqhueHfzofiuelnKg7aBs3BVjjZ+6hZbd6M++vOUmxYelEX/NEFBxrheA==" - }, - "node_modules/@pixi/core": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/core/-/core-7.2.4.tgz", - "integrity": "sha512-0XtvrfxHlS2T+beBBSpo7GI8+QLyyTqMVQpNmPqB4woYxzrOEJ9JaUFBaBfCvycLeUkfVih1u6HAbtF+2d1EjQ==", - "dependencies": { - "@pixi/color": "7.2.4", - "@pixi/constants": "7.2.4", - "@pixi/extensions": "7.2.4", - "@pixi/math": "7.2.4", - "@pixi/runner": "7.2.4", - "@pixi/settings": "7.2.4", - "@pixi/ticker": "7.2.4", - "@pixi/utils": "7.2.4", - "@types/offscreencanvas": "^2019.6.4" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/pixijs" - } - }, - "node_modules/@pixi/display": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/display/-/display-7.2.4.tgz", - "integrity": "sha512-w5tqb8cWEO5qIDaO9GEqRvxYhL0iMk0Wsngw23bbLm1gLEQmrFkB2tpJlRAqd7H82C3DrDDeWvkrrxW6+m4apg==", - "peerDependencies": { - "@pixi/core": "7.2.4" - } - }, - "node_modules/@pixi/events": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/events/-/events-7.2.4.tgz", - "integrity": "sha512-/JtmoB98fzIU8giN9xvlRvmvOi6u4MaD2DnKNOMHkQ1MBraj3pmrXM9fZ0JbNzi+324GraAAY76QidgHjIYoYQ==", - "peerDependencies": { - "@pixi/core": "7.2.4", - "@pixi/display": "7.2.4" - } - }, - "node_modules/@pixi/extensions": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/extensions/-/extensions-7.2.4.tgz", - "integrity": "sha512-Mnqv9scbL1ARD3QFKfOWs2aSVJJfP1dL8g5UiqGImYO3rZbz/9QCzXOeMVIZ5n3iaRyKMNhFFr84/zUja2H7Dw==" - }, - "node_modules/@pixi/extract": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/extract/-/extract-7.2.4.tgz", - "integrity": "sha512-wlXZg+J2L/1jQhRi5nZQP/cXshovhjksjss91eAKMvY5aGxNAQovCP4xotJ/XJjfTvPMpeRzHPFYzm3PrOPQ7g==", - "peerDependencies": { - "@pixi/core": "7.2.4" - } - }, - "node_modules/@pixi/filter-alpha": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/filter-alpha/-/filter-alpha-7.2.4.tgz", - "integrity": "sha512-UTUMSGyktUr+I9vmigqJo9iUhb0nwGyqTTME2xBWZvVGCnl5z+/wHxvIBBCe5pNZ66IM15pGXQ4cDcfqCuP2kA==", - "peerDependencies": { - "@pixi/core": "7.2.4" - } - }, - "node_modules/@pixi/filter-blur": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/filter-blur/-/filter-blur-7.2.4.tgz", - "integrity": "sha512-aLyXIoxy14bTansCPtbY8x7Sdn2OrrqkF/pcKiRXHJGGhi7wPacvB/NcmYJdnI/n2ExQ6V5Njuj/nfrsejVwcA==", - "peerDependencies": { - "@pixi/core": "7.2.4" - } - }, - "node_modules/@pixi/filter-color-matrix": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/filter-color-matrix/-/filter-color-matrix-7.2.4.tgz", - "integrity": "sha512-DFtayybYXoUh73eHUFRK5REbi1t3FZuVUnaQTj+euHKF9L7EaYc3Q9wctpx1WPRcwkqEX50M4SNFhxpA7Pxtaw==", - "peerDependencies": { - "@pixi/core": "7.2.4" - } - }, - "node_modules/@pixi/filter-displacement": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/filter-displacement/-/filter-displacement-7.2.4.tgz", - "integrity": "sha512-Simq3IBJKt7+Gvk4kK7OFkfoeYUMhNhIyATCdeT+Jkdkq5WV7pYnH5hqO0YW7eAHrgjV13yn6t4H/GC4+6LhEA==", - "peerDependencies": { - "@pixi/core": "7.2.4" - } - }, - "node_modules/@pixi/filter-fxaa": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/filter-fxaa/-/filter-fxaa-7.2.4.tgz", - "integrity": "sha512-qzKjdL+Ih18uGTJLg8tT/H+YCsTeGkw2uF7lyKnw/lxGLJQhLWIhM95M9qSNgxbXyW1vp7SbG81a9aAEz2HAhA==", - "peerDependencies": { - "@pixi/core": "7.2.4" - } - }, - "node_modules/@pixi/filter-noise": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/filter-noise/-/filter-noise-7.2.4.tgz", - "integrity": "sha512-QAU9Ybj2ZQrWM9ZEjTTC0iLnQcuyNoZNRinxSbg1G0yacpmsSb9wvV5ltIZ66+hfY+90+u2Nudt/v9g6pvOdGg==", - "peerDependencies": { - "@pixi/core": "7.2.4" - } - }, - "node_modules/@pixi/graphics": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/graphics/-/graphics-7.2.4.tgz", - "integrity": "sha512-3A2EumTjWJgXlDLOyuBrl9b6v1Za/E+/IjOGUIX843HH4NYaf1a2sfDfljx6r3oiDvy+VhuBFmgynRcV5IyA0Q==", - "peerDependencies": { - "@pixi/core": "7.2.4", - "@pixi/display": "7.2.4", - "@pixi/sprite": "7.2.4" - } - }, - "node_modules/@pixi/math": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/math/-/math-7.2.4.tgz", - "integrity": "sha512-LJB+mozyEPllxa0EssFZrKNfVwysfaBun4b2dJKQQInp0DafgbA0j7A+WVg0oe51KhFULTJMpDqbLn/ITFc41A==" - }, - "node_modules/@pixi/mesh": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/mesh/-/mesh-7.2.4.tgz", - "integrity": "sha512-wiALIqcRKib2BqeH9kOA5fOKWN352nqAspgbDa8gA7OyWzmNwqIedIlElixd0oLFOrIN5jOZAdzeKnoYQlt9Aw==", - "peerDependencies": { - "@pixi/core": "7.2.4", - "@pixi/display": "7.2.4" - } - }, - "node_modules/@pixi/mesh-extras": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/mesh-extras/-/mesh-extras-7.2.4.tgz", - "integrity": "sha512-Lxqq/1E2EmDgjZX8KzjhBy3VvITIQ00arr2ikyHYF1d0XtQTKEYpr8VKzhchqZ5/9DuyTDbDMYGhcxoNXQmZrQ==", - "peerDependencies": { - "@pixi/core": "7.2.4", - "@pixi/mesh": "7.2.4" - } - }, - "node_modules/@pixi/mixin-cache-as-bitmap": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/mixin-cache-as-bitmap/-/mixin-cache-as-bitmap-7.2.4.tgz", - "integrity": "sha512-95L/9nzfLHw6GoeqqRl/RjSloKvRt0xrc2inCmjMZvMsFUEtHN2F8IWd1k5vcv0S+83NCreFkJg6nJm1m5AZqg==", - "peerDependencies": { - "@pixi/core": "7.2.4", - "@pixi/display": "7.2.4", - "@pixi/sprite": "7.2.4" - } - }, - "node_modules/@pixi/mixin-get-child-by-name": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/mixin-get-child-by-name/-/mixin-get-child-by-name-7.2.4.tgz", - "integrity": "sha512-9g17KgSBEEhkinnKk4dqmxagzHOCPSTvGB6lOopBq4yyXmr/2WVv+QGjuzE0O+p80szQeBJjPBQxzrfBILaSRw==", - "peerDependencies": { - "@pixi/display": "7.2.4" - } - }, - "node_modules/@pixi/mixin-get-global-position": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/mixin-get-global-position/-/mixin-get-global-position-7.2.4.tgz", - "integrity": "sha512-UrAUF2BXCeWtFgR2m+er41Ky7zShT7r228cZkB6ZfYwMeThhwqG5mH68UeCyP6p68JMpT1gjI2DPfeSRY3ecnA==", - "peerDependencies": { - "@pixi/core": "7.2.4", - "@pixi/display": "7.2.4" - } - }, - "node_modules/@pixi/particle-container": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/particle-container/-/particle-container-7.2.4.tgz", - "integrity": "sha512-tpSzilZGFtAoi8XhzL0TecLPNRQAbY8nWV9XNGXJDw+nxXp18GCe8L6eEmnHLlAug67BRHl65DtrdvTknPX+4g==", - "peerDependencies": { - "@pixi/core": "7.2.4", - "@pixi/display": "7.2.4", - "@pixi/sprite": "7.2.4" - } - }, - "node_modules/@pixi/prepare": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/prepare/-/prepare-7.2.4.tgz", - "integrity": "sha512-Yff5Sh4kTLdKc5VkkM44LW9gpj7Izw8ns3P1TzWxqeGjzPZ3folr/tQujGL+Qw+8A9VESp+hX9MSIHyw+jpyrg==", - "peerDependencies": { - "@pixi/core": "7.2.4", - "@pixi/display": "7.2.4", - "@pixi/graphics": "7.2.4", - "@pixi/text": "7.2.4" - } - }, - "node_modules/@pixi/runner": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/runner/-/runner-7.2.4.tgz", - "integrity": "sha512-YtyqPk1LA+0guEFKSFx6t/YSvbEQwajFwi4Ft8iDhioa6VK2MmTir1GjWwy7JQYLcDmYSAcQjnmFtVTZohyYSw==" - }, - "node_modules/@pixi/settings": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/settings/-/settings-7.2.4.tgz", - "integrity": "sha512-ZPKRar9EwibijGmH8EViu4Greq1I/O7V/xQx2rNqN23XA7g09Qo6yfaeQpufu5xl8+/lZrjuHtQSnuY7OgG1CA==", - "dependencies": { - "@pixi/constants": "7.2.4", - "@types/css-font-loading-module": "^0.0.7", - "ismobilejs": "^1.1.0" - } + "node_modules/@pixi/colord": { + "version": "2.9.6", + "resolved": "https://registry.npmjs.org/@pixi/colord/-/colord-2.9.6.tgz", + "integrity": "sha512-nezytU2pw587fQstUu1AsJZDVEynjskwOL+kibwcdxsMBFqPsFFNA7xl0ii/gXuDi6M0xj3mfRJj8pBSc2jCfA==" }, "node_modules/@pixi/sound": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/@pixi/sound/-/sound-5.2.0.tgz", - "integrity": "sha512-biVjh9AGFV8dO6/h55Qc2VPTbO7w6Ag1p5xuz47O9/uKUdzph57JlZz0A8y2Ez0sUAwp59uZKbN2NqpWf0lwRQ==", - "peerDependencies": { - "@pixi/assets": "^7.0.0", - "@pixi/core": "^7.0.0" - } - }, - "node_modules/@pixi/sprite": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/sprite/-/sprite-7.2.4.tgz", - "integrity": "sha512-DhR1B+/d0eXpxHIesJMXcVPrKFwQ+zRA1LvEIFfzewqfaRN3X6PMIuoKX8SIb6tl+Hq8Ba9Pe28zI7d2rmRzrA==", - "peerDependencies": { - "@pixi/core": "7.2.4", - "@pixi/display": "7.2.4" - } - }, - "node_modules/@pixi/sprite-animated": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/sprite-animated/-/sprite-animated-7.2.4.tgz", - "integrity": "sha512-9eRriPSC0QVS7U9zQlrG3uEI5+h3fi+mqofXy+yjk1sGCmXSIJME5p2wg2mzxoJk3qkSMagQA9QHtL26Fti8Iw==", - "peerDependencies": { - "@pixi/core": "7.2.4", - "@pixi/sprite": "7.2.4" - } - }, - "node_modules/@pixi/sprite-tiling": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/sprite-tiling/-/sprite-tiling-7.2.4.tgz", - "integrity": "sha512-nGfxQoACRx49dUN0oW1vFm3141M+7gkAbzoNJym2Pljd2dpLME9fb5E6Lyahu0yWMaPRhhGorn6z9VIGmTF3Jw==", - "peerDependencies": { - "@pixi/core": "7.2.4", - "@pixi/display": "7.2.4", - "@pixi/sprite": "7.2.4" - } - }, - "node_modules/@pixi/spritesheet": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/spritesheet/-/spritesheet-7.2.4.tgz", - "integrity": "sha512-LNmlavyiMQeCF0U4S+yhzxUYmPmat6EpLjLnkGukQTZV5CZkxDCVgXM9uKoRF2DvNydj4yuwZ6+JjK8QssHI8Q==", - "peerDependencies": { - "@pixi/assets": "7.2.4", - "@pixi/core": "7.2.4" - } - }, - "node_modules/@pixi/text": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/text/-/text-7.2.4.tgz", - "integrity": "sha512-DGu7ktpe+zHhqR2sG9NsJt4mgvSObv5EqXTtUxD4Z0li1gmqF7uktpLyn5I6vSg1TTEL4TECClRDClVDGiykWw==", - "peerDependencies": { - "@pixi/core": "7.2.4", - "@pixi/sprite": "7.2.4" - } - }, - "node_modules/@pixi/text-bitmap": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/text-bitmap/-/text-bitmap-7.2.4.tgz", - "integrity": "sha512-3u2CP4VN+muCaq/jtj7gn0hb3DET/X2S04zTBcgc2WVGufJc62yz+UDzS9jC+ellotVdt9c8U74++vpz3zJGfw==", - "peerDependencies": { - "@pixi/assets": "7.2.4", - "@pixi/core": "7.2.4", - "@pixi/display": "7.2.4", - "@pixi/mesh": "7.2.4", - "@pixi/text": "7.2.4" - } - }, - "node_modules/@pixi/text-html": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/text-html/-/text-html-7.2.4.tgz", - "integrity": "sha512-0NfLAE/w51ZtatxVqLvDS62iO0VLKsSdctqTAVv4Zlgdk9TKJmX1WUucHJboTvbm2SbDjNDGfZ6qXM5nAslIDQ==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@pixi/sound/-/sound-6.0.0.tgz", + "integrity": "sha512-fEaCs2JmyYT1qqouFS3DydSccI35dyYD0pKK2hEbIGVDKUTvl224x0p4qme2YU9l465WRtM7gspLzP5fFf1mxQ==", "peerDependencies": { - "@pixi/core": "7.2.4", - "@pixi/display": "7.2.4", - "@pixi/sprite": "7.2.4", - "@pixi/text": "7.2.4" - } - }, - "node_modules/@pixi/ticker": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/ticker/-/ticker-7.2.4.tgz", - "integrity": "sha512-hQQHIHvGeFsP4GNezZqjzuhUgNQEVgCH9+qU05UX1Mc5UHC9l6OJnY4VTVhhcHxZjA6RnyaY+1zBxCnoXuazpg==", - "dependencies": { - "@pixi/extensions": "7.2.4", - "@pixi/settings": "7.2.4", - "@pixi/utils": "7.2.4" + "pixi.js": "^8.0.0" } }, - "node_modules/@pixi/utils": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/@pixi/utils/-/utils-7.2.4.tgz", - "integrity": "sha512-VUGQHBOINIS4ePzoqafwxaGPVRTa3oM/mEutIIHbNGI3b+QvSO+1Dnk40M0zcH6Bo+MxQZbOZK5X/wO9oU5+LQ==", - "dependencies": { - "@pixi/color": "7.2.4", - "@pixi/constants": "7.2.4", - "@pixi/settings": "7.2.4", - "@types/earcut": "^2.1.0", - "earcut": "^2.2.4", - "eventemitter3": "^4.0.0", - "url": "^0.11.0" - } - }, - "node_modules/@types/css-font-loading-module": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/@types/css-font-loading-module/-/css-font-loading-module-0.0.7.tgz", - "integrity": "sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q==" - }, "node_modules/@types/earcut": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@types/earcut/-/earcut-2.1.1.tgz", - "integrity": "sha512-w8oigUCDjElRHRRrMvn/spybSMyX8MTkKA5Dv+tS1IE/TgmNZPqUYtvYBXGY8cieSE66gm+szeK+bnbxC2xHTQ==" + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@types/earcut/-/earcut-2.1.4.tgz", + "integrity": "sha512-qp3m9PPz4gULB9MhjGID7wpo3gJ4bTGXm7ltNDsmOvsPduTeHp8wSW9YckBj3mljeOh4F0m2z/0JKAALRKbmLQ==" }, "node_modules/@types/json-schema": { "version": "7.0.11", @@ -910,11 +491,6 @@ "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==", "dev": true }, - "node_modules/@types/offscreencanvas": { - "version": "2019.7.0", - "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.0.tgz", - "integrity": "sha512-PGcyveRIpL1XIqK8eBsmRBt76eFgtzuPiSTyKHZxnGemp2yzGzWpjYKAfK3wIMiU7eH+851yEpiuP8JZerTmWg==" - }, "node_modules/@types/semver": { "version": "7.3.13", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz", @@ -1108,6 +684,19 @@ "url": "https://opencollective.com/typescript-eslint" } }, + "node_modules/@webgpu/types": { + "version": "0.1.40", + "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.40.tgz", + "integrity": "sha512-/BBkHLS6/eQjyWhY2H7Dx5DHcVrS2ICj9owvSRdgtQT6KcafLZA86tPze0xAOsd4FbsYKCUBUQyNi87q7gV7kw==" + }, + "node_modules/@xmldom/xmldom": { + "version": "0.8.10", + "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz", + "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==", + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/acorn": { "version": "8.8.2", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz", @@ -1212,18 +801,6 @@ "node": ">=8" } }, - "node_modules/call-bind": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", - "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", - "dependencies": { - "function-bind": "^1.1.1", - "get-intrinsic": "^1.0.2" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -1267,11 +844,6 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, - "node_modules/colord": { - "version": "2.9.3", - "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", - "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==" - }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -1630,11 +1202,6 @@ "node": ">=0.10.0" } }, - "node_modules/eventemitter3": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", - "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==" - }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -1778,21 +1345,8 @@ "node_modules/function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" - }, - "node_modules/get-intrinsic": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz", - "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==", - "dependencies": { - "function-bind": "^1.1.1", - "has": "^1.0.3", - "has-proto": "^1.0.1", - "has-symbols": "^1.0.3" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", + "dev": true }, "node_modules/glob": { "version": "7.2.3", @@ -1876,6 +1430,7 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "dev": true, "dependencies": { "function-bind": "^1.1.1" }, @@ -1892,28 +1447,6 @@ "node": ">=8" } }, - "node_modules/has-proto": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz", - "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==", - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/has-symbols": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", - "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/ignore": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", @@ -2170,14 +1703,6 @@ "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==", "dev": true }, - "node_modules/object-inspect": { - "version": "1.12.3", - "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz", - "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==", - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -2246,6 +1771,11 @@ "node": ">=6" } }, + "node_modules/parse-svg-path": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/parse-svg-path/-/parse-svg-path-0.1.2.tgz", + "integrity": "sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ==" + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -2306,70 +1836,32 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, - "node_modules/pixi-spine": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/pixi-spine/-/pixi-spine-4.0.4.tgz", - "integrity": "sha512-XRq1yARVoi4av7RXnd9+P37SWI9+e4/f5yTScZPJGB+sY5VcRYN6BYkBQ+y8nUKI1aJIjlms9z+pGxqikm+eFQ==", - "dependencies": { - "@pixi-spine/base": "^4.0.3", - "@pixi-spine/loader-base": "^4.0.4", - "@pixi-spine/loader-uni": "^4.0.3", - "@pixi-spine/runtime-3.7": "^4.0.3", - "@pixi-spine/runtime-3.8": "^4.0.3", - "@pixi-spine/runtime-4.0": "^4.0.3", - "@pixi-spine/runtime-4.1": "^4.0.3" - }, - "peerDependencies": { - "@pixi/assets": "^7.0.0", - "@pixi/core": "^7.0.0", - "@pixi/display": "^7.0.0", - "@pixi/graphics": "^7.0.0", - "@pixi/mesh": "^7.0.0", - "@pixi/mesh-extras": "^7.0.0", - "@pixi/sprite": "^7.0.0" - } - }, "node_modules/pixi.js": { - "version": "7.2.4", - "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-7.2.4.tgz", - "integrity": "sha512-nBH60meoLnHxoMFz17HoMxXS4uJpG5jwIdL+Gx2S11TzWgP3iKF+/WLOTrkSdyuQoQSdIBxVqpnYii0Wiox15A==", - "dependencies": { - "@pixi/accessibility": "7.2.4", - "@pixi/app": "7.2.4", - "@pixi/assets": "7.2.4", - "@pixi/compressed-textures": "7.2.4", - "@pixi/core": "7.2.4", - "@pixi/display": "7.2.4", - "@pixi/events": "7.2.4", - "@pixi/extensions": "7.2.4", - "@pixi/extract": "7.2.4", - "@pixi/filter-alpha": "7.2.4", - "@pixi/filter-blur": "7.2.4", - "@pixi/filter-color-matrix": "7.2.4", - "@pixi/filter-displacement": "7.2.4", - "@pixi/filter-fxaa": "7.2.4", - "@pixi/filter-noise": "7.2.4", - "@pixi/graphics": "7.2.4", - "@pixi/mesh": "7.2.4", - "@pixi/mesh-extras": "7.2.4", - "@pixi/mixin-cache-as-bitmap": "7.2.4", - "@pixi/mixin-get-child-by-name": "7.2.4", - "@pixi/mixin-get-global-position": "7.2.4", - "@pixi/particle-container": "7.2.4", - "@pixi/prepare": "7.2.4", - "@pixi/sprite": "7.2.4", - "@pixi/sprite-animated": "7.2.4", - "@pixi/sprite-tiling": "7.2.4", - "@pixi/spritesheet": "7.2.4", - "@pixi/text": "7.2.4", - "@pixi/text-bitmap": "7.2.4", - "@pixi/text-html": "7.2.4" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/pixijs" + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-8.0.2.tgz", + "integrity": "sha512-E4oHF+cIkHB1BUHka8jKRih3ywDAKt/uRaTNIm4+7rEWMX5LhZZVryp8bcx516ZyQ8VrpBOs5ohrEViqYhCDAw==", + "dependencies": { + "@pixi/colord": "^2.9.6", + "@types/css-font-loading-module": "^0.0.12", + "@types/earcut": "^2.1.4", + "@webgpu/types": "^0.1.40", + "@xmldom/xmldom": "^0.8.10", + "earcut": "^2.2.4", + "eventemitter3": "^5.0.1", + "ismobilejs": "^1.1.1", + "parse-svg-path": "^0.1.2" } }, + "node_modules/pixi.js/node_modules/@types/css-font-loading-module": { + "version": "0.0.12", + "resolved": "https://registry.npmjs.org/@types/css-font-loading-module/-/css-font-loading-module-0.0.12.tgz", + "integrity": "sha512-x2tZZYkSxXqWvTDgveSynfjq/T2HyiZHXb00j/+gy19yp70PHCizM48XFdjBCWH7eHBD0R5i/pw9yMBP/BH5uA==" + }, + "node_modules/pixi.js/node_modules/eventemitter3": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz", + "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==" + }, "node_modules/postcss": { "version": "8.4.21", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", @@ -2439,20 +1931,6 @@ "node": ">=6" } }, - "node_modules/qs": { - "version": "6.11.2", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz", - "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==", - "dependencies": { - "side-channel": "^1.0.4" - }, - "engines": { - "node": ">=0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -2611,19 +2089,6 @@ "node": ">=8" } }, - "node_modules/side-channel": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", - "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==", - "dependencies": { - "call-bind": "^1.0.0", - "get-intrinsic": "^1.0.2", - "object-inspect": "^1.9.0" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -2708,6 +2173,11 @@ "node": ">=8.0" } }, + "node_modules/ts-key-enum": { + "version": "2.0.12", + "resolved": "https://registry.npmjs.org/ts-key-enum/-/ts-key-enum-2.0.12.tgz", + "integrity": "sha512-Ety4IvKMaeG34AyXMp5r11XiVZNDRL+XWxXbVVJjLvq2vxKRttEANBE7Za1bxCAZRdH2/sZT6jFyyTWxXz28hw==" + }, "node_modules/tslib": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", @@ -2775,20 +2245,6 @@ "punycode": "^2.1.0" } }, - "node_modules/url": { - "version": "0.11.1", - "resolved": "https://registry.npmjs.org/url/-/url-0.11.1.tgz", - "integrity": "sha512-rWS3H04/+mzzJkv0eZ7vEDGiQbgquI1fGfOad6zKvgYQi1SzMmhl7c/DdRGxhaWrVH6z0qWITo8rpnxK/RfEhA==", - "dependencies": { - "punycode": "^1.4.1", - "qs": "^6.11.0" - } - }, - "node_modules/url/node_modules/punycode": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", - "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==" - }, "node_modules/vite": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/vite/-/vite-4.0.4.tgz", diff --git a/package.json b/package.json index 0ea652b..c4931de 100644 --- a/package.json +++ b/package.json @@ -19,9 +19,9 @@ "vite": "^4.0.4" }, "dependencies": { - "@pixi/sound": "^5.2.0", + "@pixi/sound": "^6.0.0", "gsap": "^3.11.4", - "pixi-spine": "^4.0.4", - "pixi.js": "^7.2.4" + "pixi.js": "^8.0.2", + "ts-key-enum": "^2.0.12" } } diff --git a/public/Game/images/clouds_1.png b/public/Game/images/clouds.png similarity index 100% rename from public/Game/images/clouds_1.png rename to public/Game/images/clouds.png diff --git a/public/Game/images/clouds_2.png b/public/Game/images/clouds_2.png deleted file mode 100644 index 781279c..0000000 Binary files a/public/Game/images/clouds_2.png and /dev/null differ diff --git a/public/Game/images/ground_1.png b/public/Game/images/ground_1.png deleted file mode 100644 index bbebe88..0000000 Binary files a/public/Game/images/ground_1.png and /dev/null differ diff --git a/public/Game/images/ground_2.png b/public/Game/images/ground_2.png deleted file mode 100644 index 998288e..0000000 Binary files a/public/Game/images/ground_2.png and /dev/null differ diff --git a/public/Game/images/ground_3.png b/public/Game/images/ground_3.png deleted file mode 100644 index 4cdd3a5..0000000 Binary files a/public/Game/images/ground_3.png and /dev/null differ diff --git a/public/Game/images/plant.png b/public/Game/images/plant.png deleted file mode 100644 index 1dbda13..0000000 Binary files a/public/Game/images/plant.png and /dev/null differ diff --git a/public/Game/images/rocks.png b/public/Game/images/rocks.png deleted file mode 100644 index 280b165..0000000 Binary files a/public/Game/images/rocks.png and /dev/null differ diff --git a/public/Game/images/sky.png b/public/Game/images/sky.png deleted file mode 100644 index eafa87a..0000000 Binary files a/public/Game/images/sky.png and /dev/null differ diff --git a/public/Game/images/sky_island.png b/public/Game/images/sky_island.png new file mode 100644 index 0000000..25b689c Binary files /dev/null and b/public/Game/images/sky_island.png differ diff --git a/public/Game/sounds/dash.ogg b/public/Game/sounds/dash.ogg deleted file mode 100644 index 126a22e..0000000 Binary files a/public/Game/sounds/dash.ogg and /dev/null differ diff --git a/public/Game/sounds/jump.mp3 b/public/Game/sounds/jump.mp3 new file mode 100644 index 0000000..3dfca1a Binary files /dev/null and b/public/Game/sounds/jump.mp3 differ diff --git a/public/Game/sounds/jump2.wav b/public/Game/sounds/jump2.wav deleted file mode 100644 index ddea3fc..0000000 Binary files a/public/Game/sounds/jump2.wav and /dev/null differ diff --git a/public/Game/spine/vine-pro.atlas b/public/Game/spine/vine-pro.atlas deleted file mode 100644 index cb9f2d2..0000000 --- a/public/Game/spine/vine-pro.atlas +++ /dev/null @@ -1,6 +0,0 @@ -vine-pro.png -size:72,966 -filter:Linear,Linear -pma:true -vine -bounds:2,2,68,962 diff --git a/public/Game/spine/vine-pro.png b/public/Game/spine/vine-pro.png deleted file mode 100644 index dcd7309..0000000 Binary files a/public/Game/spine/vine-pro.png and /dev/null differ diff --git a/public/Game/spine/vine-pro.skel b/public/Game/spine/vine-pro.skel deleted file mode 100644 index 6ce4ac8..0000000 Binary files a/public/Game/spine/vine-pro.skel and /dev/null differ diff --git a/public/Loading/images/bgNight.webp b/public/Loading/images/bgNight.webp deleted file mode 100644 index 01db821..0000000 Binary files a/public/Loading/images/bgNight.webp and /dev/null differ diff --git a/public/Loading/images/loading.png b/public/Loading/images/loading.png new file mode 100644 index 0000000..4847065 Binary files /dev/null and b/public/Loading/images/loading.png differ diff --git a/src/config.ts b/src/config.ts deleted file mode 100644 index c343b7f..0000000 --- a/src/config.ts +++ /dev/null @@ -1,23 +0,0 @@ -import type { BgConfig } from "./prefabs/ParallaxBackground"; - -type Config = { - backgrounds: Record; -}; - -export default { - backgrounds: { - forest: { - layers: [ - "sky", - "clouds_1", - "rocks", - "clouds_2", - "ground_1", - "ground_2", - "ground_3", - "plant", - ], - panSpeed: 0.2, - }, - }, -} as Config; diff --git a/src/core/AssetLoader.ts b/src/core/AssetLoader.ts index 2a69685..4d06e67 100644 --- a/src/core/AssetLoader.ts +++ b/src/core/AssetLoader.ts @@ -1,6 +1,5 @@ import { Assets } from "pixi.js"; import { Debug } from "../utils/debug"; -import "pixi-spine"; type Asset = { name: string; @@ -25,14 +24,20 @@ export default class AssetLoader { return Object.keys(assetFiles); } - async loadAssetsGroup(group: string) { + async loadAssetsGroup( + group: string, + onProgress?: (progress: number) => void + ) { const sceneAssets = this.manifest.filter((asset) => asset.group === group); for (const asset of sceneAssets) { - Assets.add(asset.name, asset.url); + Assets.add({ alias: asset.name, src: asset.url }); } - const resources = await Assets.load(sceneAssets.map((asset) => asset.name)); + const resources = await Assets.load( + sceneAssets.map((asset) => asset.name), + onProgress + ); Debug.log("โœ… Loaded assets group", group, resources); diff --git a/src/core/Keyboard.ts b/src/core/Keyboard.ts index cd47e77..944bf06 100644 --- a/src/core/Keyboard.ts +++ b/src/core/Keyboard.ts @@ -1,52 +1,17 @@ -import { utils } from "pixi.js"; +export type KeyCallback = (data: { state: "up" | "down" }) => void; -export default class Keyboard extends utils.EventEmitter { +export default class Keyboard { private static instance: Keyboard; - - static states = { - ACTION: "ACTION", - }; - - static actions = { - UP: "UP", - DOWN: "DOWN", - LEFT: "LEFT", - RIGHT: "RIGHT", - JUMP: "JUMP", - SHIFT: "SHIFT", - } as const; - - static actionKeyMap = { - [Keyboard.actions.UP]: "KeyW", - [Keyboard.actions.DOWN]: "KeyS", - [Keyboard.actions.LEFT]: "KeyA", - [Keyboard.actions.RIGHT]: "KeyD", - [Keyboard.actions.JUMP]: "Space", - [Keyboard.actions.SHIFT]: "ShiftLeft", - } as const; - - static allKeys = Object.values(Keyboard.actionKeyMap); - - static keyActionMap = Object.entries(Keyboard.actionKeyMap).reduce( - (acc, [key, action]) => { - acc[action] = key as keyof typeof Keyboard.actions; - - return acc; - }, - {} as Record - ); - private keyMap = new Map(); + private callbacks = new Map(); private constructor() { - super(); - this.listenToKeyEvents(); } private listenToKeyEvents() { - document.addEventListener("keydown", (e) => this.onKeyPress(e.code)); - document.addEventListener("keyup", (e) => this.onKeyRelease(e.code)); + document.addEventListener("keydown", (e) => this.onKeyDown(e.code)); + document.addEventListener("keyup", (e) => this.onKeyUp(e.code)); } public static getInstance(): Keyboard { @@ -57,39 +22,43 @@ export default class Keyboard extends utils.EventEmitter { return Keyboard.instance; } - public getAction(action: keyof typeof Keyboard.actions): boolean { - return this.isKeyDown(Keyboard.actionKeyMap[action]); + public registerKey(key: string, callback?: KeyCallback): void { + if (!this.callbacks.has(key)) { + this.callbacks.set(key, []); + } + + this.callbacks.get(key).push(callback); } - public onAction( - callback: (e: { - action: keyof typeof Keyboard.actions; - buttonState: "pressed" | "released"; - }) => void - ): void { - this.on(Keyboard.states.ACTION, callback); + public unregisterKey(key: string, callback?: KeyCallback): void { + if (!this.callbacks.has(key)) return; + + const callbacks = this.callbacks.get(key); + const index = callbacks.indexOf(callback); + + if (index !== -1) { + callbacks.splice(index, 1); + } else { + callbacks.length = 0; + } } - private onKeyPress(key: string): void { - if (this.isKeyDown(key) || !(key in Keyboard.keyActionMap)) return; + private onKeyDown(key: string): void { + if (this.isKeyDown(key)) return; this.keyMap.set(key, true); - this.emit(Keyboard.states.ACTION, { - action: Keyboard.keyActionMap[key], - buttonState: "pressed", - }); - } + if (!this.callbacks.has(key)) return; - private onKeyRelease(key: string): void { - if (!(key in Keyboard.keyActionMap)) return; + this.callbacks.get(key).forEach((callback) => callback({ state: "down" })); + } + private onKeyUp(key: string): void { this.keyMap.set(key, false); - this.emit(Keyboard.states.ACTION, { - action: Keyboard.keyActionMap[key], - buttonState: "released", - }); + if (!this.callbacks.has(key)) return; + + this.callbacks.get(key).forEach((callback) => callback({ state: "up" })); } public isKeyDown(key: string): boolean { diff --git a/src/core/Scene.ts b/src/core/Scene.ts index 58e88e5..eba453b 100644 --- a/src/core/Scene.ts +++ b/src/core/Scene.ts @@ -6,12 +6,10 @@ export interface Scene { unload?(): void | Promise; start?(): void | Promise; onResize?(width: number, height: number): void; - update?(delta: number): void; + onUpdate?(delta: number): void; } export abstract class Scene extends Container { - abstract name: string; - constructor(protected utils: SceneUtils) { super(); } diff --git a/src/core/SceneManager.ts b/src/core/SceneManager.ts index 169b29e..7ebdfa3 100644 --- a/src/core/SceneManager.ts +++ b/src/core/SceneManager.ts @@ -1,28 +1,34 @@ -import { Application } from "pixi.js"; +import { Application, ApplicationOptions } from "pixi.js"; import Scene from "./Scene"; import AssetLoader from "./AssetLoader"; +import { Debug } from "../utils/debug"; export interface SceneUtils { assetLoader: AssetLoader; } -export default class SceneManager { - private sceneConstructors = this.importScenes(); +type SceneConstructor = ConstructorType; +export default class SceneManager { app: Application; - sceneInstances = new Map(); + sceneInstances = new Map(); currentScene?: Scene; constructor() { - this.app = new Application({ - view: document.querySelector("#app") as HTMLCanvasElement, + this.app = new Application(); + } + + async init(options: Partial = {}) { + await this.app.init({ + canvas: document.querySelector("#app") as HTMLCanvasElement, autoDensity: true, resizeTo: window, powerPreference: "high-performance", - backgroundColor: 0x23272a, + ...options, }); - // @ts-expect-error Set PIXI app to global window object for the PIXI Inspector + Debug.log(`๐ŸŽจ Rendering context: ${this.app.renderer.name}`); + window.__PIXI_APP__ = this.app; window.addEventListener("resize", (ev: UIEvent) => { @@ -32,35 +38,24 @@ export default class SceneManager { }); this.app.ticker.add(() => { - this.currentScene?.update?.(this.app.ticker.elapsedMS); + this.currentScene?.onUpdate?.(this.app.ticker.elapsedMS); }); } - importScenes() { - const sceneModules = import.meta.glob("/src/scenes/*.ts", { - eager: true, - }) as Record }>; - - return Object.entries(sceneModules).reduce((acc, [path, module]) => { - const fileName = path.split("/").pop()?.split(".")[0]; - - if (!fileName) throw new Error("Error while parsing filename"); - - acc[fileName] = module.default; - - return acc; - }, {} as Record>); - } - - async switchScene(sceneName: string, deletePrevious = true): Promise { + async switchScene( + scene: SceneConstructor, + deletePrevious = true + ): Promise { await this.removeScene(deletePrevious); - this.currentScene = this.sceneInstances.get(sceneName); + Debug.log(`๐Ÿ”€ Switching to scene ${scene.name}`); + + this.currentScene = this.sceneInstances.get(scene); - if (!this.currentScene) this.currentScene = await this.initScene(sceneName); + if (!this.currentScene) this.currentScene = await this.initScene(scene); if (!this.currentScene) - throw new Error(`Failed to initialize scene: ${sceneName}`); + throw new Error(`Failed to initialize scene: ${scene}`); this.app.stage.addChild(this.currentScene); @@ -72,10 +67,18 @@ export default class SceneManager { private async removeScene(destroyScene: boolean) { if (!this.currentScene) return; - if (destroyScene) { - this.sceneInstances.delete(this.currentScene.name); + Debug.log( + `๐Ÿ”€ Removing scene ${this.currentScene.constructor.name} ${ + destroyScene && "and destroying it" + }` + ); + if (destroyScene) { this.currentScene.destroy({ children: true }); + + this.sceneInstances.delete( + this.currentScene.constructor as SceneConstructor + ); } else { this.app.stage.removeChild(this.currentScene); } @@ -85,14 +88,14 @@ export default class SceneManager { this.currentScene = undefined; } - private async initScene(sceneName: string) { + private async initScene(sceneConstructor: SceneConstructor) { const sceneUtils = { assetLoader: new AssetLoader(), }; - const scene = new this.sceneConstructors[sceneName](sceneUtils); + const scene = new sceneConstructor(sceneUtils); - this.sceneInstances.set(sceneName, scene); + this.sceneInstances.set(sceneConstructor, scene); if (scene.load) await scene.load(); diff --git a/src/core/SpineAnimation.ts b/src/core/SpineAnimation.ts deleted file mode 100644 index 68bcfea..0000000 --- a/src/core/SpineAnimation.ts +++ /dev/null @@ -1,69 +0,0 @@ -import { Assets } from "pixi.js"; -import { - type AnimationStateListener, - type TrackEntry, - Spine, -} from "@pixi-spine/runtime-4.1"; - -import Deferred from "../utils/Deferred"; - -export default class SpineAnimation extends Spine { - playingLabel: string | null = null; - animDeferred?: Deferred; - - animStateListener: AnimationStateListener = { - complete: (trackEntry: TrackEntry) => { - if (trackEntry.animation?.name === this.playingLabel) { - this.animDeferred?.resolve(); - this.playingLabel = null; - } - }, - - interrupt: () => { - this.animDeferred?.resolve(); - this.playingLabel = null; - }, - }; - - constructor(name: string, skin?: string) { - const spineData = Assets.cache.get(name)?.spineData; - - if (!spineData) throw new Error(`Spine data for ${name} not found!`); - - super(spineData); - - this.state.addListener(this.animStateListener); - - this.name = name; - - if (skin) this.setSkin(skin); - } - - play(name: string, loop = false) { - this.state.setAnimation(0, name, loop); - - this.playingLabel = name; - - this.animDeferred = new Deferred(); - - return this.animDeferred.promise; - } - - hasSkin(name: string) { - return this.skeleton.data.skins.find((skin) => skin.name === name); - } - - setSkin(skin: string, resetPose = true) { - if (!this.hasSkin(skin)) { - throw new Error(`Skin ${skin} not found in ${this.name}`); - } - - this.skeleton.setSkinByName(skin); - - if (resetPose) this.skeleton.setSlotsToSetupPose(); - } - - get skin() { - return this.skeleton.skin?.name; - } -} diff --git a/src/core/SpritesheetAnimation.ts b/src/core/SpritesheetAnimation.ts index abe17de..54eb569 100644 --- a/src/core/SpritesheetAnimation.ts +++ b/src/core/SpritesheetAnimation.ts @@ -1,19 +1,23 @@ -import { sound } from "@pixi/sound"; import { AnimatedSprite, Assets, Container } from "pixi.js"; +import Deferred from "../utils/Deferred"; + +type PlayOptions = { + loop?: boolean; + speed?: number; +}; export default class SpritesheetAnimation extends Container { animationTextures: Record; - sprite?: AnimatedSprite; + sprite: AnimatedSprite; speed = 1; animations = new Map(); - - currentAnimation: string | null = null; + currentAnimation: string; constructor(name: string, speed = 1) { super(); - this.name = name; + this.label = name; this.speed = speed; this.animationTextures = Assets.get(name).animations; } @@ -23,30 +27,18 @@ export default class SpritesheetAnimation extends Container { if (!textures) { console.error(`Animation ${anim} not found`); - - return; } const sprite = new AnimatedSprite(textures); - sprite.name = anim; + sprite.label = anim; sprite.anchor.set(0.5); sprite.animationSpeed = this.speed; return sprite; } - play({ - anim, - soundName, - loop = false, - speed = this.speed, - }: { - anim: string; - soundName?: string; - loop?: boolean; - speed?: number; - }) { + play(anim: string, { loop, speed }: PlayOptions = {}): Promise { if (this.sprite) { this.sprite.stop(); @@ -58,29 +50,25 @@ export default class SpritesheetAnimation extends Container { if (!this.sprite) { this.sprite = this.initAnimation(anim); - if (!this.sprite) return; - this.animations.set(anim, this.sprite); } this.currentAnimation = anim; - this.sprite.loop = loop; - this.sprite.animationSpeed = speed; + this.sprite.loop = loop ?? false; + this.sprite.animationSpeed = speed ?? this.speed; this.sprite.gotoAndPlay(0); - if (soundName) sound.play(soundName); - this.addChild(this.sprite); - return new Promise((resolve) => { - if (!this.sprite) return resolve(); + const deferred = new Deferred(); + + this.sprite.onComplete = () => { + this.currentAnimation = null; - this.sprite.onComplete = () => { - this.currentAnimation = null; + deferred.resolve(); + }; - resolve(); - }; - }); + return deferred.promise; } } diff --git a/src/main.ts b/src/main.ts index 65f0ced..af48d63 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,6 +1,10 @@ import SceneManager from "./core/SceneManager"; +import Main from "./scenes/Main"; +import Loading from "./scenes/Loading"; const sceneManager = new SceneManager(); -await sceneManager.switchScene("Loading"); -await sceneManager.switchScene("Game"); +await sceneManager.init({ background: "#0390fc" }); + +await sceneManager.switchScene(Loading); +await sceneManager.switchScene(Main); diff --git a/src/prefabs/ParallaxBackground.ts b/src/prefabs/ParallaxBackground.ts deleted file mode 100644 index 8552048..0000000 --- a/src/prefabs/ParallaxBackground.ts +++ /dev/null @@ -1,83 +0,0 @@ -import { Container, TilingSprite, Ticker, Texture } from "pixi.js"; -import { centerObjects } from "../utils/misc"; - -export type BgConfig = { - layers: string[]; - panSpeed: number; -}; - -export default class ParallaxBackground extends Container { - name = "Background"; - - layers: string[] = []; - tilingSprites: TilingSprite[] = []; - - constructor( - protected config: BgConfig = { - panSpeed: 1, - layers: [], - } - ) { - super(); - - this.init(); - - centerObjects(this); - } - - init() { - for (const layer of this.config.layers) { - const texture = Texture.from(layer); - const scaleFactor = window.innerHeight / texture.height; - - const tilingSprite = new TilingSprite( - texture, - window.innerWidth / scaleFactor, - texture.height - ); - - tilingSprite.scale.set(scaleFactor); - - tilingSprite.name = layer; - tilingSprite.anchor.set(0.5); - - this.tilingSprites.push(tilingSprite); - - this.addChild(tilingSprite); - } - } - - initPlayerMovement(object: { - state: { velocity: { x: number; y: number } }; - }) { - Ticker.shared.add((delta) => { - const x = object.state.velocity.x * delta; - const y = object.state.velocity.y * delta; - - this.updatePosition(x, y); - }); - } - - updatePosition(x: number, y: number) { - for (const [index, child] of this.children.entries()) { - if (child instanceof TilingSprite) { - child.tilePosition.x -= x * index * this.config.panSpeed; - child.tilePosition.y -= y * index * this.config.panSpeed; - } else { - child.x -= x * index * this.config.panSpeed; - child.y -= y * index * this.config.panSpeed; - } - } - } - - resize(width: number, height: number) { - for (const layer of this.tilingSprites) { - const scaleFactor = height / layer.texture.height; - - layer.width = width / scaleFactor; - layer.scale.set(scaleFactor); - } - - centerObjects(this); - } -} diff --git a/src/prefabs/Player.ts b/src/prefabs/Player.ts deleted file mode 100644 index 33c8518..0000000 --- a/src/prefabs/Player.ts +++ /dev/null @@ -1,241 +0,0 @@ -import gsap from "gsap"; -import { Container } from "pixi.js"; -import SpritesheetAnimation from "../core/SpritesheetAnimation"; -import Keyboard from "../core/Keyboard"; -import { wait } from "../utils/misc"; - -enum Directions { - LEFT = -1, - RIGHT = 1, -} - -type AnimState = { - anim: string; - soundName?: string; - loop?: boolean; - speed?: number; -}; - -/** - * Example class showcasing the usage of the```Animation``` and ```Keyboard``` classes - */ -export class Player extends Container { - private keyboard = Keyboard.getInstance(); - anim: SpritesheetAnimation; - currentState: AnimState | null = null; - - static animStates: Record = { - idle: { - anim: "idle", - loop: true, - speed: 0.3, - }, - jump: { - anim: "jump", - soundName: "jump2", - loop: false, - speed: 0.5, - }, - walk: { - anim: "walk", - loop: true, - speed: 1, - }, - dash: { - anim: "dash", - soundName: "dash", - loop: false, - speed: 1, - }, - }; - - config = { - speed: 10, - turnDuration: 0.15, - decelerateDuration: 0.1, - scale: 1, - jump: { - height: 200, - duration: 0.3, - ease: "sine", - }, - dash: { - speedMultiplier: 6, - duration: 0.1, - }, - }; - - state = { - jumping: false, - dashing: false, - velocity: { - x: 0, - y: 0, - }, - }; - - private decelerationTween?: gsap.core.Tween; - - constructor() { - super(); - - this.anim = new SpritesheetAnimation("wizard"); - - this.addChild(this.anim); - - this.setState(Player.animStates.idle); - - this.keyboard.onAction(({ action, buttonState }) => { - if (buttonState === "pressed") this.onActionPress(action); - else if (buttonState === "released") this.onActionRelease(action); - }); - } - - setState(state: AnimState) { - this.currentState = state; - - return this.anim.play(state); - } - - private onActionPress(action: keyof typeof Keyboard.actions) { - switch (action) { - case "LEFT": - this.move(Directions.LEFT); - break; - case "RIGHT": - this.move(Directions.RIGHT); - break; - case "JUMP": - this.jump(); - break; - case "SHIFT": - this.dash(); - break; - - default: - break; - } - } - - onActionRelease(action: keyof typeof Keyboard.actions) { - if ( - (action === "LEFT" && this.state.velocity.x < 0) || - (action === "RIGHT" && this.state.velocity.x > 0) - ) { - this.stopMovement(); - } - } - - get jumping() { - return this.state.jumping; - } - - private set jumping(value: boolean) { - this.state.jumping = value; - this.updateAnimState(); - } - - private set dashing(value: boolean) { - this.state.dashing = value; - this.updateAnimState(); - } - - get dashing() { - return this.state.dashing; - } - - private updateAnimState() { - const { walk, jump, dash, idle } = Player.animStates; - - if (this.dashing) { - if (this.currentState === dash) return; - - this.setState(dash); - } else if (this.jumping) { - if (this.currentState === jump || this.currentState === dash) return; - - this.setState(jump); - } else if (this.state.velocity.x !== 0) { - if (this.currentState === walk) return; - - this.setState(walk); - } else { - if (this.currentState === idle) return; - - this.setState(idle); - } - } - - stopMovement() { - this.decelerationTween?.progress(1); - - this.decelerationTween = gsap.to(this.state.velocity, { - duration: this.config.decelerateDuration, - x: 0, - ease: "power1.in", - onComplete: () => { - this.updateAnimState(); - }, - }); - } - - async move(direction: Directions) { - if (this.dashing) return; - - this.decelerationTween?.progress(1); - - this.state.velocity.x = direction * this.config.speed; - - this.updateAnimState(); - - gsap.to(this.scale, { - duration: this.config.turnDuration, - x: this.config.scale * direction, - }); - } - - async dash() { - if (this.state.velocity.x === 0) return; - - this.dashing = true; - - this.decelerationTween?.progress(1); - - this.state.velocity.x = - this.config.speed * - this.config.dash.speedMultiplier * - this.getDirection(); - - await wait(this.config.dash.duration); - - this.state.velocity.x = this.config.speed * this.getDirection(); - - this.dashing = false; - } - - private getDirection() { - if (this.state.velocity.x === 0) - return this.scale.x > 0 ? Directions.RIGHT : Directions.LEFT; - - return this.state.velocity.x > 0 ? Directions.RIGHT : Directions.LEFT; - } - - async jump() { - if (this.jumping) return; - - const { height, duration, ease } = this.config.jump; - - this.jumping = true; - - await gsap.to(this, { - duration, - y: `-=${height}`, - ease: `${ease}.out`, - yoyo: true, - yoyoEase: `${ease}.in`, - repeat: 1, - }); - - this.jumping = false; - } -} diff --git a/src/scenes/Game.ts b/src/scenes/Game.ts deleted file mode 100644 index 164ac5e..0000000 --- a/src/scenes/Game.ts +++ /dev/null @@ -1,51 +0,0 @@ -import config from "../config"; -import ParallaxBackground from "../prefabs/ParallaxBackground"; -import { Player } from "../prefabs/Player"; -import Scene from "../core/Scene"; -import SpineAnimation from "../core/SpineAnimation"; - -export default class Game extends Scene { - name = "Game"; - - private player!: Player; - private background!: ParallaxBackground; - - load() { - this.background = new ParallaxBackground(config.backgrounds.forest); - this.player = new Player(); - - this.player.x = window.innerWidth / 2; - this.player.y = window.innerHeight - this.player.height / 3; - - this.background.initPlayerMovement(this.player); - - this.addChild(this.background, this.player); - } - - async start() { - // Example of how to play a spine animation - const vine = new SpineAnimation("vine-pro"); - - vine.stateData.setMix("grow", "grow", 0.5); - - vine.x = 0; - vine.y = window.innerHeight / 2 - 50; - - this.background.addChild(vine); - - while (vine) { - await vine.play("grow"); - } - } - - onResize(width: number, height: number) { - if (this.player) { - this.player.x = width / 2; - this.player.y = height - this.player.height / 3; - } - - if (this.background) { - this.background.resize(width, height); - } - } -} diff --git a/src/scenes/Loading.ts b/src/scenes/Loading.ts index c7b967f..b40b4d8 100644 --- a/src/scenes/Loading.ts +++ b/src/scenes/Loading.ts @@ -1,26 +1,24 @@ -import { Sprite, Text } from "pixi.js"; +import { Sprite } from "pixi.js"; import Scene from "../core/Scene"; import { centerObjects } from "../utils/misc"; export default class Loading extends Scene { - name = "Loading"; - + loading: Sprite; async load() { await this.utils.assetLoader.loadAssetsGroup("Loading"); - const bg = Sprite.from("bgNight"); + this.loading = Sprite.from("loading"); - const text = new Text("Loading...", { - fontFamily: "Verdana", - fontSize: 50, - fill: "white", - }); + this.loading.alpha = 0.5; + this.loading.scale.set(0.5); - text.resolution = 2; + centerObjects(this.loading); - centerObjects(bg, text); + this.addChild(this.loading); + } - this.addChild(bg, text); + onUpdate(delta: number): void { + this.loading.rotation += 0.001 * delta; } async start() { diff --git a/src/scenes/Main.ts b/src/scenes/Main.ts new file mode 100644 index 0000000..09b7050 --- /dev/null +++ b/src/scenes/Main.ts @@ -0,0 +1,75 @@ +import gsap from "gsap"; +import Scene from "../core/Scene"; +import SpritesheetAnimation from "../core/SpritesheetAnimation"; +import { Debug } from "../utils/debug"; +import { centerObjects } from "../utils/misc"; +import { sound } from "@pixi/sound"; +import Keyboard from "../core/Keyboard"; +import { Sprite } from "pixi.js"; + +export default class Main extends Scene { + jumpTween: gsap.core.Tween; + keyboard: Keyboard; + sprites: Record; + wizard: SpritesheetAnimation; + + load() { + this.keyboard = Keyboard.getInstance(); + + this.sprites = { + clouds: Sprite.from("clouds"), + skyIsland: Sprite.from("sky_island"), + wizard: new SpritesheetAnimation("wizard"), + }; + + this.wizard = this.sprites.wizard as SpritesheetAnimation; + + this.wizard.interactive = true; + this.wizard.cursor = "pointer"; + + this.wizard.on("pointerdown", () => this.makeWizardJump()); + + this.keyboard.registerKey("Space", ({ state }) => { + if (state === "down") this.makeWizardJump(); + }); + + this.positionSprites(); + + this.addChild(...Object.values(this.sprites)); + } + + start() { + this.wizard.play("idle", { loop: true, speed: 0.5 }); + } + + positionSprites() { + centerObjects(...Object.values(this.sprites)); + + this.wizard.y += 100; + this.sprites.skyIsland.y += 250; + } + + async makeWizardJump() { + if (this.jumpTween && this.jumpTween.isActive()) return; + + this.wizard.play("jump"); + + sound.play("jump"); + + this.jumpTween = gsap.to(this.wizard, { + y: this.wizard.y - 100, + duration: 0.3, + yoyo: true, + repeat: 1, + onComplete: () => { + this.wizard.play("idle", { loop: true, speed: 0.5 }); + }, + }); + } + + onResize(width: number, height: number) { + Debug.log("๐Ÿ–ฅ๏ธ Resized to", width, height); + + this.positionSprites(); + } +} diff --git a/src/utils/Deferred.ts b/src/utils/Deferred.ts index 408da42..2b88b63 100644 --- a/src/utils/Deferred.ts +++ b/src/utils/Deferred.ts @@ -1,6 +1,6 @@ export default class Deferred { promise: Promise; - resolve: (value: T | PromiseLike) => void = () => null; + resolve: (value?: T | PromiseLike) => void = () => null; reject: (reason?: E) => void = () => null; constructor() { diff --git a/src/utils/misc.ts b/src/utils/misc.ts index 5910c5d..88da95a 100644 --- a/src/utils/misc.ts +++ b/src/utils/misc.ts @@ -1,7 +1,7 @@ -import { DisplayObject, Sprite } from "pixi.js"; +import { Container, Sprite } from "pixi.js"; -export function centerObjects(...toCenter: DisplayObject[]) { - const center = (obj: DisplayObject) => { +export function centerObjects(...toCenter: Container[]) { + const center = (obj: Container) => { obj.x = window.innerWidth / 2; obj.y = window.innerHeight / 2; diff --git a/src/utils/types/global.d.ts b/src/utils/types/global.d.ts index 51fb013..98bf8dc 100644 --- a/src/utils/types/global.d.ts +++ b/src/utils/types/global.d.ts @@ -5,3 +5,7 @@ type ConstructorType unknown> = new ( type Entries = { [K in keyof T]: [K, T[K]]; }[keyof T][]; + +interface Window { + __PIXI_APP__: Application; +} diff --git a/tsconfig.json b/tsconfig.json index 445a151..c941ffa 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,21 +1,22 @@ { - "compilerOptions": { - "target": "ESNext", - "useDefineForClassFields": true, - "module": "ESNext", - "lib": ["ESNext", "DOM"], - "moduleResolution": "Node", - "strict": true, - "sourceMap": true, - "resolveJsonModule": true, - "isolatedModules": true, - "esModuleInterop": true, - "noEmit": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noImplicitReturns": true, - "skipLibCheck": true, - "noImplicitAny": true, - }, - "include": ["src"] + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ESNext", "DOM"], + "moduleResolution": "Node", + "strict": true, + "sourceMap": true, + "resolveJsonModule": true, + "isolatedModules": true, + "esModuleInterop": true, + "noEmit": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noImplicitReturns": true, + "skipLibCheck": true, + "noImplicitAny": true, + "strictNullChecks": false + }, + "include": ["src"] }