Create new Phaser 3 template for quick GitLab Pages usage

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*.{ts,tsx}]
+indent_style = tab
+trim_trailing_whitespace = true
+
+[*.yml]
+indent_style = space
+indent_size = 2

.gitignore

@@ -0,0 +1,15 @@
+# build directories
+public/
+# legacy
+build/
+dist/
+
+# Dependency directories
+node_modules/
+
+# VS Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json

.gitlab-ci.yml

@@ -0,0 +1,20 @@
+image: node:latest
+
+cache:
+  paths:
+  - node_modules/
+
+pages:
+  cache:
+    paths:
+    - node_modules/
+
+  script:
+  - npm install typescript -g
+  - npm install
+  - npm run build
+  artifacts:
+    paths:
+    - public
+  only:
+    - main

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+	"files.exclude": {
+		"node_modules": true,
+		"package-lock.json": true
+	},
+	"files.insertFinalNewline": true
+}

LICENSE

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

README.md

@@ -0,0 +1,17 @@
+# Starter Project for Phaser 3  with GitLab Pages Support
+
+The following is a fast starter project to get started with a new game in Phaser 3, running on GitLab Pages.
+
+This project is based upon https://github.com/JamesSkemp/phaser-3-vsc-typescript-nodejs
+
+## Get Started
+
+1. Make sure [Node.js](https://nodejs.org) is installed.
+2. From a command line, run `npm install` in the root directory (same place this README.md file is).
+3. Next run `npm run start:dev` to start an automatically updating instance.
+4. Use the editor of your choice ([Visual Studio Code](https://code.visualstudio.com/) is a great choice) to start writing your game.
+5. Run `npm run build` to populate the **public** directory with the final site contents.
+6. Copy the contents of **public** to the site of your choice, or if published on GitLab, the site should automatically generate.
+
+## Upgrading Phaser
+To upgrade Phaser 3 run `npm upgrade --save phaser`.

package.json

@@ -0,0 +1,33 @@
+{
+	"name": "phaser-3-vsc-typescript-nodejs",
+	"version": "0.0.1",
+	"description": "Starter Project for Phaser 3 with TypeScript, NodeJS, and VS Code.",
+	"repository": {
+		"type": "git",
+		"url": "git+ssh://git@github.com:JamesSkemp/phaser-3-vsc-typescript-nodejs.git"
+	},
+	"private": true,
+	"author": {
+		"name": "James Skemp",
+		"email": "strivinglife@gmail.com",
+		"url": "https://jamesrskemp.com"
+	},
+	"homepage": "https://github.com/JamesSkemp/phaser-3-vsc-typescript-nodejs",
+	"dependencies": {
+		"phaser": "^3.55.2"
+	},
+	"scripts": {
+		"build": "webpack --mode production",
+		"build-dev": "webpack --mode none",
+		"start:dev": "webpack serve --mode production"
+	},
+	"devDependencies": {
+		"clean-webpack-plugin": "^4.0.0",
+		"copy-webpack-plugin": "^10.2.4",
+		"ts-loader": "^9.2.6",
+		"typescript": "^4.5.5",
+		"webpack": "^5.69.1",
+		"webpack-cli": "^4.9.2",
+		"webpack-dev-server": "^4.7.4"
+	}
+}

src/app.css

@@ -0,0 +1,8 @@
+/* If styling is required, add it here. */
+body {
+	background-color: #111;
+	color: #eee;
+	font-family: sans-serif;
+	margin: 0;
+	padding: 0;
+}

src/assets/README.md

@@ -0,0 +1 @@
+This directory could contain any assets (images, audio, etcetera) the game might require.

src/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
+	<title>Starter Project for Phaser 3 with TypeScript</title>
+	<link rel="shortcut icon" href="favicon.ico" />
+	<link rel="stylesheet" href="app.css" type="text/css" />
+	<script src="lib/phaser.min.js"></script>
+</head>
+<body>
+	<!--Update the heading below, and title above, as needed.-->
+	<h1>Starter Project for Phaser 3 with TypeScript</h1>
+
+	<div id="content"></div>
+	<!--If using the project the TypeScript files will automatically be combined into the following file. Update as needed.-->
+	<script src="app.js"></script>
+</body>
+</html>

src/ts/.gitignore

@@ -0,0 +1,3 @@
+# Ignore TypeScript generated files.
+*.js
+*.js.map

src/ts/Game.ts

@@ -0,0 +1,23 @@
+import 'phaser';
+import MainGame from "./Scenes/MainGame";
+
+const gameConfig: Phaser.Types.Core.GameConfig = {
+	width: 400,
+	height: 300,
+	type: Phaser.AUTO,
+	parent: "content",
+	title: "Starter Project for Phaser 3"
+};
+
+export default class Game extends Phaser.Game {
+	constructor(config: Phaser.Types.Core.GameConfig) {
+		super(config);
+
+		this.scene.add(MainGame.Name, MainGame);
+		this.scene.start(MainGame.Name);
+	}
+}
+
+window.onload = (): void => {
+	const game = new Game(gameConfig);
+};

src/ts/Scenes/MainGame.ts

@@ -0,0 +1,15 @@
+export default class MainGame extends Phaser.Scene {
+	/**
+	 * Unique name of the scene.
+	 */
+	public static Name = "MainGame";
+
+	public preload(): void {
+		this.load.path = "assets/";
+		this.load.image("phaser_pixel_medium_flat");
+	}
+
+	public create(): void {
+		this.add.image(this.cameras.main.centerX, this.cameras.main.centerY, "phaser_pixel_medium_flat");
+	}
+}

src/ts/Scenes/README.md

@@ -0,0 +1,15 @@
+This directory could include any scenes (previously states) the game might have.
+
+This project includes the following scenes:
+
+- Boot:
+	- Adds default settings for the game, including multitouch and device-specific settings.
+	- Could also preload any assets need to display a progress bar during asset preloading.
+- Preloader:
+	- Used to preload any assets that might be used by the game.
+- MainMenu:
+	- Could display a main menu to move to additional scenes.
+
+While the scenes log basic information to the console during these scenes, these can of course be removed without issue.
+
+**Game.ts** is where these scenes are defined for use by the game.

tsconfig.json

@@ -0,0 +1,10 @@
+{
+	"compilerOptions": {
+		"target": "es2017",
+		"module": "commonjs",
+		"esModuleInterop": true,
+		"rootDir": "./src/ts/",
+		"sourceMap": true,
+		"moduleResolution": "node"
+	}
+}

webpack.config.js

@@ -0,0 +1,71 @@
+/*global __dirname */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+	entry: {
+		app: './src/ts/Game.ts'
+	},
+	module: {
+		rules: [{
+			test: /\.tsx?$/,
+			use: 'ts-loader',
+			exclude: /node_modules/
+		}]
+	},
+	resolve: {
+		extensions: [ '.tsx', '.ts', '.js' ]
+	},
+	externals: {
+		phaser: 'Phaser'
+	},
+	output: {
+		filename: 'app.js',
+		path: path.resolve(__dirname, 'public')
+	},
+	devtool: "source-map",
+	plugins: [
+		new CleanWebpackPlugin(),
+		new CopyWebpackPlugin({
+			patterns: [
+				{
+					from: './node_modules/phaser/dist/phaser.min.js',
+					to: 'lib'
+				},
+				{
+					from: './src/*.html',
+					to: '[name][ext]'
+				},
+				{
+					from: './src/*.css',
+					to: '[name][ext]'
+				},
+				{
+					from: './src/*.ico',
+					to: '[name][ext]'
+				},
+				{
+					from: './src/assets',
+					to: 'assets',
+					globOptions: {
+						ignore: [ '*.md' ]
+					}
+				}
+			]
+		})
+	],
+	performance: {
+		assetFilter: function(assetFilename) {
+			let customExclusions = ['lib/phaser.min.js'];
+			if (customExclusions.includes(assetFilename)) {
+				return false;
+			}
+			return !/\.map$/.test(assetFilename);
+		}
+	},
+	devServer: {
+		open: true
+	}
+};