2-4. 燃える軌跡

このページでは、なぞった位置から炎が立ち上がるエフェクトを作ってみましょう。

 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
33
34


func design( screen:PGScreen ) {
 screen.clearColor = .darkGrey
}

func update( screen:PGScreen ) {
    for touch in screen.touches {
        for _ in 0 ..< 2 {
            PGAddMask( "mask-smoke" )
            .color( LLColor( 1.0, 0.4, 0.3, 1.0 ) )
            .position( 
                cx: touch.x + (-4.0...4.0).randomize,
                cy: touch.y + (-4.0...4.0).randomize
            )
            .deltaPosition(
                dx: (-1.0...1.0).randomize,
                dy: (2.0...3.0).randomize
            )
            .scale( square:(20.0...90.0).randomize )
            .deltaScale(
                dw:1.0,
                dh:1.0
            )
            .angle( .random )
            .deltaAngle( degrees:(-2.0...2.0).randomize )
            .deltaLife( -0.02 )
            .iterate {
                $0.alpha = $0.life
                $0.color.R -= 0.02
                $0.color.G -= 0.009
                $0.color.B -= 0.007
            }
        }
    }
}

design関数に screen.clearColor = .darkGrey を書きます。背景は濃い灰色です。

update関数を用意します。

for touch in screen.touchesでタッチのループを作ります。触れている指すべてをとらえます。

3のループ内でfor _ in 0 ..< 2を書き、加算合成の煙模様PGAddMask( "mask-smoke" )を作ります。

図形の初期設定のコードを書きます。
- .color( LLColor( 1.0, 0.4, 0.3, 1.0 ) )
  - 色。明るい赤色を設定します。少しだけ黄色に近づけます。
- .position( cx:touch.x + (-4.0...4.0).randomize, cy:touch.y + (-4.0...4.0).randomize )
  - 位置。タッチ位置から-4.0~4.0のランダム値を設定します。
- .deltaPosition( dx:(-1.0...1.0).randomize, dy:(2.0...3.0).randomize )
  - 位置の変化量。x方向は-1.0~1.0のランダム値で横にわずかに移動します。y方向は2.0~3.0のランダム値で上方向に移動します。
- .scale( square:(20.0...90.0).randomize )
  - 大きさ。20.0~90.0のランダム値で色々な大きさをとります。
- .deltaScale( dw:1.0, dh:1.0 )
  - 大きさの変化量。毎フレーム1.0ずつ大きくしていきます。
- .angle( .random )
  - 初期の角度。ランダムを設定します。
- .deltaAngle( degrees:(-2.0...2.0).randomize )
  - 角度の変化量。毎フレーム-2.0~2.0のランダム値で回転します。
- .deltaLife( -0.02 )
  - ライフの変化量。-0.02を設定し、50フレームで図形が消えるようにします。

.iterate{ } を用意して、毎フレームの計算を行います。
- $0.alpha = $0.life
  - アルファ値をライフと同じ値にします。
- $0.color.R -= 0.02
  - 色のRed値を0.02引き算します。
- $0.color.G -= 0.009
  - 色のGreen値を0.009引き算します。
- $0.color.B -= 0.007
  - 色のBlue値を0.007引き算します。

上記の計算により、時間が経つごとに薄くなりながら、少しずつ灰色に近づきます。

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

目標

実行後、タッチ位置から炎が立ちのぼるエフェクトが描ければ成功です。

目標#

目標