Swift

macOSのPlaygroundsを使ったApp開発にLilySwiftを導入します。 環境 macOS Sonoma 14.2.1 Swift Playgrounds 4.4 Appの作成 PlaygroundsでAppを新規作成します. 画面下のAppを押します. マイAppが作成されます. 作成されたマイAppを押してプログラミングの画面に移動します. Swiftパッケージの追加 Appを開き, メニューの**[ファイル] > [パッケージを追加]**を選びます。 追加するSwiftの指定 追加するパッケージのURLを求められますので以下のURLを入力します. https://github.com/wdkk/LilySwiftForPlayground.git 入力後少し待つと, 追加できるパッケージが表示されます. 以下の画面のように出てくれば最新のLilySwiftが使えます. 画面右上のAppプレイグランドに追加を押します. 自動で元の画面に戻り, 左メニューのファイルリストにLilySwiftForPlaygroundが追加されたことを確認します. LilySwiftのインポート パッケージの読み込みが成功すると, Swiftコードの中で以下のインポートが可能になります. Lilyを使いたいswiftファイルに以下のimportを記入します. import LilySwiftForPlayground Lilyの機能を使っていないため, 画面に変化はありませんが、これでLilyの機能を使う準備が整いました. Lilyの機能が使えるかを試すにはこちらを参考にしてください.

iPadでのLily Playground Booksの導入手順 導入に関しては公式ページのiPadの手順を参考にしてください.

macOSでのLily Playground Booksの導入手順 導入に関しては公式ページのmacOSでの導入手順を参考にしてください.

LilySwiftのパッケージを追加すると, Lily Playground Booksの処理とSwiftUIを合わせて使うことができるようになります。以下のサンプルコードをダウンロードして参照してください. 実行環境 Xcode 15.2 LilySwift 5.1.23 サンプルプロジェクト PGScreenView.swiftpm.zip 上記のプロジェクトを開くと, Lily Playgroundが動かせる状態になっています. コードの以下の部分を書き換えてください. ダークグレイの背景に赤の四角が表示されます. Playground Booksと同じ design関数 をつくる screen.clearColor = .darkGrey を指定する PGRectangleのcolorを .red にする コード 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 import SwiftUI import LilySwiftForPlayground import LilySwiftAlias class Playground { // Metalを使う準備 lazy var device = MTLCreateSystemDefaultDevice()!...

このBookでは、タッチに反応して図形を描くプログラミングしていきます。 タッチに合わせて動くエフェクトはとても魅力的です。表現を工夫して楽しいエフェクトを作っていきましょう。 手始めに、タッチしたところに円を描くプログラムを書きましょう。 前のBookでは実行時に1度だけ処理するdesign関数をつかいました。 このBookから、design関数に加え、update関数をつかいます。 update関数は繰り返し呼ばれる関数です。呼ばれるたびにタッチの情報を更新するため、今タッチしている位置が得られます。screen.latestTouch が最新の触れた位置の情報です。 design関数に screen.clearColor = .lightGrey を書きます。 背景を薄灰色に設定します。 update関数を用意します。 update関数のはじめに、screen.removeAllShapes() を書きます。 一度すべての図形を消す処理です。updateは繰り返し呼ばれるので前のフレームの図形が残ります。 今回は前フレームの図形を消すため、removeAllShapes()を呼びます。 let touch = screen.latestTouchを書きます。 最新のタッチ情報がtouchに入ります。 PGCircle() を書きます。 PGCircle()に .position( touch.xy ) を追加します。 touch.xyはタッチ情報のxy座標が得られます。 1 2 3 4 5 6 7 8 9 10 11 12 func design( screen:PGScreen ) { screen.clearColor = .lightGrey } func update( screen:PGScreen ) { screen.removeAllShapes() let touch = screen.latestTouch PGCircle() .position( touch.xy ) } 「コードを実行」を押します。 目標 実行後、タッチした位置に丸が描けたら成功です。...

このBookでは、LilyPlaygroundで描いた図形を動かすプログラミングを学びます。 工夫をこらして、美しいアニメーションをつくっていきましょう。 LilyPlaygroundでは、1秒間に最大60回、画面をリフレッシュします。その1回ごとに図形のパラメータを変えることで、動きを表現します。 1回ごとに加算する値を delta と呼びます。たとえば、 position の加算値は deltaPosition です。 てはじめに deltaPosition を使ってみましょう。 design関数内に、 PGCircle() を書きます。 PGCircleに .deltaPosition(dx:dy:) を追加します。 1 2 3 4 func design( screen:PGScreen ) { PGCircle() .deltaPosition( dx:0.5, dy:1.0 ) } 「コードを実行」を押します。 目標 中心から右上に移動する円が出たら成功です。 終わったら次のページへ進みます。

LilyPlaygroundへようこそ。たのしく絵を描きながら、Swiftでプログラミングを学んでいきましょう。最終的に色々な図形を自由に操って美しい表現を目指します。この1章はその第一歩です。まず画面に四角を描いてみます。 下のプログラムの入力部分に PGRectangle() と書きます。 1 2 3 func design( screen:PGScreen ) { PGRectangle() } 「コードを実行」を押したら、すこし待ちます。 目標 画面の真ん中に黒い四角が出たら成功です。 終わったら次のページへ進みます。 実行例

前ページでは life がなくなった時の処理、 .completion{ } を紹介しました。 ここでは .completion{ } を活用して、図形を再利用してアニメーションを繰り返してみましょう。 PGCircle() を書きます。 フレームごとの移動量 .deltaPosition( dx:0.0, dy:-1.0 ) を指定します。 初期ライフとして .life( 1.0 ) を指定します。またlifeに合わせて .alpha( 1.0 ) を指定します。 フレームごとの減り量として、 .deltaLife( -0.01 ) と deltaAlpha( -0.01 ) を指定します。 .completion のブロック内で図形を再設定します。 .position(), .life(), .alpha() を使って、それぞれ初期化します。 フレーバーとして .color( .random ) を追加します。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 func design( screen:PGScreen ) { PGCircle() .deltaPosition( dx:0.0, dy:-1....

前ページで終了時の操作を学びました。 ここでは、毎フレームの処理を自分で書いてみましょう。 PGCircle() を書きます。 .position(cx:cy:), deltaPosition(dx:dy:), .life(), deltaLife() を指定します。はじめの初期化です。 .completion{ } で再利用を行います。 .position(cx:cy:)、deltaPosition(dx:dy:), .life() をそれぞれ元の値に戻します。 .color()　は前回と同じくランダムにします。 続けて .iterate{ } を書きます。そのブロック内で $0.deltaPosition(dx:dy:) を書きます。deltaPosition.yの値を1.08倍します。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 func design( screen:PGScreen ) { PGCircle() .position( cx:0.0, cy:200.0 ) .deltaPosition( dx:0.0, dy:-1.0 ) .life( 1.0 ) .deltaLife( -0.01 ) .completion { $0 .position( cx:0.0, cy:200.0 ) ....

前ページまでに、LilyPlaygroundでの色々なアニメーションの方法を学んできました。この章のまとめとして、ここまでに学んだ機能を自由に組み合わせ、試してみましょう。 1フレームあたりの移動量を指定する: .deltaPosition(dx:dy:) 1フレームあたりの大きさ変化を指定する: .deltaScale(dw:dh:) 1フレームあたりの色の変化量を指定する: .deltaColor(red:green:blue:) 1フレームあたりの回転量を指定する: .deltaAngle(degrees:) .deltaAngle(radians:) 1フレームあたりのアルファ変化量を指定する: .deltaAlpha() 図形のライフを指定する(0.0~1.0): .life() 1フレームあたりのライフの変化量を指定する: .deltaLife() 一定間隔で実行する($0は図形): .interval(sec:秒数) { $0.実行する処理 } ライフが0になった時実行する($0は図形): .completion { $0.実行する処理 } 毎フレーム実行する: .iterate { $0.実行する処理 } 目標 ここまで学んできたコードを使って楽しんでください。 1章はこれでおわりです。おつかれさまでした。次の章へ進みましょう。