Phaser笔记文档阅读-Working with Phaser, TypeScript and webpack

首先得安装好npm和node.js。

创建一个空文件夹如：phaserwebpack，这里我使用webstorm打开，打开终端：

运行：

npm init -y

执行上面的命令成功后会自动创建package.json文件。随后安装phaser：

npm install --save phaser

这时可以在package.json中看到已经添加了phaser：

安装webpack和webpack扩展：

npm install --save-dev webpack 
npm install --save-dev webpack-cli

随后按照webpack的copy和clean插件：

npm install --save-dev copy-webpack-plugin
npm install --save-dev clean-webpack-plugin

再创建一个测试脚本：

npm install --save-dev webpack-dev-server

此时package.json如下：

{
  "name": "phaserwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "phaser": "^3.55.2"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "copy-webpack-plugin": "^9.0.1",
    "webpack": "^5.48.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }
}

这里有个要说明，如果安装phaser使用npm安装使用--save-dev，那么phaser就会会放到devDependencies。

dependencies：生产环境需要的依赖库；

devDependencies：开发环境需要的依赖库；

创建一个webpack.development.js

const path = require('path');
 
module.exports = {
    entry: {
 
        // this is our entry point, the main JavaScript file
        app: './src/main.js',
    },
    output: {
 
        // this is our output file, the one which bundles all libraries
        filename: 'main.js',
 
        // and this is the path of the output bundle, "dist" folder
        path: path.resolve(__dirname, 'dist'),
    },
 
    // we are in development mode
    mode: 'development',
 
    // we need a source map
    devtool: 'inline-source-map',
 
    // development server root is "src" folder
    devServer: {
        static: './src'
    }
};

上面是开发配置。

此时webpack就搭建好了，下面来写前端相关的代码：

创建新目录src，新建文件src/main.js，index.html

其中index.html代码如下：

<!DOCTYPE html>
<html>
<head>
    <script src="main.js"></script>
</head>
<body>
<div id="thegame"></div>
</body>
</html>

main.js代码如下：

import 'phaser';

class PlayGame extends Phaser.Scene {
    constructor() {
        super("PlayGame");
    }
    preload() {
        this.load.image('logo', 'assets/phaser3-logo.png');
    }
    create() {
        this.image = this.add.image(400, 300, 'logo');
    }
    update() {
        this.image.rotation += 0.01;
    }
}

let config = {
    width: 800,
    height: 600,
    parent: 'thegame',
    scene: PlayGame
};

new Phaser.Game(config);

在到src目录下创建asserts，放图片资源。如下图所示：

最后将package.json中启动脚本改成如下：

{
  "name": "PhaserWebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "development": "webpack serve --open --config webpack.development.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "phaser": "^3.55.2"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  }
}

然后启动：

chrome浏览器运行如下：

Phaser笔记文档阅读-Working with Phaser, TypeScript and webpack – step 1

猜你喜欢