开始学习 PixiJS

fredshare 发布于2019-08-23 13:42 / 614人阅读

摘要：它自动侦测使用或者。开发者无需专门学习就能感受到强大的硬件加速的力量。要注意的是，虽然非常适合制作游戏，但它并不是一个游戏引擎，它的核心本质是尽可能快速有效地在屏幕上移动物体。可以被处理的图像被称作纹理。

PixiJS 介绍

PixiJS 是一个超快的2D渲染引擎。它自动侦测使用 WebGL 或者 Canvas。开发者无需专门学习 WebGL 就能感受到强大的硬件加速的力量。

PixiJS 会帮助你用 JavaScript 或者其他 HTML5 技术来显示媒体，创建动画或管理交互式图像，从而制作一个游戏或应用。它拥有语义化的，简洁的 API 接口并且加入了一些非常有用的特性。比如支持纹理贴图集和为精灵（交互式图像）提供了一个简单的动画系统。它也提供了一个完备的场景图，你可以在精灵图层里面创建另一个精灵，当然也可以让精灵响应你的鼠标或触摸事件。

要注意的是，虽然 PixiJS 非常适合制作游戏，但它并不是一个游戏引擎，它的核心本质是尽可能快速有效地在屏幕上移动物体。

感受一下

下面这些是用 PixiJS 实现的一些例子，你可以点开看看。

cavalier challenge

Run Pixie Run

Filters Demo

WASTE INVADERS

Storm Brewing

H5场景小动画

打砖块游戏

安装

为了能很好的使用 PixiJS ，你需要在你项目的根目录运行一个 web 服务器，这里推荐使用 node.js 并且去用命令行安装 http-server，当然你也可以用其他的 web 服务器，比如
Apache、Nginx，总之你需要让你的项目在服务器环境下运行，也就是用 http://xxxxxx 这种方式来访问你的项目，而不是 file://xxxxxx ，如果直接在本地打开 HTML 文件有些时候是会出问题的，比如用 file://xxxxxx 的方式运行项目时，图片是跨域的，调用一些方法时，就会报错了。

NPM 安装：

$> npm install pixi.js

CDN 安装：

你也可以直接去 Github 下载 js 文件。

你可以用下面这样的代码，测试是否已经安装了PixiJS




  
  Hello World

如果 PixiJS 安装成功，在浏览器的控制台中你会看见这样的东西。

概念介绍

PixiJS 中有些比较重要的概念是需要知道的。

Pixi 应用
使用 PixiJS ，我们首先应该创建一个 Pixi 应用，使用 PIXI.Application() 方法可以 new 一个，这个方法可以传入一个对象参数，这个对象中，可以设置 Pixi 应用的宽、高、是否透明，等一些属性，具体所有可以设置的属性可以到 Pixi 的文档里看。

在使用 PIXI.Application() 方法时，如果你没有给传入的参数对象设置 view 属性，它会自动创建一个 canvas 元素，创建出来的 canvas 元素就在 Pixi 应用的 view 属性中。

// 创建一个Pixi 应用
let app = new PIXI.Application({width: 256, height: 256});

// 把 Pixi 应用中创建出来的 canvas 添加到页面上
document.body.appendChild(app.view);

容器
容器是用来装载多个显示对象的，它可以用 PIXI.Container() 方法来创建，而我们创建的 Pixi 应用的 stage 属性就是一个容器对象，它被当作根容器使用，它将包裹所有你想用 Pixi 显示的东西。

精灵
精灵是可以放在容器里的特殊图像对象。精灵是你能用代码控制图像的基础。你能够控制他们的位置，大小，和许多其他有用的属性来产生交互和动画。
创建一个精灵需要用 PIXI.Sprite() 方法。

纹理
因为 Pixi 用 WebGL 和 GPU 去渲染图像，所以图像需要转化成 GPU 可以处理的格式。可以被 GPU 处理的图像被称作纹理。在你让精灵显示图片之前，需要将普通的图片转化成 WebGL 纹理。为了让所有工作执行的快速有效率，Pixi使用纹理缓存来存储和引用所有你的精灵需要的纹理。纹理的名称字符串就是图像的地址。这意味着如果你有从"images/cat.png" 加载的图像，你可以在纹理缓存中这样找到他：

PIXI.utils.TextureCache["images/cat.png"];

示例

我们来看一个用 PixiJS 实现的让图片波浪化的效果。

