- 浏览: 425884 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
xiaomuxingren:
你好,请问update-alternatives --inst ...
JDK8安装及jenkins安装 -
wahahachuang8:
我觉得这种东西自己开发太麻烦了,就别自己捣鼓了,找个第三方,方 ...
HTML5 WebSocket -
晨曦的朝阳:
刚好有需求,学习一下!
MySql主从配置 -
mfkvfn:
这是恶意的商业竞争呀
解决 android 微信5.0及后续版本无法打开电话号码的问题 -
fwyhf:
require('./monitor/module_liste ...
NodeJS Server 进程自动重启
1、通过spritesheets图创建sprite
你现在知道如何从单个图像文件制作精灵。但是,作为游戏设计师,你通常会使用tilesets(也称为spritesheets)来制作 sprite。Pixi有一些方便的内置方法来帮助你做到这一点。tileset是包含子图像的单个图像文件。子图像表示您要在游戏中使用的所有图形。这里是一个包含游戏角色和游戏对象作为子图像的tileset图像的示例。
整个图块集为192×192像素。每个图像都在一个自己的32 x 32像素的网格单元。存储和访问所有的游戏图形在一个tileset是一个非常处理器和内存高效的方式来处理图形,而Pixi是为他们优化。
您可以通过定义与要提取的子图像大小和位置相同的矩形区域,从图块集中捕获子图像。这里是从tileset中提取的火箭子图像的例子
让我们看看这样做的代码。首先,tileset.png使用Pixi的加载图像loader,就像你在前面的例子中做的一样。
接下来,当图像加载时,使用tileset的矩形子部分创建sprite的图像。这里是提取子图像,创建火箭精灵,并定位和显示在画布上的代码。
这个怎么用?
Pixi有一个内置Rectangle对象(PIXI.Rectangle),它是一个用于定义矩形形状的通用对象。它需要四个参数。前两个参数定义了矩形x和y位置。最后两个定义它width和height。以下是定义新Rectangle对象的格式。
矩形对象只是一个数据对象 ; 它由你决定如何使用它。在我们的示例中,我们使用它来定义要提取的图块上的子图像的位置和面积。Pixi纹理有一个有用的属性frame,可以设置为任何Rectangle对象。的frame作物的纹理的尺寸Rectangle。这里是如何使用frame 来裁剪纹理到火箭的大小和位置。
然后,您可以使用裁剪的纹理创建精灵:
这就是它的工作原理!
因为制作sprite纹理从一个瓷砖是你会做的很多频率,Pixi有一个更方便的方式来帮助你这样做 - 让我们来看看下一步是什么。
2、使用纹理图集
如果你在一个大型,复杂的游戏,你会想要一个快速,有效的方式来创建精灵从tilesets。这是 纹理地图集真正有用的地方。纹理地图集是一个JSON数据文件,其中包含匹配图块集PNG图像上的子图像的位置和大小。如果你使用纹理地图集,你需要知道你想要显示的子图像是它的名字。您可以按任何顺序排列tileset图像,JSON文件将跟踪其大小和位置。这真的很方便,因为它意味着tileset图像的大小和位置没有硬编码到您的游戏程序。如果您对图块集进行更改,例如添加图片,调整图片大小或删除图片,只需重新发布JSON文件,游戏就会使用该数据显示正确的图片。您不必对您的游戏代码进行任何更改。
Pixi与标准JSON纹理地图集格式兼容,该格式由一个名为Texture Packer的流行软件工具输出。Texture Packer的“Essential”许可证是免费的。让我们来了解如何使用它来制作纹理图集,并将图集加载到Pixi中。(你不必使用Texture Packer。类似的工具,像Shoebox或spritesheet.js,以与Pixi兼容的标准格式输出PNG和JSON文件。)
首先,从您要在游戏中使用的单个图像文件的集合开始。
(本节的所有图像都是由Lanea Zimmerman创建的。你可以在这里找到更多她的作品 ,谢谢你,Lanea!)
接下来,打开Texture Packer并选择JSON Hash作为框架类型。将图像拖动到Texture Packer的工作区中。(您也可以将Texture Packer指向包含图像的任何文件夹。)它将自动在单个tileset图像上排列图像,并为它们指定与其原始图像名称匹配的名称。
(如果您使用的是免费版的Texture Packer,请设置Algorithm为Basic,设置Trim模式为 None,设置Size约束,Any size然后将PNG Opt Level向左滑动,0这些是基本设置,版本的Texture Packer来创建您的文件,没有任何警告或错误。)
完成后,点击发布按钮。选择文件名和位置,并保存已发布的文件。你最终会得到2个文件:一个PNG文件和一个JSON文件。在这个例子中,我的文件名是 treasureHunter.json和treasureHunter.png。为了让你的生活更轻松,只需将这两个文件保存在项目的images文件夹中。(您可以将JSON文件视为图像文件的额外元数据,因此将这两个文件保存在同一文件夹中是有意义的。)JSON文件描述了图块中每个子图像的名称,大小和位置。这里是一个描述blob怪物子图像的片段。
该treasureHunter.json文件还包含具有相似数据的“dungeon.png”,“door.png”,“exit.png”和“explorer.png”属性。这些子图像中的每一个被称为帧。拥有这些数据是非常有帮助的,因为现在你不需要知道每个子图像在tileset中的大小和位置。所有你需要知道的是sprite的帧id。框架id只是原始图像文件的名称,如“blob.png”或“explorer.png”。
使用纹理地图集的许多优点是,您可以轻松地在每个图像周围添加2像素的填充(Texture Packer默认情况下会这样做。)这对于防止纹理流失的可能性很重要 。纹理流失是当图块上的相邻图像的边缘出现在子图形旁边时发生的效果。这是因为您的计算机的GPU(图形处理单元)决定如何舍入小数像素值。应该把它们向上还是向下?这对于每个GPU将是不同的。在图像间留下1或2个像素间距,使所有图像一致显示。
(注意:如果你有一个图形周围有两个像素填充,并且你仍然注意到一个奇怪的“关闭一个像素”毛刺的方式Pixi显示它,尝试改变纹理的缩放模式算法,这里的方法:texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;。这些毛刺有时会因为GPU浮点舍入错误而发生。)
现在你知道如何创建纹理地图集,让我们了解如何将它加载到你的游戏代码。
3、加载纹理图集
要获取纹理地图集到Pixi,使用Pixi的加载 loader。如果JSON文件是用Texture Packer制作的,那么 loader它将解释数据并自动从tileset的每个框架创建一个纹理。以下是如何使用loader加载treasureHunter.json 文件。当它加载时,setup函数将运行。
tileset上的每个图像现在都是Pixi缓存中的单独纹理。您可以使用与Texture Packer中相同的名称(“blob.png”,“dungeon.png”,“explorer.png”等)访问缓存中的每个纹理。
4、从加载的纹理图集创建精灵
Pixi给你三个一般的方法来创建一个精灵从纹理图集:
使用TextureCache:
如果你使用Pixi的loader加载纹理地图集,使用加载器的resources:
这是太多的输入只是为了创建一个sprite!所以我建议你创建一个别名id,指向纹理的altas的textures对象,像这样:
然后你可以创建每个新的sprite像这样:
好多了!
这里是你如何可以在使用这三种不同的精灵创作技法setup函数来创建和显示 dungeon,explorer以及treasure精灵。
以下是此代码显示的内容:
阶段维度为512 x 512像素,您可以在上面的代码中看到stage.height和stage.width属性用于对齐精灵。这里是如何explorer的y位置垂直居中:
学习使用纹理地图集创建和显示精灵是一个重要的基准。所以在我们继续之前,让我们来看看你可以写的代码来添加剩余的精灵:门blob和exit门,这样你可以产生一个如下所示的场景:
这里是完成所有这一切的整个代码。我还包括HTML代码,所以你可以看到一切在其正确的上下文。(你会在这个库中的examples/spriteFromTextureAtlas.html文件中找到这个工作代码 。)请注意,blobsprite被创建并在循环中添加到舞台中,并分配随机位置。
你可以在上面的代码中看到,所有的blob都是使用for循环创建的 。每个blob沿x轴都是均匀分布的,如下所示:
spacing具有值48,并且xOffset具有值150.这意味着第一blob将具有x150 的位置。这从舞台的左侧偏移150像素。每个后续blob都将有一个x值比blob循环的上一次迭代中创建的值大48像素。这将创建一个均匀间隔的blob怪物线,从左到右,沿着地下城楼。
每个blob也给出随机y位置。这里是这样做的代码:
所述blob的y位置可以分配0和512之间的任何随机数,这是的值stage.height。这在一个自定义函数的帮助下工作randomInt。randomInt返回一个在您提供的任意两个数字之间的范围内的随机数。
这意味着如果你想要1和10之间的随机数,你可以得到一个这样:
这里是执行randomInt所有这些工作的函数定义:
randomInt 是一个伟大的小功能,保持在你的背部口袋里制作游戏 - 我一直使用它。
你现在知道如何从单个图像文件制作精灵。但是,作为游戏设计师,你通常会使用tilesets(也称为spritesheets)来制作 sprite。Pixi有一些方便的内置方法来帮助你做到这一点。tileset是包含子图像的单个图像文件。子图像表示您要在游戏中使用的所有图形。这里是一个包含游戏角色和游戏对象作为子图像的tileset图像的示例。
整个图块集为192×192像素。每个图像都在一个自己的32 x 32像素的网格单元。存储和访问所有的游戏图形在一个tileset是一个非常处理器和内存高效的方式来处理图形,而Pixi是为他们优化。
您可以通过定义与要提取的子图像大小和位置相同的矩形区域,从图块集中捕获子图像。这里是从tileset中提取的火箭子图像的例子
让我们看看这样做的代码。首先,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有一个更方便的方式来帮助你这样做 - 让我们来看看下一步是什么。
2、使用纹理图集
如果你在一个大型,复杂的游戏,你会想要一个快速,有效的方式来创建精灵从tilesets。这是 纹理地图集真正有用的地方。纹理地图集是一个JSON数据文件,其中包含匹配图块集PNG图像上的子图像的位置和大小。如果你使用纹理地图集,你需要知道你想要显示的子图像是它的名字。您可以按任何顺序排列tileset图像,JSON文件将跟踪其大小和位置。这真的很方便,因为它意味着tileset图像的大小和位置没有硬编码到您的游戏程序。如果您对图块集进行更改,例如添加图片,调整图片大小或删除图片,只需重新发布JSON文件,游戏就会使用该数据显示正确的图片。您不必对您的游戏代码进行任何更改。
Pixi与标准JSON纹理地图集格式兼容,该格式由一个名为Texture Packer的流行软件工具输出。Texture Packer的“Essential”许可证是免费的。让我们来了解如何使用它来制作纹理图集,并将图集加载到Pixi中。(你不必使用Texture Packer。类似的工具,像Shoebox或spritesheet.js,以与Pixi兼容的标准格式输出PNG和JSON文件。)
首先,从您要在游戏中使用的单个图像文件的集合开始。
(本节的所有图像都是由Lanea Zimmerman创建的。你可以在这里找到更多她的作品 ,谢谢你,Lanea!)
接下来,打开Texture Packer并选择JSON Hash作为框架类型。将图像拖动到Texture Packer的工作区中。(您也可以将Texture Packer指向包含图像的任何文件夹。)它将自动在单个tileset图像上排列图像,并为它们指定与其原始图像名称匹配的名称。
(如果您使用的是免费版的Texture Packer,请设置Algorithm为Basic,设置Trim模式为 None,设置Size约束,Any size然后将PNG Opt Level向左滑动,0这些是基本设置,版本的Texture Packer来创建您的文件,没有任何警告或错误。)
完成后,点击发布按钮。选择文件名和位置,并保存已发布的文件。你最终会得到2个文件:一个PNG文件和一个JSON文件。在这个例子中,我的文件名是 treasureHunter.json和treasureHunter.png。为了让你的生活更轻松,只需将这两个文件保存在项目的images文件夹中。(您可以将JSON文件视为图像文件的额外元数据,因此将这两个文件保存在同一文件夹中是有意义的。)JSON文件描述了图块中每个子图像的名称,大小和位置。这里是一个描述blob怪物子图像的片段。
"blob.png": { "frame": {"x":55,"y":2,"w":32,"h":24}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":32,"h":24}, "sourceSize": {"w":32,"h":24}, "pivot": {"x":0.5,"y":0.5} },
该treasureHunter.json文件还包含具有相似数据的“dungeon.png”,“door.png”,“exit.png”和“explorer.png”属性。这些子图像中的每一个被称为帧。拥有这些数据是非常有帮助的,因为现在你不需要知道每个子图像在tileset中的大小和位置。所有你需要知道的是sprite的帧id。框架id只是原始图像文件的名称,如“blob.png”或“explorer.png”。
使用纹理地图集的许多优点是,您可以轻松地在每个图像周围添加2像素的填充(Texture Packer默认情况下会这样做。)这对于防止纹理流失的可能性很重要 。纹理流失是当图块上的相邻图像的边缘出现在子图形旁边时发生的效果。这是因为您的计算机的GPU(图形处理单元)决定如何舍入小数像素值。应该把它们向上还是向下?这对于每个GPU将是不同的。在图像间留下1或2个像素间距,使所有图像一致显示。
(注意:如果你有一个图形周围有两个像素填充,并且你仍然注意到一个奇怪的“关闭一个像素”毛刺的方式Pixi显示它,尝试改变纹理的缩放模式算法,这里的方法:texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;。这些毛刺有时会因为GPU浮点舍入错误而发生。)
现在你知道如何创建纹理地图集,让我们了解如何将它加载到你的游戏代码。
3、加载纹理图集
要获取纹理地图集到Pixi,使用Pixi的加载 loader。如果JSON文件是用Texture Packer制作的,那么 loader它将解释数据并自动从tileset的每个框架创建一个纹理。以下是如何使用loader加载treasureHunter.json 文件。当它加载时,setup函数将运行。
loader .add("images/treasureHunter.json") .load(setup);
tileset上的每个图像现在都是Pixi缓存中的单独纹理。您可以使用与Texture Packer中相同的名称(“blob.png”,“dungeon.png”,“explorer.png”等)访问缓存中的每个纹理。
4、从加载的纹理图集创建精灵
Pixi给你三个一般的方法来创建一个精灵从纹理图集:
使用TextureCache:
var texture = TextureCache["frameId.png"], sprite = new Sprite(texture);
如果你使用Pixi的loader加载纹理地图集,使用加载器的resources:
var sprite = new Sprite( resources["images/treasureHunter.json"].textures["frameId.png"] );
这是太多的输入只是为了创建一个sprite!所以我建议你创建一个别名id,指向纹理的altas的textures对象,像这样:
var id = PIXI.loader.resources["images/treasureHunter.json"].textures;
然后你可以创建每个新的sprite像这样:
let sprite = new Sprite(id["frameId.png"]);
好多了!
这里是你如何可以在使用这三种不同的精灵创作技法setup函数来创建和显示 dungeon,explorer以及treasure精灵。
//Define variables that might be used in more //than one function var dungeon, explorer, treasure, door, id; function setup() { //There are 3 ways to make sprites from textures atlas frames //1. Access the `TextureCache` directly var dungeonTexture = TextureCache["dungeon.png"]; dungeon = new Sprite(dungeonTexture); stage.addChild(dungeon); //2. Access the texture using the loader's `resources`: explorer = new Sprite( resources["images/treasureHunter.json"].textures["explorer.png"] ); explorer.x = 68; //Center the explorer vertically explorer.y = stage.height / 2 - explorer.height / 2; stage.addChild(explorer); //3. Create an optional alias called `id` for all the texture atlas //frame id textures. id = PIXI.loader.resources["images/treasureHunter.json"].textures; //Make the treasure box using the alias treasure = new Sprite(id["treasure.png"]); stage.addChild(treasure); //Position the treasure next to the right edge of the canvas treasure.x = stage.width - treasure.width - 48; treasure.y = stage.height / 2 - treasure.height / 2; stage.addChild(treasure); //Render the stage renderer.render(stage); }
以下是此代码显示的内容:
阶段维度为512 x 512像素,您可以在上面的代码中看到stage.height和stage.width属性用于对齐精灵。这里是如何explorer的y位置垂直居中:
explorer.y = stage.height / 2 - explorer.height / 2;
学习使用纹理地图集创建和显示精灵是一个重要的基准。所以在我们继续之前,让我们来看看你可以写的代码来添加剩余的精灵:门blob和exit门,这样你可以产生一个如下所示的场景:
这里是完成所有这一切的整个代码。我还包括HTML代码,所以你可以看到一切在其正确的上下文。(你会在这个库中的examples/spriteFromTextureAtlas.html文件中找到这个工作代码 。)请注意,blobsprite被创建并在循环中添加到舞台中,并分配随机位置。
<!doctype html> <meta charset="utf-8"> <title>Make a sprite from a texture atlas</title> <body> <script src="../pixi.js/bin/pixi.js"></script> <script> //Aliases var Container = PIXI.Container, autoDetectRenderer = PIXI.autoDetectRenderer, loader = PIXI.loader, resources = PIXI.loader.resources, TextureCache = PIXI.utils.TextureCache, Texture = PIXI.Texture, Sprite = PIXI.Sprite; //Create a Pixi stage and renderer and add the //renderer.view to the DOM var stage = new Container(), renderer = autoDetectRenderer(512, 512); document.body.appendChild(renderer.view); //load a JSON file and run the `setup` function when it's done loader .add("images/treasureHunter.json") .load(setup); //Define variables that might be used in more //than one function var dungeon, explorer, treasure, door, id; function setup() { //There are 3 ways to make sprites from textures atlas frames //1. Access the `TextureCache` directly var dungeonTexture = TextureCache["dungeon.png"]; dungeon = new Sprite(dungeonTexture); stage.addChild(dungeon); //2. Access the texture using throuhg the loader's `resources`: explorer = new Sprite( resources["images/treasureHunter.json"].textures["explorer.png"] ); explorer.x = 68; //Center the explorer vertically explorer.y = stage.height / 2 - explorer.height / 2; stage.addChild(explorer); //3. Create an optional alias called `id` for all the texture atlas //frame id textures. id = PIXI.loader.resources["images/treasureHunter.json"].textures; //Make the treasure box using the alias treasure = new Sprite(id["treasure.png"]); stage.addChild(treasure); //Position the treasure next to the right edge of the canvas treasure.x = stage.width - treasure.width - 48; treasure.y = stage.height / 2 - treasure.height / 2; stage.addChild(treasure); //Make the exit door door = new Sprite(id["door.png"]); door.position.set(32, 0); stage.addChild(door); //Make the blobs var numberOfBlobs = 6, spacing = 48, xOffset = 150; //Make as many blobs as there are `numberOfBlobs` for (var i = 0; i < numberOfBlobs; i++) { //Make a blob var blob = new Sprite(id["blob.png"]); //Space each blob horizontally according to the `spacing` value. //`xOffset` determines the point from the left of the screen //at which the first blob should be added. var x = spacing * i + xOffset; //Give the blob a random y position //(`randomInt` is a custom function - see below) var y = randomInt(0, stage.height - blob.height); //Set the blob's position blob.x = x; blob.y = y; //Add the blob sprite to the stage stage.addChild(blob); } //Render the stage renderer.render(stage); } //The `randomInt` helper function function randomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } </script> </body>
你可以在上面的代码中看到,所有的blob都是使用for循环创建的 。每个blob沿x轴都是均匀分布的,如下所示:
var x = spacing * i + xOffset; blob.x = x;
spacing具有值48,并且xOffset具有值150.这意味着第一blob将具有x150 的位置。这从舞台的左侧偏移150像素。每个后续blob都将有一个x值比blob循环的上一次迭代中创建的值大48像素。这将创建一个均匀间隔的blob怪物线,从左到右,沿着地下城楼。
每个blob也给出随机y位置。这里是这样做的代码:
var y = randomInt(0, stage.height - blob.height); blob.y = y;
所述blob的y位置可以分配0和512之间的任何随机数,这是的值stage.height。这在一个自定义函数的帮助下工作randomInt。randomInt返回一个在您提供的任意两个数字之间的范围内的随机数。
randomInt(lowestNumber, highestNumber)
这意味着如果你想要1和10之间的随机数,你可以得到一个这样:
var randomNumber = randomInt(1, 10);
这里是执行randomInt所有这些工作的函数定义:
function randomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
randomInt 是一个伟大的小功能,保持在你的背部口袋里制作游戏 - 我一直使用它。
发表评论
-
webpack4 - 安装
2019-04-15 17:50 0webpack4 安装 -
项目中使用webpack5
2017-11-26 16:40 1613近期react及vueJs的普及,ES6也有相应的推广及普及, ... -
PIXI 完整示例-PIXI文档翻译(7)
2017-02-27 10:04 996案例研究:寻宝者 所 ... -
PIXI 碰撞检测-PIXI文档翻译(6)
2017-02-27 09:59 1873你现在知道如何制作各种各样的图形对象,但你能用他们做什么?一个 ... -
PIXI 基本图形-PIXI文档翻译(6)
2017-02-26 18:06 31311、基本图形 使用图像纹理是制作精灵的最有用的方法之一,但Pi ... -
PIXI 分组 Sprite-PIXI文档翻译(5)
2017-02-26 11:55 14821、分组sprite 组可以创建游戏场景,并将类似的精灵一起管 ... -
PIXI 移动 Sprite-PIXI文档翻译(4)
2017-02-26 11:38 1416你现在知道如何显示精灵,但是你怎么让他们移动?这很容易:使用创 ... -
PIXI Sprite的定位,尺寸和旋转-PIXI文档翻译(2)
2017-02-26 00:14 61171、定位Sprite 现在你知道如何创建和显示精灵,让我们了解 ... -
PIXI入门-PIXI文档翻译(1)
2017-02-25 09:47 36501、创建渲染器和舞台 ... -
如何快速的开放一个小游戏
2016-11-02 20:50 01、找一个可用的框架 2、通读一下文档和源码 3、搞一个小创意 ... -
生产环境页面性能监控
2013-04-18 00:46 1926嵌入式的开发 在代码片断中嵌入各个时间点,最后统一上报。 一 ... -
XSS攻击原理解析
2013-04-16 23:49 2709XSS全称Cross Site Script,跨站脚本攻击 它 ... -
CRSF攻击原理解析
2013-04-16 23:02 8020CRSF全称 Cross Site Request Forge ... -
浏览器缓存机制详解(转)
2013-03-27 21:59 1520同时参考的是W3C RFC2616规范中的 HTTP1.1/H ... -
页面性能优化
2013-03-27 21:56 1872压缩JS,CSS,图片 合并 ... -
JavaScript异常监控
2013-03-27 21:50 2259JavaScript异常一般可通过try ca ... -
HTML5 geolocation 规范翻译
2013-04-22 13:32 1946摘要 规范定义了脚本方式访问主机地理位置信息的API。 安全 ... -
JS文档构建(jsdoc)
2012-06-07 02:08 1708一、命令分类 类定义 @class 类型定义 @ve ... -
HTML5 Forms
2012-06-03 22:16 1276表单元素类型 常用:tel, email, date, url ... -
HTML5 WebSocket
2012-06-02 11:12 25291.WebSocket的优缺点 大 ...
相关推荐
pixi-action,一个类似 cocos2d-x 使用方法的 Pixi.js 动画插件。 var renderer = new PIXI.autoDetectRenderer(800,600); document.body.appendChild(renderer.view); var stage = new PIXI.Container();...
<pixi-sprite :texture="texture" /> </pixi-container> export default { data() { return { texture: 'path/to/your/sprite.png', }; }, }; ``` 这就是Vue-pixi的基本用法。通过深入学习Vue3的特性和...
Pixi.js的核心是WebGL,这是一种在浏览器中进行硬件加速图形渲染的API,能大幅提升图形处理效率。对于不支持WebGL的环境,Pixi会自动切换到2D上下文,确保在尽可能多的设备上运行,降低了开发者对兼容性的担忧。 2...
ReactPIXI :rainbow: 使用React声明式风格编写应用程序 :OK_hand: ... import { Stage , Sprite } from ' @inlet/react-pixi ' const App = () => ( < Sprite xss=removed xss=removed xss=removed> )
这里,我们使用`PIXI.Sprite.from()`方法加载图像资源并创建一个精灵。然后将精灵添加到舞台上。 Pixi.js还提供了`Text`类用于创建文本元素: ```javascript const text = new PIXI.Text('Hello, Pixi!', { font...
- **添加背景图**:通过`PIXI.Sprite.fromImage()`方法创建一个精灵对象,并将其作为舞台的子元素添加进去。同时计算背景图的位置,使其居中显示。 ##### 2. 主游戏场景设置 ```javascript var mainStage = new ...
受支持的Spritesheet格式八哥/麻雀JSON(即PIXI.js) Easel.js cocos2d(即版本2.x) cocos2d-v3(即3.x版) CSS(新!)用法命令行$ spritesheet-js assets/ * .png 选项: $ spritesheet-jsUsage: spritesheet-js ...
我们可以创建一个`PIXI.Sprite`来表示食物,并在每次蛇吃到食物后重新生成。当蛇碰到食物时,增加蛇的长度,更新食物的位置。 游戏的边界处理也至关重要。我们需要确保蛇不会离开舞台的边界,否则游戏结束。检测...
欧拉公式求长期率的matlab代码像素投影 2d和3d投影的集合。 去做: 文件 图形支持 兼容性 它可以与PixiJS v5一起使用。 对于v4,请参见,npm版本0.2.8...PIXI.Sprite(); sprite.con 收起 资源推荐资源详情资源评论
欧拉公式求长期率的matlab代码像素投影 2d和3d投影的集合。 去做: 文件 图形支持 兼容性 它可以与PixiJS v5一起使用。 对于v4,请参见,npm版本0.2.8...PIXI.Sprite(); sprite.con 收起 资源推荐资源详情资源评论
包裹pixijs-quickstarter 使用pixiJS和Typescript与包裹捆绑在一起的示例应用程序 :rocket: :fire: 。强调 :high_voltage: 超快速启动 :fire: 热模块更换。 :memo: 打字稿。 :police_officer: 单元测试。...
3. **创建精灵和纹理**: 精灵是Pixi中的基本元素,用于展示单个图像。精灵由Texture对象驱动,Texture是从资源加载器加载的图像。创建精灵的代码如下: ```javascript const sprite = new PIXI.Sprite(resources...
支持DDS(S3TC DXT1-3-5,ATC,ATCA / ATC显式,ATCI / ATC内插),PVR(PVRTC,ETC1,S3TC DXT1-3-5,PVRTC 2-4bpp RGB-RGBA),ASTC(所有块大小)2D LDR预设 支持先进的DXT压缩 最低演示 解析器很容易破解到您的...
将缩小的文件安装到node_modules/pixi-after-effects/dist/pixi-ae.js 演示 参见 或按照以下步骤运行计算机 yarn install # install dependencies yarn server # start simply server by webpack-dev-server ...
Pixi.js是一款强大的2D渲染引擎,主要用于创建交互式的2D图形、游戏和动画。它在JavaScript社区中广受欢迎,因为它提供了高效的渲染性能,并且支持跨平台应用。在这个Pixi.js学习系列的第一部分,我们将专注于如何...
:speech_balloon: :winking_face_with_tongue: 像素表情选择器表情选择器用法import { EmoteSelector } from "pixi-emote-selector" ;const emoteSelector = new EmoteSelector ( { options : [ PIXI . Sprite . ...
3. **库的集成与配置**:集成pixi-rulers后,开发者需要根据库提供的API来创建和配置标尺。这可能包括设置标尺的位置、颜色、透明度、刻度间隔等属性,以适应不同的应用场景。 4. **测量与交互**:pixi-rulers提供...
在"Pixi.js学习(四)鼠标跟随、元素组合与图片位控 源码"中,我们将深入探讨如何利用Pixi.js实现以下几个核心功能: 1. 鼠标跟随:在Pixi.js中,我们可以监听鼠标的移动事件,通过计算鼠标位置与舞台上的图形之间...
像素层允许在不更改场景图的情况下更改pixi容器的渲染顺序适用于PixiJS> = v5.3 对于PixiJS v4,请使用对于PixiJS <v5.3,请使用npm版本0.2.3 编译文件位于“ dist”文件夹中如果不创建Stage并将其设置为root,则...
- Pixi.js中的Stage、Container、Sprite和Text等基本概念和它们在创建UI元素时的应用。 - 如何使用Pixi.js实现图形动画和用户交互。 - 在WebGL环境下优化性能的最佳实践。 通过深入研究和分析这个项目,开发者可以...