如何在精灵套件中创建进度条? [英] 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屋！