Playground

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に含まれているアセット名と一致しています. ...