前ページで、iterate{ } を使って四角を加速させる表現を作りました。 合わせて、スケーリング変化も加速させて、迫ってくる四角を表現しましょう。 前ページと同じコードを書きます。 .completion{ }内の $0 に .deltaScale(dx:dy:) を追加します。値は dw:1.0, dh:1.0 を指定します。 .iterate{ } 内の $0 に .deltaScale(dw:dh:) を追加します。deltaScale.width と deltaScale.height を1.02倍した値を設定します。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 33 34 35 36 37 38 39 40 41 42 func design( screen:PGScreen ) { for _ in 0 ....
ここまで2-5の図形パターン, 2-6の色パターン などを学んできました。おさらいとして、自由にコードを書いてみましょう。forや``if`｀を使って複数の図形をたくさん書いてみてください。 四角を描く: PGRectangle() 三角を描く: PGTriangle() 円を描く: PGCircle() ぼかし円を描く: PGBlurryCircle() 繰り返し処理: for a in 0 ..< 繰り返し回数 { 繰り返す処理 } 条件分岐: if 条件 { 条件を満たした時 } else { 条件を満たさない時 } 目標 色々な形を描いたり、繰り返し・条件分岐を使って楽しんでください。 終わったら次のページへ進みます。
前のページ 前のページの仕組みを応用して、図形に触れた時反応するエフェクトをつくってみましょう。 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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 func design( screen:PGScreen ) { screen....
前ページで、四角が迫ってくるアニメーションを表現しました。このように基本動作を組み合わせて、さまざまな表現が可能です。 この章の締めくくりに、四角以外の形状も混ぜてみる例を紹介します。 図形オブジェクトを入れる let shape:PGActor! を書きます。 shape の形を決めるため、ランダム値 let rnd を作成します。 rndの値を使って、 if、else if、else の条件分岐を書きます。条件によって shape に異なる形(円、四角、三角)を作成して、格納します。 前ページと同じ動作のコードを shape に対して記述します。 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 46 47 48 49 50 51 52 53 54 55 func design( screen:PGScreen ) { for _ in 0 ....
前ページまでで、1章のしくみを組み合わせて、視覚効果を生み出す表現を学んできました。 この章の締めくくりに、自由に効果を表現してみてください。基本コードとして2-7のコードを用意しています。 カスタマイズして楽しんでみましょう。 目標 ここまで学んできたコードを使って楽しんでください。 2章はこれでおわりです。おつかれさまでした。次の章へ進みましょう。
前のページ ここまででタッチのエフェクトのバライエティを表現してきました。工夫すればより豊かな表現が可能になるでしょう。 2章で出てきた要素をまとめます。 Lily Playgroundで毎フレーム呼ばれる関数: func update( screen:PGScreen ) { ... } 最新のタッチ位置を取得する: screen.latestTouch タッチの数を得る: screen.touches.count タッチしている位置をすべて取得する: for touch in screen.touches { ... } 指を離した位置を取得する: for release in screen.releases { ... } 指を離した時、そのタッチが開始した位置を取得する: release.startPos.x release.startPos.y 目標 ここまで学んできたコード、Books1, Books2も合わせて、色々なビジュアルエフェクトを作ってみてください。 これでビジュアルエフェクトのプログラミングに導入する「Lily Playground Books」は完了です！ありがとうございました。 ビジュアルエフェクト編は一旦終わりになりますが、さらに広い世界が待っています。 また、App開発には多くの可能性が秘められています。 このBooksが一人でも多く、App開発に興味を持ってくださるきっかけになることを願っています。 Booksについてのご意見、より本格的なApp開発を志す方々、ぜひ執筆者にお気軽にご連絡ください。お待ちしています。 渡辺電気のお問い合わせフォーム
繰り返し でたくさんの図形を描きました。では次は繰り返しにランダム要素を加えてみましょう。 繰り返しの数を20回にして、PGCircle()を描きます。カウンタは _ にします。 .position()にscreen.randomPointを記述します。 1 2 3 4 5 6 7 func design( screen:PGScreen ) { for _ in 0 ..< 20 { PGCircle() .color( .blue ) .position( screen.randomPoint ) } } 「コードを実行」を押します。 目標 画面上の不定な位置に円が描かれれば成功です。 (+1) 「コードを実行」を何度か試してください。結果が変わります。 終わったら次のページへ進みます。 Note: forのカウンタ _ は、カウンタを計算で使わない場合の記述です。 Note: screen は画面領域です。screen.randomPoint は画面領域の中の座標をランダムに1つ取得します。 実行例
ランダムな配置 に加えて、色、大きさなどにランダムを用います。 前回のコードを用いて、繰り返し数を100回にします。 .color( .random )を記述します。 上記に加え、.scale( square:(20...100).randomize )を記述します。 大きさが20~100の間のランダムな整数が得られます。 1 2 3 4 5 6 7 8 func design( screen:PGScreen ) { for _ in 0 ..< 100 { PGCircle() .color( .random ) .scale( square:(20...100).randomize ) .position( screen.randomPoint ) } } 「コードを実行」を押します。 目標 画面上の不定な位置に色や大きさが様々な円が描かれれば成功です。 (+1) 「コードを実行」を何度か試してください。結果が変わります。 終わったら次のページへ進みます。 Note: .color( .random )は省略記法です。 正式な記述は.color( LLColor.random )です。 Note: .scale( square:数値 )は、縦横が同じ値(正方形)になります。 Note: (20...100)は整数の範囲を示す形です。 .randomizeをつけると、範囲内のランダムな整数を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 ) ....
この章では画像を使ってみます。このブックには「lily」という画像があります。Lilyのアイコンです。PGPictureでこの画像を表示してみましょう。 図形と同様に、PGPicture( "lily" )と書きます。ファイル名は "(ダブルクォート) で包みます。これは 文字列 を表します。 大きさとして.scale( square:256 )を追加します。 1 2 3 4 func design( screen:PGScreen ) { PGPicture( "lily" ) .scale( square:256 ) } 「コードを実行」を押します。 目標 Lilyのアイコンが表示されれば成功です。 終わったら次のページへ進みます。 実行例