如何在精灵工具包中创建进度条？

Question

我想在Sprite Kit中创建自己的进度条.
我想我需要图像 - 一个完全空的进度条和填充的进度条.
我有那些图像,我把它们放在空的一个上面,它们是常规的,SKSPriteNodes现在我无法弄清楚如何在我需要的地方剪切我填充的图像？

如何在特定点剪切SKSpriteNode图像？也许质地？

Answer 1

我建议调查SKCropNode.有关可视化帮助的方法SKCropNode,请在Apple编程指南中查找.我已多次阅读整个文档,这是一个特别好的阅读.

SKCropNode基本上是您添加到场景中的SKNode,但其子项可以通过蒙版进行裁剪.此掩码maskNode在SKCropNode 的属性中设置.这样,您只需要一个纹理图像.我会将SKCropNode子类化为实现移动或调整蒙版大小的功能,因此您可以轻松更新其外观.

@interface CustomProgressBar : SKCropNode

/// Set to a value between 0.0 and 1.0.
- (void) setProgress:(CGFloat) progress;

@end

@implementation CustomProgressBar

- (id)init {
  if (self = [super init]) {
    self.maskNode = [SKSpriteNode spriteNodeWithColor:[SKColor whiteColor] size:CGSizeMake(300,20)];
    SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed:@"progressBarImage"];
    [self addChild:sprite];
  }
  return self;
}

- (void) setProgress:(CGFloat) progress {
  self.maskNode.xScale = progress;
}

@end

在你的场景中:

#import "CustomProgressBar.h"

// ...

CustomProgressBar * progressBar = [CustomProgressBar new];
[self addChild:progressBar];

// ...

[progressBar setProgress:0.3];

// ...

[progressBar setProgress:0.7];

注意:此代码不会移动蒙版(因此精灵将在任何一侧被裁剪)但我相信你明白了.

Answer 2

很简单:你需要一个帧图像(可选)和一个"条形"图像.条形图像是单一的纯色,高达您需要的宽度和1或2像素宽.作为栏的SKShapeNode也可以.

只需更改SKSpriteNode的大小属性即可制作条形图和动画.例如,要使条形表示介于0和100之间的进度,只需执行以下操作:

sprite.size = CGSizeMake(progressValue, sprite.size.height);

每当progressValue更改时更新大小.

您会注意到图像的宽度会向左和向右增加,使其仅向右拉伸,将anchorPoint更改为左对齐图像:

sprite.anchorPoint = CGPointMake(0.0, 0.5);

就这些.在它周围画一个框架精灵,使它看起来更好.