Delete Phaser 3 starter template and link to new repo

With GitHub's new functionality, makes it easier to get a new project going with templates.
This commit is contained in:
James Skemp 2019-06-09 21:45:10 -05:00
parent 14c9cdb959
commit 6bf0cac5ce
29 changed files with 4 additions and 6320 deletions

View File

@ -20,15 +20,15 @@ If you're new to JavaScript and/or game development, using Phaser Community Edit
### Phaser 3
Phaser 3 (previously named Lazer) is the latest official version of Phaser.
TypeScript definitions are manually updated, as they are not yet part of the npm process. If copying one of these templates you must also copy the Phaser TypeScript defintions and either keep it in the same relative location, or update the project accordingly.
These starter templates are setup in GitHub as templates that can be used to easily create new projects.
- [Starter Project for Phaser with Visual Studio Code and TypeScript](./v3/_starter-v3-vsc-ts-node): Recommended for new development, uses NodeJS for pulling Phaser 3, and Webpack for compilation.
- [Starter Project for Phaser with Visual Studio Code, TypeScript, and Node.js](https://github.com/JamesSkemp/phaser-3-vsc-typescript-nodejs): Recommended for new development, uses Node.js for pulling Phaser 3, and Webpack for compilation.
### Phaser Community Edition (CE)
As of this writing, Phaser Community Edition (CE) is the active branch of Phaser v2. New features and bug fixes are being made to this code, so it's recommended to use this over the last official release of Phaser 2.
- [Starter Project for Phaser CE with Visual Studio Code, TypeScript, and NodeJS](./v2-ce/_starter-v2-ce-vsc-ts-node): Uses NodeJS for pulling Phaser CE, and Webpack for compilation.
- [Starter Project for Phaser CE with Visual Studio Code and TypeScript](./v2-ce/_starter-v2-ce-vsc-ts): The same as the above project, but Phaser CE must be manually updated by grabbing the code from the [Phaser site][phaser]. Use this if you don't want the NodeJS dependency.
- [Starter Project for Phaser CE with Visual Studio Code, TypeScript, and Node.js](./v2-ce/_starter-v2-ce-vsc-ts-node): Uses Node.js for pulling Phaser CE, and Webpack for compilation.
- [Starter Project for Phaser CE with Visual Studio Code and TypeScript](./v2-ce/_starter-v2-ce-vsc-ts): The same as the above project, but Phaser CE must be manually updated by grabbing the code from the [Phaser site][phaser]. Use this if you don't want the Node.js dependency.
### Phaser 2.6.2
Version 2.6.2 was the last official/non-community edition of Phaser. While this version can be used, it is no longer actively supported.

View File

@ -1,5 +0,0 @@
# Phaser 3
Phaser 3 (previously named Lazer) is the latest official version of Phaser.
As of 3.17.0 TypeScript definitions for Phaser are now part of the NPM package.

View File

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

View File

@ -1,15 +0,0 @@
# 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

View File

@ -1,20 +0,0 @@
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:
- master

View File

@ -1,53 +0,0 @@
# Starter Project for Phaser 3 with Visual Studio Code, TypeScript, and NodeJS
The following is a starter project to get started with a new game in Phaser 3 and Visual Studio Code, using TypeScript and NodeJS.
> Since Phaser 3 does not yet bundle the TypeScript defintions, if you are copying this directory you will also need to copy the Phaser defintions file one directory level up.
## What This Project Provides
- src
- assets
- This directory can be used to store any assets (images, audio, etcetera) that your game will use.
- plugins
- This directory is intended to store any plugins that are used by your game.
- ts
- This directory is intended to store your TypeScript files, and includes a .gitignore so that any JavaScript files that are built aren't committed.
- A possible directory structure, as well as a few starter scenes, have been added for ease, but can be removed without issue.
- app.css can include any styling necessary for your application.
- favicon.ico
- HTML5 Logo by [World Wide Web Consortium/W3C](http://www.w3.org/) and included here based upon the [logo FAQ](http://www.w3.org/html/logo/faq.html) allowing it (and it seems like the best logo to start with).
- index.html
- The `title` and `h1` elements should be updated to match the needs of your game.
- Includes a reference to the minified Phaser library.
- Also includes a reference to a JavaScript file, which the Visual Studio project is setup to output TypeScript files to, and which should be updated to match your needs.
- gulpfile.js includes gulp tasks used to build the site.
- package.json contains the Node packages used by this project.
- README.md is this file, and should be replaced with whatever content is needed for your game.
- tsconfig.json
- This file determines how TypeScript will compile the project.
- By default all TypeScript files will be compiled into a single app.js file in the root of the project.
- tslint.json
- This file contains the default TSLint configuration. See [Configuring TSLint](https://palantir.github.io/tslint/usage/configuration/) for more information.
- webpack.config.js
- This file contains the default webpack configuration.
- .editorconfig
- "EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs." See https://editorconfig.org/
- .gitlab-ci.yml
- Adds support to build and host your site on [GitLab Pages](https://docs.gitlab.com/ee/user/project/pages/).
- .vscode/tasks.json
- Used by Visual Studio Code when running the build task.
## How to Build the Site
To build this project you'll need [Node.js](https://nodejs.org) installed.
Next run `npm install` in the root directory to install the various dependencies.
Run `npm run build` after modifying code to populate the **public** directory with the final site contents. You can instead run `npm run build-dev` to build the JavaScript in development mode, or `npm run start:dev` to run an automatically updating instance.
If you'd like to run a simple web server, install http-server via `npm install http-server -g`, which can then be run from the public directory by running `http-server`.
## Upgrading Phaser
To upgrade Phaser 3 run `npm upgrade phaser`.
Phaser TypeScript definitions can currently be found at https://github.com/photonstorm/phaser3-docs/tree/master/typescript

File diff suppressed because it is too large Load Diff

View File

@ -1,34 +0,0 @@
{
"name": "starter-v3-vsc-ts-node",
"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-starter-templates.git"
},
"private": true,
"author": {
"name": "James Skemp",
"email": "strivinglife@gmail.com",
"url": "https://jamesrskemp.com"
},
"homepage": "https://github.com/JamesSkemp/phaser-starter-templates",
"dependencies": {
"phaser": "^3.17.0"
},
"scripts": {
"build": "webpack --mode production",
"build-dev": "webpack --mode none",
"start:dev": "webpack-dev-server --mode production"
},
"devDependencies": {
"clean-webpack-plugin": "^2.0.2",
"copy-webpack-plugin": "^5.0.3",
"ts-loader": "^6.0.0",
"tslint": "^5.16.0",
"typescript": "^3.4.5",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.3.1"
}
}

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 176 KiB

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 522 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

View File

@ -1,20 +0,0 @@
<!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>

View File

@ -1 +0,0 @@
This directory could contain any plugins used by the game.

View File

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

View File

@ -1,53 +0,0 @@
import Boot from "./Scenes/Boot";
import Preloader from "./Scenes/Preloader";
import MainMenu from "./Scenes/MainMenu";
import SplashScreen from "./Scenes/SplashScreen";
import Utilities from "./Utilities";
const gameConfig: Phaser.Types.Core.GameConfig = {
width: 800,
height: 600,
type: Phaser.AUTO,
parent: "content",
title: "Starter Project for Phaser 3 with Visual Studio Code, TypeScript, and NodeJS"
};
export default class Game extends Phaser.Game {
constructor(config: Phaser.Types.Core.GameConfig) {
Utilities.LogSceneMethodEntry("Game", "constructor");
super(config);
this.scene.add(Boot.Name, Boot);
this.scene.add(Preloader.Name, Preloader);
this.scene.add(SplashScreen.Name, SplashScreen);
this.scene.add(MainMenu.Name, MainMenu);
this.scene.start(Boot.Name);
}
}
/**
* Workaround for inability to scale in Phaser 3.
* From http://www.emanueleferonato.com/2018/02/16/how-to-scale-your-html5-games-if-your-framework-does-not-feature-a-scale-manager-or-if-you-do-not-use-any-framework/
*/
function resize(): void {
const canvas = document.querySelector("canvas");
const width = window.innerWidth;
const height = window.innerHeight;
const wratio = width / height;
const ratio = Number(gameConfig.width) / Number(gameConfig.height);
if (wratio < ratio) {
canvas.style.width = width + "px";
canvas.style.height = (width / ratio) + "px";
} else {
canvas.style.width = (height * ratio) + "px";
canvas.style.height = height + "px";
}
}
window.onload = () => {
const game = new Game(gameConfig);
// Uncomment the following two lines if you want the game to scale to fill the entire page, but keep the game ratio.
//resize();
//window.addEventListener("resize", resize, true);
};

View File

@ -1 +0,0 @@
This directory could contain any custom plugins used by the game.

View File

@ -1 +0,0 @@
This directory could contain any prefabs/game object templates/classes the game might require.

View File

@ -1,18 +0,0 @@
import Preloader from "./Preloader";
import Utilities from "../Utilities";
export default class Boot extends Phaser.Scene {
/**
* Unique name of the scene.
*/
public static Name: string = "Boot";
public preload(): void {
}
public create(): void {
Utilities.LogSceneMethodEntry("Boot", "create");
this.scene.start(Preloader.Name);
}
}

View File

@ -1,22 +0,0 @@
import Utilities from "../Utilities";
export default class MainMenu extends Phaser.Scene {
/**
* Unique name of the scene.
*/
public static Name: string = "MainMenu";
public preload(): void {
// Preload as needed.
}
public create(): void {
Utilities.LogSceneMethodEntry("MainMenu", "create");
this.add.image(this.cameras.main.centerX, this.cameras.main.centerY, "Phaser-Logo-Small");
}
public update(): void {
// Update logic, as needed.
}
}

View File

@ -1,97 +0,0 @@
import SplashScreen from "./SplashScreen";
import Utilities from "../Utilities";
export default class Preloader extends Phaser.Scene {
/**
* Unique name of the scene.
*/
public static Name: string = "Preloader";
public preload(): void {
this.addProgressBar();
this.load.path = "assets/";
this.load.image("phaser_pixel_medium_flat");
this.load.image("Phaser-Logo-Small");
// You should remove this logic; this is only included here to show off the progress bar.
for (let i = 0; i < 100; i++) {
this.load.image("Phaser-Logo-Small" + i, "Phaser-Logo-Small.png");
}
}
public create(): void {
Utilities.LogSceneMethodEntry("Preloader", "create");
this.scene.start(SplashScreen.Name);
}
public update(): void {
}
/**
* Adds a progress bar to the display, showing the percentage of assets loaded and their name.
*/
private addProgressBar(): void {
const width = this.cameras.main.width;
const height = this.cameras.main.height;
const progressBar = this.add.graphics();
const progressBox = this.add.graphics();
progressBox.fillStyle(0x222222, 0.8);
progressBox.fillRect(width / 4, height / 2 - 30, width / 2, 50);
const loadingText = this.make.text({
x: width / 2,
y: height / 2 - 50,
text: "Loading...",
style: {
font: "20px monospace",
fill: "#ffffff"
}
});
loadingText.setOrigin(0.5, 0.5);
const percentText = this.make.text({
x: width / 2,
y: height / 2 - 5,
text: "0%",
style: {
font: "18px monospace",
fill: "#ffffff"
}
});
percentText.setOrigin(0.5, 0.5);
const assetText = this.make.text({
x: width / 2,
y: height / 2 + 50,
text: "",
style: {
font: "18px monospace",
fill: "#ffffff"
}
});
assetText.setOrigin(0.5, 0.5);
this.load.on("progress", (value) => {
percentText.setText(parseInt(value * 100 + "", 10) + "%");
progressBar.clear();
progressBar.fillStyle(0xffffff, 1);
progressBar.fillRect((width / 4) + 10, (height / 2) - 30 + 10, (width / 2 - 10 - 10) * value, 30);
});
this.load.on("fileprogress", (file) => {
assetText.setText("Loading asset: " + file.key);
});
this.load.on("complete", () => {
progressBar.destroy();
progressBox.destroy();
loadingText.destroy();
percentText.destroy();
assetText.destroy();
});
}
}

View File

@ -1,15 +0,0 @@
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.

View File

@ -1,44 +0,0 @@
import Utilities from "../Utilities";
import MainMenu from "./MainMenu";
export default class SplashScreen extends Phaser.Scene {
/**
* Unique name of the scene.
*/
public static Name: string = "SplashScreen";
public preload(): void {
this.load.path = "assets/";
}
public create(): void {
Utilities.LogSceneMethodEntry("SplashScreen", "create");
const titleText = this.add.text(this.cameras.main.centerX, this.cameras.main.centerY * 0.5, "Starter Project for Phaser 3 with TypeScript")
.setOrigin(0.5, 0)
.setFontFamily("monospace").setFontSize(26).setFill("#fff");
const poweredByText = this.add.text(this.cameras.main.centerX, this.cameras.main.centerY - 25, "Powered By");
poweredByText.setOrigin(0.5, 0.5);
poweredByText.setFontFamily("monospace").setFontSize(20).setFill("#fff");
this.add.image(this.cameras.main.centerX, this.cameras.main.centerY, "phaser_pixel_medium_flat");
this.input.setDefaultCursor("pointer");
this.input.on("pointerdown", this.loadMainMenu, this);
this.time.addEvent({
// Run after three seconds.
delay: 3000,
callback: this.loadMainMenu,
callbackScope: this,
loop: false
});
}
/**
* Load the next scene, the main menu.
*/
private loadMainMenu(): void {
this.scene.start(MainMenu.Name);
}
}

View File

@ -1,18 +0,0 @@
export default class Utilities {
/**
* Logs a particular message to the console.
* @param message Message to log.
*/
public static Log(message: string): void {
console.log((new Date()).toISOString() + " : " + message);
}
/**
* Logs the start of a method in a scene.
* @param sceneName Name of the scene.
* @param method Method called within the scene.
*/
public static LogSceneMethodEntry(sceneName: string, method: string): void {
this.Log("Entered " + sceneName + " " + method + "()");
}
}

View File

@ -1 +0,0 @@
/// <reference path="../../node_modules/phaser/types/phaser.d.ts" />

View File

@ -1,7 +0,0 @@
{
"compilerOptions": {
"target": "es5",
"rootDir": "./src/ts/",
"sourceMap": true
}
}

View File

@ -1,26 +0,0 @@
{
"extends": "tslint:recommended",
"rules": {
"indent": [true, "tabs"],
"max-line-length": false,
"no-consecutive-blank-lines": true,
"object-literal-sort-keys": false,
"ordered-imports": false,
"trailing-comma": false,
"new-parens": true,
"no-console": {
"severity": "warning",
"options": [
"debug",
"info",
"log",
"time",
"timeEnd",
"trace"
]
}
},
"jsRules": {
}
}

View File

@ -1,56 +0,0 @@
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' ]
},
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'public')
},
devtool: "source-map",
plugins: [
new CleanWebpackPlugin(),
new CopyWebpackPlugin([{
from: './node_modules/phaser/dist/phaser.min.js',
to: 'lib'
}]),
new CopyWebpackPlugin([{
from: './src/*.html',
to: path.resolve(__dirname, 'public'),
flatten: true
}]),
new CopyWebpackPlugin([{
from: './src/*.css',
to: path.resolve(__dirname, 'public'),
flatten: true
}]),
new CopyWebpackPlugin([{
from: './src/*.ico',
to: path.resolve(__dirname, 'public'),
flatten: true
}]),
new CopyWebpackPlugin([{
from: './src/assets',
to: 'assets',
ignore: [ '*.md' ]
}])
],
devServer: {
open: true
}
};