2013-10-27 30 views
33

我需要给我的应用程序添加一个雨滴效果,我一直在寻找实际执行这个想法的方法。如何将粒子效果添加到不是使用iOS 7的游戏的iOS应用程序SpriteKit Particle?

我尝试以下这种方法的CALayer教程:Link但我不能肯定这是否是最好的办法,考虑到新的iOS 7 SpriteKit粒子发射器可在Xcode 5

我已经创建了.sks文件它在我的Hierarchy中,但我仍然无法将它添加到我的故事板/项目中。

就这么说,我到底如何在视图中添加SpriteKit Particle(sks)?我并不熟悉SpriteKit框架中的场景,图层等,因为我不是游戏开发人员。 我最需要的细节和示例代码可能的,这样我可以想出解决办法,请

更新: 我跟随同胞的会员在回答中提供的方向:AyatollahAndy,请参见下面他的回答。尽管我可以在我的view中显示SKScene,但是当收到任何触摸事件时,该应用会崩溃。我得到如下:enter image description here

感谢

+0

我很高兴听到在我的应用程序中没有SpriteKit的“整个软件包”就可以实现这一点,正如我所说 - >我该如何将所述的粒子添加到普通视图? O已经生成了'.sks'文件。 – vzm

+3

嗯,是的,你必须链接SpriteKit.framework意思是“整个包”。这并不重要,因为这个库是内置在iOS中的,并不会增加应用程序的大小。尽管如此,为了渲染粒子效果,您必须创建一个带有SKScene的SKView并将粒子效果放在它上面。除非其他所有视图都由Sprite Kit节点组成,否则所有其他视图都在顶部或底部。 – LearnCocos2D

+0

为什么不只是添加一个“部分透明的雨滴覆盖”,并有一个[UIView animationXXX:]应用于它? – dklt

回答

49

在您的UIView中创建一个SKScene以添加SKEmitterNode粒子效果。这样做的

方式一:

1.In故事板(或编程,如果你喜欢)对现有的View的顶部添加视图对象,并将其调整到您的需要。
2.Change类新的视图来SKView
3.In您的视图控制器的.h文件中创建为SKView属性:

@property IBOutlet SKView *skView; 

4.Link的SKView你的故事板到skView财产。
5.创建一个新类,继承SKScene。 MyScene.h看起来像:下面

#import <SpriteKit/SpriteKit.h> 
@interface MyScene : SKScene 
@end 

MyScene.m包含的代码来创建一个粒子效果,随时随地的SKView感动。

#import "MyScene.h" 

@implementation MyScene 

-(id)initWithSize:(CGSize)size {  
    if (self = [super initWithSize:size]) { 
     /* Setup your scene here */ 

     self.backgroundColor = [SKColor colorWithRed:0.15 green:0.15 blue:0.3 alpha:1.0]; 
     SKLabelNode *myLabel = [SKLabelNode labelNodeWithFontNamed:@"Chalkduster"]; 
     myLabel.text = @"Hello, World!"; 
     myLabel.fontSize = 30; 
     myLabel.position = CGPointMake(CGRectGetMidX(self.frame), 
            CGRectGetMidY(self.frame)); 

     [self addChild:myLabel]; 
    } 
    return self; 
} 

//particle explosion - uses MyParticle.sks 
- (SKEmitterNode *) newExplosion: (float)posX : (float) posy 
{ 
    SKEmitterNode *emitter = [NSKeyedUnarchiver unarchiveObjectWithFile:[[NSBundle mainBundle] pathForResource:@"MyParticle" ofType:@"sks"]]; 
    emitter.position = CGPointMake(posX,posy); 
    emitter.name = @"explosion"; 
    emitter.targetNode = self.scene; 
    emitter.numParticlesToEmit = 1000; 
    emitter.zPosition=2.0; 
    return emitter; 
} 

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { 
    /* Called when a touch begins */ 

    for (UITouch *touch in touches) { 
     CGPoint location = [touch locationInNode:self]; 
     //add effect at touch location 
     [self addChild:[self newExplosion:location.x : location.y]]; 
    } 
} 

