Skip to content

windyrain/pixi-lianliankan

Repository files navigation

this tutorial shows you how to make pixi.js game with webpack and es6+, how to optimize image assets and how to config babel to optimize js and convertES6+to ES5.

中文文档

required

  • you should have nodejs installed and have some basic knowledge of package.json file, npm init/install/run command.

  • you should have google chrome installed for running the project.

  • basic knowledge of webpack and babel.

  • it's better for you to have basic knowledge of git, the project pixi-webpack-demo is hosted on github, you can learn step by step by git checkout different branch, now git clone the project。

  • for easy understanding, paste out the project directory here at the very first.

    .
    ├── dist
    │   ├── index.html
    │   ├── game.min.879458fc.js
    │   └── assets
    │       └── bunny.png
    ├── src
    │   ├── index.html
    │   ├── assets
    │   │   └── bunny.png
    │   └── js
    │       └── main.js
    ├── package.json
    ├── webpack.common.js
    ├── webpack.dev.js
    └── webpack.prod.js

[step1] initialize the project

run command git checkout init to checkout init branch to learn this step.

  • make directory pixi-webpack-demo, run npm init command under pixi-webpack-demo directory to initialize the project, fill the information, it will create a package.json file finally.

  • run npm install --save pixi.js command to install pixi.js.

  • after finish the two step before the package.json file should like this:

    {
      "name": "pixi-webpack-demo",
      "version": "1.0.0",
      "description": "make pixi.js game with webpack",
      "main": "src/js/main.js",
      "keywords": ["pixi.js","webpack"],
      "author": "proudcat",
      "license": "MIT",
      "dependencies": {
        "pixi.js": "^5.2.1"
      }
    }
  • create src/index.html

    <html>
      <head>
        <title>pixi-webpack-demo</title>
      </head>
      <body>
      <canvas id="scene"></canvas>
       <!-- we dont need import the entry js file here, webpack will help us to import the file automatically -->
       <!-- we will explain more at "[step2] import webpack" -->
      </body>
    </html>
  • create entry js file src/js/main.js.

    import * as PIXI from 'pixi.js'
    
    const app = new PIXI.Application({
      width: 720,
      height: 1280,
      backgroundColor: 0x1099bb,
      view: document.querySelector('#scene')
    });
    
    const texture = PIXI.Texture.from('assets/bunny.png');
    const bunny = new PIXI.Sprite(texture);
    bunny.anchor.set(0.5);
    bunny.x = 160
    bunny.y = 160
    app.stage.addChild(bunny);
    
    app.ticker.add((delta) => {
      bunny.rotation -= 0.01 * delta;
    });

[step2] import webpack

