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 v5的压缩纹理和视网膜支持。 加载程序可以根据平台和渲染模式选择纹理。 您可以将早期版本与PixiJS v4一起使用-v4.xnpm版本1.1.8 支持DDS(S3TC DXT1-3-5,ATC,ATCA / ATC显式,ATCI / ATC内插),PVR...
受支持的Spritesheet格式八哥/麻雀JSON(即PIXI.js) Easel.js cocos2d(即版本2.x) cocos2d-v3(即3.x版) CSS(新!)用法命令行$ spritesheet-js assets/ * .png 选项: $ spritesheet-jsUsage: spritesheet-js ...
ReactPIXI :rainbow: 使用React声明式风格编写应用程序 :OK_hand: ... import { Stage , Sprite } from ' @inlet/react-pixi ' const App = () => ( < Sprite xss=removed xss=removed xss=removed> )
像素层允许在不更改场景图的情况下更改pixi容器的渲染顺序适用于PixiJS> = v5.3 对于PixiJS v4,请使用对于PixiJS <v5.3,请使用npm版本0.2.3 编译文件位于“ dist”文件夹中如果不创建Stage并将其设置为root,则...
表面精灵: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 ...
:speech_balloon: :winking_face_with_tongue: 像素表情选择器表情选择器用法import { EmoteSelector } from "pixi-emote-selector" ;const emoteSelector = new EmoteSelector ( { options : [ PIXI . Sprite . ...
包裹pixijs-quickstarter 使用pixiJS和Typescript与包裹捆绑在一起的示例应用程序 :rocket: :fire: 。强调 :high_voltage: 超快速启动 :fire: 热模块更换。 :memo: 打字稿。 :police_officer: 单元测试。快速开始...
Angular2Pixi 使用标记在Angular 2中创建PIXI场景! 请务必查看 ,以获取有关使用情况的更多信息。 在以下位置也有一个包含工作演示的仓库: : 安装 npm install --save angular2pixi 依存关系 A2P具有两个主要...
PIXI PARALLAX可调整大小一个示例,该示例使用Tiling Sprite创建视差滚动效果并使PixiJS渲染适合浏览器大小。学分创建 。 的视差图像。 为英雄跑步动画。执照版权所有(c)2017 Maicon Feldhaus 特此免费授予获得该...
npm install pixi-packer -g特征目的是提供商用Sprite Packer的所有最有用的功能,同时尝试使其更方便用于大型项目和复杂的构建管道。 快速-使用缓存仅处理更新的图像轻巧-没有GUI或安装程序最小化HTTP往返-创建尽...
为pixi.js生成即时Spritesheets 基本原理 我需要一种基于画布图形和/或图像生成Spritesheets的方法。 这使我可以根据不同的分辨率调整图纸的大小。 对于画布绘图,您向渲染表传递了两个功能:绘图功能和度量功能。 ...
:joystick:适用于pixi.js的虚拟触摸操纵杆:joystick:pixi-virtual-joystick适用于pixi.js的虚拟触摸操纵杆用法从“ pixi-virtual-joystick”导入{操纵杆}; const joystick = new Joystick({外部:PIXI.Sprite.from...
Pointerout和Pointerupoutside有target 。 用法 // webpack.config.js plugins: [ new webpack . ProvidePlugin ( { PIXI : 'pixi.js' } ) ] import Interaction from '@iro/interaction' PIXI . Renderer . ...
从“react-pixi-fiber”导入 { Sprite, Stage }; 从“./bunny.png”导入兔子; 功能兔子(道具){返回 ; } 使成为( , document.getElementById("container") ); 本示例将 PIXI.Sprite 对象渲染到页面上 PIXI....
旋转,修剪,多重包装,各种导出格式(json,xml,css,pixi.js,godot,phaser和cocos2d)。 邮编支持。 TinyPNG支持。 分页工具。 主页: : 网页版本: : Win,Mac,Linux的桌面版本: : Gulp模块: : ...
它是一个快速,舒适,轻巧和灵活的框架,可用于构建2D游戏和可播放的广告。安装通过npm安装: $ cd game$ npm install h5tiny 使用CDN: < script src =" ...
无胶特克斯包装机 免费的Gulp纹理包装器模块基于安装$ npm安装gulp-free-tex-packer基本用法let texturePacker = require ( 'gulp-free-tex-packer' ) ;gulp . task ( 'pack' , function ( ) { return gulp ....