1-6. 指が離れたときを捉える

前のページでは、マルチタッチを試しました。

Lily Playgroundではタッチしたときのように、指が離れた瞬間をとることもできます。

screen.releasesで指が離れた瞬間に異なるエフェクトを加えてみましょう。

準備として、前回のコードを用意してあります。ここにコードを追加していきます。
screen.touchesのループの下に、screen.releasesのfor文を追加します。使い方はscreen.touchesと同様です。
screen.releasesのfor文の中に、for _ in 0 ..< 32を書きます。
上の32回のループの中で、PGRectangle()を書きます。.position()にrelease.xyを設定して、指を離した位置に図形を描きます。
続いて、.deltaPosition(dx:dy:), .color(), .scale(), .angle(),.deltaAngle(degrees:), .deltaScale(dw:dh:), .deltaLife(), .deltaAlpha()を追加します。ランダムに図形が散らばるアニメーションです。

 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
35
36
37
38
39
40
41
42
43
44
45


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

func update( screen:PGScreen ) {
    for touch in screen.touches {
        let d_scale = (0.25...0.5).randomize
            
        PGRectangle()
        .position( touch.xy )
        .color( .random )
        .scale( width:0.0, height:0.0 )
        .angle( .random )
        .deltaAngle( degrees:1.0 )
        .deltaScale( 
            dw:d_scale,
            dh:d_scale            
        )
        .deltaLife( -0.01 )
        .deltaAlpha( -0.01 )
    }
    
    for release in screen.releases {
        for _ in 0 ..< 32 {
            let d_scale = (0.25...0.5).randomize
            
            PGRectangle()
            .position( release.xy )
            .deltaPosition(
                dx:(-2.0...2.0).randomize,
                dy:(-2.0...2.0).randomize
            )
            .color( .random )
            .scale( .zero )
            .angle( .random )
            .deltaAngle( degrees:1.0 )
            .deltaScale( 
                dw:d_scale,
                dh:d_scale   
            )
            .deltaLife( -0.01 )
            .deltaAlpha( -0.01 )
        }
    }
}

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

目標

実行後、タッチの軌跡を描き、指を離したときに図形が散るエフェクトが描けたら成功です。

終わったら次のページへ進みます。

Note: screen.releasesは、指が離れたとき1フレームのみ値が入ります。次のフレームでは値がなくなります。

目標#

目標