├── .browserslistrc
├── public
    ├── favicon.ico
    └── index.html
├── babel.config.js
├── src
    ├── game
    │   ├── assets
    │   │   ├── bomb.png
    │   │   ├── sky.png
    │   │   └── thud.mp3
    │   ├── scenes
    │   │   ├── BootScene.js
    │   │   └── PlayScene.js
    │   └── game.js
    ├── main.js
    ├── App.vue
    └── components
    │   ├── PhaserContainer.vue
    │   └── Game.vue
├── .gitignore
├── jsconfig.json
├── vue.config.js
├── package.json
├── LICENSE
└── README.md


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | not ie 11
5 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Sun0fABeach/vue-phaser3/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/game/assets/bomb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Sun0fABeach/vue-phaser3/HEAD/src/game/assets/bomb.png


--------------------------------------------------------------------------------
/src/game/assets/sky.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Sun0fABeach/vue-phaser3/HEAD/src/game/assets/sky.png


--------------------------------------------------------------------------------
/src/game/assets/thud.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Sun0fABeach/vue-phaser3/HEAD/src/game/assets/thud.mp3


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | createApp(App).mount('#app')
5 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import Game from '@/components/Game'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <Game />
 7 | </template>
 8 | 
 9 | <style lang="scss">
10 | body {
11 |   height: 100vh;
12 |   display: flex;
13 |   justify-content: center;
14 |   align-items: center;
15 |   margin: 0;
16 | }
17 | </style>
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "jsx": "preserve",
 8 |     "paths": {
 9 |       "@/*": [
10 |         "src/*"
11 |       ]
12 |     },
13 |     "lib": [
14 |       "esnext",
15 |       "dom",
16 |       "dom.iterable",
17 |       "scripthost"
18 |     ]
19 |   },
20 | }
21 | 


--------------------------------------------------------------------------------
/src/components/PhaserContainer.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted, onUnmounted } from 'vue'
 3 | 
 4 | let gameInstance = null
 5 | const containerId = 'game-container'
 6 | const game = await import(/* webpackChunkName: "game" */ '@/game/game')
 7 | 
 8 | onMounted(() => {
 9 |   gameInstance = game.launch(containerId)
10 | })
11 | 
12 | onUnmounted(() => {
13 |   gameInstance.destroy(false)
14 | })
15 | </script>
16 | 
17 | <template>
18 |   <div :id="containerId" />
19 | </template>
20 | 


--------------------------------------------------------------------------------
/src/components/Game.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import PhaserContainer from '@/components/PhaserContainer'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <Suspense>
 7 |     <PhaserContainer />
 8 | 
 9 |     <template #fallback>
