README_CN.md

拼图游戏

这个教程面对初学者，通过创建一个拼图游戏，来演示怎么完整开发一款pixi游戏并最终发布。

在此项目中可以学会pixi游戏开发时候怎么划分模块，怎么加载资源，怎么进行屏幕自适应，怎么播放音频和视频，怎么分层，怎么通过继承pixi类来扩展功能，怎么实现多国语言，怎么用webpack进行开发期的调试以及最终怎么构建发布游戏。

这个例子已经被收入官方wiki的tutorials里面了:《How to make jigsaw game》

详细讲解可参考我的博客 segmentfault思否 webpack搭建pixi.js开发环境可参考这个pixi-webpack-demo

体验地址

截屏

快速开始

• 需要安装nodejs环境。
• 在项目根目录运行npm install来安装项目依赖的库。
• 运行npm start启动项目服务器，将自动打开chrome浏览器。

需要会的技术栈(你能学到什么)

• 使用pixi.jsv5版本。
• 使用webpack开发调试，最终将所有js文件转成es5、合并、混淆,并且利用tree shake将最终代码尺寸优化到最小(库里无用的模块不会被打进最终文件),压缩图片。
• 使用babel将代码最终转换为es5。
• 使用texturepacker工具制作图集。
• 少量的css和html知识，当浏览器视口大小发生变化时候，利用css对canvas进行屏幕自适应。

目录及文件说明

• res: 存放工程文件,例如texturepacker图集项目，字体等等。
• src: 存放完整游戏项目，包括自己编写的js，第三方库，游戏资源(图片，音频等等)，游戏的html页面。
• dist: 此目录为构建脚本动态生成，存放构建完成的项目文件，每次构建都会重新生成这个目录。
• .webpack.common.js文件: webpack公共脚本。
• .webpack.dev.js文件: webpack开发配置脚本。
• .webpack.prod.js文件: webpack发布配置脚本。
• package.json文件: node项目的配置文件。

项目构建

• 项目根目录运行npm run build可构建release版本的项目，最终所有文件会拷贝到dist目录下，会合并所有的js文件并混淆，优化图片资源。