我的项目搭建

在你开始写任何代码之前，给你的工程创立一个目录，这里我的我的项目文件夹名称叫 pixi-demo ，应用Visual Studio Code编辑器关上该文件夹

装置 Pixi

Pixi官网：http://www.pixijs.com/
这个教程应用的版本是 v4.5.5
你能够抉择应用Pixi v4.5.5的发布页面的pixi.min.js文件，或者从Pixi的版本列表中获取最新版本。

  • 在文件夹 pixi-demo 下创立一个根底的HTML页面( index.html )
  • 在文件夹 pixi-demo 下新建js文件夹，将之前下载的 pixi.min.js 文件放在js文件夹下
  • 编写 index.html 文件，应用<script>标签去加载 pixi.min.js 文件。<script>标签的src属性应该是你根目录文件的相对路径。
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <title>pixi-demo</title>  </head>  <body>    <!-- 引入pixi -->    <script src="js/pixi.min.js"></script>    <script type="text/javascript">      // 判断以后浏览器是否反对WebGL，反对则应用WebGL渲染，反之应用canvas渲染      let type = "WebGL";      if (!PIXI.utils.isWebGLSupported()) {        type = "canvas";      }      PIXI.utils.sayHello(type);    </script>  </body></html>
  • 编写结束应用Visual Studio Code的插件Live Server右键 Open with Live Server 关上 index.html
  • 如果Pixi连贯胜利，浏览器控制台会显示：
PixiJS 4.5.5 - WebGL - http://www.pixijs.com/