creator的sprite不规则的图片切割

Creator 2.x
#1

粘贴的图像415×581 27 KB
粘贴的图像393×595 44.9 KB
粘贴的图像428×587 30.1 KB
粘贴的图像375×641 59.6 KB

3赞
[ 物理Physics + mask ] 实现2D动态阴影视野
#2

问下，这个是怎么切的

#3

请问这个怎么实现的？可以给你demo吗

#4

同问，实现方法是什么？

#5

自己写的一个截取不规则图片的mask，有需要的可参考下
/**

  • 遮罩组件
  • 根据顶点生成mask,处理需要的图形
  • 2018-11-12
    */
    const {
    ccclass,
    property
    } = cc._decorator;

@ccclass
export default class CutMask extends FLBehavior {
//mask组件
mask: cc.Mask = null;
//重新注册mask事件
onEvent() {
this.mask.node.on(cc.Node.EventType.POSITION_CHANGED, this.mask._updateGraphics, this.mask);
this.mask.node.on(cc.Node.EventType.ROTATION_CHANGED, this.mask._updateGraphics, this.mask);
this.mask.node.on(cc.Node.EventType.SCALE_CHANGED, this.mask._updateGraphics, this.mask);
this.mask.node.on(cc.Node.EventType.SIZE_CHANGED, this.mask._updateGraphics, this.mask);
this.mask.node.on(cc.Node.EventType.ANCHOR_CHANGED, this.mask._updateGraphics, this.mask);
}

//取消mask事件
offEvent() {
    this.mask.node.on(cc.Node.EventType.POSITION_CHANGED, this.mask._updateGraphics, this.mask);
    this.mask.node.on(cc.Node.EventType.ROTATION_CHANGED, this.mask._updateGraphics, this.mask);
    this.mask.node.on(cc.Node.EventType.SCALE_CHANGED, this.mask._updateGraphics, this.mask);
    this.mask.node.on(cc.Node.EventType.SIZE_CHANGED, this.mask._updateGraphics, this.mask);
    this.mask.node.on(cc.Node.EventType.ANCHOR_CHANGED, this.mask._updateGraphics, this.mask);
}

/** onLoad结束的回调 */
onLoaded() {
    this.mask = this.node.getComponent(cc.Mask);
    this.initMask();
}

initMask() {
    if (!this.mask._graphics) {
        this.mask._createGraphics();
    }
}

/**进行切割 */
cutFn(localVertexs) {
    //_updateGraphics 每次重写这个函数需要将绑定的事件取消掉并重新注册
    this.offEvent();
    let potArr = localVertexs;
    // let potArr = GameDatas.vertexs;
    this.mask._updateGraphics = () => {
        var graphics: cc.Graphics = this.mask._graphics;
        graphics.clear(false);
        graphics.lineWidth = 10;
        graphics.fillColor.fromHEX('#ff0000');
        graphics.moveTo(potArr[0].x, potArr[0].y);
        for (let i = 1; i < potArr.length; i++) {
            const p = potArr[i];
            graphics.lineTo(p.x, p.y);
        }
        graphics.close();
        graphics.stroke();
        graphics.fill();
    }
    this.onEvent();
    this.mask._updateGraphics();
}

}

5赞
#6

你好！这个mask事件是必须要有的吗？

#7

如果你mask的节点要做放大缩小等动作，那就一定要重新注册一下，不然出bug 你试下就知道了

#8

我只做切图，想水果忍者那样，但对你的代码一些语法不太理解

#9

你好，你的_updateGraphics方法在哪里？

#10

请问下 楼主 解决了吗 可以发代码我看看不

#11

1234

#12

亲，这个有没有demo啊
真的现在项目需要…谢谢楼主啊，楼主好人一生平安…

#13

请问你有解决吗，我现在也是项目急需 ，又不知道怎么解决