Pixi入门第一章：绘制一个小精灵

????????之前有介绍过threeJs做3D场景的教程，但是发现web3D还是有很多局限性的，尤其是在绘制地图一方面，3D场景必须通过射线选取物体，而且会因为相机视角的问题出现偏差，另一方面3D在渲染性能上消耗远大于2D的场景，在动态绘制线的时候会出现卡顿等情况，所以最终又选择一个2D的框架开始学习，这里选用pixi.js。

? ? ? ? 下面来段仪式性的介绍：?

? ? ? ? 1.什么是pixi.js？简单来说它是一个2D sprite渲染引擎，用于创建交互式的图形和动画，它提供了简单易用的API，使开发者可以通过 JavaScript 和其他 html5 技术来创建高性能的图形应用。Pixi.js 可以用于游戏开发、数据可视化、广告制作等各种场景，它具有快速渲染、跨平台支持和丰富的功能特性。

? ? ? ? 2.Pixi.js的起源，?Pixi.js由Goodboy Digital开发，于2013年首次发布。起初，Goodboy Digital是一家专注于游戏和互动媒体开发的公司。他们发现市场上存在着许多复杂而笨重的2D渲染引擎，这些引擎对于移动设备上的性能和资源要求较高。为了解决这个问题，他们决定开发一个简单、高效且易于使用的2D渲染引擎，以满足他们自己的需求。?Goodboy Digital团队开始开发Pixi.js，并将其作为内部工具在自己的项目中使用。随着时间的推移，他们将其开源，并发布到了GitHub上。这样其他开发者也可以使用和贡献这个引擎。Pixi.js迅速受到了开发者的喜爱，因为它具有出色的性能和易用性。现在，Pixi.js已经成为了一个流行的选择，被广泛应用于游戏开发、数据可视化、广告和其他交互式应用程序的开发中。

? ? ? ? 3.Pixi.js特点

????????高性能：Pixi.js 通过利用 WebGL 技术实现硬件加速渲染，可以在多种平台上流畅运行。它经过了优化和调整，以提供快速而有效的渲染管道。
????????跨平台：Pixi.js 可以在多个平台上运行，包括Web、移动和桌面应用程序。无论是在浏览器、手机还是桌面设备上，都能够提供一致的表现和用户体验。
易于使用：Pixi.js 提供简单且直观的 API ，容易上手和学习。它提供了一套丰富的功能，包括精灵(Sprite)、粒子系统(Particle System)、滤镜(Filter)等，使开发者能够创建各种类型的游戏和交互式应用。

????????可扩展性：Pixi.js 具有良好的可扩展性，支持插件和自定义扩展。开发者可以根据自己的需求来定制和扩展 Pixi.js 的功能，并与其他库或框架集成。

????????跨浏览器兼容性：Pixi.js 在广泛的浏览器中都能良好地运行，包括 Chrome、Firefox、Safari、Edge 等。它还提供了一致的 API ，无论是在移动设备上运行的浏览器还是桌面上的现代浏览器。

? ? ? ? 下面先通过一个简单的例子创建第一个2D的场景：不过在此之前要先安装pixi.js,安装命令：

npm install --save pixi.js

安装完成后先引入pixi.js，然后后创建一个pixi的场景，并设置宽高颜色等参数，并添加到body中，再通过图片创建一个图片，pixi里叫sprite，意思是小精灵，创建后设置x，y的值，添加到舞台Stage中（类似three的scene），最终你就可以得到一个简单的pixi页面了，当然直接用canvas也可以很容易实现这些，但是后面的内容就可以慢慢看出pixi的优势了，好了第一章入门就到这里，代码下方放置了效果图可以参考下效果。

<template>
      <div ref="pixiContainer"></div>
</template>
<script>
    import * as PIXI from 'pixi.js';
    export default {
      mounted() {
        // 创建Pixi.js应用程序
        const app = new PIXI.Application({
          width: 500,         // default: 800 宽度
          height: 500,        // default: 600 高度
          antialias: true,    // default: false 反锯齿
          transparent: false, // default: false 透明度
          resolution: 1,       // default: 1 分辨率
          background: '#1099bb',
          // resizeTo: window,
        });
        //将此场景添加到html页面的body中
        document.body.appendChild(app.view);

        // 通过一个图片创建一个小精灵（就是一个对象可以是图片可以是固定的形状或者其他的）
        const bunny = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png');
        bunny.x = 0;//设置精灵的x轴位置
        bunny.y = 0;//设置精灵的y轴位置
        app.stage.addChild(bunny);//将精灵添加到舞台上，也就是stage上，
      }
    };
</script>