スタッフブログ

STAFF BLOG

アプリ開発日誌

2016.08.02

【Swift】Particleでおしゃれな演出を作ってみよう

こんにちは、iOS開発担当の松川です。

夏の風物詩といえば「花火」などが挙げられますが、先日行われた隅田川花火大会はすごかったですね〜!

もうすぐリオ五輪が開催されるということで、出場する選手達をイメージした花火の演出もありました。

リオ五輪が待ち遠しいです!

さて、今回紹介するのは演出繋がりという事でParticleについて書きたいと思います。

 

Particleとは?

パーティクル・システム: particle system)はコンピュータグラフィック技術のひとつで、従来型のレンダリング技術では再現が難しい、ある種の曖昧さを持った事物をシミュレートするために使われる。一般にパーティクル・システムを使って模写される事物の例としては、炎、爆発、煙、流水、火花、落葉、雲、霧、雪、埃、流星、毛髪、毛皮、草地、あるいは光跡や呪文の視覚効果などが挙げられる。

殆どの場合、パーティクル・システムは三次元描画システムに実装されるが、ある種の環境では二次元パーティクル・システムも使われる。

wikiから引用

 

Particleはゲームでよく使われる表現なのですが、プログラムだけで書くとなると難易度が高く、完成系もイメージしにくかったりと、ちょっとハードルが高いんですよね・・・。

そんな時に便利なのが、Xcodeで用意されているSpriteKitです。
これはゲーム用のframeworkで、機能の1つにParticleを簡単に作成するクラスが含まれてます。

今回は星がキラキラ降ってくるような画面を作成します。
それではいってみましょー。

 

Particleファイル(.sks)を作成

まずParticleファイルの作成をします。

  • プロジェクト左側のファイルツリーを右クリックして「New File….」を選択
  • iOS > Resource > SpriteKit Particle File を選択してNext

ファイル作成

  • particle templeteで自分が作成したい表現に一番近いものを選択してください
    • Bokeh
    • Fire
    • FileFlies
    • Magic
    • Rain
    • Smoke
    • Snow
    • Spark

テンプレート選択

  • 今回はSnowで作成しました!

スクリーンショット 2016-08-01 18.27.24

 

Textureを変更

今回は星を降らせるという事で、星の画像に変更します。

変更場所は右側 Particles > Texture です。

すると・・・

スクリーンショット 2016-08-01 18.50.04

これだけでも大分それっぽいですね。

 

パラメーターを変更

Particleのパラメータに少し手を加えましょう。

変更点としては、下記3点です。

  • Scaleを0.1に変更
    • Textureのサイズが大きかったので少し小さめに
  • RotationのRangeを90、Speedを50に変更
    • 星をくるくる回転させる

スクリーンショット 2016-08-01 19.21.17

画像で見るとわかりにくいですが、星が回転しながら降ってきます。

こんな感じでParticleを作成できました!

 

画面にParticleを追加

最後に作成したParticleを使用したい画面に追加しましょう。

流れ的にはこんな感じになります。

  1. SKViewを作成
  2. SKSceneを作成
  3. .sksファイルを読み込んで、SKSceneに追加
  4. SKSceneをSKViewに追加
import UIKit

// SpriteKitをImport
import SpriteKit

class ViewController: UIViewController {
    
    var skView: SKView?

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // SKView作成
        createSKView()
        
        // Sceneを追加
        setupParticle()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func createSKView() {
        self.skView = SKView(frame: self.view.frame)
        self.skView!.allowsTransparency = true
    }
    
    func setupParticle() {
        let scene = SKScene(size: self.view.frame.size)
        scene.backgroundColor = UIColor.clearColor()
        
        let path = NSBundle.mainBundle().pathForResource("MyParticle", ofType: "sks")
        let particle = NSKeyedUnarchiver.unarchiveObjectWithFile(path!) as! SKEmitterNode
        particle.name = "MyParticle"
        particle.position = CGPointMake(self.view.frame.width / 2, self.view.frame.height)
        scene.addChild(particle)
        
        self.skView!.presentScene(scene)
        self.view.addSubview(self.skView!)
    }

}

 

無事に作成したParticleを画面に表示することができました!

スクリーンショット 2016-08-01 19.31.06

 

まとめ

SpriteKitにはまだまだ様々な機能がありますが、Particleに関しては比較的簡単に作成する事ができます。

ゲームアプリ以外にもアニメーションを加えて、ちょっとリッチなアプリを作りましょう!

 

BACK

お問合せ

イーディーエーに興味をお持ちいただいて
ありがとうございます!
スマホアプリに関するご相談、
お見積りや弊社へのご質問など、
お気軽にお問い合わせください。
担当者より折り返しご連絡させていただきます。

    お名前必須
    会社名
    メールアドレス必須
    電話番号必須
    お問合わせ種別必須
    お問合わせ内容必須

    アンケートにご協力ください。
    弊社サイトへはどのようにしてアクセスされましたか?

    個人情報のお取扱いに関する同意事項

    1.事業者の氏名又は名称

    株式会社イーディーエー

    2.個人情報保護管理者の氏名又は職名、所属及び連絡先

    個人情報保護管理者 木下 晴晶
    Mail:[email protected]

    3.取得した個人情報の利用目的的

    当フォームで取得した個人情報は、お問い合わせに関する回答のために利用し、目的外利用はいたしません。

    4.弊社が取得した個人情報の第三者への委託、提供について

    弊社は、ご本人に関する情報をご本人の同意なしに第三者に委託または提供することはありません。

    5.個人情報保護のための安全管理

    弊社は、ご本人の個人情報を保護するための規程類を定め、従業者全員に周知・徹底と啓発・教育を図るとともに、その遵守状況の監査を定期的に実施いたします。
    また、ご本人の個人情報を保護するために必要な安全管理措置の維持・向上に努めてまいります。

    6.個人情報の開示・訂正・利用停止等の手続

    ご本人が、弊社が保有するご自身の個人情報の、利用目的の通知、開示、内容の訂正、追加又は削除、利用の停止、消去及び第三者への提供の停止を求める場合には、下記に連絡を頂くことで、対応致します。

    株式会社イーディーエー 個人情報お問合せ窓口
    〒106-0032 東京都港区六本木7丁目14番23 ラウンドクロス六本木4F
    TEL:03-5422-7524 FAX:03-5422-7534
    Mail:[email protected]

    7.ご提供いただく情報の任意性

    個人情報のご提供は任意ですが、同意を頂けない場合には、第3項にあります利用目的が達成できない事をご了承いただくこととなります。

    8.弊社Webサイトの運営について

    弊社サイトでは、ご本人が弊社Webサイトを再度訪問されたときなどに、より便利に閲覧して頂けるよう「クッキー(Cookie)」という技術を使用することがあります。これは、ご本人のコンピュータが弊社Webサイトのどのページに訪れたかを記録しますが、ご本人が弊社Webサイトにおいてご自身の個人情報を入力されない限りご本人ご自身を特定、識別することはできません。
    クッキーの使用を希望されない場合は、ご本人のブラウザの設定を変更することにより、クッキーの使用を拒否することができます。その場合、一部または全部のサービスがご利用できなくなることがあります。