如何在精灵工具包中创建进度条？ [英] How to create progress bar in sprite kit?

问题描述

我想在Sprite Kit中创建自己的进度条。

我想我需要图像 - 一个完全空的进度条和填充的进度条。

我有那些图片，我把一个填充在空的上面，它们是常规的 SKSPriteNodes 现在我无法弄清楚如何在我需要的地方剪切填充的图像？

I want to create my own progress bar in Sprite Kit.
I figured I will need to images - one fully empty progress bar and filled progress bar.
I have those images, I put filled one on top of empty one, they are regular SKSPriteNodes now I can't figure out how do I cut my filled image where I need?

如何在特定点剪切SKSpriteNode图像？也许纹理？

How do I cut SKSpriteNode image at certain point? Maybe texture?

推荐答案

我建议你查看 SKCropNode 。对于视觉辅助， SKCropNode 如何工作，请在 Apple编程指南。我已多次阅读整个文档，这是一个特别好的阅读。

I would recommend looking into SKCropNode. For a visual aid how SKCropNode works, look it up in the Apple Programming Guide. I have read through the entire document multiple times and it is a particularly good read.

SKCropNode 基本上是一个SKNode你添加到你的场景，但它的孩子可以通过面具裁剪。此掩码在SKCropNode的 maskNode 属性中设置。这样，您只需要一个纹理图像。我会继承SKCropNode以实现移动或调整蒙版大小的功能，因此您可以轻松更新其外观。

SKCropNode is basically an SKNode which you add to your scene, but its children can be cropped by a mask. This mask is set in the maskNode property of the SKCropNode. In this way, you only need one texture image. I would subclass SKCropNode to implement functionality to move or resize the mask, so you can easily update its appearance.

@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];

注意：此代码不会移动掩码（因此精灵将在任一侧被裁剪）但我相信你明白了。

Note: this code doesn't move the mask (so the sprite will be cropped on either side) but I'm sure you get the idea.

这篇关于如何在精灵工具包中创建进度条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！