-(void)update:(CFTimeInterval)currentTime { 
    /* Called before each frame is rendered */ 
} 

@end 

6。在您的主视图控制器,包括场景类:

#import "MyScene.h" 

并将代码添加到viewDidLoad中初始化的SKView:你的主要UIView

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 

    // Configure the SKView 
    SKView * skView = _skView; 
    skView.showsFPS = YES; 
    skView.showsNodeCount = YES; 

    // Create and configure the scene. 
    SKScene * scene = [MyScene sceneWithSize:skView.bounds.size]; 
    scene.scaleMode = SKSceneScaleModeAspectFill; 

    // Present the scene. 
    [skView presentScene:scene]; 
} 

你应该再有一个工作SKScene

+0

我已经尝试过了,尽管应用最初在我的视图中以“Hello World”场景启动时运行良好,当我“触摸”应用崩溃并引发错误时,请参阅更新的问题及详细信息。 – vzm

+0

http://stackoverflow.com/questions/19780215/skcolor-clearcolor-returning-a-black-color-instead – vzm

+1

如何摆脱黑色背景?我做了skView&scene backgroundColor属性clearColor,但是我仍然得到黑色背景。 – marciokoko

-1

你不能在UIView直接使用粒子效果。

SKEmitterNode必须位于用节点场景(SKScene)定义的节点树中。场景节点运行一个动画循环,用于显示节点树的内容。 UIView是静态的,不适用于它。

但是,您可能会在UIView中创建一个场景,但我从未尝试过这样做。

+0

你可以非常容易地在一个普通的UIView中添加一个粒子视图!请看下面的答案 – Fattie

7

您可以在您的UIKit层次结构中添加SKView作为子视图。像下面这样的函数可以工作,允许你创建一个UIImageView作为子视图,然后你可以将它添加到你的主视图中。请务必链接到SpriteKit。

UIImageView *NewEffectUIImageViewWithFrame(CGRect frame) 
{ 
    UIImageView *tempView = [[UIImageView alloc] initWithFrame:frame]; 

    SKView *skView = [[SKView alloc] initWithFrame:CGRectMake(0.0, 0.0, frame.size.width, frame.size.height)]; 
    [tempView addSubview:skView]; 

    SKScene *skScene = [SKScene sceneWithSize:skView.frame.size]; 
    skScene.scaleMode = SKSceneScaleModeAspectFill; 
    skScene.backgroundColor = [UIColor clearColor]; 

    SKEmitterNode *emitter = [NSKeyedUnarchiver unarchiveObjectWithFile:[[NSBundle mainBundle] pathForResource:@"SparkParticle" ofType:@"sks"]]; 
    emitter.position = CGPointMake(frame.size.width*0.5,0.0); 

    [skScene addChild:emitter]; 
    [skView presentScene:skScene]; 

    return tempView; 
} 

最后,如果你需要的是一个发射器,它可以更容易地创建一个CAEmitterLayer并补充说,作为一个子层到您的UIView来代替。当然,这意味着你必须以编程方式创建CAEmitterLayer,并且不能使用酷酷的Xcode粒子编辑器...

+1

imageview的背景是黑色的。有没有办法让它清晰明了,以便它可以完美地与superview合并? – xiaowoo

3

实际上,有一种方法可以在没有SpriteKit的情况下添加粒子 - CoreAnimation的CAEmitterCells。

这样就可以轻松地在UIView中添加粒子。如果你想玩弄参数并轻松获取代码,请获取这个应用程序(Particle X)。

它也支持SpriteKit,所以如果你想在游戏中玩耍或设计粒子并立即得到它的代码,这个应用程序是解决方案。