run git checkout webpack command to checkoutwebpack branch to learn this step。

  • run npm install --save-dev webpack webpack-dev-server webpack-cli webpack-merge copy-webpack-plugin imagemin-webpack-plugin html-webpack-plugin command to install the dependencies of webpack.

  • create webpack.common.js file, this file is webpack common configuration.

    const path = require('path')
    const HtmlPlugin = require('html-webpack-plugin')
    const CopyWebpackPlugin = require('copy-webpack-plugin')
    const ImageminPlugin = require('imagemin-webpack-plugin').default
    module.exports = {
    
      //context directory is src
      context: path.join(__dirname, 'src'),
      
      //entry file of the project,(relative to context)
      entry: ['./js/main.js'],
      output: {
    
        //distribution directory
        path: path.resolve(__dirname, 'dist'),
    
        /**
         * webpack will import the file for the index.html automatically,though the js file does not exist on disk.
         * the js file will generated after webpack build the project, and the js will inserted at index.html automatically.
         * [hash:8] means unique 8 digit hash generated everytime.
         **/
        filename: 'game.min.[hash:8].js',
      },
      target: 'web',
    
    plugins: [
    
      //copy all src/assets to dist/assets
      new CopyWebpackPlugin([
        { from: 'assets/',to:'assets/'}
      ], {
        ignore: [],
        debug:'debug',
        copyUnmodified: true
      }),
    
      //opimize all image file
      new ImageminPlugin({
        test: /\.(jpe?g|png|gif|svg)$/i ,
    
        // optipng: {
        //   optimizationLevel: 4
        // },
    
        //this way seems better on mac.
        pngquant: {
          verbose:true,
          quality: '80-90',
        }
      })
    
      //copy html to dist and insert the js reference.
      ,new HtmlPlugin({
        file:path.join(__dirname,'dist','index.html'),
        template:'./index.html'
      })
    ]
    }
  • create webpack.dev.js file, the file used for debug phase.

    const path = require('path')
    const merge = require('webpack-merge')
    const common = require('./webpack.common.js')
    module.exports = merge(common, {
      devtool: 'inline-source-map',
      mode: 'none',
      devServer: {
    
        //source code directory.
        contentBase: path.join(__dirname, 'src'),
        port: 8080,
    
        //if host set to 127.0.0.1, you cannot access the server on local network.
        host: '0.0.0.0',
        hot: true
      }
    })
  • create webpack.prod.js file, the file is used for publishing the project(we will explain more detail at [step3] import babel).

    const merge = require('webpack-merge')
    const common = require('./webpack.common.js')
    module.exports = merge(common, {
      'mode':'production',
      devtool: 'source-map',
      module: {
        rules: [{
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                ['@babel/preset-env', {
                  'corejs': '3',
                  'useBuiltIns': 'usage'
                }]
              ],
              plugins: ['@babel/plugin-transform-runtime']
            }
          }
        }]
      }
    })
  • create start command at scriptsection in package.json file.

    {
      "name": "pixi-webpack-demo",
      "version": "1.0.0",
      "description": "make pixi.js game with webpack",
      "main": "src/js/main.js",
      "keywords": ["pixi.js","webpack"],
      "author": "proudcat",
      "license": "MIT",
      "scripts": {
        "start": "webpack-dev-server --open 'google chrome' --config webpack.dev.js"
      },
      "devDependencies": {
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.10.3",
        "copy-webpack-plugin": "^5.1.1",
        "html-webpack-plugin": "^3.2.0",
        "imagemin-webpack-plugin": "^2.4.2",
        "webpack-merge": "^4.2.2"
      },
      "dependencies": {
        "pixi.js": "^5.2.1"
      }
    }
  • now we have import the webpack successfully, run npm start to start the project, it will open google chrome browser automatically,the game is running!try to modify the src/js/main.js file and save,the page will refresh automatically and we can see the modification has taken effect!

[step3] import babel and publish the project

run git checkout master to checkout master branch to learn this final step.

  • with babel, you can write ES6+ code(these lib is used fo converting ES6+ to ES5, and some pollyfill etc. look babel document for more details)。

    • npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-loader
    • npm install --save core-js @babel/runtime
  • install rimraf to clean the publish directory dist. run npm install --save-dev rimraf command to install it.

  • create build command at script section in package.json file.

    {
      "name": "pixi-webpack-demo",
      "version": "1.0.0",
      "description": "make pixi.js game with webpack",
      "main": "src/js/main.js",
      "scripts": {
        "start": "webpack-dev-server --open 'google chrome' --config webpack.dev.js",
        "clean": "rimraf dist",
        "prebuild": "npm run clean",
        "build": "webpack --config webpack.prod.js"
      },
      "author": "proudcat",
      "keywords": ["pixi.js","webpack","pixijs","web","game"],
      "license": "MIT",
      "devDependencies": {
        "@babel/core": "^7.8.4",
        "@babel/plugin-transform-runtime": "^7.8.3",
        "@babel/preset-env": "^7.8.4",
        "babel-loader": "^8.0.6",
        "rimraf": "^3.0.2",
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.10.3",
        "copy-webpack-plugin": "^5.1.1",
        "html-webpack-plugin": "^3.2.0",
        "webpack-merge": "^4.2.2"
      },
      "dependencies": {
        "@babel/runtime": "^7.8.4",
        "core-js": "^3.6.4",
        "pixi.js": "^5.2.1"
      }
    }
  • congratulations! run npm run build command, you can build the project now! you will find out the project will be published in dist directory,jshas combined and optimized, es6+ has converted to es5. all image file has been optimized.

About

连连看pixi版本

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published