美文网首页
Pixi.js 基础知识(三)

Pixi.js 基础知识(三)

作者: 已注销null | 来源:发表于2016-11-09 21:05 被阅读0次

参考:
https://github.com/kittykatattack/learningPixi

将小精灵放置在特定的位置

function setup() { 
  var cat = new Sprite(resources["images/cat.png"].texture); 

  // 改变小精灵对象 cat 的 x,y 坐标
  cat.x = 96; 
  cat.y = 96; 

  stage.addChild(cat); 
  renderer.render(stage);
}

值得注意的是,小精灵的 x,y 两个坐标指的是图片左上角的点的坐标,而不是图片中心的坐标

拉伸小精灵

function setup() { 
  var cat = new Sprite(resources["images/cat.png"].texture); 

  // 改变小精灵对象 cat 的 x,y 坐标
  cat.x = 96; 
  cat.y = 96; 

  // 改变小精灵的宽高
  cat.width = 100;
  cat.height = 200;

  stage.addChild(cat); 
  renderer.render(stage);
}

另一种方法

  sprite.scale.set(0.5, 0.5) // 宽高变为原来的一半

旋转小精灵

  cat.rotation = 0.5 // 以正上方为起点,图片左上角为旋转中心,顺时针转动 0.5 弧度

设置旋转中心为图片中心,此时小精灵的 x,y 坐标也变为图片的中心的坐标

  sprite.anchor.set(x, y);

相关文章

网友评论

      本文标题:Pixi.js 基础知识(三)

      本文链接:https://www.haomeiwen.com/subject/uzstpttx.html