目录
当前位置: 首页 > 文档资料 > Pixi 教程 >

介绍

优质
小牛编辑
134浏览
2023-12-01

介绍

Pixi是一个超快的2D渲染引擎。这意味着什么呢?这意味着它会帮助你用JavaScript或者其他HTML5技术来显示媒体,创建动画或管理交互式图像,从而制作一个游戏或应用。它拥有语义化的,简洁的API接口并且加入了一些非常有用的特性。比如支持纹理贴图集和为精灵(交互式图像)提供了一个简单的动画系统。它也提供了一个完备的场景图,你可以在精灵图层里面创建另一个精灵,当然也可以让精灵响应你的鼠标或触摸事件。最重要的的是,Pixi没有妨碍你的编程方式,你可以自己选择使用多少它的功能,你可以遵循你自己的编码风格,或让Pixi与其他有用的框架无缝集成。

Pixi的API事实上比起久经沙场又老旧的Macromedia/Adobe Flash API要精致。如果你是一个Flash开发者,将会对这样的API感觉更好。其他的同类渲染框架(比如CreateJS,Starling, Sparrow 和 Apple’s SpriteKit.)也在使用类似的API。Pixi API的优势在于它是通用的:它不是一个游戏引擎。这是一个优势,因为它给了你所有的自由去做任何你想做的事,甚至用它可以写成你自己的游戏引擎。(译者:作者这点说的很对,译者有一个朋友就使用它制作自己的Galgame引擎AVG.js)。

在这个教程里,你将会明白怎样用Pixi的强大的图片渲染能力和场景图技术来和做一个游戏联系起来。但是Pixi不仅仅能做游戏 —— 你能用这个技术去创建任何交互式媒体应用。这甚至意味着手机应用。

你在开始这个教程之前需要知道什么呢?

你需要一个对于HTML和JavaScript大致的了解。你没必要成为这方面的专家才能开始,即使一个野心勃勃的初学者也可以开始学习。这本书就是一个学习的好地方:

Foundation Game Design with HTML5 and JavaScript

我知道这本书是最好的,因为这本书是我写的!

这里有一些好的代码来帮助你开始:

Khan Academy: Computer
Programming

Code Academy:
JavaScript

选择一个属于你的最好的学习方式吧!

所以,明白了么?

你知道JavaScript的变量,函数,数组和对象怎么使用么?你知道JSON 数据文件是什么么? 你用过 Canvas 绘图 API么?

为了使用Pixi,你也需要在你项目的根目录运行一个web服务器,你知道什么是web服务器,怎么在你的项目文件夹里面运行它么?最好的方式是使用node.js 并且去用命令行安装http-server. 无论如何,你需要习惯和Unix命令行一起工作。你可以在这个视频中去学习怎样使用 Unix当你完成时,继续去学习 这个视频.你应该学会怎样用Unix,这是一个很有趣和简单的和电脑交互的方式,并且仅仅需要两个小时。

如果你真的不想用命令行的方式,就尝试下 Mongoose webserver:

Mongoose

或者来使用Brackets text editor这个令人惊艳的代码编辑器。他会在你点击那个“闪电按钮”的时候自动启动web服务器和浏览器。

现在,如果你觉得你准备好了了,开始吧!

(给读者的小提示:这是一个 交互式的文档.如果你有关于特殊细节的任何问题或需要任何澄清都可以创建一个GitHub工程 issue ,我会对这个文档更新更多信息。)

最后更新:

类似资料

  • [Chrome v32] 未捕获的TypeError:Object[Object Object]没有方法“set stagereference”

  • 我试图在pixioverlay.js(使用pixi.js的绘图覆盖)上绘制svg标记。全新的Pixi我自己,我想我已经把一些东西一起绘制菱形,见第一个代码片段(如果它是不正确的,或需要改进,让我知道) 请问我该怎么做? 在现实生活中,我有很多这样的标记,都是一些几何形状,比如三角形、星形、正方形、圆形等等,总共会有几千个(比如100K甚至更多,这取决于课程的缩放级别。在zoom=0时,可能接近10

  • 用Pixi绘制几何图形 使用图片纹理是制作精灵最有效的方式之一,但是Pixi也提供了自己低级的绘画工具。你可以使用它们来创造矩形、线段、复杂的多边形以及文本。并且它使用和Canvas Drawing API几乎一致的api,所以如果你熟悉canvas的话,那么几乎没有什么新东西需要学习。当然另一个巨大的优势在于,不同于Canvas的绘画api,你使用Pixi绘制的图形是通过WebGL在GPU上渲染

  • Pixi 精灵 现在你就有了一个画布,可以开始往上面放图像了。所有你想在画布上显示的东西必须被加进一个被称作 舞台的Pixi对象中。你能够像这样使用舞台对象: app.stage 这个舞台是一个Pixi 容器对象。你能把它理解成一种将放进去的东西分组并存储的空箱子。 舞台对象是在你的场景中所有可见对象的根容器。所有你放进去的东西都会被渲染到canvas中。现在舞台是空的,但是很快我们就会放进去一点

  • 这个教程将要一步步介绍怎么用Pixi做游戏或者交互式媒体。这个教程已经升级到 Pixi v4.5.5。如果你喜欢这个教程,你一定也喜欢这本书,它比这个教程多了80%的内容。 示例下载:https://www.wenjiangs.com/wp-content/uploads/2023/03/examples.zip