10 |       <div class="placeholder">
11 |         Downloading ...
12 |       </div>
13 |     </template>
14 |   </Suspense>
15 | </template>
16 | 
17 | <style lang="scss" scoped>
18 | .placeholder {
19 |   font-size: 2rem;
20 |   font-family: 'Courier New', Courier, monospace;
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/src/game/scenes/BootScene.js:
--------------------------------------------------------------------------------
 1 | import { Scene } from 'phaser'
 2 | import sky from '@/game/assets/sky.png'
 3 | import bomb from '@/game/assets/bomb.png'
 4 | import thud from '@/game/assets/thud.mp3'
 5 | 
 6 | export default class BootScene extends Scene {
 7 |   constructor () {
 8 |     super({ key: 'BootScene' })
 9 |   }
10 | 
11 |   preload () {
12 |     this.load.image('sky', sky)
13 |     this.load.image('bomb', bomb)
14 |     this.load.audio('thud', thud)
15 |   }
16 | 
17 |   create () {
18 |     this.scene.start('PlayScene')
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/game/game.js:
--------------------------------------------------------------------------------
 1 | import Phaser from 'phaser'
 2 | import BootScene from '@/game/scenes/BootScene'
 3 | import PlayScene from '@/game/scenes/PlayScene'
 4 | 
 5 | function launch(containerId) {
 6 |   return new Phaser.Game({
 7 |     type: Phaser.AUTO,
 8 |     width: 800,
 9 |     height: 600,
10 |     parent: containerId,
11 |     physics: {
12 |       default: 'arcade',
13 |       arcade: {
14 |         gravity: { y: 300 },
15 |         debug: false
16 |       }
17 |     },
18 |     scene: [BootScene, PlayScene]
19 |   })
20 | }
21 | 
22 | export default launch
23 | export { launch }
24 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const { defineConfig } = require('@vue/cli-service')
 3 | 
 4 | module.exports = defineConfig({
 5 |   transpileDependencies: true,
 6 | 
 7 |   configureWebpack: {
 8 |     plugins: [
 9 |       new webpack.DefinePlugin({
10 |         // Vue CLI is in maintenance mode and probably won't fix this
11 |         // https://stackoverflow.com/questions/77752897/feature-flag-vue-prod-hydration-mismatch-details-is-not-explicitly-defined
12 |         __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
13 |       })
14 |     ],
15 |   },
16 | 
17 |   devServer: {
18 |     hot: false
19 |   }
20 | })
21 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>Vue + Phaser 3</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/game/scenes/PlayScene.js:
--------------------------------------------------------------------------------
 1 | import { Scene } from 'phaser'
 2 | 
 3 | export default class PlayScene extends Scene {
 4 |   constructor () {
 5 |     super({ key: 'PlayScene' })
 6 |   }
 7 | 
 8 |   create () {
 9 |     this.add.image(400, 300, 'sky')
10 | 
11 |     const bomb = this.physics.add.image(400, 200, 'bomb')
12 |     bomb.setCollideWorldBounds(true)
13 |     bomb.body.onWorldBounds = true // enable worldbounds collision event
14 |     bomb.setBounce(1)
15 |     bomb.setVelocity(200, 20)
16 | 
17 |     this.sound.add('thud')
18 |     this.physics.world.on('worldbounds', () => {
19 |       this.sound.play('thud', { volume: 0.75 })
20 |     })
21 |   }
22 | 
23 |   update () {
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-phaser3",
 3 |   "version": "3.2.1",
 4 |   "description": "Template for working with Phaser in a Vue project",
 5 |   "author": "Markus Appel <markospoparkos@gmail.com>",
 6 |   "scripts": {
 7 |     "serve": "vue-cli-service serve",
 8 |     "build": "vue-cli-service build",
 9 |     "start": "http-server dist --port=5000"
10 |   },
11 |   "dependencies": {
12 |     "core-js": "^3.44.0",
13 |     "phaser": "^3.90.0",
14 |     "vue": "^3.5.17"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "^5.0.8",
18 |     "@vue/cli-service": "^5.0.8",
19 |     "http-server": "^14.1.1",
20 |     "sass": "^1.89.2",
21 |     "sass-loader": "^16.0.5"
22 |   },
23 |   "keywords": [
24 |     "vue",
25 |     "phaser",
26 |     "webpack",
27 |     "boilerplate",
28 |     "template"
29 |   ],
30 |   "license": "MIT",
31 |   "repository": {
32 |     "type": "git",
33 |     "url": "https://github.com/Sun0fABeach/vue-phaser3.git"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Markus Appel
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-phaser3
 2 | 
 3 | #### Webpack boilerplate that integrates Phaser 3 into a Vue 3 project.
 4 | 
 5 | This project template has been set up using the **Vue CLI 5** and includes:
 6 | * *Sass*
 7 | * *CSS Postprocessing*
 8 | * *Babel*
 9 | * *Source Minification*
10 | 
11 | ## Build Setup
12 | 
13 | ``` bash
14 | # install dependencies
15 | npm install
16 | 
17 | # serve with live reloading at localhost:8080
18 | npm run serve
19 | 
20 | # build for production with transpilation / minification
21 | npm run build
22 | 
23 | # serve your production build at localhost:5000
24 | npm start
25 | ```
26 | 
27 | ## Extending the project to your needs
28 | 
29 | If you want to add more features like *linting*, *unit testing* or *Typescript* to
30 | your own project, you can do so quite easily via Vue CLI's plugin system. Read
31 | the <a href="https://cli.vuejs.org/guide/" target="_blank">documentation</a>
32 | if you want to know more.
33 | 
34 | ## Converting into your own repository
35 | 
36 | If you want to maintain your own repo based on this boilerplate, you first need
37 | to detach it from this repo. Here is what you need to do:
38 | 
39 | 1. edit these files and enter your own project info
40 | 	* *package.json*
41 | 	* *README.md*
42 | 	* *public/index.html*
43 | 
44 | 2. delete *LICENSE* (and perhaps add your own)
45 | 
46 | 3. reinitialize git
47 | <pre><code>rm -rf .git
48 | git init
49 | git add .
50 | git commit -m "Initial commit"
51 | </code></pre>
52 | 
53 | ## Sharing data between Vue and Phaser
54 | 
55 | You might want to expose some game state that lives inside of your Phaser code
56 | to your Vue components and vice versa, for example a highscore. Here are two
57 | ways you can achieve sharing state between the frameworks.
58 | 
59 | * Import a Phaser <a href="https://photonstorm.github.io/phaser3-docs/Phaser.Events.EventEmitter.html" target="_blank">EventEmitter</a> instance in
60 | both your Vue components and Phaser modules. Both sides can then listen to and
61 | emit events on that emitter.
62 | 
63 | * Have both sides share a <a href="https://pinia.vuejs.org/introduction.html" target="_blank">
64 | Pinia</a> store instance. It works like an event emitter, but can also hold
65 | state. The Pinia store is nicely integrated into your Vue components and is easily
66 | accessible on the Phaser side by applying the *useStore* hook.
67 | 


--------------------------------------------------------------------------------