ps。如果你没有注意到它,我是应用程序的开发者 - 在设计应用程序和游戏时自己使用它。 :)

+0

这是超越光滑.......... – Fattie

16

注意!

对于2017年底的XCode9,这变得更加容易。他们做了它,你可以只添加一个SKView在故事板,然后选择.sks文件

enter image description here

然而,这似乎不是真正的时刻工作,所以现在只是进行如下!


2017年

请注意上面的答案是非常不合时宜的。

现在很容易做到这一点。

您使用Apple内置的所见即所得的粒子编辑器。

有任何普通的UIView任何你想要的:

@IBOutlet weak var teste: UIView! // totally ordinary UIView 

在Xcode中,单击创建新的

SpriteKit粒子文件

这将是一个.sks文件。

(不要选择“SceneKit Particle System File”。选择“SpriteKit Particle File”。)

单击.sks文件。请注意右侧上的许多控件。

enter image description here

颗粒将被实际移动,即它是一个 “活预览”。

任何可以用粒子完成的事情,你都可以做到。这就像在游戏引擎中使用粒子,除了性能好于180亿倍。

下面的代码板将会把你的新的粒子系统,里面,普通的UIView“阿泰斯特”:

import SpriteKit ... 


let sk: SKView = SKView() 
sk.frame = teste.bounds 
sk.backgroundColor = .clear 
teste.addSubview(sk) 

let scene: SKScene = SKScene(size: teste.bounds.size) 
scene.scaleMode = .aspectFit 
scene.backgroundColor = .clear 

let en = SKEmitterNode(fileNamed: "SimpleSpark.sks") 
en?.position = sk.center 

scene.addChild(en!) 
sk.presentScene(scene) 

一下添加到您想要的任何东西。

如果你想要一个闪闪发光的按钮,将其添加到按钮。

如果你想整个屏幕淋浴彩虹,添加任何视图大。

就是这么简单。


说你想只是一个爆产生火花,从而结束的

在可视化编辑器简单地设定最大说50 ......

enter image description here

如果你这样做,似乎它结束时,你可以只摆脱SKScene的。

... 
    scene.addChild(en!) 
    sk.presentScene(scene) 

    delay(1.5) { sk.removeFromSuperview() } 

在最后添加一行代码似乎清理了一切。


顺便说一句,如果你想为粒子系统新奇的想法,一个伟大的想法是单击以统一“资源商店”,其中各种颗粒艺术家买入和卖出的粒子系统。他们的工作会给你很棒的想法。

enter image description here

只需点击右侧列表中的 “颗粒”;观看视频。 (例如this dude's - link真的很有创意。)

+1

太棒了。谢谢!! – RichS

+0

你刚刚度过了我的一天。完美的作品! – Prateekro

+0

是绝对是现代的方法@Prateekro - 太棒了!很简单! – Fattie

2

这里的方法完全不同。我的哥们给了我这个很酷的方式去。使用CAEmitterCell。一切代码!看起来你需要一个spark.png图片。

extension UIView { 
    final public func ignite() { 
     let emitter = CAEmitterLayer() 
     emitter.frame = self.bounds 
     emitter.renderMode = kCAEmitterLayerAdditive 
     emitter.emitterPosition = self.center 
     self.layer.addSublayer(emitter) 

     let cell = CAEmitterCell() 
     let bundle = Bundle.init(for: UIColor.self) 
     let image = UIImage(named: "spark", in: bundle, compatibleWith: traitCollection) 

     cell.contents = image?.cgImage 
     cell.birthRate = 1500 
     cell.lifetime = 5.0 
     cell.color = UIColor(red: 1.0, green: 0.5, blue: 0.1, alpha: 1).cgColor 
     cell.alphaSpeed = -0.4 
     cell.velocity = 50 
     cell.velocityRange = 250 
     cell.emissionRange = CGFloat.pi * 2.0 

     emitter.emitterCells = [cell] 
    } 
} 

享受。

相关问题