├── .gitignore
├── postcss.config.js
├── public
├── img
│ └── logo.png
├── assets
│ ├── dude.png
│ ├── scenes
│ │ ├── Level1.js
│ │ └── Intro.js
│ └── index.js
└── index.html
├── .prettierrc
├── .babelrc
├── README.md
├── gulpfile.js
├── package.json
└── webpack.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: [
3 | require('autoprefixer')
4 | ]
5 | }
--------------------------------------------------------------------------------
/public/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingphasedotcom/Phaser-Game-Starter-Kit/HEAD/public/img/logo.png
--------------------------------------------------------------------------------
/public/assets/dude.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingphasedotcom/Phaser-Game-Starter-Kit/HEAD/public/assets/dude.png
--------------------------------------------------------------------------------
/public/assets/scenes/Level1.js:
--------------------------------------------------------------------------------
1 | export default class Level1 extends Phaser.Scene {
2 | constructor() {
3 | super({
4 | key: 'Level1'
5 | });
6 | }
7 | preload() {}
8 | create() {}
9 | update(time, delta) {}
10 | }
11 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "useTabs": true,
3 | "printWidth": 80,
4 | "tabWidth": 2,
5 | "singleQuote": true,
6 | "trailingComma": "none",
7 | "jsxBracketSameLine": false,
8 | "parser": "babylon",
9 | "noSemi": true,
10 | "rcVerbose": true
11 | }
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | CodingPhase Starter Kit
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 |
4 | ["@babel/env",
5 | {
6 | "targets": {
7 | "edge": "17",
8 | "firefox": "60",
9 | "chrome": "67",
10 | "safari": "11.1"
11 | }
12 | }
13 | ],
14 | "@babel/preset-react"
15 | ],
16 | "plugins": [
17 | ["@babel/plugin-proposal-decorators", {
18 | "legacy": true
19 | }],
20 | ["@babel/plugin-proposal-class-properties", {
21 | "loose": true
22 | }],
23 | "@babel/plugin-syntax-dynamic-import",
24 | "@babel/plugin-transform-async-to-generator"
25 | ]
26 | }
--------------------------------------------------------------------------------
/public/assets/index.js:
--------------------------------------------------------------------------------
1 | // import { Game } from './phaser.min.js';
2 | import Intro from './scenes/Intro.js';
3 | import Level1 from './scenes/Level1.js';
4 |
5 | var config = {
6 | type: Phaser.AUTO,
7 | width: 640,
8 | height: 360,
9 | scale: {
10 | scale: 'SHOW_ALL',
11 | orientation: 'LANDSCAPE'
12 | },
13 | resolution: window.devicePixelRatio,
14 | pixelArt: true,
15 | physics: {
16 | default: 'arcade',
17 | arcade: {
18 | debug: true,
19 | gravity: {
20 | y: 500
21 | }
22 | }
23 | },
24 | scene: [Intro, Level1]
25 | };
26 |
27 | var game = new Phaser.Game(config);
28 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Starter-Kit-2019
2 |
3 |
4 | So I built this for all the new web developers... My Goal is to save you time from the bullsh*t of spending hours looking for ways to speed up your learning. Sometimes all we want to do is just code.
5 | (if you are coming from my [youtube channel CodingPhase ](https://www.youtube.com/channel/UC46wWUso9H5KPQcoL9iE3Ug) I will base all my tutorials from this starter kit)
6 |
7 | I broke it down in simple steps to get you going.
8 |
9 | **Steps**
10 | ---------
11 |
12 | **Download or Pull This Repo**
13 | Top of this page you can see where it says clone or download
14 |
15 | **Install Node**
16 | https://nodejs.org/en/
17 |
18 | **Download Atom (OPTIONAL)**
19 | https://atom.io/
20 |
21 | **Install all the node packages**
22 | On the root of this project run on your terminal (if you want you can do this with yarn but thats optional)
23 | ```bash
24 | npm install
25 | npm install gulp-cli -g
26 | npm install gulp@3.9.1 -g
27 | npm install webpack -g
28 | npm install webpack-cli -g
29 | ```
30 |
31 | **Update the node packages**
32 | On the root of this project run on your terminal (if you want you can do this with yarn but thats optional)
33 | ```bash
34 | npm update
35 | ```
36 |
37 | **Start the dev server**
38 | ```bash
39 | npm run watch
40 | ```
41 |
--------------------------------------------------------------------------------
/public/assets/scenes/Intro.js:
--------------------------------------------------------------------------------
1 | export default class Intro extends Phaser.Scene {
2 | constructor() {
3 | super({
4 | key: 'Intro'
5 | });
6 | }
7 | preload() {
8 | this.load.script(
9 | 'webfont',
10 | 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js'
11 | );
12 |
13 | var progress = this.add.graphics();
14 | const self = this;
15 | this.load.on('progress', function(value) {
16 | progress.clear();
17 | progress.fillStyle(0x42f456, 1);
18 | progress.fillRect(0, 300, 800 * value, 20);
19 | });
20 |
21 | this.load.on('complete', function() {
22 | progress.destroy();
23 | });
24 | }
25 | create() {
26 | this.make.text({
27 | x: 250,
28 | y: 300,
29 | text: 'Press Space Bar',
30 | style: {
31 | fontSize: '20px',
32 | fontFamily: 'Arial',
33 | color: '#ffffff',
34 | align: 'center',
35 | backgroundColor: '#000000',
36 | shadow: {
37 | color: '#000000',
38 | fill: true,
39 | offsetX: 2,
40 | offsetY: 2,
41 | blur: 8
42 | }
43 | }
44 | });
45 | var add = this.add;
46 | var input = this.input;
47 | WebFont.load({
48 | google: {
49 | families: ['Fredericka the Great']
50 | },
51 | active: function() {
52 | add
53 | .text(75, 100, `Phaser 3 Starter Kit`, {
54 | fontFamily: 'Fredericka the Great',
55 | fontSize: 50,
56 | color: '#ffffff'
57 | })
58 | .setShadow(2, 2, '#333333', 2, false, true);
59 | }
60 | });
61 | this.keys = this.input.keyboard.addKeys('SPACE');
62 | }
63 | update(delta) {
64 | if (this.keys.SPACE.isDown) {
65 | this.scene.start('Level1');
66 | }
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | const gulp = require('gulp');
2 | const browserSync = require('browser-sync');
3 | const reload = browserSync.reload;
4 | var exec = require('child_process').exec;
5 |
6 | gulp.task('default', ['browser-sync'], () => {
7 | // gulp.watch('./assets/scss/**/*', ['webpack']);
8 | // gulp.watch('./assets/**/*', ['webpack']);
9 | gulp
10 | .watch([
11 | './public/**/*',
12 | './public/*',
13 | '!public/js/**/.#*js',
14 | '!public/css/**/.#*css'
15 | ])
16 | .on('change', reload);
17 | });
18 |
19 | // gulp.task('styles', () => {
20 | // gulp
21 | // .src('assets/sass/**/*.scss')
22 | // .pipe(
23 | // sass({
24 | // outputStyle: 'compressed'
25 | // }).on('error', sass.logError)
26 | // )
27 | // .pipe(
28 | // autoprefixer({
29 | // browsers: ['last 2 versions']
30 | // })
31 | // )
32 | // .pipe(gulp.dest('./public/css'))
33 | // .pipe(browserSync.stream());
34 | // });
35 |
36 | gulp.task('browser-sync', function() {
37 | // THIS IS FOR SITUATIONS WHEN YOU HAVE ANOTHER SERVER RUNNING
38 | // browserSync.init({
39 | // proxy: {
40 | // target: 'localhost:3000', // can be [virtual host, sub-directory, localhost with port]
41 | // ws: true // enables websockets
42 | // },
43 | // serveStatic: ['.', './public']
44 | // })
45 |
46 | browserSync.init({
47 | server: './public',
48 | notify: false,
49 | open: false //change this to true if you want the broser to open automatically
50 | });
51 | });
52 |
53 | gulp.task('webpack', cb => {
54 | exec('npm run dev', function(err, stdout, stderr) {
55 | console.log(stdout);
56 | console.log(stderr);
57 | cb(err);
58 | });
59 | });
60 |
61 | // gulp.task('webpack', shell.task([
62 | // 'webpack'
63 | // ]))
64 |
65 | // gulp.task('server', shell.task([
66 | // 'yarn run server'
67 | // ]))
68 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "phaser-starter-kit",
3 | "version": "1.1.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "dev": "webpack --mode development --env.NODE_ENV=dev",
9 | "build": "webpack --mode production --env.NODE_ENV=production",
10 | "watch": "gulp"
11 | },
12 | "author": "",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "@babel/core": "^7.1.5",
16 | "@babel/plugin-proposal-class-properties": "^7.1.0",
17 | "@babel/preset-env": "^7.1.5",
18 | "@babel/preset-es2016": "^7.0.0-beta.53",
19 | "@babel/preset-react": "^7.0.0",
20 | "@babel/preset-stage-0": "^7.0.0",
21 | "@babel/register": "^7.0.0",
22 | "autoprefixer": "^9.3.1",
23 | "axios": "^0.18.0",
24 | "babel-core": "^6.26.3",
25 | "babel-loader": "^8.0.4",
26 | "babel-preset-env": "^1.7.0",
27 | "browser-sync": "^2.26.3",
28 | "clean-webpack-plugin": "^0.1.19",
29 | "css-loader": "^1.0.1",
30 | "extract-text-webpack-plugin": "^4.0.0-beta.0",
31 | "gulp": "^3.9.1",
32 | "html-webpack-plugin": "^3.2.0",
33 | "mini-css-extract-plugin": "^0.4.4",
34 | "node-sass": "^4.10.0",
35 | "postcss-loader": "^3.0.0",
36 | "prettier": "^1.15.1",
37 | "prettier-loader": "^2.1.1",
38 | "react": "^16.6.1",
39 | "react-dom": "^16.6.1",
40 | "react-redux": "^5.1.0",
41 | "sass-loader": "^7.1.0",
42 | "style-loader": "^0.23.1",
43 | "webpack": "^4.25.1",
44 | "webpack-cli": "^3.1.2",
45 | "webpack-md5-hash": "0.0.6"
46 | },
47 | "dependencies": {
48 | "phaser": "^3.15.1",
49 | "@babel/plugin-proposal-decorators": "^7.1.6",
50 | "@babel/plugin-syntax-dynamic-import": "^7.0.0",
51 | "@babel/plugin-transform-async-to-generator": "^7.1.0"
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
3 | const WebpackMd5Hash = require('webpack-md5-hash');
4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5 | const CleanWebpackPlugin = require('clean-webpack-plugin');
6 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
7 | const UglifyJS = require('uglify-es');
8 |
9 | const DefaultUglifyJsOptions = UglifyJS.default_options();
10 | const compress = DefaultUglifyJsOptions.compress;
11 | for (let compressOption in compress) {
12 | compress[compressOption] = false;
13 | }
14 | compress.unused = true;
15 |
16 | module.exports = env => {
17 | return {
18 | entry: {
19 | game: './assets/js/Game/index.js'
20 | },
21 | output: {
22 | path: path.resolve(__dirname, 'public/dist'),
23 | filename: '[name].js' // '[name].[chunkhash].js' put this if you want to get hashed files to cache bust
24 | },
25 | module: {
26 | rules: [
27 | {
28 | test: /\.js$/,
29 | exclude: /node_modules/,
30 | use: ['babel-loader', 'prettier-loader']
31 | },
32 | {
33 | test: /\.scss$/,
34 | use: [
35 | 'style-loader',
36 | MiniCssExtractPlugin.loader,
37 | 'css-loader',
38 | 'sass-loader',
39 | 'postcss-loader'
40 | ]
41 | }
42 | ]
43 | },
44 | plugins: [
45 | new CleanWebpackPlugin('public/dist', {}),
46 | new MiniCssExtractPlugin({
47 | filename: 'styles.css' // 'style.[contenthash].css' put this if you want to get hashed files to cache bust
48 | }),
49 | // new HtmlWebpackPlugin({
50 | // inject: false,
51 | // hash: true,
52 | // template: './assets/index.html',
53 | // children: false,
54 | // filename: '../index.html'
55 | // }),
56 | new WebpackMd5Hash()
57 | ],
58 | optimization: {
59 | minimize: true,
60 | minimizer: [
61 | new UglifyJsPlugin({
62 | uglifyOptions: {
63 | compress,
64 | mangle: false,
65 | output: {
66 | beautify: env.NODE_ENV !== 'production' ? true : false
67 | }
68 | }
69 | })
70 | ],
71 | usedExports: true,
72 | sideEffects: true
73 | }
74 | };
75 | };
76 |
--------------------------------------------------------------------------------