效果图

示例效果地址：

https://www.kkkk1000.com/images/learnPixiJS/

这个效果用到了 PixiJS 提供的一个滤镜 — DisplacementFilter（置换滤镜）

置换滤镜就是选择另一幅图片，让其在当前的图片上产生凹凸效果。

原图

置换图

用置换滤镜把置换图平铺到原图上之后

在这个效果中，是这样的
原图

置换图

使用置换滤镜后

用置换滤镜让原图产生扭曲，通过不断的改变置换图的位置，使原图的扭曲不断的改变，看上去就像波浪了。

完整代码





    
    Pixi JS 置换滤镜效果

总结

因为最近在学习 PixiJS，所以想把学习的知识总结一下，这篇文章是简单的介绍了下 PixiJS，后续还会继续写一些关于 PixiJS 其他的东西。

如果文中有错误的地方，还请小伙伴们指出，万分感谢。

参考

PixiJS 官网

Pixi 中文教程

PixiJS API 文档

Pixi JS Displacement Effect

GPU云服务器云服务器如何开始学习机器学习如何开始深度学习怎么开始学习编程从零开始学习编程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99414.html

学习 PixiJS — 动画精灵

摘要：也就是说用这种图片做出这样的效果要制作动画精灵我们需要用到的方法。定义使用纹理数组创建动画精灵的方法。返回值返回一个对象，对象会有一些属性和方法，用于控制动画精灵。下一篇学习精灵状态说明看完官方教程中提到的这本书 — Learn Pixi.js ，准备写写读后感了，官方教程中所说的内容，基本上就是书的前4章，所以我就从第5章开始写写吧。动画精灵指的是按顺序使用一系列略有不同的图像...

PrototypeZ 2019-08-23 14:42 评论0 收藏0
前端动画调研-V1

摘要：支持动画状态的，在动画开始，执行中，结束时提供回调函数支持动画可以自定义贝塞尔曲线任何包含数值的属性都可以设置动画仓库文档演示功能介绍一定程度上，也是一个动画库，适用所有的属性，并且实现的能更方便的实现帧动画，替代复杂的定义方式。动画调研-V1 前言：动画从用途上可以分为两种，一种是展示型的动画，类似于一张GIF图，或者一段视频，另一种就是交互性的动画。这两种都有具体的应用场景，比如...

ddongjian0000 2019-08-23 11:00 评论0 收藏0
学习 PixiJS — 精灵状态

摘要：每个单独的行为称为状态。状态播放器用于控制精灵状态。这个雪碧图中实际上有八个精灵状态四个静态状态和四个动画状态。下图显示了雪碧图上的状态以及标识这些状态的帧号。将每个键的值设置为与状态对应的帧编号。精灵状态如果你有复杂的游戏角色或交互式对象，你可能希望该角色根据游戏环境中发生的情况，以不同的方式运行。每个单独的行为称为状态。如果你在精灵上定义状态，那么只要游戏中出现与该状态相对应的...

Tonny 2019-08-23 14:49 评论0 收藏0
学习 PixiJS — 小精灵冒险

摘要：说明小精灵冒险是一书中最后一个案例。在游戏循环中，通过减小平铺精灵的值，使其向左移动。如果方法返回，则退出循环，表示小精灵碰撞到柱子了。重置游戏如果小精灵碰撞到柱子，则在秒钟延迟后重置游戏。说明小精灵冒险是 Learn Pixi.js 一书中最后一个案例。点击屏幕让小精灵飞起来，小精灵上升时，会拍打翅膀，并且会有小星星产生。如果她撞到柱子上，她会爆炸成一堆小星星。帮助她通过15个...

dmlllll 2019-08-26 13:35 评论0 收藏0
学习 PixiJS — 粒子效果

摘要：使用粒子发射器方法会产生一次粒子爆发，但通常你必须产生连续的粒子流。发射器具有和方法，可让打开和关闭粒子流，并可以定义粒子的创建间隔。你如何创造火，烟，魔法和爆炸等效果？你制作了许多小精灵，几十，几百，甚至上千个精灵。然后对这些精灵应用一些物理效果，使它们的行为类似于你尝试模拟的元素。你还必须给他们一些关于它们应该如何出现和消失以及应该形成什么样的模式的规则。这些微小的精灵被称为粒子...

chanjarster 2019-08-23 14:53 评论0 收藏0