Repository files navigation

In this tutorial you’re going to find out how to makepixi.js game with v5, how to utilize the latestes feature, how to separate.jsfiles(es module), how to load resource, how to fit the screen automatically, how to playsound andvideo, how to splitlayer , how toextends pixi class,how to makeinternationalization, how to usewebpack andbabel to develop and distribute the game(optimize the image files, tree shake/combine/convert/obfuscate thejs files) and so on.

The source code is well commented, hope you can enjoy it.you can learn more about webpack in detail in this projectpixi-webpack-demo

中文文档

try the game

• you should havenodejs installed.
• runnpm install command to install the dependencies.
• runnpm start command to start the project, it will open chrome browser automically.

• based on pixi.js version 5.2.
• usewebpack to debug the project at development phase, and combine, convert(to es5) and obfuscatejs files at distribution phase.
• the code is written in es8 and usebabel to convertes6+ toes5.
• usetexturepacker tool to create atlas.
• basiccssandhtmlknowledge, thecanvas will auto fit the screen when viewport changed.

• res:texturepacker project and original font files etc.
• src:all game resource and source code.
• dist: distribute the final game project here.
• webpack.common.js: webpack common configuration file.
• webpack.dev.js: webpack configuration file for development.
• webpack.prod.js: webpack configuration file for produciton.
• package.json:node configuration file.

• runnpm run buildcommand torelease the project, all the files will copy intodist directory, all.js files will combined、converted toes5 and obfuscated, all png files will be optimized.