├── .gitignore
├── LICENSE
├── README.md
├── assets
    └── phaser.png
├── capacitor.config.json
├── css
    └── reset.css
├── dist
    └── index.html
├── package-lock.json
├── package.json
├── src
    ├── constants.ts
    ├── game.ts
    ├── globals.d.ts
    ├── index.html
    ├── phaser.d.ts
    └── scenes
    │   └── main-scene.ts
├── tsconfig.json
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/*
3 | !dist/index.html
4 | android/
5 | electron/
6 | ios/
7 | .cache/
8 | .vscode/
9 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Phaser-Capacitor boilerplate
 2 | This skeleton app allows you to easily develop a Phaser 3 game for iOS / Android / Desktop using the Ionic Capacitor library. It uses Typescript (though can also be written in JS) and Webpack
 3 | 
 4 | * Ionic Capacitor is still in Beta and there are some bugs / quirks that are still being ironed out. Head to https://github.com/ionic-team/capacitor to find more about it's current progress.
 5 | 
 6 | * important! Electron recently came out with a major release (5) which is still not supported by Capacitor at the moment. 
 7 | 
 8 | ### Installation
 9 | Simply clone or download the repository and then run 
10 | ```npm install``` within the folder
11 | 
12 | ### Development
13 | To set up a webpack development server simply run ```npm run dev``` you can also run ```npm run build``` to create a production build
14 | 
15 | ### Deployment
16 | In order to set up a deployment target simply run ```npx cap add <platformName>``` where platformName can either be android, ios or electron - directory with the platform name will be created.
17 | 
18 | once you've set up your deployment target simply run ```npm run build-<platformName>``` - for example ```npm run build-android``` this will build the app to the dist folder, copy the files into the Android project and lunch Android Studio. Running an iOS build works similarly just with Xcode
19 | 
20 | > keep in mind - the build process will fail if you have not installed the necessery software required to develop for your requested platform (Android / iOS). 
21 | 
22 | Electron builds work a little differently as there's no IDE (like Android / Xcode) that is used to run them. Once you run ```npm run build-electron``` simply enter the Electron folder ```cd electron``` and then run ```npm run electron:start``` to have the Electron app start
23 | 
24 | > If you wish to bundle your Electron app you will need to install a seperate bundler like electron-builder https://github.com/electron-userland/electron-builder. A complete guide can be find in the supplied link and there are additional bundlers you can choose.
25 | 
26 | > Webpack exposes a global variable called BUILD_TARGET which contains the target platform (ios, android, electron or web) - web is the default when not building for a specific platform
27 | 
28 | ### important
29 | - While multiple deployment targets are supported different targets (desktop / mobile) will likely require some code changes.
30 | - This is still a work in progress, comments & suggestions are welcome
31 | - Some users reported problems with running the electron app in the first attempt. If you encounter a problem when running ```npm run electron:start``` You might need to run ```npm install``` within the electrong folder first.
32 | 
33 | Guy N.
34 | 
35 | 


--------------------------------------------------------------------------------
/assets/phaser.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gnesher/phaser-capacitor/9deeccecc2e9f1f9e9681997bc89edd362ead74e/assets/phaser.png


--------------------------------------------------------------------------------
/capacitor.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "appId": "com.example.app",
3 |   "appName": "App",
4 |   "bundledWebRuntime": false,
5 |   "webDir": "dist"
6 | }
7 | 


--------------------------------------------------------------------------------
/css/reset.css:
--------------------------------------------------------------------------------
 1 | /* http://meyerweb.com/eric/tools/css/reset/ 
 2 |    v2.0 | 20110126
 3 |    License: none (public domain)
 4 | */
 5 | 
 6 | html, body, div, span, applet, object, iframe,
 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 8 | a, abbr, acronym, address, big, cite, code,
 9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed, 
16 | figure, figcaption, footer, header, hgroup, 
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | margin: 0;
20 | padding: 0;
21 | border: 0;
22 | font-size: 100%;
23 | font: inherit;
24 | vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure, 
28 | footer, header, hgroup, menu, nav, section {
29 | display: block;
30 | }
31 | body {
32 | line-height: 1;
33 | }
34 | ol, ul {
35 | list-style: none;
36 | }
37 | blockquote, q {
38 | quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 | content: '';
43 | content: none;
44 | }
45 | table {
46 | border-collapse: collapse;
47 | border-spacing: 0;
48 | }
49 | 


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <title>phaser-capacitor</title>
 7 |   <link rel="stylesheet" type="text/css" href="css/reset.css">
 8 | </head>
 9 | 
