स्प्राइट किट में प्रगति पट्टी कैसे बनाएं?

Question

मैं स्प्राइट किट में अपनी प्रगति पट्टी बनाना चाहता हूं।
मुझे लगा कि मुझे छवियों की आवश्यकता होगी - एक पूरी तरह से खाली प्रगति पट्टी और भरे प्रगति पट्टी।
मेरे पास उन छवियां हैं, मैंने खाली एक को शीर्ष पर रखा है, वे नियमित रूप से SKSPriteNodes हैं, मुझे पता नहीं लगा कि मैं अपनी भरी हुई छवि को कैसे कट करूं जहां मुझे चाहिए?

मैं निश्चित बिंदु पर SKSpriteNode छवि को कैसे हटा सकता हूं? शायद बनावट?

Answer 1

मैं SKCropNode में देखने की अनुशंसा करता हूं। एक विज़ुअल सहायता के लिए कैसे SKCropNode काम करता है, इसे Apple Programming Guide में देखें। मैंने पूरे दस्तावेज़ को कई बार पढ़ा है और यह विशेष रूप से अच्छा पढ़ा जाता है।

SKCropNode मूल रूप से एक एसकेएनओड है जिसे आप अपने दृश्य में जोड़ते हैं, लेकिन इसके बच्चों को मास्क द्वारा फसल किया जा सकता है। यह मुखौटा SKCropNode की maskNode संपत्ति में सेट है। इस तरह, आपको केवल एक बनावट छवि की आवश्यकता है। मैं मास्क को स्थानांतरित या आकार बदलने के लिए कार्यक्षमता को लागू करने के लिए SKCropNode को उपclass करता हूं, ताकि आप आसानी से इसकी उपस्थिति को अपडेट कर सकें।

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

जब भी प्रगति हो तो आकार अपडेट करें।

आप देखेंगे छवि दोनों छोड़ दिया और सही, यह केवल सही परिवर्तन anchorPoint को फैलाने छवि बाएँ संरेखित करने के लिए बनाने के लिए करने के लिए चौड़ाई में वृद्धि होगी:

sprite.anchorPoint = CGPointMake(0.0, 0.5); 

सब है। इसे अच्छी तरह से देखने के लिए इसके चारों ओर एक फ्रेम स्प्राइट बनाएं।

Answer 3

कोई छवि/बनावट "काटने" नहीं है।

कोकोस की पेशकश करने का एक विकल्प कुछ बनावट बनाने और स्वास्थ्य के आधार पर उन्हें अपने नोड में बदलने के लिए एक विकल्प है। मैंने एक ऐसा गेम किया जहां स्वास्थ्य बार ने हर 10 अंक बनावट बदल दी (सीमा 0-100 थी)। हालांकि कुछ परीक्षण और त्रुटि के बाद, मैंने अभी तक कोकोस को पहले से सुझाए गए कार्यों को समाप्त कर दिया।

Answer 4

HealthBarNode मान लिया जाये कि एक सार्वजनिक संपत्ति health कि 0.0 और 1.0 और जिसका उन्हें पैतृक संपत्ति texture चौड़ाई _textureWidth (एक निजी संपत्ति) के पूरे रंग बार छवि से उत्पन्न होता है के बीच भिन्न होता है के साथ SKSpriteNode का एक उपवर्ग है, तो आप कुछ इस तरह कर सकता है:

- (void)setHealth:(CGFloat)fraction 
{ 
    self.health = MIN(MAX(0.0, fraction), 1.0); // clamp health between 0.0 and 1.0 
    SKTexture *textureFrac = [SKTexture textureWithRect:CGRectMake(0, 0, fraction, 1.0) inTexture:self.texture]; 
// check docs to understand why you can pass in self.texture as the last parameter every time 

    self.size = CGSizeMake(fraction * _textureWidth, self.size.height); 
    self.texture = textureFrac; 
} 

एक नया मान स्वास्थ्य बार का कारण होगा करने के लिए health स्थापना (मुख्य दृश्य के लिए एक बच्चे के रूप में जोड़ा, कहते हैं) ठीक से काटा करने के लिए।

Answer 5

