phasereditor2d / starter-template-capacitorjs

A template wrapping games with CapacitorJS

CapacitorJS project template for Phaser Editor 2D

This a project template for building your Phaser 3 game into a native wrapper for different platforms.

It uses the following tools:

• Phaser 3 as game framework.
• Phaser Editor 2D as visual editor for scenes.
• TypeScript for coding.
• Webpack for bundling the assets.
• CapacitorJS for building a game native wrapper. It targets Android by default.

First steps

This project requires Node.js and NPM.js. It is recommended that you learn the basics of Webpack.js.

• Install dependencies:

  npm install
  

• Run the development server:

  npm start
  

  Open the browser at http://127.0.0.1:8080.

• Make an HTML5 production build:

  npm run build
  

  It is generated in the /dist folder.

• Make an Android APK build:

  npm run build-android
  

  The APK files are generated into the android/app/build/outputs/apk/debug folder.

  You should follow the steps in the CapacitorJS documentation for setting up the Android development environment.

  It is possible that you should set the ANDROID_SDK_ROOT environment variable. We recommend first time to opening the project in Android Studio and build it. Android Studio peforms some checks, updates, and set the right values into the local.properties file.

  npx cap open android
  

• Make an iOS app:

  First, you should install depedencies.

  Then, for running your iOS app:

  npm run run-ios
  

  For building the iOS app, you need to open Xcode:

  npx cap open ios
  

  Then you build the app with Xcode.

Run the editor

• You can run the editor using the editor NPM script, defined in the package.json file:

  $ npm install
  $ npm run editor

• If you are in a remote environment (like the Gitpod.io IDE), then run the editor like this:

  $ npm run editor-remote

• If you want to see all the editor options, run:

  $ npx phasereditor2d-launcher -help

• If Phaser Editor 2D Core is globally installed, you can run:

  $ PhaserEditor2D -project .

Phaser Editor 2D considerations

Excluding files from the project

There are a lot of files present in the project that are not relevant to Phaser Editor 2D. For example, the whole node_modules folder should be excluded from the editor's project.

The skip parameter of the phasereditor2d.config.json file lists the folders and files to exclude from the editor's project.

Learn more about resource filtering in Phaser Editor 2D

Setting the root folder for the game's assets

The /static folder contains the assets (images, audio, atlases) used by the game. Webpack copies it to the distribution folder and makes it available as a root path. For example, http://127.0.0.1:8080/assets points to the /static/assets folder.

By default, Phaser Editor 2D uses the project's root as the start path for the assets. You can change it by creating an empty publicroot file. That is the case of the /static/publicroot file, which allows adding files to the Asset Pack file (/static/assets/asset-pack.json) using correct URLs.

Asset Pack content hash

Webpack is configured to include the content hash of a file defined in an asset pack editor:

• For loading a pack file in code, import it as a resource:

  import assetPackUrl from "../static/assets/asset-pack.json";
  ...
  this.load.pack("pack1", assetPackUrl);

  Webpack will add the asset-pack.json file into the distribution files, in the folder dist/asset-packs/.

• Because Webpack automatically imports the pack files, those are excluded in the CopyPlugin configuration. By convention, name the pack files like this [any name]-pack.json.

• The NPM build script calls the phaser-asset-pack-hashing tool. It parses all pack files in the dist/ folder and transform the internal URL, adding the content-hash to the query string. It also parses files referenced by the pack. For example, a multi-atlas file is parsed and the name of the image's file will be changed to use a content-hash.

Learn more about the phaser-asset-pack-hashing tool.

Coding

The /src folder contains all the TypeScript code, including the scene and user component files, in addition to the Phaser Editor 2D compilers output.

We recommend using Visual Studio Code for editing the code files.

In many tutorials about Phaser Editor 2D, the JavaScript files are loaded using the Asset Pack editor. When using Webpack this is not needed. Just use the Asset Pack editor for loading the art assets.

Scene, User Components, and ScriptNode configuration

The Scenes, User Components, and ScriptNodes are configured to compile to TypeScript ES modules. Also, the compilers auto-import the classes used in the generated code.

ScriptNodes

The src/script-nodes-basic folder contains the script nodes from the script-nodes-basic project.

You can add your own script nodes to the src/script-nodes folder.

Author

Created and maintained by the Phaser Editor 2D team.

starter-template-capacitorjs's Issues

Update to capacitor 4

Update to capacitor 4.

Add iOS target.

Add support for iOS.

Update to webpack 5

Update to webpack 5

Vite js instead of webpack

Hello !

I want to use vite.js instead of webpack for my project, i found this config who can work but i'm not totaly sure !
If it works, would it be possible to make a starter template with vite.js ? (or replace this existing one maybe)

The index.html file must also be moved to the root of the project

// content of vite.config.js file which replaces webpack.config.js file
import { defineConfig } from 'vite'
const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  publicDir: "static",
  build: {
    outDir: 'dist',
    assetsDir: 'asset-packs',
    minify: false,
    sourcemap: false,
    chunkSizeWarningLimit: 2000,
  },
  resolve:{
    alias:{
      '@' : path.resolve(__dirname, './static')
    },
  },
  server: {
    host: true
  }
})

my new package.json file :

{
  "name": "phaser3-capacitor-template",
  "version": "1.1.0",
  "description": "Phaser 3 project template for Phaser Editor 2D v3",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build && phaser-asset-pack-hashing -j -r dist",
    "editor": "phasereditor2d-launcher -project . -port 1959",
    "editor-remote": "phasereditor2d-launcher -project . -disable-open-browser -public -port 1959",
    "build-android": "npm run build && cap sync && cd android && ./gradlew clean && ./gradlew assemble",
    "run-ios": "npm run build && cap sync && cap run ios",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Phaser Editor 2D <[email protected]> (https://phasereditor2d.com/)",
  "license": "MIT",
  "devDependencies": {
    "phaser-asset-pack-hashing": "^1.0.5",
    "@capacitor/cli": "^4.0.0",
    "typescript": "^4.5.4",
    "vite": "^2.7.2"
  },
  "dependencies": {
    "phasereditor2d-launcher": "^3.31.2",
    "@capacitor/android": "^4.0.0",
    "@capacitor/core": "^4.0.0",
    "@capacitor/ios": "^4.7.1",
    "phaser": "^3.55.2"
  }
}