[b]1、通过spritesheets图创建sprite[/b]
你现在知道如何从单个图像文件制作精灵。但是,作为游戏设计师,你通常会使用tilesets(也称为spritesheets)来制作 sprite。Pixi有一些方便的内置方法来帮助你做到这一点。tileset是包含子图像的单个图像文件。子图像表示您要在游戏中使用的所有图形。这里是一个包含游戏角色和游戏对象作为子图像的tileset图像的示例。
[img]http://dl2.iteye.com/upload/attachment/0123/3397/1572ac89-f2f7-3332-901a-b21923a3b408.png[/img]
整个图块集为192×192像素。每个图像都在一个自己的32 x 32像素的网格单元。存储和访问所有的游戏图形在一个tileset是一个非常处理器和内存高效的方式来处理图形,而Pixi是为他们优化。
您可以通过定义与要提取的子图像大小和位置相同的矩形区域,从图块集中捕获子图像。这里是从tileset中提取的火箭子图像的例子
[img]http://dl2.iteye.com/upload/attachment/0123/3399/97423353-0a71-32f4-81d8-92468cf1fac7.png[/img]
让我们看看这样做的代码。首先,tileset.png使用Pixi的加载图像loader,就像你在前面的例子中做的一样。
接下来,当图像加载时,使用tileset的矩形子部分创建sprite的图像。这里是提取子图像,创建火箭精灵,并定位和显示在画布上的代码。
这个怎么用?
Pixi有一个内置Rectangle对象(PIXI.Rectangle),它是一个用于定义矩形形状的通用对象。它需要四个参数。前两个参数定义了矩形x和y位置。最后两个定义它width和height。以下是定义新Rectangle对象的格式。
矩形对象只是一个数据对象 ; 它由你决定如何使用它。在我们的示例中,我们使用它来定义要提取的图块上的子图像的位置和面积。Pixi纹理有一个有用的属性frame,可以设置为任何Rectangle对象。的frame作物的纹理的尺寸Rectangle。这里是如何使用frame 来裁剪纹理到火箭的大小和位置。
然后,您可以使用裁剪的纹理创建精灵:
这就是它的工作原理!
因为制作sprite纹理从一个瓷砖是你会做的很多频率,Pixi有一个更方便的方式来帮助你这样做 - 让我们来看看下一步是什么。
[b]2、使用纹理图集[/b]
如果你在一个大型,复杂的游戏,你会想要一个快速,有效的方式来创建精灵从tilesets。这是 纹理地图集真正有用的地方。纹理地图集是一个JSON数据文件,其中包含匹配图块集PNG图像上的子图
你现在知道如何从单个图像文件制作精灵。但是,作为游戏设计师,你通常会使用tilesets(也称为spritesheets)来制作 sprite。Pixi有一些方便的内置方法来帮助你做到这一点。tileset是包含子图像的单个图像文件。子图像表示您要在游戏中使用的所有图形。这里是一个包含游戏角色和游戏对象作为子图像的tileset图像的示例。
[img]http://dl2.iteye.com/upload/attachment/0123/3397/1572ac89-f2f7-3332-901a-b21923a3b408.png[/img]
整个图块集为192×192像素。每个图像都在一个自己的32 x 32像素的网格单元。存储和访问所有的游戏图形在一个tileset是一个非常处理器和内存高效的方式来处理图形,而Pixi是为他们优化。
您可以通过定义与要提取的子图像大小和位置相同的矩形区域,从图块集中捕获子图像。这里是从tileset中提取的火箭子图像的例子
[img]http://dl2.iteye.com/upload/attachment/0123/3399/97423353-0a71-32f4-81d8-92468cf1fac7.png[/img]
让我们看看这样做的代码。首先,tileset.png使用Pixi的加载图像loader,就像你在前面的例子中做的一样。
loader
.add("images/tileset.png")
.load(setup);
接下来,当图像加载时,使用tileset的矩形子部分创建sprite的图像。这里是提取子图像,创建火箭精灵,并定位和显示在画布上的代码。
function setup() {
//Create the `tileset` sprite from the texture
var texture = TextureCache["images/tileset.png"];
//Create a rectangle object that defines the position and
//size of the sub-image you want to extract from the texture
var rectangle = new Rectangle(192, 128, 64, 64);
//Tell the texture to use that rectangular section
texture.frame = rectangle;
//Create the sprite from the texture
var rocket = new Sprite(texture);
//Position the rocket sprite on the canvas
rocket.x = 32;
rocket.y = 32;
//Add the rocket to the stage
stage.addChild(rocket);
//Render the stage
renderer.render(stage);
}
这个怎么用?
Pixi有一个内置Rectangle对象(PIXI.Rectangle),它是一个用于定义矩形形状的通用对象。它需要四个参数。前两个参数定义了矩形x和y位置。最后两个定义它width和height。以下是定义新Rectangle对象的格式。
var rectangle = new PIXI.Rectangle(x, y, width, height);
矩形对象只是一个数据对象 ; 它由你决定如何使用它。在我们的示例中,我们使用它来定义要提取的图块上的子图像的位置和面积。Pixi纹理有一个有用的属性frame,可以设置为任何Rectangle对象。的frame作物的纹理的尺寸Rectangle。这里是如何使用frame 来裁剪纹理到火箭的大小和位置。
var rectangle = new Rectangle(192, 128, 64, 64);
texture.frame = rectangle;
然后,您可以使用裁剪的纹理创建精灵:
var rocket = new Sprite(texture);
这就是它的工作原理!
因为制作sprite纹理从一个瓷砖是你会做的很多频率,Pixi有一个更方便的方式来帮助你这样做 - 让我们来看看下一步是什么。
[b]2、使用纹理图集[/b]
如果你在一个大型,复杂的游戏,你会想要一个快速,有效的方式来创建精灵从tilesets。这是 纹理地图集真正有用的地方。纹理地图集是一个JSON数据文件,其中包含匹配图块集PNG图像上的子图