SpriteKit에서 Particle을 쉽게 소개해 보세요.

UIKit을 기반으로 만든 앱인 상태를 달성했을 때,
간단한 애니메이션을 넣으면 좋겠다고 들었는지 확인하면 파티클에서
애니메이션이었습니다.

어쩔 수 없이 실장해 보았는데, 의외로 애니메이션의 작성도 도입도 간단했기 때문에
기억을 포함해 써 두기로 했습니다.

준비



파티클 만들기



이하의 기사를 참고로 했습니다.
【SpriteKit】폭발이나 눈 등의 표현을 할 수 있는 「Particle File」에 대해서

이번에는 적당히 탭시킨 곳에 애니메이션을 넣어 보려고 생각하기 때문에,
우선 Spark를 선택하여 작성.

・Particle
Birthrate가 5,000은 조금 너무 많기 때문에, 적당히 500 정도.
탭할 때 연주하고 싶지만 그렇게 오랫동안 애니메이션하고 싶지 않기 때문에
Maximum을 50 정도로 하고 즉시 생성이 종료되도록 조정합니다.

· PositionRange
따로 X 좌표에 랜덤성은 필요 없기 때문에 0으로 변경해 둡니다.

그 외는 적당하게, 기사를 참고로 여러가지 보아 보면 재미 있다고 생각합니다.
이렇게 간단하게, Xcode로부터 Particle이 작성할 수 있게 되어 있다고는…

구현



Framework 추가



당연하지만 "SpriteKit.framework"를 추가합시다.

SKView 추가



여기에서의 구현에는, 이하의 기사가 참고가 됩니다. Swift입니다.
아직 iOS에서 풍부한 연출에 피폐하고 있는 거야?

적절하게 UIView를 추가하고 클래스를 "SKView"로 변경하십시오.


탭한 포인트에서 파티클 실행



본래라면 SKScene의 서브 클래스를 작성해, 그쪽에 전부 처리를 맡깁니다만
우선 전부, UIViewController에 써 버립니다.

방금 추가한 SKView 객체와 SKScene 멤버 변수를 추가합니다.
#import "ViewController.h"

@import SpriteKit;
@interface ViewController ()
@property (strong, nonatomic) SKScene *sparkScene;
@property (weak, nonatomic) IBOutlet SKView *skView;

@end

SKView는 연출에 사용할 뿐이므로 이벤트 등을 투과시킵니다.
- (void)viewDidLoad {
    [super viewDidLoad];
    // タップイベントを透過させます
    self.skView.userInteractionEnabled = NO;
    self.skView.allowsTransparency = YES;

    self.sparkScene = [SKScene sceneWithSize:self.view.bounds.size];
    [self.sparkScene setBackgroundColor:[UIColor clearColor]];
    [self.skView presentScene:self.sparkScene];
}

적당히 탭한 곳에서 파티클이 실행되도록 구현합니다.
UIView의 좌표는 좌상을 (0,0)로 하고 있습니다만, SKView에서는 좌하가 (0,0)이 되어 있습니다.
따라서 Y 좌표를 반전시켜야 합니다.
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    for (UITouch *touch in touches) {
        CGPoint location = [touch locationInView:self.view];
        // 
        [self sparkOnTouchPoint:CGPointMake(location.x, self.view.bounds.size.height - location.y)];
    }
}

- (void)sparkOnTouchPoint:(CGPoint)point {
    NSString *firePath = [[NSBundle mainBundle] pathForResource:@"MyParticle" ofType:@"sks"];
    SKEmitterNode *spark = [NSKeyedUnarchiver unarchiveObjectWithFile:firePath];

    spark.position = point;

    SKAction *fadeOut = [SKAction fadeOutWithDuration:.5f];
    SKAction *remove = [SKAction removeFromParent];
    SKAction *sequence = [SKAction sequence:@[fadeOut, remove]];

    [self.sparkScene addChild:spark];

    [spark runAction:sequence];
}

이제 화면을 적절하게 탭하여 애니메이션이 실행되는 것을 알 수 있습니다.
배경이 흰색으로 이해하기 어렵다면 UIViewController의 배경을 검정으로 변경해 보면 알기 쉽다고.

좋은 웹페이지 즐겨찾기