H5 2D渲染引擎—Pixi.js 精灵的位置、大小、旋转、移动
根据 H5 2D渲染引擎—Pixi.js 渲染器、舞台和精灵的创建,创建精灵(不做其他设置)并添加到渲染器后,精灵默认的位置是在渲染器的左上角(x=0,y=0),大小为原图片大小。
定位
可以通过改变精灵的x、y的属性值来调整它的位置。
sun.x = 200;
sun.y = 100;
或者
sun.position.set(200, 100);
效果:
大小
可以通过设置精灵的width、height或者通过精灵的scale属性设置它的大小。
sun.width = 200;
sun.height = 200;
效果:
sun.scale.x= 0.3;
sun.scale.y = 0.3;
//简写
//sun.scale.set(0.3, 0.3);
效果:
旋转
sun.rotation = 0.8;
效果:
中心位置
可以理解为精灵的中心点,设置后,精灵的宽高值、位置以及旋转的起点均以其中心点为参照。
sun.position.set(200, 100);
sun.anchor.x = 0.5;
sun.anchor.y = 0.5;
//简写
//sun.anchor.set(0.5);
效果:
移动
依赖循环函数 requestAnimationFrame。在循环函数里的代码每秒会更新60次。(application渲染器也可以使用 app.ticker 函数)
requestAnimationFrame(animate);function animate() {if(sun.x < 550){sun.x += 1;}requestAnimationFrame(animate);}
或者
app.ticker.add(function(){if(sun.x < 550) {sun.x += 1;}
})
为了能更方便的运用到项目中,可以使用精灵的 速度属性。
var app = new PIXI.Application(800, 600, {backgroundColor: 0x92edfb, transparent: false});document.body.appendChild(app.view);var sun = PIXI.Sprite.fromImage('img/sun.ico');sun.y = 40;sun.vx = 0;sun.vy = 0;app.stage.addChild(sun);app.ticker.add(function () {if(sun.x < 700 && sun.y < 600) {play()}});function play() {sun.vx = 1;sun.vy = 0.5;sun.x += sun.vx;sun.y += sun.vy}
H5 2D渲染引擎—Pixi.js 精灵的位置、大小、旋转、移动相关推荐
- 风一样的HTML5 2D渲染引擎Pixi.js——真正意义的跨平台开发工具
摘要:Pixi.js是一款超快的开源HTML5 2D渲染引擎,由于其使用了带有Canvas回调功能的WebGL,开发者不需要了解WebGL便可以感受到硬件加速的强大力量.Pixi.js作为JavaSc ...
- 前端动画渲染引擎pixi.js系列(5)Text文本和Graphics画笔工具
一.文本 文本对象PIXI.Text是指创建一行或多行文字,可以使用'\n'来实现换行,文本对象PIXI.Text的继承关系是: PIXI.Text->PIXI.Sprite 文本PIXI.Te ...
- PixiJS - 基于 WebGL 的超快 HTML5 2D 渲染引擎
Pixi.js 是一个开源的HTML5 2D 渲染引擎,使用 WebGL 实现,不支持的浏览器会自动降低到 Canvas 实现.PixiJS 的目标是提供一个快速且轻量级的2D库,并能兼容所有设备.此 ...
- CutJS – 用于 HTML5 游戏开发的 2D 渲染引擎
CutJS 是轻量级的,快速的,基于 Canvas 开发的 HTML5 2D 渲染引擎,可以用于游戏开发.它是开源的,跨平台的,与现代的浏览器和移动设备兼容.CutJS 提供了一个类似 DOM 树的 ...
- 浏览器内核-渲染引擎、js引擎
一个完整的浏览器包含浏览器内核和浏览器的外壳(shell).浏览器核心--内核分成两部分:渲染引擎和js引擎.由于js引擎越来越独立,内核就倾向于只指渲染引擎. 1 浏览器组成结构 浏览器一般由七个模 ...
- 浏览器渲染引擎和JS引擎简介
一.定义 浏览器内核分成两部分:渲染引擎和JS引擎. 由于JS引擎越来越独立,浏览器内核就倾向于单指渲染引擎. 渲染引擎:是一种对解析HTML.CSS等进行解析并将其显示在页面上的工具. JS引擎:读 ...
- 【前端】浅谈浏览器内核:渲染引擎、JS引擎
浏览器内核是什么? 简而言之,浏览器内核就是把我们编写的代码转换为页面的中控件. 虽然现在大家谈起浏览器内核时,多指代渲染引擎(Rendering engine 或 layout engineer). ...
- webGL、webGPU、封装、渲染引擎 three.js、游戏引擎,定位是游戏开发,在前面的渲染引擎基础上,还提供了骨骼动画、物理引擎、AI、GUI 等功能,以及可视化编辑器来设计关卡,支撑大型游戏
https://zhuanlan.zhihu.com/p/162878354 如何选择 WebGL 框架和引擎? 知道得越多,不知道的就更多了 数据可视化Sugar-百度智能云 cloud.ba ...
- 前端渲染引擎doT.js解析
背景 前端渲染有很多框架,而且形式和内容在不断发生变化.这些演变的背后是设计模式的变化,而归根到底是功能划分逻辑的演变:MVC->MVP->MVVM(忽略最早混在一起的写法,那不称为模式) ...
最新文章
- 计算机网络实验三张芳,【喜讯】实验室于俊清老师获得2009年华中科技大学青年教师教学竞赛一等奖...
- 运行hadoop自带的wordcount例子
- Kali Linux安全渗透教程1.1Linux安全渗透简介
- js中怎么为同级元素添加点击事件
- jvisualvm远程监控Tomcat
- ”盒模型“之如何防止边框和内边距把元素撑开
- vue 项目白屏解决方案
- 近期状态几点简单思考
- 深入理解java虚拟机_深入理解Java类加载
- python资产管理系统_Python [5] IT资产管理(上)
- IIS 6.0 SSL证书安装
- msm8953抓取audio kernel dsp log
- 婴幼儿体重在线计算机,宝宝身高体重标准计算器
- 钉钉微应用调用支付宝JSAPI进行支付
- 在阿里 AI Lab 做 NLP 高级算法专家是一种什么样的体验?
- Ubuntu16.04+Titan Xp+Tensorflow1.3+Cuda8.0+CuDNN6
- Tracup|项目经理必备的极客式项目管理工具
- Lr CC Classic 2018 for Mac
- 怎么学习嵌入式技术开发
- 《BREW进阶与精通——3G移动增值业务的运营、定制与开发》连载之36---支持BREW的手机