Metal

PGScreenViewは, 決まった数のパーティクル(図形)を1度に表示できます. 初期の値は2,000個です. 実行環境 Xcode 15.2 LilySwift 5.1.23 サンプルコード pg2d_particle_capacity.swiftpm.zip サンプルのContentView.swiftをご覧ください. 初期のコードでは火を立てるエフェクトが動いています. PlaneStorageでパーティクル数を設定します. capacity:2000 と書くと1度に2000個まで図形が描かれます. コード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 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 80 81 82 83 84 85 86 87 88 import SwiftUI import LilySwiftForPlayground import LilySwiftAlias class Playground { // Metalを使う準備 lazy var device = MTLCreateSystemDefaultDevice()! // Playground2Dのデータを用意する lazy var planeStorage:PlaneStorage = .playgroundDefault( device:device, capacity:2000 ) // Lily Playgroundのデザイン関数 func design( screen:PGScreen ) { screen.clearColor = .darkGrey for _ in 0 ..< 160 { PGAddMask( "mask-smoke" ) .color( LLColor( 0.9, 0.34, 0.22, 1.0 ) ) .position( cx:(-50 ... 50).randomize, cy:(-120 ... -110).randomize ) .deltaPosition( dx:(-1.0...1.0).randomize, dy:(0.5...4.5).randomize ) .scale( square: 80.0 ) .deltaScale( dw: 0.5, dh: 0.5 ) .angle( .random ) .deltaAngle( degrees:(-2.0...2.0).randomize ) .life( .random ) .deltaLife( -0.01 ) .iterate { if $0.life < 0.5 { $0.alpha( $0.life ) } else { $0.alpha( (1.0 - $0.life) ) } } .completion { $0 .position( cx:(-50 ... 50).randomize, cy:(-120 ... -110).randomize ) .scale( square: 80.0 ) .life( 1.0 ) } } } // Lily Playgroundのアップデート関数 func update( update:PGScreen ) { } } struct ContentView: View { let playground:Playground // Lily Playgroundのデータ @State var scene:PGScene // Lily Playgroundのシーン init() { // Lily Playgroundのデータとシーンをつくる playground = Playground() // シーンにdesign関数とupdate関数を渡す scene = .init( planeStorage:playground.planeStorage, design:playground.design, update:playground.update ) } var body: some View { VStack { // Lily Playgroundを表示するビュー.シーンを渡す PGScreenView( device:playground.device, scene:$scene ) } } } 結果1 一度に描画するパーティクルの数が2000を超えないため, 十分に炎が表現されます. ...

Playgroundのパーティクルの色を変更できるプログラムを紹介します. 実行環境 Xcode 15.2 LilySwift 5.1.23 サンプルコード pg2d_particle_change.swiftpm.zip Playgroundクラスに color変数 を追加します. ※SwiftUIではないので@Stateがなくても変更できます. パーティクルの色に上で作ったcolorを設定します. completionの再利用時にもcolorを設定します. Viewの中にButtonを作成します. Buttonを押したとき, playground.colorをランダムに変更します. コード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 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 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 import SwiftUI import LilySwiftForPlayground import LilySwiftAlias class Playground { lazy var device = MTLCreateSystemDefaultDevice()! // Playground2Dのデータセット lazy var planeStorage:PlaneStorage = .playgroundDefault( device:device ) // パーティクルの色情報 var color = LLColor( 0.9, 0.34, 0.22, 0.0 ) // デザイン関数 func design( screen:PGScreen ) { screen.clearColor = .darkGrey for _ in 0 ..< 160 { PGAddMask( "mask-smoke" ) .color( self.color ) // パーティクルの色をself.colorから得る .position( cx:(-50 ... 50).randomize, cy:(-120 ... -110).randomize ) .deltaPosition( dx:(-1.0...1.0).randomize, dy:(0.5...4.5).randomize ) .scale( square: 80.0 ) .deltaScale( dw: 0.5, dh: 0.5 ) .angle( .random ) .deltaAngle( degrees:(-2.0...2.0).randomize ) .life( .random ) .deltaLife( -0.01 ) .iterate { if $0.life < 0.5 { $0.alpha( $0.life ) } else { $0.alpha( (1.0 - $0.life) ) } } .completion { $0 .color( self.color ) // パーティクルの色をself.colorから得る .position( cx:(-50 ... 50).randomize, cy:(-120 ... -110).randomize ) .scale( square: 80.0 ) .life( 1.0 ) } } } // アップデート関数 func update( screen:PGScreen ) { } } struct ContentView: View { let playground:Playground // Lily Playgroundのデータ @State var scene:PGScene // Lily Playgroundのシーン init() { // Lily Playgroundのデータとシーンをつくる playground = Playground() // シーンにdesign関数とupdate関数を渡す scene = .init( planeStorage:playground.planeStorage, design:playground.design, update:playground.update ) } var body: some View { VStack { Button { // プレイグラウンド用のcolorをランダムに変更する playground.color = LLColor( .random, .random, .random, 0.0 ) } label: { Text( "色をランダムに変える" ) } .padding( 8 ) // Lily Playgroundを表示するビュー. シーンを渡す PGScreenView( device:playground.device, scene:$scene ) } } } 結果 PGScreenViewの上部にボタンが表示されます. これを押すとランダムに色が変化し, 新しい炎のパーティクルから色が変わっていくようになります. ...

PGScreenViewは, 自分で用意した画像を自由に読み込んで利用することができます. 実行環境 Xcode 15.2 LilySwift 5.1.23 サンプルコードとデータ pg2d_add_texture.zip 上記のzipファイルにはswiftpmと一緒にdeformed-lily.pngという画像が含まれています. これをつかって画像の追加方法を説明します. サンプルのContentView.swiftをご覧ください. 今回のポイントは PlaneStorage になります. コード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 43 44 45 46 47 48 49 50 51 52 import SwiftUI import LilySwiftForPlayground import LilySwiftAlias class Playground { // Metalを使う準備 lazy var device = MTLCreateSystemDefaultDevice()! // Playground2Dのデータを用意する lazy var planeStorage:PlaneStorage = .playgroundDefault( device:device ) // Lily Playgroundのデザイン関数 func design( screen:PGScreen ) { PGPicture( "lily" ) .scale( square:256 ) } // Lily Playgroundのアップデート関数 func update( update:PGScreen ) { } } struct ContentView: View { let playground:Playground // Lily Playgroundのデータ @State var scene:PGScene // Lily Playgroundのシーン init() { // Lily Playgroundのデータとシーンをつくる playground = Playground() // シーンにdesign関数とupdate関数を渡す scene = .init( planeStorage:playground.planeStorage, design:playground.design, update:playground.update ) } var body: some View { VStack { // Lily Playgroundを表示するビュー.シーンを渡す PGScreenView( device:playground.device, scene:$scene ) } } } Xcodeでアセットを追加する 画像名はAssets.xcassetsに含まれているアセット名と一致しています. ...

macOSのXcodeを使ったApp開発にLilySwiftを導入します。 Xcodeでは色々な形式でAppを作成可能ですが, 今回はPlaygrounds Appでも使えるようにswiftpmを作成します. 環境 macOS Sonoma 14.2.1 Xcode 15.0 Appの作成 XcodeでAppを新規作成します. [Create New Project]を選択します. Appの種類の選択 プラットフォームで[iOS]を選択します. Appの種類で[App Playgrounds]を選びます. これを選択すると.swiftpmが作成できます. Appの名前を決める App名をつけます. 開発アカウントや組織が決まっていればここで設定してください(なければNoneでも作れます). [Next]を押します. 保存先を選択します. 作成後, 保存先にswiftpmが作られていることを確認してください. パッケージの追加 立ち上がったAppプロジェクトにパッケージを追加します. 左メニューのswiftpmを選びます.設定が表示されます. [Package Dependencies]を選びます. 左下の[+]ボタンを押します. LilySwiftForPlaygroundの追加 右上の検索フィールドにLilySwiftのURLを入力します. https://github.com/wdkk/LilySwiftForPlayground.git リストにlilyswiftforplaygroundが表示されるので,これを選びます. バージョンなどは利用したいものであることを確認してください. 確認したら[Add Package]を押します. 元の画面に戻るとリストにLilySwiftForPlaygroundが追加されています. LilySwiftの利用開始 ファイルリストにパッケージが追加されているかを確認します. リストが出ていない場合, 一度.swiftpmを立ち上げ直してください. Lilyを使いたいswiftファイルに以下のimportを記入します. import LilySwiftForPlayground Lilyの機能を使っていないため, 画面に変化はありませんが、これでLilyの機能を使う準備が整いました. Lilyの機能が使えるかを試すにはこちらを参考にしてください.

macOSのXcodeを使ったApp開発にLilySwiftを導入します。 ここでは従来の**Xcodeプロジェクト形式(xcodeproj)**でLilySwiftを使う手順をご紹介します. Playgroundsでは使えませんが,swiftpmでは制限されていることが幅広くできるようになります. 環境 macOS Sonoma 14.2.1 Xcode 15.0 Appの作成 XcodeでAppを新規作成します. [Create New Project]を選択します. Appの種類の選択 プラットフォームで[iOS]を選択します. macOSでも利用可能です. Appの種類で[App]を選びます. iOS App向けのxcodeprojが作成できます. [Next]を押します. Appの名前を決める 製品名をつけます. 開発アカウントや組織が決まっていればここで設定してください(なければNoneでも作れます). [Interface]はSwiftUIを選びます. [Language]はSwiftを選びます. [Storage]は任意です(案内ではNoneにしています). [Next]を押します. 保存先を選択します. 作成後, 保存先にフォルダが作られていることを確認してください. パッケージの追加 立ち上がったAppプロジェクトにパッケージを追加します. 左メニューのプロジェクトルート(プロジェクトの1番上の根本)を選びます. プロジェクト設定が表示されます. [Package Dependencies]を選びます. 左下の[+]ボタンを押します. LilySwiftの追加 右上の検索フィールドにLilySwiftのURLを入力します. https://github.com/wdkk/LilySwift.git リストにlilyswiftが表示されるので,これを選びます. バージョンなどは利用したいものであることを確認してください. 確認したら[Add Package]を押します. 元の画面に戻るとリストにLilySwiftが追加されています. ファイルリストにもLilySwiftが追加されていることを確認してください. LilySwiftの利用開始 Lilyを使いたいswiftファイルに以下のimportを記入します. import LilySwift Lilyの機能を使っていないため, 画面に変化はありませんが、これでLilyの機能を使う準備が整いました. Lilyの機能が使えるかを試すにはこちらを参考にしてください.

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

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の機能が使えるかを試すにはこちらを参考にしてください.

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()! // Playground2Dのデータを用意する lazy var planeStorage:PlaneStorage = .playgroundDefault( device:device ) // Lily Playgroundのデザイン関数 func design( screen:PGScreen ) { screen.clearColor = .darkGrey PGRectangle() .color( .red ) } // Lily Playgroundのアップデート関数 func update( update:PGScreen ) { } } struct ContentView: View { let playground:Playground // Lily Playgroundのデータ @State var scene:PGScene // Lily Playgroundのシーン init() { // Lily Playgroundのデータとシーンをつくる playground = Playground() // シーンにdesign関数とupdate関数を渡す scene = .init( planeStorage:playground.planeStorage, design:playground.design, update:playground.update ) } var body: some View { VStack { // Lily Playgroundを表示するビュー.シーンを渡す PGScreenView( device:playground.device, scene:$scene ) } } } 結果 ...

LilySwiftの活用方法について紹介します. LilySwiftの導入 1. Playgrounds(.swiftpm)の場合 1-1. iPadのPlaygroundsでLilySwiftをつかう 1-2. macOSのPlaygroundsでLilySwiftをつかう 1-3. XcodeでswiftpmをつくりLilySwiftをつかう 2. Xcodeプロジェクト(.xcodeproj)の場合 2-1. XcodeプロジェクトでLilySwiftをつかう 3. Lilyの機能を試す 3-1. 画像処理した画像をSwiftUIに表示する 4. 関連情報 4-1. LilySwiftとLilySwiftForPlaygroundの違い SwiftUIでLily Playgroundを使う 1. 導入 1-1. SwiftUI + Lily Playgroundをはじめる : PGScreenViewとPGSceneの使い方 2. SwiftUI + Playground2D 2-1. 2Dで使える画像を増やす 2-2. 2Dで使える最大パーティクル数を変える 2-3. ボタンを押してパーティクルの色を変える

SwiftでのAppサンプルを紹介していきます. RealityKit(iOS/iPadOS) iOSでRealityKitを動作させるサンプルです. swiftpmのサンプルはiPadのPlayground Appでも実行可能です. 1. 物理ベースマテリアル (Physically Based Material) 1-1. Physically Based Material: Box 1-2. Physically Based Material: Sphere 2. ライティングをしないマテリアル (Unlit Material) 2-1. Unlit Material: Box 2-2. Unlit Material: Sphere 3. シンプルマテリアルのカスタマイズ 3-1. テクスチャを適用したBox 3-2. テクスチャを適用したSphere 4. シェーダを使ったマテリアル [※Xcodeのみ] 4-1. プレーンメッシュに円を描く 4-2. プレーンメッシュにボヤけた円を描く 4-3. プレーンメッシュに矩形を描く 4-4. プレーンメッシュに三角を描く 4-5. プレーンメッシュにテクスチャをあてる 4-6. プレーンメッシュを複数描く