Pixi.js 基础知识(三)

参考:
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 基础知识(三))