1-2. タッチの軌跡を描く

前のページでは、updateのはじめに screen.removeAllShapes() をつかって前の図形を消していました。そのため図形はタッチ位置に1つのみでした。

今回は、前のタッチ位置に描いた図形を残します。さらに新たなタッチ位置に図形を加えます。

しかし、図形が増えすぎてもいけません。.deltaLife と .deltaAlpha を使って、時間が経つと消滅するように工夫します。

1. design関数に screen.clearColor = .lightGrey を書きます。 背景を薄灰色に設定します。

2. update関数を用意します。

3. let touch = screen.latestTouchを書きます。 最新のタッチ情報を取得します。

4. PGCircle() を書きます。

5. PGCircle()に .position( touch.xy ) を追加します。

6. 続けて .deltaLife( -0.05 )、 .deltaAlpha( -0.05 ) を追加します。lifeが減っていくようになります。lifeが0.0になるとPGCircleが消滅します。lifeと合わせてalphaも減らすことで、徐々に消える様子を表現します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

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

func update( screen:PGScreen ) {
    let touch = screen.latestTouch
    
    PGCircle()
    .position( touch.xy )
    .deltaLife( -0.05 )
    .deltaAlpha( -0.05 )
}

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

目標

• 実行後、タッチの軌跡が描ければ成功です。

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

• Note: alpha、lifeの初期値はともに 1.0 です。今回のコードの場合、1.0から0.05ずつ減っていき、0.0になると消滅します。