├── examples ├── .gitignore ├── breakout │ ├── .gitignore │ ├── public │ │ ├── favicon.png │ │ ├── assets │ │ │ └── breakout.png │ │ └── index.html │ ├── index.js │ ├── README.md │ ├── src │ │ ├── Block.svelte │ │ ├── Paddle.svelte │ │ ├── Ball.svelte │ │ ├── LoadingBar.svelte │ │ ├── App.svelte │ │ └── Breakout.svelte │ ├── package.json │ └── rollup.config.js ├── invaders │ ├── .gitignore │ ├── public │ │ ├── favicon.png │ │ ├── assets │ │ │ ├── ship.png │ │ │ ├── bullet.png │ │ │ ├── explode.png │ │ │ ├── invader.png │ │ │ ├── starfield.png │ │ │ └── enemy-bullet.png │ │ └── index.html │ ├── index.js │ ├── README.md │ ├── src │ │ ├── Explosion.svelte │ │ ├── Background.svelte │ │ ├── Enemy.svelte │ │ ├── store.js │ │ ├── UI.svelte │ │ ├── LoadingBar.svelte │ │ ├── Bullet.svelte │ │ ├── Player.svelte │ │ ├── App.svelte │ │ └── Enemies.svelte │ ├── package.json │ └── rollup.config.js ├── platformer │ ├── .gitignore │ ├── public │ │ ├── favicon.png │ │ ├── assets │ │ │ ├── adventurer.png │ │ │ └── castle-tileset.png │ │ └── index.html │ ├── index.js │ ├── README.md │ ├── package.json │ ├── src │ │ ├── LoadingBar.svelte │ │ ├── Player.svelte │ │ └── App.svelte │ └── rollup.config.js ├── package.json └── vercel.json ├── templates ├── blank │ ├── README.md │ ├── .gitignore │ ├── public │ │ ├── favicon.png │ │ ├── global.css │ │ └── index.html │ ├── index.js │ ├── App.svelte │ ├── package.json │ └── rollup.config.js └── snowpack │ ├── .gitignore │ ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── index.html │ └── logo.svg │ ├── src │ ├── index.js │ └── App.svelte │ ├── snowpack.config.js │ ├── package.json │ ├── README.md │ └── LICENSE ├── .vercelignore ├── docs ├── src │ ├── includes │ │ ├── logo.md │ │ ├── topbar.md │ │ ├── error.md │ │ └── sidebar.md │ ├── static │ │ ├── favicon.png │ │ ├── images │ │ │ ├── ball.png │ │ │ ├── tile.png │ │ │ ├── mushroom.png │ │ │ ├── mushroom2.png │ │ │ ├── starfield.png │ │ │ ├── tiled-new-map-0.png │ │ │ ├── tiled-new-map-1.png │ │ │ ├── tiled-object-layer.png │ │ │ ├── tiled-create-tileset.png │ │ │ └── adventurer-spritesheet.png │ │ └── tilemaps │ │ │ └── castle-tileset.png │ ├── theme.css │ ├── pages │ │ ├── examples │ │ │ ├── breakout.md │ │ │ ├── invaders.md │ │ │ └── platformer.md │ │ ├── roadmap.md │ │ ├── components │ │ │ ├── line.md │ │ │ ├── grid.md │ │ │ ├── camera.md │ │ │ ├── game.md │ │ │ ├── ellipse.md │ │ │ ├── rectangle.md │ │ │ ├── arc.md │ │ │ ├── star.md │ │ │ ├── curve.md │ │ │ ├── triangle.md │ │ │ ├── tile-layer.md │ │ │ ├── polygon.md │ │ │ ├── physics │ │ │ │ ├── arcade-physics.md │ │ │ │ └── arcade-collider.md │ │ │ ├── iso-box.md │ │ │ ├── text.md │ │ │ ├── iso-triangle.md │ │ │ ├── container.md │ │ │ ├── object-layer.md │ │ │ ├── tile-sprite.md │ │ │ ├── scene.md │ │ │ ├── tilemap.md │ │ │ └── sprite.md │ │ ├── index.md │ │ ├── getting-started.md │ │ └── animation │ │ │ └── svelte-motion.md │ ├── components │ │ ├── Ball.svelte │ │ └── IFrameExample.svelte │ ├── index.html │ └── examples.css ├── .gitignore ├── theme │ ├── components │ │ ├── Sections.svelte │ │ ├── Example.svelte │ │ ├── Topbar.svelte │ │ ├── Document.svelte │ │ └── Layout.svelte │ ├── assets │ │ ├── fonts │ │ │ ├── fira-mono-400.woff2 │ │ │ ├── overpass-300.woff2 │ │ │ ├── overpass-400.woff2 │ │ │ └── overpass-600.woff2 │ │ └── burger.svg │ ├── styles │ │ ├── fonts.css │ │ ├── highlight.css │ │ └── typography.css │ ├── style.css │ └── info.md ├── README.md ├── package.json ├── svelte-docs.config.js └── server.js ├── .eslintignore ├── packages └── svelte-phaser │ ├── .gitignore │ ├── src │ ├── test-utils │ │ ├── index.js │ │ ├── setup.js │ │ └── createGame.js │ ├── util │ │ ├── toArray.js │ │ ├── findGameObjectsByName.js │ │ ├── index.js │ │ ├── shouldApplyProps.js │ │ ├── removeUndefined.js │ │ ├── addInstance.js │ │ └── createPhaserEventDispatcher.js │ ├── getGame.js │ ├── getScene.js │ ├── getCamera.js │ ├── getSpawner.js │ ├── getTilemap.js │ ├── getContainer.js │ ├── getGameObject.js │ ├── onGameEvent.js │ ├── onInputEvent.js │ ├── phaser.js │ ├── onSceneEvent.js │ ├── onArcadePhysicsEvent.js │ ├── phaser-components │ │ ├── Crop.svelte │ │ ├── Pipeline.svelte │ │ ├── Visible.svelte │ │ ├── Mask.svelte │ │ ├── Depth.spec.js │ │ ├── Visible.spec.js │ │ ├── Mask.spec.js │ │ ├── Flip.spec.js │ │ ├── BlendMode.spec.js │ │ ├── Depth.svelte │ │ ├── Texture.svelte │ │ ├── ScrollFactor.spec.js │ │ ├── Texture.spec.js │ │ ├── Pipeline.spec.js │ │ ├── Tint.spec.js │ │ ├── PathFollower.spec.js │ │ ├── Size.spec.js │ │ ├── Origin.spec.js │ │ ├── BlendMode.svelte │ │ ├── Transform.spec.js │ │ ├── Flip.svelte │ │ ├── PathFollower.svelte │ │ ├── Alpha.spec.js │ │ ├── Size.svelte │ │ ├── Origin.svelte │ │ ├── Tint.svelte │ │ ├── Alpha.svelte │ │ └── ScrollFactor.svelte │ ├── Spawner.svelte │ ├── TileSprite.spec.js │ ├── Triangle.spec.js │ ├── Shape.spec.js │ ├── Polygon.spec.js │ ├── Star.spec.js │ ├── Grid.spec.js │ ├── Tilemap.svelte │ ├── Line.spec.js │ ├── Arc.spec.js │ ├── ObjectLayer.svelte │ ├── index.mjs │ ├── Sprite.spec.js │ ├── IsoBox.spec.js │ ├── Text.spec.js │ ├── ArcadeCollider.svelte │ ├── IsoTriangle.spec.js │ └── GameObject.spec.js │ ├── .babelrc │ ├── jest.config.js │ ├── package.json │ └── README.md ├── .gitignore ├── .prettierrc.js ├── .github ├── ISSUE_TEMPLATE │ └── bug_report.md └── workflows │ └── CI.yml ├── .eslintrc.js ├── README.md ├── package.json └── .vscode └── svelte-helpers.code-snippets /examples/.gitignore: -------------------------------------------------------------------------------- 1 | .vercel -------------------------------------------------------------------------------- /templates/blank/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.vercelignore: -------------------------------------------------------------------------------- 1 | build 2 | dist 3 | __DOCS__ 4 | -------------------------------------------------------------------------------- /docs/src/includes/logo.md: -------------------------------------------------------------------------------- 1 | # [svelte-phaser](/) 2 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | build 4 | __DOCS__ -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | __DOCS__ 3 | dist 4 | .vercel -------------------------------------------------------------------------------- /examples/breakout/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | public/build 4 | -------------------------------------------------------------------------------- /examples/invaders/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | public/build 4 | -------------------------------------------------------------------------------- /packages/svelte-phaser/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist/ 4 | -------------------------------------------------------------------------------- /templates/blank/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | public/bundle.* 4 | -------------------------------------------------------------------------------- /templates/snowpack/.gitignore: -------------------------------------------------------------------------------- 1 | .build 2 | build 3 | web_modules 4 | node_modules -------------------------------------------------------------------------------- /packages/svelte-phaser/src/test-utils/index.js: -------------------------------------------------------------------------------- 1 | export * from './createGame' 2 | -------------------------------------------------------------------------------- /examples/platformer/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | public/build 4 | 5 | .now -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | **/*/public/build 4 | **/*/yarn.lock 5 | .now 6 | .vercel -------------------------------------------------------------------------------- /docs/src/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/docs/src/static/favicon.png -------------------------------------------------------------------------------- /templates/snowpack/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /docs/src/includes/topbar.md: -------------------------------------------------------------------------------- 1 | - [Docs](getting-started) 2 | - [Github](https://github.com/mattjennings/svelte-phaser) 3 | -------------------------------------------------------------------------------- /packages/svelte-phaser/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]] 3 | } 4 | -------------------------------------------------------------------------------- /docs/src/static/images/ball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/docs/src/static/images/ball.png -------------------------------------------------------------------------------- /docs/src/static/images/tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/docs/src/static/images/tile.png -------------------------------------------------------------------------------- /docs/src/static/images/mushroom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/docs/src/static/images/mushroom.png -------------------------------------------------------------------------------- /packages/svelte-phaser/src/util/toArray.js: -------------------------------------------------------------------------------- 1 | export function toArray(obj) { 2 | return Array.isArray(obj) ? obj : [obj] 3 | } 4 | -------------------------------------------------------------------------------- /templates/blank/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/templates/blank/public/favicon.png -------------------------------------------------------------------------------- /docs/src/static/images/mushroom2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/docs/src/static/images/mushroom2.png -------------------------------------------------------------------------------- /docs/src/static/images/starfield.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/docs/src/static/images/starfield.png -------------------------------------------------------------------------------- /docs/theme/components/Sections.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /examples/breakout/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/examples/breakout/public/favicon.png -------------------------------------------------------------------------------- /examples/invaders/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/examples/invaders/public/favicon.png -------------------------------------------------------------------------------- /examples/platformer/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/examples/platformer/public/favicon.png -------------------------------------------------------------------------------- /templates/snowpack/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/templates/snowpack/public/favicon.ico -------------------------------------------------------------------------------- /examples/invaders/public/assets/ship.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/examples/invaders/public/assets/ship.png -------------------------------------------------------------------------------- /templates/blank/public/global.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | position: relative; 5 | width: 100%; 6 | height: 100%; 7 | } 8 | -------------------------------------------------------------------------------- /docs/src/static/images/tiled-new-map-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/docs/src/static/images/tiled-new-map-0.png -------------------------------------------------------------------------------- /docs/src/static/images/tiled-new-map-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/docs/src/static/images/tiled-new-map-1.png -------------------------------------------------------------------------------- /docs/src/static/tilemaps/castle-tileset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/docs/src/static/tilemaps/castle-tileset.png -------------------------------------------------------------------------------- /docs/theme/assets/fonts/fira-mono-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/docs/theme/assets/fonts/fira-mono-400.woff2 -------------------------------------------------------------------------------- /docs/theme/assets/fonts/overpass-300.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/docs/theme/assets/fonts/overpass-300.woff2 -------------------------------------------------------------------------------- /docs/theme/assets/fonts/overpass-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/docs/theme/assets/fonts/overpass-400.woff2 -------------------------------------------------------------------------------- /docs/theme/assets/fonts/overpass-600.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/docs/theme/assets/fonts/overpass-600.woff2 -------------------------------------------------------------------------------- /examples/invaders/public/assets/bullet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/examples/invaders/public/assets/bullet.png -------------------------------------------------------------------------------- /examples/invaders/public/assets/explode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/examples/invaders/public/assets/explode.png -------------------------------------------------------------------------------- /examples/invaders/public/assets/invader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/examples/invaders/public/assets/invader.png -------------------------------------------------------------------------------- /docs/src/static/images/tiled-object-layer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/docs/src/static/images/tiled-object-layer.png -------------------------------------------------------------------------------- /examples/breakout/public/assets/breakout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/examples/breakout/public/assets/breakout.png -------------------------------------------------------------------------------- /examples/invaders/public/assets/starfield.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/examples/invaders/public/assets/starfield.png -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, 3 | semi: false, 4 | singleQuote: true, 5 | trailingComma: 'es5', 6 | tabWidth: 2, 7 | } 8 | -------------------------------------------------------------------------------- /docs/src/static/images/tiled-create-tileset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/docs/src/static/images/tiled-create-tileset.png -------------------------------------------------------------------------------- /examples/invaders/public/assets/enemy-bullet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/examples/invaders/public/assets/enemy-bullet.png -------------------------------------------------------------------------------- /examples/platformer/public/assets/adventurer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/examples/platformer/public/assets/adventurer.png -------------------------------------------------------------------------------- /templates/blank/index.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte' 2 | 3 | const app = new App({ 4 | target: document.body, 5 | }) 6 | 7 | export default app 8 | -------------------------------------------------------------------------------- /docs/src/static/images/adventurer-spritesheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/docs/src/static/images/adventurer-spritesheet.png -------------------------------------------------------------------------------- /examples/breakout/index.js: -------------------------------------------------------------------------------- 1 | import App from './src/App.svelte' 2 | 3 | const app = new App({ 4 | target: document.body, 5 | }) 6 | 7 | export default app 8 | -------------------------------------------------------------------------------- /examples/invaders/index.js: -------------------------------------------------------------------------------- 1 | import App from './src/App.svelte' 2 | 3 | const app = new App({ 4 | target: document.body, 5 | }) 6 | 7 | export default app 8 | -------------------------------------------------------------------------------- /examples/platformer/index.js: -------------------------------------------------------------------------------- 1 | import App from './src/App.svelte' 2 | 3 | const app = new App({ 4 | target: document.body, 5 | }) 6 | 7 | export default app 8 | -------------------------------------------------------------------------------- /packages/svelte-phaser/src/getGame.js: -------------------------------------------------------------------------------- 1 | import { getContext } from 'svelte' 2 | 3 | export function getGame() { 4 | return getContext('phaser/game') 5 | } 6 | -------------------------------------------------------------------------------- /packages/svelte-phaser/src/getScene.js: -------------------------------------------------------------------------------- 1 | import { getContext } from 'svelte' 2 | 3 | export function getScene() { 4 | return getContext('phaser/scene') 5 | } 6 | -------------------------------------------------------------------------------- /templates/snowpack/src/index.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte' 2 | 3 | var app = new App({ 4 | target: document.body, 5 | }) 6 | 7 | export default app 8 | -------------------------------------------------------------------------------- /examples/platformer/public/assets/castle-tileset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattjennings/svelte-phaser/HEAD/examples/platformer/public/assets/castle-tileset.png -------------------------------------------------------------------------------- /packages/svelte-phaser/src/getCamera.js: -------------------------------------------------------------------------------- 1 | import { getContext } from 'svelte' 2 | 3 | export function getCamera() { 4 | return getContext('phaser/camera') 5 | } 6 | -------------------------------------------------------------------------------- /packages/svelte-phaser/src/getSpawner.js: -------------------------------------------------------------------------------- 1 | import { getContext } from 'svelte' 2 | 3 | export function getSpawner() { 4 | return getContext('phaser/spawner') 5 | } 6 | -------------------------------------------------------------------------------- /packages/svelte-phaser/src/getTilemap.js: -------------------------------------------------------------------------------- 1 | import { getContext } from 'svelte' 2 | 3 | export function getTilemap() { 4 | return getContext('phaser/tilemap') 5 | } 6 | -------------------------------------------------------------------------------- /docs/src/theme.css: -------------------------------------------------------------------------------- 1 | /* Theme tunning: for full list ov variables visit the https://alexxnb.github.io/svelte-docs/theming */ 2 | 3 | :root { 4 | --hl-keyword: #3ca7b9; 5 | } 6 | -------------------------------------------------------------------------------- /packages/svelte-phaser/src/getContainer.js: -------------------------------------------------------------------------------- 1 | import { getContext } from 'svelte' 2 | 3 | export function getContainer() { 4 | return getContext('phaser/container') 5 | } 6 | -------------------------------------------------------------------------------- /packages/svelte-phaser/src/getGameObject.js: -------------------------------------------------------------------------------- 1 | import { getContext } from 'svelte' 2 | 3 | export function getGameObject() { 4 | return getContext('phaser/game-object') 5 | } 6 | -------------------------------------------------------------------------------- /packages/svelte-phaser/src/util/findGameObjectsByName.js: -------------------------------------------------------------------------------- 1 | export function findGameObjectsByName(scene, name) { 2 | return scene.children.list.filter((child) => child.name === name) 3 | } 4 | -------------------------------------------------------------------------------- /docs/theme/components/Example.svelte: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 | 7 |
8 |
9 | -------------------------------------------------------------------------------- /examples/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-phaser-examples", 3 | "private": true, 4 | "scripts": { 5 | "build": "(cd breakout && yarn build); (cd invaders && yarn build); (cd platforme && yarn build)" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /docs/src/includes/error.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: 'no_sidebar' 3 | --- 4 | 5 | # Page not found! 6 | 7 | [Go to start page](/) 8 | 9 | 13 | -------------------------------------------------------------------------------- /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/theme/components/Topbar.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 | 8 |
9 |
10 | 11 |
-------------------------------------------------------------------------------- /packages/svelte-phaser/src/util/index.js: -------------------------------------------------------------------------------- 1 | export * from './createPhaserEventDispatcher' 2 | export * from './removeUndefined' 3 | export * from './addInstance' 4 | export * from './shouldApplyProps' 5 | export * from './toArray' 6 | export * from './findGameObjectsByName' 7 | -------------------------------------------------------------------------------- /templates/snowpack/snowpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: '@snowpack/app-scripts-svelte', 3 | devOptions: {}, 4 | install: ['svelte'], 5 | installOptions: { 6 | rollup: { 7 | dedupe: ['svelte', 'phaser'], 8 | }, 9 | }, 10 | } 11 | -------------------------------------------------------------------------------- /examples/breakout/README.md: -------------------------------------------------------------------------------- 1 | Give it a try! 2 | 3 | ```shell 4 | npx degit mattjennings/svelte-phaser/examples/breakout breakout 5 | cd breakout 6 | npm install 7 | npm run dev 8 | ``` 9 | 10 | Assets were taken from official [Phaser 3 example](https://phaser.io/examples/v3/view/games/breakout/breakout) 11 | -------------------------------------------------------------------------------- /packages/svelte-phaser/src/util/shouldApplyProps.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Returns true if any of the values are not undefined 3 | */ 4 | export function shouldApplyProps(...args) { 5 | for (const arg of args) { 6 | if (typeof arg !== 'undefined') { 7 | return true 8 | } 9 | } 10 | 11 | return false 12 | } 13 | -------------------------------------------------------------------------------- /docs/theme/components/Document.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |
10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/invaders/README.md: -------------------------------------------------------------------------------- 1 | Give it a try! 2 | 3 | ```shell 4 | npx degit mattjennings/svelte-phaser/examples/invaders invaders 5 | cd invaders 6 | npm install 7 | npm run dev 8 | ``` 9 | 10 | Assets were taken from official [Phaser 2 example](http://examples.phaser.io/_site/view_full.html?d=games&f=invaders.js&t=invaders) 11 | -------------------------------------------------------------------------------- /packages/svelte-phaser/src/onGameEvent.js: -------------------------------------------------------------------------------- 1 | import { getContext, onMount } from 'svelte' 2 | 3 | export function onGameEvent(event, callback) { 4 | const game = getContext('phaser/game') 5 | 6 | onMount(() => { 7 | game.events.on(event, callback) 8 | 9 | return () => game.events.off(event, callback) 10 | }) 11 | } 12 | -------------------------------------------------------------------------------- /examples/invaders/src/Explosion.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 16 | -------------------------------------------------------------------------------- /templates/blank/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/svelte-phaser/src/util/removeUndefined.js: -------------------------------------------------------------------------------- 1 | export function removeUndefined(object) { 2 | return Object.keys(object).reduce((newObject, key) => { 3 | if (typeof object[key] !== 'undefined') { 4 | return { 5 | ...newObject, 6 | [key]: object[key], 7 | } 8 | } 9 | 10 | return newObject 11 | }, {}) 12 | } 13 | -------------------------------------------------------------------------------- /docs/src/pages/examples/breakout.md: -------------------------------------------------------------------------------- 1 | import IFrameExample from '../../components/IFrameExample.svelte' 2 | 3 | # Breakout 4 | 5 | Mouse cursor to move paddle, click to launch ball 6 | 7 | [View the source](https://github.com/mattjennings/svelte-phaser/tree/master/examples/breakout) 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/src/pages/examples/invaders.md: -------------------------------------------------------------------------------- 1 | import IFrameExample from '../../components/IFrameExample.svelte' 2 | 3 | # Invaders 4 | 5 | Arrow keys to move, spacebar to shoot 6 | 7 | [View the source](https://github.com/mattjennings/svelte-phaser/tree/master/examples/invaders) 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/svelte-phaser/src/onInputEvent.js: -------------------------------------------------------------------------------- 1 | import { getContext, onMount } from 'svelte' 2 | import { getScene } from './getScene.js' 3 | 4 | export function onInputEvent(event, callback) { 5 | const scene = getScene() 6 | 7 | onMount(() => { 8 | scene.input.on(event, callback) 9 | 10 | return () => scene.input.off(event, callback) 11 | }) 12 | } 13 | -------------------------------------------------------------------------------- /packages/svelte-phaser/src/phaser.js: -------------------------------------------------------------------------------- 1 | import * as Phaser from 'phaser' 2 | 3 | // "module.exports = Phaser" in phaser is very problematic. Rollup 4 | // works when we use `Phaser.default`, but our tests only work if we use `Phaser`, 5 | // so this keeps both happy at the cost of... this nastiness 6 | export default typeof window !== 'undefined' ? Phaser.default : Phaser 7 | -------------------------------------------------------------------------------- /examples/platformer/README.md: -------------------------------------------------------------------------------- 1 | Give it a try! 2 | 3 | ```shell 4 | npx degit mattjennings/svelte-phaser/examples/platformer platformer 5 | cd platformer 6 | npm install 7 | npm run dev 8 | ``` 9 | 10 | Adventurer sprite is from [rvos](https://rvros.itch.io/) 11 | 12 | Tilest from [RottingPixels](https://rottingpixels.itch.io/castle-platformer-tileset-16x16free) 13 | -------------------------------------------------------------------------------- /packages/svelte-phaser/src/onSceneEvent.js: -------------------------------------------------------------------------------- 1 | import { getContext, onMount } from 'svelte' 2 | import { getScene } from './getScene.js' 3 | 4 | export function onSceneEvent(event, callback) { 5 | const scene = getScene() 6 | 7 | onMount(() => { 8 | scene.events.on(event, callback) 9 | 10 | return () => scene.events.off(event, callback) 11 | }) 12 | } 13 | -------------------------------------------------------------------------------- /templates/snowpack/src/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/svelte-phaser/src/onArcadePhysicsEvent.js: -------------------------------------------------------------------------------- 1 | import { onMount } from 'svelte' 2 | import { getScene } from './getScene' 3 | 4 | export function onArcadePhysicsEvent(event, callback) { 5 | const scene = getScene() 6 | 7 | onMount(() => { 8 | scene.physics.world.on(event, callback) 9 | 10 | return () => scene.physics.world.off(event, callback) 11 | }) 12 | } 13 | -------------------------------------------------------------------------------- /docs/src/pages/examples/platformer.md: -------------------------------------------------------------------------------- 1 | import IFrameExample from '../../components/IFrameExample.svelte' 2 | 3 | # Platformer 4 | 5 | Arrow keys to move, spacebar to jump 6 | 7 | [View the source](https://github.com/mattjennings/svelte-phaser/tree/master/examples/platformer) 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/theme/assets/burger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/src/pages/roadmap.md: -------------------------------------------------------------------------------- 1 | # Roadmap 2 | 3 | I have no timelines for anything. I am slowly chipping away at making components and using them for my own little games. Pull Requests are welcome! 4 | 5 | ## Phaser Components 6 | 7 | - BitmapText 8 | - Blitter 9 | - Bob 10 | - Sprite3D 11 | - Video 12 | - Zone 13 | - Rope 14 | - Shader 15 | - Lights 16 | - Mesh 17 | - Quad 18 | 19 | ## Physics 20 | 21 | Matter Physics 22 | -------------------------------------------------------------------------------- /examples/breakout/src/Block.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /docs/src/components/Ball.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/invaders/src/Background.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | -------------------------------------------------------------------------------- /packages/svelte-phaser/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | testRegex: 'src/.*.spec.js', 3 | transform: { 4 | '^.+\\.js$': 'babel-jest', 5 | '^.+\\.svelte$': 'svelte-jester', 6 | }, 7 | moduleFileExtensions: ['js'], 8 | setupFiles: ['./src/test-utils/setup.js'], 9 | testEnvironmentOptions: { 10 | runScripts: 'dangerously', 11 | resources: 'usable', 12 | pretendToBeVisual: true, 13 | }, 14 | } 15 | -------------------------------------------------------------------------------- /examples/breakout/src/Paddle.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /examples/invaders/src/Enemy.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/breakout/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Breakout 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /examples/invaders/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Invaders 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /examples/platformer/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Platformer 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /packages/svelte-phaser/src/test-utils/setup.js: -------------------------------------------------------------------------------- 1 | const datauri = require('datauri') 2 | 3 | //@ts-ignore 4 | global.focus = jest.fn() 5 | 6 | //@ts-ignore 7 | global.URL.createObjectURL = function (blob) { 8 | if (blob) { 9 | return datauri.format( 10 | blob.type, 11 | blob[Object.getOwnPropertySymbols(blob)[0]]._buffer 12 | ).content 13 | } 14 | } 15 | //@ts-ignore 16 | global.URL.revokeObjectURL = function () { 17 | // Do nothing at the moment 18 | } 19 | -------------------------------------------------------------------------------- /docs/src/components/IFrameExample.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 |
22 |