मैंने इस सटीक परिदृश्य से निपटने के लिए एक छोटी पुस्तकालय बनाई है! यहां स्प्राइटबार है: https://github.com/henryeverett/SpriteBar

Answer 6

मैंने इसे ऐसा किया, और यह पूरी तरह से काम करता है।

baseBar = [SKSpriteNode spriteNodeWithColor:[UIColor redColor] size:CGSizeMake(CGRectGetMidX(self.frame)-40, self.frame.size.height/10)]; 
//The following will make the health bar to reduce from right to left 
//Change it to (1,0.5) if you want to have it the other way 
//But you'd have to play with the positioning as well 
[baseBar setAnchorPoint:CGPointMake(0, 0.5)]; 
CGFloat goodWidth, goodHeight; 
goodHeight =self.frame.size.height-(baseBar.frame.size.height*2/3); 
goodWidth =self.frame.size.width-(10 +baseBar.frame.size.width); 
[baseBar setPosition:CGPointMake(goodWidth, goodHeight)]; 
[self addChild:baseBar]; 

मैं तो एक एक SKShapeNode साथ बार, के लिए 'फ्रेम' कहा, भरण रंग (clearcolour) के बिना, और एक स्ट्रोक का रंग::

//The following was so useful 
SKShapeNode *edges = [SKShapeNode shapeNodeWithRect:baseBar.frame]; 
edges.fillColor = [UIColor clearColor]; 
edges.strokeColor = [UIColor blackColor]; 
[self addChild:edges]; 

तो सबसे पहले, मैं एक SKSpriteNode घोषित

जब मैं स्वास्थ्य को कम करना चाहता था, मैंने किया था निम्नलिखित:

if (playerHealthRatio>0) { 
     playerHealthRatio -= 1; 
     CGFloat ratio = playerHealthRatio/OriginalPlayerHealth; 
     CGFloat newWidth =baseBar.frame.size.width*ratio; 
     NSLog(@"Ratio: %f newwidth: %f",ratio,newWidth); 
     [baseBar runAction:[SKAction resizeToWidth:newWidth duration:0.5]]; 
    }else{ 
//  NSLog(@"Game over"); 
    } 

, सरल, स्वच्छ और नहीं ग बिल्कुल कम

Answer 7

वह यह है कि तेजी से में मेरे ProgressBar:

import Foundation 

import SpriteKit 


class IMProgressBar : SKNode{ 

var emptySprite : SKSpriteNode? = nil 
var progressBar : SKCropNode 
init(emptyImageName: String!,filledImageName : String) 
{ 
    progressBar = SKCropNode() 
    super.init() 
    let filledImage = SKSpriteNode(imageNamed: filledImageName) 
    progressBar.addChild(filledImage) 
    progressBar.maskNode = SKSpriteNode(color: UIColor.whiteColor(), 
     size: CGSize(width: filledImage.size.width * 2, height: filledImage.size.height * 2)) 

    progressBar.maskNode?.position = CGPoint(x: -filledImage.size.width/2,y: -filledImage.size.height/2) 
    progressBar.zPosition = 0.1 
    self.addChild(progressBar) 

    if emptyImageName != nil{ 
     emptySprite = SKSpriteNode.init(imageNamed: emptyImageName) 
     self.addChild(emptySprite!) 
    } 
} 
func setXProgress(xProgress : CGFloat){ 
    var value = xProgress 
    if xProgress < 0{ 
     value = 0 
    } 
    if xProgress > 1 { 
     value = 1 
    } 
    progressBar.maskNode?.xScale = value 
} 

func setYProgress(yProgress : CGFloat){ 
    var value = yProgress 
    if yProgress < 0{ 
     value = 0 
    } 
    if yProgress > 1 { 
     value = 1 
    } 
    progressBar.maskNode?.yScale = value 
} 
required init?(coder aDecoder: NSCoder) { 
    fatalError("init(coder:) has not been implemented") 
} 

}

// उपयोग कैसे करें:

let progressBar = IMProgressBar(emptyImageName: "emptyImage",filledImageName: "filledImage") 

या

let progressBar = IMProgressBar(emptyImageName: nil,filledImageName: "filledImage") 

और किसी भी करने के लिए इस Progressbar जोड़ने SKNode:

self.addChild(progressBar) 

// यह सब कुछ है।