10 | <body>
11 |   <div class="container">
12 |     <div id="game"></div>
13 |   </div>
14 | <script type="text/javascript" src="bundle.js"></script></body>
15 | 
16 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "capcaitor-phaser",
 3 |   "version": "0.1.2",
 4 |   "description": "Skeleton Phaser app build around Ionic Capacitor which allows deployment to Android, iOS and Desktop (via Electron)",
 5 |   "author": {
 6 |     "name": "Guy Nesher",
 7 |     "email": "nesher.guy@gmail.com"
 8 |   },
 9 |   "scripts": {
10 |     "dev": "webpack-dev-server --mode development --open",
11 |     "build": "webpack --mode production",
12 |     "build-android": "webpack --mode production --env.android && npx cap copy android && npx cap open android",
13 |     "build-ios": "webpack --mode production --env.ios && npx cap copy ios && npx cap open ios",
14 |     "build-electron": "webpack --mode production --env.electron && npx cap copy electron"
15 |   },
16 |   "license": "MIT",
17 |   "dependencies": {
18 |     "@capacitor/android": "^1.0.0-beta.24",
19 |     "@capacitor/cli": "^1.0.0-beta.24",
20 |     "@capacitor/core": "^1.0.0-beta.24",
21 |     "phaser": "3.17.0"
22 |   },
23 |   "devDependencies": {
24 |     "copy-webpack-plugin": "^5.0.2",
25 |     "expose-loader": "0.7.5",
26 |     "html-webpack-plugin": "^3.2.0",
27 |     "mini-css-extract-plugin": "^0.5.0",
28 |     "css-loader": "^2.1.1",
29 |     "ts-loader": "5.3.3",
30 |     "typescript": "3.3.3",
31 |     "webpack": "4.29.6",
32 |     "webpack-cli": "3.2.3",
33 |     "webpack-dev-server": "3.1.14"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/constants.ts:
--------------------------------------------------------------------------------
1 | export enum buildTargets {
2 |     "web" = "web",
3 |     "ios" = "ios",
4 |     "android" = "android",
5 |     "electron" = "electron"
6 | }


--------------------------------------------------------------------------------
/src/game.ts:
--------------------------------------------------------------------------------
 1 | import "phaser";
 2 | import { MainScene } from "./scenes/main-scene";
 3 | declare const BUILD_TARGET: string;
 4 | 
 5 | // main game configuration
 6 | const config: Phaser.Types.Core.GameConfig = {
 7 |     width: 800,
 8 |     height: 600,
 9 |     type: Phaser.AUTO,
10 |     parent: "game",
11 |     scene: MainScene,
12 |     physics: {
13 |         default: "arcade",
14 |     }
15 | };
16 | 
17 | export class Game extends Phaser.Game {
18 |     constructor(config: Phaser.Types.Core.GameConfig) {
19 |         super(config);
20 |     }
21 | }
22 | 
23 | window.addEventListener("load", () => {
24 |     const game = new Game(config);
25 | });
26 | 


--------------------------------------------------------------------------------
/src/globals.d.ts:
--------------------------------------------------------------------------------
1 | declare const BUILD_TARGET: string;


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <title>phaser-capacitor</title>
 7 |   <link rel="stylesheet" type="text/css" href="css/reset.css">
 8 | </head>
 9 | 
10 | <body>
11 |   <div class="container">
12 |     <div id="game"></div>
13 |   </div>
14 | </body>
15 | 
16 | </html>


--------------------------------------------------------------------------------
/src/scenes/main-scene.ts:
--------------------------------------------------------------------------------
 1 | import { buildTargets } from "../constants";
 2 | 
 3 | export class MainScene extends Phaser.Scene {
 4 |   
 5 |   
 6 |   private phaserSprite: Phaser.GameObjects.Sprite;
 7 |   
 8 |     constructor() {
 9 |       super({
10 |         key: "MainScene"
11 |       });
12 |     }
13 |   
14 |     preload(): void {
15 |       this.load.image("logo", "./assets/phaser.png");
16 |     }
17 |   
18 |     create(): void {
19 |       this.phaserSprite = this.add.sprite(400, 300, "logo");
20 |     }
21 |   }
22 |   


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "target": "ES2016",
4 |     "module": "CommonJS",
5 |     "sourceMap": true,
6 |     "noImplicitAny": false,
7 |     "strict": false
8 |   }
9 | }


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const pathToPhaser = path.join(__dirname, '/node_modules/phaser/');
 3 | const phaser = path.join(pathToPhaser, 'dist/phaser.js');
 4 | const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 5 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 6 | const CopyWebpackPlugin = require('copy-webpack-plugin')
 7 | const  webpack = require('webpack');
 8 | 
 9 | module.exports = (env) => {
10 | 
11 |   let target;
12 | 
13 |   if (!env) { 
14 |     target = "web"
15 |   } else if (env.android) {
16 |     target = "android"
17 |   } else if (env.ios) {
18 |     target = "ios"
19 |   } else if (env.electron) {
20 |     target = "electron"
21 |   }
22 | 
23 |   return {
24 |     entry: './src/game.ts',
25 |     output: {
26 |       path: path.resolve(__dirname, 'dist'),
27 |       filename: 'bundle.js',
28 |     },
29 |     module: {
30 |       rules: [
31 |         { test: /\.ts$/, loader: 'ts-loader', exclude: '/node_modules/' },
32 |         { test: /phaser\.js$/, loader: 'expose-loader?Phaser' },
33 |         { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] }
34 |       ]
35 |     },
36 |     devServer: {
37 |       contentBase: path.resolve(__dirname, './')
38 |     },
39 |     resolve: {
40 |       extensions: ['.ts', '.js'],
41 |       alias: {
42 |         phaser: phaser
43 |       }
44 |     },
45 |     plugins: [
46 |       new HtmlWebpackPlugin({ gameName: 'Phaser Capacitor Game', template: 'src/index.html' }),
47 |       new MiniCssExtractPlugin({
48 |         filename: "[name].css",
49 |         chunkFilename: "[id].css"
50 |       }),
51 |       new CopyWebpackPlugin([
52 |         { from: 'assets', to: 'assets' },
53 |         { from: 'css', to: 'css' },
54 |       ]),
55 |       new webpack.DefinePlugin({
56 |         BUILD_TARGET: JSON.stringify(target)
57 |       })      
58 |     ]
59 |   };
60 | }


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