1、定位Sprite
现在你知道如何创建和显示精灵,让我们了解如何定位和调整它们的大小。
在前面的例子中,猫精灵添加到舞台的左上角。该猫的x位置为0,y位置为0.您可以通过更改其值x和y属性的值来更改猫的位置。这里是如何通过将猫x和y属性值设置为96,使猫在舞台中央。
cat.x = 96;
cat.y = 96;
setup 在创建精灵后,在函数的任何位置添加这两行代码。
function setup() {
//Create the `cat` sprite
var cat = new Sprite(resources["images/cat.png"].texture);
//Change the sprite's position
cat.x = 96;
cat.y = 96;
//Add the cat to the stage so you can see it
stage.addChild(cat);
//Render the stage
renderer.render(stage);
}
(注意:在这个例子中, Sprite是一个别名for PIXI.Sprite,TextureCache是一个别名for PIXI.utils.TextureCache,并且resources是一个别名, PIXI.loader.resources如前所述。我将使用别名,从现在开始,对所有Pixi对象和方法使用相同的格式。)
这两行新代码会将cat向右移动96像素,向下移动96像素。结果如下:
猫的左上角(它的左耳)代表它的x和y 锚点。要使猫向右移动,请增加其x属性的值。要使猫向下移动,请增加其y属性的值。如果猫的x值为0,它将在舞台的左侧。如果它的y值为0,它将在舞台的最顶端。
而不是单独设置精灵x和y属性,您可以将它们一起设置在一行代码,如下所示:
sprite.position.set(x, y)
2、尺寸和比例
您可以通过设置改变精灵的尺寸width和height 性能。这里是如何给猫一个width80像素和height120像素。
cat.width = 80;
cat.height = 120;
将这两行代码添加到setup函数,如下所示:
function setup() {
//Create the `cat` sprite
var cat = new Sprite(resources["images/cat.png"].texture);
//Change the sprite's position
cat.x = 96;
cat.y = 96;
//Change the sprite's size
cat.width = 80;
cat.height = 120;
//Add the cat to the stage so you can see it
stage.addChild(cat);
}
结果如下:
你可以看到猫的位置(它的左上角)没有改变,只有它的宽度和高度。
精灵也有scale.x和scale.y属性,改变精灵的宽度和高度成比例。这里是如何将猫的尺寸设置为一半大小:
cat.scale.x = 0.5;
cat.scale.y = 0.5;
比例值是0和1之间的数字,表示精灵大小的百分比。1表示100%(全尺寸),而0.5表示50%(半尺寸)。你可以通过将sprite的尺寸值设置为2来将sprite的尺寸加倍,如下所示:
cat.scale.x = 2;
cat.scale.y = 2;
Pixi有一个替代的,简洁的方法为您设置精灵的规模在一行代码使用该scale.set方法。
cat.scale.set(0.5, 0.5);
如果吸引你,使用它!
3、旋转
您可以通过将sprite的rotation属性设置为以弧度为单位的值来使sprite旋转。
cat.rotation = 0.5;
但是,旋转发生在哪个点?
你见过一个精灵的左上角代表它x和y地位。该点称为锚点。如果你将sprite的rotation 属性设置为类似的0.5,旋转将围绕精灵的锚点。这个图表显示了这将对我们的猫精灵有什么影响。
你可以看到锚点,猫的左耳,是猫所旋转的假想圆的中心。如果你想让精灵围绕它的中心旋转怎么办?改变精灵的anchor点,使它的中心在精灵,像这样:
cat.anchor.x = 0.5;
cat.anchor.y = 0.5;
anchor.x和anchor.y值表示纹理的尺寸的百分比,从0到1(0%至100%)。将其设置为0.5将纹理对准点的中心。点本身的位置不会改变,只是纹理位于其上的方式。
下一个图表显示了如果您将旋转的精灵居中定位,旋转的精灵会发生什么。
你可以看到sprite的纹理向上和向左移动。这是一个重要的副作用要记住!
就像使用position和scale,你可以设置锚的x和y值用一行代码,像这样:
sprite.anchor.set(x, y)
Sprite也有一个pivot以类似的方式工作的属性 anchor。pivot设置精灵的x / y原点的位置。如果更改枢轴点,然后旋转精灵,它将围绕该原点旋转。例如,下面的代码将精灵的pivot.x点设置为32,pivot.y点指向32
cat.pivot.set(32, 32)
假设sprite是64x64像素,sprite现在将围绕其中心点旋转。但是请记住:如果你改变精灵的旋转点,你也改变了它的x / y原点。
那么,anchor和之间有什么区别pivot?他们真的很相似!anchor使用0到1的归一化值来移动精灵图像纹理的原点。 pivot使用像素值来移动精灵的x和y点的原点。你应该使用什么?随你便。只是玩两个人,看看你喜欢。
- 大小: 6.8 KB
- 大小: 12.6 KB
- 大小: 14.3 KB
- 大小: 17.1 KB
- 大小: 9.6 KB
- 大小: 18.1 KB
分享到:
相关推荐
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的特性和...
ReactPIXI :rainbow: 使用React声明式风格编写应用程序 :OK_hand: ... import { Stage , Sprite } from ' @inlet/react-pixi ' const App = () => ( < Sprite xss=removed xss=removed xss=removed> )
let sprite = new PIXI.Sprite(PIXI.Texture.from('images/myImage.png')); app.stage.addChild(sprite); ``` 4. 开始动画循环:通过`ticker`管理动画更新。 ```javascript let ticker = PIXI.Ticker.shared; ticker...
受支持的Spritesheet格式八哥/麻雀JSON(即PIXI.js) Easel.js cocos2d(即版本2.x) cocos2d-v3(即3.x版) CSS(新!)用法命令行$ spritesheet-js assets/ * .png 选项: $ spritesheet-jsUsage: spritesheet-js ...
总的来说,Pixi渲染引擎为JavaScript开发者提供了丰富的工具和功能,使他们能够创建高质量的2D游戏和交互媒体。通过学习和掌握这些知识点,你可以构建出各种富有创意的应用,带给用户独特的视觉享受。
pixi v5的压缩纹理和视网膜支持。 加载程序可以根据平台和渲染模式选择纹理。 您可以将早期版本与PixiJS v4一起使用-v4.xnpm版本1.1.8 支持DDS(S3TC DXT1-3-5,ATC,ATCA / ATC显式,ATCI / ATC内插),PVR...
在这个"Pixi.js学习(二)创建Pixi应用和Stage"的主题中,我们将深入探讨如何构建一个基础的Pixi应用,并理解Stage的概念。 首先,让我们从创建Pixi应用开始。在JavaScript中,你需要引入Pixi库,通常通过CDN链接或...
7. **响应式设计**:在网页或应用中使用pixi-rulers时,考虑到不同设备和屏幕尺寸,需要考虑标尺的响应式设计,确保在各种环境下都能提供良好的用户体验。 8. **性能优化**:Pixi.js的一大优点是其高性能,但在使用...
2. **精灵管理**:学习如何使用`PIXI.Sprite`类创建精灵,并对其进行位置和大小的调整。 3. **容器管理**:理解`PIXI.Container`的作用,学会如何构建游戏场景。 4. **资源加载与管理**:熟悉如何加载图片资源,并在...
表面精灵:Container2s,Sprite2s,Text2暂时仅是双线性的 用法 特别班 对于每种投影方式,都有相应的类: Container2d,Sprite2d,Text2d,TilingSprite2d,Mesh2d,Spine2d Sprite3d,Text3d,Mesh3d2d,Spine3d,...
我们可以通过创建`PIXI.Application`对象来初始化这个舞台,并设置其尺寸和渲染器类型。接着,我们可以创建`PIXI.Container`作为图形容器,将蛇的身体、食物等元素放入其中。 在贪吃蛇游戏中,蛇由多个单元格...
表面精灵:Container2s,Sprite2s,Text2暂时仅是双线性的 用法 特别班 对于每种投影方式,都有相应的类: Container2d,Sprite2d,Text2d,TilingSprite2d,Mesh2d,Spine2d Sprite3d,Text3d,Mesh3d2d,Spine3d,...
将缩小的文件安装到node_modules/pixi-after-effects/dist/pixi-ae.js 演示 参见 或按照以下步骤运行计算机 yarn install # install dependencies yarn server # start simply server by webpack-dev-server ...
像素层允许在不更改场景图的情况下更改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环境下优化性能的最佳实践。 通过深入研究和分析这个项目,开发者可以...
Pixi.js是一款强大的2D渲染引擎,主要用于创建交互式的2D图形、游戏和动画。它在JavaScript社区中广受欢迎,因为它提供了高效的渲染性能,并且支持跨平台应用。在这个Pixi.js学习系列的第一部分,我们将专注于如何...
3. 图片位控:Pixi.js支持对图片进行位移、旋转和缩放操作。这主要通过设置`Sprite`实例的`x`, `y`, `scale`, `rotation`属性实现。例如,我们可以让一个图片向右移动100像素,旋转45度,同时放大两倍。 ```...
包裹pixijs-quickstarter 使用pixiJS和Typescript与包裹捆绑在一起的示例应用程序 :rocket: :fire: 。强调 :high_voltage: 超快速启动 :fire: 热模块更换。 :memo: 打字稿。 :police_officer: 单元测试。快速开始...
表面精灵:Container2s,Sprite2s,Text2暂时仅是双线性的 用法 特别班 对于每种投影方式,都有相应的类: Container2d,Sprite2d,Text2d,TilingSprite2d,Mesh2d,Spine2d Sprite3d,Text3d,Mesh3d2d,Spine3d,...