├── .babelrc ├── .gitignore ├── .prettierrc ├── README.md ├── gulpfile.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── assets │ ├── dude.png │ ├── index.js │ ├── phaser.min.js │ └── scenes │ │ ├── Intro.js │ │ └── Level1.js ├── img │ └── logo.png └── index.html └── webpack.config.js /.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 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /public/assets/dude.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingphasedotcom/Phaser-Game-Starter-Kit/30e8ccf579e91b3f903e61ca50ebb3508a1f46fa/public/assets/dude.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingphasedotcom/Phaser-Game-Starter-Kit/30e8ccf579e91b3f903e61ca50ebb3508a1f46fa/public/img/logo.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------