3-1. キラキラ輝く

前の章までで、エフェクトのアニメーションの基礎を学びました。

この章では、これまでの学習内容を活かして、豊かな視覚表現をいくつか作っていきましょう。

まずはキラキラ輝く演出を作ってみます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


func design( screen:PGScreen ) {
   screen.clearColor = .darkGrey
    
   for _ in 0 ..< 50 {
       PGAddMask( "mask-sparkle" )
       .color( .white )
       .position( screen.randomPoint )
       .scale( square: 15 )
       .deltaScale( dw:0.4, dh:0.4 )
       .angle( degrees: 0 )
       .deltaAngle( degrees: 0.5 )
       .alpha( 0 )
       .life( .random )
       .deltaLife( -0.01 )
       .iterate {
         if $0.life < 0.5 {
            $0.alpha( $0.life * 2.0 )
         }
         else {
            $0.alpha( (1.0 - $0.life) * 2.0 )
         }
       }     
       .completion {
           $0
           .position( screen.randomPoint )
           .scale( square:15 )
           .angle( degrees:0 )
           .alpha( 0 )
           .life( 1.0 )
       }
   }
}

screen.clearColor = .darkGrey で背景を暗灰色にします。

forで50個の加算合成マスク画像 PGAddMask() を書きます。画像ファイルはmask-sparkleを指定します。

初期設定のコードを書きます。
- .color( .white )
  - 色。白を設定します。
- .position( screen.randomPoint )
  - 位置。画面内のランダム座標を設定します。
- .scale( square:15 )
  - 大きさ。縦横15ポイントを設定します。
- .deltaScale( dw:0.4, dy:0.4 )
  - 毎フレーム、0.4ポイント拡大します。
- .angle( degrees:0 )
  - 角度。初期は0度を設定します。
- .deltaAngle( degrees: 0.5 )
  - 毎フレーム、0.5度回転します。
- .alpha( 0 )
  - アルファ。透明にします。
- .life( .random )
  - ライフ。0.0~1.0のランダムから開始
- .deltaLife( -0.01 )
  - 毎フレーム、lifeを0.01減少します。

.iterate{ } を用意して、毎フレームのalphaの処理を計算します。
- .life が0.5より小さいとき、 $0.life * 2.0 を設定します。
- .life が0.5以上のとき、 (1.0 - $0.life) * 2.0 を設定します。

上記の計算により、lifeが0.5の時、もっとも濃く描画します。lifeが0.5より少ない、あるいは多いときは薄くなります。

.completion{ } を用意して、図形を再利用します。
- .position( screen.randomPoint )
  - 位置を画面内のランダムな座標へ移動します。
- .scale( square:15 )
  - 大きさを縦横15ポイントにもどします。
- .angle( degrees:0 )
  - 角度を0度にもどします。
- .alpha( 0 )
  - アルファを透明にもどします。
- .life( 1.0 )
  - ライフを1.0に回復します。

「コードを実行」を押します。

目標

画面内にキラキラ輝くエフェクトが表示されたら成功です。

目標#

目標