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
    }


  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值