CreApp

前ページで、四角が迫ってくるアニメーションを表現しました。このように基本動作を組み合わせて、さまざまな表現が可能です。 この章の締めくくりに、四角以外の形状も混ぜてみる例を紹介します。 図形オブジェクトを入れる 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 ..< 20 { let shape:PGActor! let rnd = (0.0...3.0).randomize if rnd < 1.0 { shape = PGRectangle() } else if rnd < 2.0 { shape = PGTriangle() } else { shape = PGCircle() } shape .position( screen.randomPoint ) .deltaPosition( dx:(-1.0...1.0).randomize, dy:(-1.0...1.0).randomize ) .scale( square: 0.0 ) .deltaScale( dw:1.0, dh:1.0 ) .angle( .random ) .deltaAngle( degrees:1.0 ) .color( .random ) .life( .random ) .deltaLife( -0.005 ) .completion { $0 .position( screen.randomPoint ) .deltaPosition( dx:(-1.0...1.0).randomize, dy:(-1.0...1.0).randomize ) .scale( square: 0.0 ) .deltaScale( dw:1.0, dh:1.0 ) .angle( .random ) .color( .random ) .life( 1.0 ) } .iterate { $0 .alpha( $0.life ) .deltaPosition( dx:$0.deltaPosition.x * 1.04, dy:$0.deltaPosition.y * 1.04 ) .deltaScale( dw:$0.deltaScale.width * 1.02, dh:$0.deltaScale.height * 1.02 ) } } } 「コードを実行」を押します。 目標 四角・丸・三角が加速して迫ってくる動きが描けたら成功です。 終わったら次のページへ進みます。 ...

前ページまでで、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) 「コードを実行」を何度か試してください。結果が変わります。 終わったら次のページへ進みます。 ...

前の章までで、エフェクトのアニメーションの基礎を学びました。 この章では、これまでの学習内容を活かして、豊かな視覚表現をいくつか作っていきましょう。 まずはキラキラ輝く演出を作ってみます。 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より少ない、あるいは多いときは薄くなります。 ...

この章では画像を使ってみます。このブックには「lily」という画像があります。Lilyのアイコンです。PGPictureでこの画像を表示してみましょう。 図形と同様に、PGPicture( "lily" )と書きます。ファイル名は "(ダブルクォート) で包みます。これは 文字列 を表します。 大きさとして.scale( square:256 )を追加します。 1 2 3 4 func design( screen:PGScreen ) { PGPicture( "lily" ) .scale( square:256 ) } 「コードを実行」を押します。 目標 Lilyのアイコンが表示されれば成功です。 終わったら次のページへ進みます。 実行例

前のページ このBookの最後のページです。ここまで学んできたものを自由に使って、自分の美しいと感じるエフェクトを自由に表現してみてください。このページではupdate関数も使えます。 目標 色々なエフェクトを作って楽しみましょう。 これでこのBookは終わりとなります。おつかれさまでした。 次のBookでは、タッチに反応したエフェクトの表現を試していきたいと思います。 それでは、また次のBookで！

さて、画像をそのまま表示しましたが、Lily Playgroundでは、画像をマスクに使うことが増えてきます。ここではマスク画像を使う方法を試してみましょう。画像をマスクにするときはPGMaskをつかいます。また、もとの画像がどんなものであるかを見るためにPGPictureでも表示してみましょう。 PGPicture( "mask-star" )を書きます。.cx( -128 )で左に移動させます。 次にPGMask( "mask-star" )を書きます。.cx( 128 )で右に移動させます。 PGMask( "mask-star" )に.color( .blue )を追加します。 1 2 3 4 5 6 7 8 9 10 func design( screen:PGScreen ) { PGPicture( "mask-star" ) .scale( square:128 ) .cx( -128 ) PGMask( "mask-star" ) .scale( square:128 ) .cx( 128 ) .color( .blue ) } 「コードを実行」を押します。 目標 左に白黒の星マーク、右に星マークの白い部分に青になった透けた星が描けたら成功です。 終わったら次のページへ進みます。 ...

前のページ 煙を表現するコードをつくりましょう。 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 func design( screen:PGScreen ) { screen.clearColor = .darkGrey for _ in 0 ..< 60 { PGMask( "mask-smoke" ) .color( .white ) .position( cx:(-150...150).randomize, cy:(-150...150).randomize ) .scale( square:(80...160).randomize ) .deltaScale( dw:1, dh:1 ) .angle( .random ) .life( .random ) .deltaLife( -0.005 ) .iterate { if $0.life < 0.5 { $0.alpha( $0.life ) } else { $0.alpha( (1.0 - $0.life) ) } } .completion { $0 .position( cx:(-150...150).randomize, cy:(-150...150).randomize ) .scale( square:80 ) .angle( .random ) .life( 1.0 ) } } } screen.clearColor = .darkGrey で背景を暗灰色にします。 forで60個のマスク画像 PGMask() を書きます。 画像ファイルはmask-smokeを指定します。 初期設定のコードを書きます。 .color( .white ) 色。白を設定します。 .position( cx:(-150...150).randomize, cy:(-150...150).randomize ) 位置。-150~150ポイントのランダム座標を設定します。 .scale( square:(80...160).randomize ) 大きさ。80~160ポイントのランダムなサイズを設定します。 .deltaScale( dw:1, dy:1 ) 毎フレーム、1ポイント拡大します。 .angle( .random ) 角度。0.0~1.0のランダムから開始します。 .life( .random ) ライフ。0.0~1.0のランダムから開始します。 .deltaLife( -0.005 ) 毎フレーム、lifeを0.005減少します。 .iterate{ } を用意して、毎フレームのalphaの処理を計算します。 .life が0.5より小さいとき、 $0.life * 2.0 を設定します。 .life が0.5以上のとき、 (1.0 - $0.life) * 2.0 を設定します。 上記の計算により、lifeが0.5の時、もっとも濃く描画します。lifeが0.5より少ない、あるいは多いときは薄くなります。 ...