Last active
December 13, 2019 21:30
-
-
Save easierbycode/f1a9e542042a67d04c47acd888ffc442 to your computer and use it in GitHub Desktop.
Phaser3 minimal template (100% canvas w/ resize)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Scene } from 'phaser' | |
| | |
| export class Game extends Scene { | |
| constructor () { | |
| super({ | |
| key: 'game' | |
| }) | |
| this.staticBg = null | |
| this.scrollingBg = null | |
| } | |
| | |
| create () { | |
| this.staticBg = this.add.image(0, 0, 'bg-static') | |
| this.staticBg.setTint(0x444444) | |
| this.staticBg.setOrigin(0.5) | |
| this.scrollingBg = this.add.tileSprite(0,0,396,529,'bg-overlay') | |
| this.scrollingBg.setOrigin(0.5) | |
| // Add a listener to our resize event | |
| this.sys.game.events.on('resize', this.resize, this) | |
| // Call the resize so the game resizes correctly on scene start | |
| this.resize() | |
| // Listen for this scene exit | |
| this.events.once('shutdown', this.shutdown, this) | |
| } | |
| | |
| resize () { | |
| let cam = this.cameras.main | |
| cam.setViewport(0,0,window.innerWidth, window.innerHeight) | |
| cam.centerToBounds() | |
| // Adjust the zoom such that it scales the game | |
| // just enough to clear out the black areas | |
| cam.zoom = Math.max(window.innerWidth/270, window.innerHeight/480) | |
| // If we want to fit our game inside, then use the min scale | |
| // cam.zoom = Math.min(window.innerWidth/270, window.innerHeight/480) | |
| } | |
| | |
| update () { | |
| this.scrollingBg.tilePositionY -= 1 | |
| } | |
| | |
| shutdown () { | |
| // When this scene exits, remove the resize handler | |
| this.sys.game.events.off('resize', this.resize, this) | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var config = { | |
| type: Phaser.AUTO, | |
| parent: 'phaser-example', | |
| width: window.innerWidth, | |
| height: window.innerHeight, | |
| scene: { | |
| preload: preload, | |
| create: create, | |
| resize: resize | |
| } | |
| }; | |
| function preload () | |
| { | |
| this.load.image('rain', 'assets/square.png'); | |
| this.load.image('logo', 'assets/bg.png'); | |
| } | |
| function create () | |
| { | |
| this.bg = this.add.tileSprite(0, 0, game.config.width, game.config.height, 'rain').setOrigin(0); | |
| this.logo = this.add.sprite(game.config.width / 2, game.config.height / 2, 'logo'); | |
| this.events.on('resize', resize, this); | |
| } | |
| function resize (width, height) | |
| { | |
| if (width === undefined) { width = this.sys.game.config.width; } | |
| if (height === undefined) { height = this.sys.game.config.height; } | |
| this.cameras.resize(width, height); | |
| this.bg.setSize(width, height); | |
| this.logo.setPosition(width / 2, height / 2); | |
| } | |
| var game = new Phaser.Game(config); | |
| window.addEventListener('resize', function (event) { | |
| game.resize(window.innerWidth, window.innerHeight); | |
| }, false); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Phaser</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> | |
| <style> | |
| html, | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| /* https://codepen.io/samme/pen/paOjMO */ | |
| canvas { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| /* <https://caniuse.com/#feat=object-fit> */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="content"></div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import phaser from 'phaser' | |
| import { Preloader } from './scenes/preloader' | |
| import { Game } from './scenes/game' | |
| | |
| const config = { | |
| width: window.innerWidth, | |
| height: window.innerHeight, | |
| parent: 'content', | |
| scene: [ | |
| Preloader, | |
| Game | |
| ] | |
| } | |
| | |
| const game = new phaser.Game(config) | |
| | |
| window.onresize = function () { | |
| game.renderer.resize(window.innerWidth, window.innerHeight) | |
| game.events.emit('resize') | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "phaser3", | |
| "version": "1.0.0", | |
| "description": "", | |
| "main": "index.js", | |
| "scripts": { | |
| "build": "webpack", | |
| "dev": "webpack-dev-server" | |
| }, | |
| "keywords": [], | |
| "author": "", | |
| "license": "ISC", | |
| "dependencies": { | |
| "phaser": "^3.1.0" | |
| }, | |
| "devDependencies": { | |
| "babel-cli": "^6.26.0", | |
| "babel-core": "^6.26.0", | |
| "babel-loader": "^7.1.2", | |
| "babel-polyfill": "^6.26.0", | |
| "babel-preset-env": "^1.6.1", | |
| "clean-webpack-plugin": "^0.1.18", | |
| "copy-webpack-plugin": "^4.4.1", | |
| "html-webpack-plugin": "^2.30.1", | |
| "raw-loader": "^0.5.1", | |
| "webpack": "^3.11.0", | |
| "webpack-dev-server": "^2.11.1" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict' | |
| const webpack = require('webpack') | |
| const path = require('path') | |
| const HtmlWebpackPlugin = require('html-webpack-plugin') | |
| const CopyWebpackPlugin = require('copy-webpack-plugin') | |
| const CleanWebpackPlugin = require('clean-webpack-plugin') | |
| module.exports = { | |
| entry: { | |
| app: ['babel-polyfill', path.resolve(__dirname, 'src', 'index.js')], | |
| vendor: ['phaser'] | |
| }, | |
| output: { | |
| path: path.resolve(__dirname, 'build'), | |
| filename: '[name].[chunkhash].js' | |
| }, | |
| module: { | |
| rules: [ | |
| { test: /\.js$/, include: path.join(__dirname, 'src'), loader: "babel-loader" }, | |
| { test: [/\.vert$/, /\.frag$/], use: 'raw-loader' } | |
| ] | |
| }, | |
| plugins: [ | |
| new CleanWebpackPlugin('build'), | |
| new webpack.DefinePlugin({ | |
| 'CANVAS_RENDERER': JSON.stringify(true), | |
| 'WEBGL_RENDERER': JSON.stringify(true) | |
| }), | |
| new HtmlWebpackPlugin({ | |
| path: path.resolve(__dirname, 'build', 'index.html'), | |
| template: 'index.html' | |
| }), | |
| new webpack.HashedModuleIdsPlugin(), | |
| new webpack.optimize.CommonsChunkPlugin({ | |
| name: 'vendor' | |
| }), | |
| new webpack.optimize.CommonsChunkPlugin({ | |
| name: 'manifest' | |
| }), | |
| new webpack.optimize.UglifyJsPlugin({ | |
| comments: false, | |
| sourceMap: true | |
| }), | |
| new CopyWebpackPlugin([ | |
| {from:path.resolve(__dirname,'assets'), to:path.resolve(__dirname, 'build', 'assets')} | |
| ]) | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment