├── .eslintignore ├── .eslintrc.js ├── .github ├── ISSUE_TEMPLATE │ └── bug_report.md └── workflows │ └── CI.yml ├── .gitignore ├── .prettierrc.js ├── .vercelignore ├── .vscode └── svelte-helpers.code-snippets ├── README.md ├── docs ├── .gitignore ├── README.md ├── package.json ├── server.js ├── src │ ├── components │ │ ├── Ball.svelte │ │ └── IFrameExample.svelte │ ├── examples.css │ ├── includes │ │ ├── error.md │ │ ├── logo.md │ │ ├── sidebar.md │ │ └── topbar.md │ ├── index.html │ ├── pages │ │ ├── animation │ │ │ └── svelte-motion.md │ │ ├── components │ │ │ ├── arc.md │ │ │ ├── camera.md │ │ │ ├── container.md │ │ │ ├── curve.md │ │ │ ├── ellipse.md │ │ │ ├── game.md │ │ │ ├── grid.md │ │ │ ├── iso-box.md │ │ │ ├── iso-triangle.md │ │ │ ├── line.md │ │ │ ├── object-layer.md │ │ │ ├── physics │ │ │ │ ├── arcade-collider.md │ │ │ │ └── arcade-physics.md │ │ │ ├── polygon.md │ │ │ ├── rectangle.md │ │ │ ├── scene.md │ │ │ ├── sprite.md │ │ │ ├── star.md │ │ │ ├── text.md │ │ │ ├── tile-layer.md │ │ │ ├── tile-sprite.md │ │ │ ├── tilemap.md │ │ │ └── triangle.md │ │ ├── examples │ │ │ ├── breakout.md │ │ │ ├── invaders.md │ │ │ └── platformer.md │ │ ├── getting-started.md │ │ ├── index.md │ │ └── roadmap.md │ ├── static │ │ ├── favicon.png │ │ ├── images │ │ │ ├── adventurer-spritesheet.png │ │ │ ├── ball.png │ │ │ ├── mushroom.png │ │ │ ├── mushroom2.png │ │ │ ├── starfield.png │ │ │ ├── tile.png │ │ │ ├── tiled-create-tileset.png │ │ │ ├── tiled-new-map-0.png │ │ │ ├── tiled-new-map-1.png │ │ │ └── tiled-object-layer.png │ │ └── tilemaps │ │ │ ├── castle-tileset.png │ │ │ └── castle.json │ └── theme.css ├── svelte-docs.config.js └── theme │ ├── assets │ ├── burger.svg │ └── fonts │ │ ├── fira-mono-400.woff2 │ │ ├── overpass-300.woff2 │ │ ├── overpass-400.woff2 │ │ └── overpass-600.woff2 │ ├── components │ ├── Document.svelte │ ├── Example.svelte │ ├── Layout.svelte │ ├── Properties.svelte │ ├── Sections.svelte │ └── Topbar.svelte │ ├── info.md │ ├── style.css │ └── styles │ ├── fonts.css │ ├── highlight.css │ ├── layout.css │ └── typography.css ├── examples ├── .gitignore ├── breakout │ ├── .gitignore │ ├── README.md │ ├── index.js │ ├── package.json │ ├── public │ │ ├── assets │ │ │ ├── breakout.json │ │ │ └── breakout.png │ │ ├── favicon.png │ │ └── index.html │ ├── rollup.config.js │ └── src │ │ ├── App.svelte │ │ ├── Ball.svelte │ │ ├── Block.svelte │ │ ├── Breakout.svelte │ │ ├── LoadingBar.svelte │ │ └── Paddle.svelte ├── invaders │ ├── .gitignore │ ├── README.md │ ├── index.js │ ├── package.json │ ├── public │ │ ├── assets │ │ │ ├── bullet.png │ │ │ ├── enemy-bullet.png │ │ │ ├── explode.png │ │ │ ├── invader.png │ │ │ ├── ship.png │ │ │ └── starfield.png │ │ ├── favicon.png │ │ └── index.html │ ├── rollup.config.js │ └── src │ │ ├── App.svelte │ │ ├── Background.svelte │ │ ├── Bullet.svelte │ │ ├── Enemies.svelte │ │ ├── Enemy.svelte │ │ ├── Explosion.svelte │ │ ├── LoadingBar.svelte │ │ ├── Player.svelte │ │ ├── UI.svelte │ │ └── store.js ├── package.json ├── platformer │ ├── .gitignore │ ├── README.md │ ├── index.js │ ├── package.json │ ├── public │ │ ├── assets │ │ │ ├── adventurer.png │ │ │ ├── castle-tileset.png │ │ │ └── tilemap.json │ │ ├── favicon.png │ │ └── index.html │ ├── rollup.config.js │ └── src │ │ ├── App.svelte │ │ ├── LoadingBar.svelte │ │ └── Player.svelte └── vercel.json ├── package.json ├── packages └── svelte-phaser │ ├── .babelrc │ ├── .gitignore │ ├── README.md │ ├── jest.config.js │ ├── package.json │ └── src │ ├── Arc.spec.js │ ├── Arc.svelte │ ├── ArcadeCollider.svelte │ ├── ArcadePhysics.spec.js │ ├── ArcadePhysics.svelte │ ├── Camera.spec.js │ ├── Camera.svelte │ ├── Container.svelte │ ├── Curve.svelte │ ├── Ellipse.svelte │ ├── Game.svelte │ ├── GameObject.spec.js │ ├── GameObject.svelte │ ├── Grid.spec.js │ ├── Grid.svelte │ ├── IsoBox.spec.js │ ├── IsoBox.svelte │ ├── IsoTriangle.spec.js │ ├── IsoTriangle.svelte │ ├── Line.spec.js │ ├── Line.svelte │ ├── ObjectLayer.svelte │ ├── Polygon.spec.js │ ├── Polygon.svelte │ ├── Rectangle.svelte │ ├── Scene.svelte │ ├── Shape.spec.js │ ├── Shape.svelte │ ├── Spawner.svelte │ ├── Sprite.spec.js │ ├── Sprite.svelte │ ├── Star.spec.js │ ├── Star.svelte │ ├── Text.spec.js │ ├── Text.svelte │ ├── TileLayer.svelte │ ├── TileSprite.spec.js │ ├── TileSprite.svelte │ ├── Tilemap.svelte │ ├── Triangle.spec.js │ ├── Triangle.svelte │ ├── getCamera.js │ ├── getContainer.js │ ├── getGame.js │ ├── getGameObject.js │ ├── getScene.js │ ├── getSpawner.js │ ├── getTilemap.js │ ├── index.mjs │ ├── onArcadePhysicsEvent.js │ ├── onGameEvent.js │ ├── onInputEvent.js │ ├── onSceneEvent.js │ ├── phaser-components │ ├── Alpha.spec.js │ ├── Alpha.svelte │ ├── BlendMode.spec.js │ ├── BlendMode.svelte │ ├── Crop.svelte │ ├── Depth.spec.js │ ├── Depth.svelte │ ├── Flip.spec.js │ ├── Flip.svelte │ ├── Mask.spec.js │ ├── Mask.svelte │ ├── Origin.spec.js │ ├── Origin.svelte │ ├── PathFollower.spec.js │ ├── PathFollower.svelte │ ├── Pipeline.spec.js │ ├── Pipeline.svelte │ ├── ScrollFactor.spec.js │ ├── ScrollFactor.svelte │ ├── Size.spec.js │ ├── Size.svelte │ ├── Texture.spec.js │ ├── Texture.svelte │ ├── Tint.spec.js │ ├── Tint.svelte │ ├── Transform.spec.js │ ├── Transform.svelte │ ├── Visible.spec.js │ └── Visible.svelte │ ├── phaser.js │ ├── test-utils │ ├── createGame.js │ ├── index.js │ └── setup.js │ └── util │ ├── addInstance.js │ ├── createPhaserEventDispatcher.js │ ├── findGameObjectsByName.js │ ├── index.js │ ├── removeUndefined.js │ ├── shouldApplyProps.js │ └── toArray.js ├── templates ├── blank │ ├── .gitignore │ ├── App.svelte │ ├── README.md │ ├── index.js │ ├── package.json │ ├── public │ │ ├── favicon.png │ │ ├── global.css │ │ └── index.html │ └── rollup.config.js └── snowpack │ ├── .gitignore │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo.svg │ └── robots.txt │ ├── snowpack.config.js │ └── src │ ├── App.svelte │ └── index.js ├── yarn-error.log └── yarn.lock /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | build 4 | __DOCS__ -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['eslint:recommended'], 3 | parserOptions: { 4 | ecmaVersion: 2019, 5 | sourceType: 'module', 6 | }, 7 | env: { 8 | es6: true, 9 | browser: true, 10 | node: true, 11 | }, 12 | 13 | plugins: ['svelte3'], 14 | overrides: [ 15 | { 16 | files: ['**/*.svelte'], 17 | processor: 'svelte3/svelte3', 18 | }, 19 | { 20 | files: ['**/*.spec.js', '**/test-utils/**/*'], 21 | env: { 22 | jest: true, 23 | }, 24 | // Can't extend in overrides: https://github.com/eslint/eslint/issues/8813 25 | plugins: ['jest'], 26 | rules: { 27 | 'jest/no-disabled-tests': 'warn', 28 | 'jest/no-focused-tests': 'error', 29 | 'jest/no-identical-title': 'error', 30 | 'jest/prefer-to-have-length': 'warn', 31 | 'jest/valid-expect': 'error', 32 | }, 33 | }, 34 | ], 35 | rules: { 36 | 'no-unused-vars': 1, 37 | }, 38 | globals: { 39 | Phaser: true, 40 | }, 41 | } 42 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | --- 8 | 9 | **Describe the bug** 10 | A clear and concise description of what the bug is. 11 | 12 | **To Reproduce** 13 | Steps to reproduce the behavior: 14 | 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. See error 18 | 19 | If possible, a link to a reproduction repo or live example will always be best. 20 | 21 | **Expected behavior** 22 | A clear and concise description of what you expected to happen. 23 | 24 | **Additional context** 25 | Add any other context about the problem here. 26 | -------------------------------------------------------------------------------- /.github/workflows/CI.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: [pull_request] 4 | 5 | jobs: 6 | run-linters: 7 | name: Run linters 8 | runs-on: ubuntu-latest 9 | strategy: 10 | matrix: 11 | node-version: [12.x] 12 | 13 | steps: 14 | - name: Check out Git repository 15 | uses: actions/checkout@v2 16 | - name: Use Node.js ${{ matrix.node-version }} 17 | uses: actions/setup-node@v1 18 | with: 19 | node-version: ${{ matrix.node-version }} 20 | 21 | - name: yarn install 22 | run: yarn 23 | 24 | - name: Run linters 25 | uses: samuelmeuli/lint-action@v1 26 | with: 27 | github_token: ${{ secrets.github_token }} 28 | eslint: true 29 | prettier: true 30 | auto_fix: true 31 | 32 | run-tests: 33 | runs-on: ubuntu-latest 34 | strategy: 35 | matrix: 36 | node-version: [12.x] 37 | 38 | steps: 39 | - name: Check out Git repository 40 | uses: actions/checkout@v2 41 | - name: Use Node.js ${{ matrix.node-version }} 42 | uses: actions/setup-node@v1 43 | with: 44 | node-version: ${{ matrix.node-version }} 45 | - name: yarn install 46 | run: yarn 47 | - name: run tests 48 | run: yarn test 49 | env: 50 | CI: true 51 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | **/*/public/build 4 | **/*/yarn.lock 5 | .now 6 | .vercel -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, 3 | semi: false, 4 | singleQuote: true, 5 | trailingComma: 'es5', 6 | tabWidth: 2, 7 | } 8 | -------------------------------------------------------------------------------- /.vercelignore: -------------------------------------------------------------------------------- 1 | build 2 | dist 3 | __DOCS__ 4 | -------------------------------------------------------------------------------- /.vscode/svelte-helpers.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | // Place your svelte-phaser workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 3 | // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 4 | // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 5 | // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 6 | // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 7 | // Placeholders with the same ids are connected. 8 | // Example: 9 | // "Print to console": { 10 | // "scope": "javascript,typescript", 11 | // "prefix": "log", 12 | // "body": [ 13 | // "console.log('$1');", 14 | // "$2" 15 | // ], 16 | // "description": "Log output to console" 17 | // } 18 | "export prop": { 19 | "prefix": "el", 20 | "body": ["export let $1 = undefined", ""] 21 | }, 22 | "apply prop": { 23 | "prefix": "ap", 24 | "body": [ 25 | "$: shouldApplyProps($1) && $1 !== instance.$1 && (instance.$2)", 26 | "" 27 | ] 28 | }, 29 | "apply prop if": { 30 | "prefix": "apif", 31 | "body": [ 32 | "$: {", 33 | "\tif (shouldApplyProps($1)) {", 34 | "\t\tinstance$2", 35 | "\t}", 36 | "}", 37 | "" 38 | ] 39 | }, 40 | "update instance": { 41 | "prefix": "ui", 42 | "body": ["$1 = instance.$1"] 43 | }, 44 | "jsdoc": { 45 | "prefix": "/**", 46 | "body": ["/**", " * $1", " * @type {$2}", " */"] 47 | }, 48 | "jsdoc number": { 49 | "prefix": "/**n", 50 | "body": ["/**", " * $1", " * @type {number}", " */"] 51 | }, 52 | "jsdoc string": { 53 | "prefix": "/**s", 54 | "body": ["/**", " * $1", " * @type {string}", " */"] 55 | }, 56 | "jsdoc boolean": { 57 | "prefix": "/**b", 58 | "body": ["/**", " * $1", " * @type {boolean}", " */"] 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ⚠️ No longer maintained ⚠️ 2 | 3 | I am no longer maintaining this project. The documentation will stay up as the content here may still be useful to some, but I have no plans on continuing this library. 4 | 5 | # Documentation 6 | 7 | Check out the [documentation](https://svelte-phaser.com) 8 | 9 | # Getting Started 10 | 11 | ### Creating a new project 12 | 13 | The easiest way to get started is to create a new project using the blank template: 14 | 15 | ```shell 16 | npx degit mattjennings/svelte-phaser/templates/blank my-first-game 17 | cd my-first-game 18 | npm install 19 | npm run dev 20 | ``` 21 | 22 | If a blank project is too boring, feel free to look through the [examples](https://github.com/mattjennings/svelte-phaser/tree/master/examples). 23 | 24 | ### Adding to an existing project 25 | 26 | If you have an existing svelte project you can just install `svelte-phaser`: 27 | 28 | ```shell 29 | npm install phaser svelte-phaser 30 | ``` 31 | 32 | and then import it: 33 | 34 | ```svelte 35 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | ``` 45 | -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | __DOCS__ 3 | dist 4 | .vercel -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # Credits for Assets 2 | 3 | [rvos](https://rvros.itch.io/) 4 | 5 | - [adventurer-spritesheet.png](https://rvros.itch.io/animated-pixel-hero) 6 | 7 | Phaser 8 | 9 | - mushroom.png 10 | - mushroom2.png 11 | - starfield.png 12 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "docs", 4 | "version": "0.3.1", 5 | "dependencies": { 6 | "@svelte-docs/server": "^0.1.3", 7 | "svelte-phaser": "0.0.6", 8 | "svelte-fragment": "1.0.1" 9 | }, 10 | "devDependencies": { 11 | "@svelte-docs/core": "^0.10.1", 12 | "@svelte-docs/publisher": "^0.2.3", 13 | "@svelte-docs/themes": "^1.0.0", 14 | "npm-run-all": "^4.1.5", 15 | "rollup": "^1.32.1", 16 | "svelte": "^3.21.0", 17 | "phaser": "^3.23.0" 18 | }, 19 | "scripts": { 20 | "clean": "rm -rf __DOCS__", 21 | "copy-index-html": "cp src/index.html __DOCS__/dist", 22 | "build": "yarn clean && rollup -c node_modules/@svelte-docs/core/rollup.config.js", 23 | "autobuild": "rollup -c node_modules/@svelte-docs/core/rollup.config.js -w", 24 | "dev": "run-p start:dev start:pagewatch autobuild", 25 | "start": "node node_modules/@svelte-docs/server", 26 | "start:dev": "node ./server --dev --single --cors", 27 | "start:pagewatch": "node node_modules/@svelte-docs/core/watcher", 28 | "deploy": "npm run build && node node_modules/@svelte-docs/publisher", 29 | "post:build": "yarn copy-index-html" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /docs/server.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | // taken from https://github.com/AlexxNB/svelte-docs/blob/master/packages/server/server.js 4 | // modified to enable CORS 5 | 6 | const path = require('path') 7 | const meow = require('meow') 8 | const sirv = require('sirv') 9 | const { createServer } = require('http') 10 | const clear = require('console-clear') 11 | const chalk = require('chalk') 12 | const importCWD = require('import-cwd') 13 | 14 | const config = importCWD('./svelte-docs.config.js') 15 | 16 | const cli = meow( 17 | ` 18 | Usage 19 | $ node sirv.js [options] 20 | 21 | Options 22 | --dev, -d Development mode 23 | --single, -s SPA Mode 24 | 25 | Examples 26 | $ node sirv.js --dev --basepath subdir 27 | `, 28 | { 29 | flags: { 30 | dev: { 31 | type: 'boolean', 32 | alias: 'd', 33 | }, 34 | single: { 35 | type: 'boolean', 36 | alias: 's', 37 | }, 38 | }, 39 | } 40 | ) 41 | 42 | const CWD = process.cwd() 43 | 44 | const DEV = cli.flags.dev 45 | const SINGLE = cli.flags.single 46 | 47 | const DIR = DEV 48 | ? path.join(CWD, config.pathes.dev) 49 | : path.join(CWD, config.pathes.build) 50 | 51 | let port = process.env.PORT || 5000 52 | let hostname = process.env.HOST || '0.0.0.0' 53 | 54 | const mw = sirv(DIR, { 55 | setHeaders: (res) => { 56 | res.setHeader('Access-Control-Allow-Origin', '*') 57 | res.setHeader( 58 | 'Access-Control-Allow-Headers', 59 | 'Origin, Content-Type, Accept, Range' 60 | ) 61 | }, 62 | dev: DEV, 63 | maxAge: 31536000, // 1Y 64 | immutable: true, 65 | onNoMatch: SINGLE 66 | ? (req, res) => ( 67 | (req.path = config.basepath), 68 | mw(req, res, () => ((res.statusCode = 404), res.end())) 69 | ) 70 | : undefined, 71 | }) 72 | 73 | createServer(mw).listen(port, hostname, (err) => { 74 | if (err) throw err 75 | 76 | const srv = DEV 77 | ? chalk.yellow('DEVELOPMENT server started...') 78 | : chalk.green('Server started...') 79 | 80 | clear(true) 81 | console.log(` 82 | ${chalk.bold('Svelte-Docs:')} ${srv} 83 | Please open: ${chalk.blue( 84 | 'http://' + 85 | (hostname === '0.0.0.0' ? 'localhost' : hostname) + 86 | ':' + 87 | port + 88 | config.basepath 89 | )} 90 | `) 91 | }) 92 | -------------------------------------------------------------------------------- /docs/src/components/Ball.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /docs/src/components/IFrameExample.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 |
22 |