精灵套件 - 如何显示精灵/纹理/图像的一半

I am working on a Sprite Kit project in which I need to display in some cases only half of an existing image.

我正在开发一个Sprite Kit项目,我需要在某些情况下只显示现有图像的一半。

I tried making the frame of the sprite smaller, but it just stretches the image.

我尝试使精灵的框架更小,但它只是拉伸图像。

Is there any possibility to use a mask or something in order to display only half of the sprite/image/texture?

是否有可能使用蒙版或其他东西才能只显示精灵/图像/纹理的一半?

1 个解决方案

#1

So, in order to show only half of the image, texture, sprite, someone would need to use a SKCropNode. The only sensible thing is to crop the sprite you need starting from half, not just cropping with a predefined size. This can be achieved by setting the mask node position.

因此,为了只显示图像,纹理,精灵的一半,有人需要使用SKCropNode。唯一明智的做法是从一半开始裁剪你需要的精灵,而不仅仅是用预定义的尺寸裁剪。这可以通过设置掩模节点位置来实现。

1) create a SkSpriteNode with that texture/image:

1)使用该纹理/图像创建一个SkSpriteNode:

// Obj-C
SKSpriteNode *skelet = [SKSpriteNode spriteNodeWithImageNamed:imageName];

// Swift
let skelet = SKSpriteNode(imageNamed: imageName)

2) create the SKCropNode:

2)创建SKCropNode:

// Obj-C
SKCropNode * cropNode = [SKCropNode node];

// Swift
let cropNode = SKCropNode()

3) create the mask

3)创建面具

// Obj-C
SKSpriteNode *mask = [SKSpriteNode spriteNodeWithColor:[UIColor blackColor] size:CGSizeMake(skelet.frame.size.width/2, skelet.frame.size.height)];

// Swift
let mask = SKSpriteNode(color: .black, size: CGSize(width: skelet.frame.size.width/2, height: skelet.frame.size.height))

** set the mask position to the half of the result you need (you need half of the skelet -> set the mask position to the half "of the half of the skelet")

**将面具位置设置为您需要的结果的一半(您需要一半的骨架 - >将面具位置设置为骨架的一半的一半“)

// Obj-C
mask.position = CGPointMake(skelet.frame.size.width/4, 0);

// Swift
mask.position = CGPoint(x: skelet.frame.size.width/4, y: 0)

The division by 4 is because you need the center of the mask to be not in the center of the skelet node, but moved to the half of a half of the skelet (reminder the mask node works with a default anchor point of 0.5 0.5 - so the zero point corresponds with the center of the skelet node).

除以4是因为您需要遮罩的中心不在骨架节点的中心,而是移动到骨架的一半半(提醒遮罩节点使用默认锚点0.5 0.5 - 所以零点对应于骨架节点的中心)。

4) add the needed elements to the crop node

4)将所需元素添加到裁剪节点

// Obj-C
[cropNode addChild:skelet];
[cropNode setMaskNode:mask];
[self addChild:cropNode];

// Swift
cropNode.addChild(skelet)
cropNode.maskNode = mask
self.addChild(cropNode)

#1