PGScreenViewは, 自分で用意した画像を自由に読み込んで利用することができます.
実行環境#
- Xcode 15.2
- LilySwift 5.1.23
サンプルコードとデータ#
上記の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に含まれているアセット名と一致しています.
ここにdeformed-lily.pngをドラッグ&ドロップして追加します.
Playground Appでアセットを追加する#
- メニュー「ファイル」＞「ファイルの追加」でdeformed-lily.pngを読み込みます.
- ファイルリストに「アセット」という項目が加わり, deformd-lilyが増えます.
新しいアセットをプログラムで利用する#
アセットが追加されると読み込みが可能になりますので, コード側に追加します.
コード2#
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
|
import SwiftUI
import LilySwiftForPlayground
import LilySwiftAlias
class Playground
{
// Metalを使う準備
lazy var device = MTLCreateSystemDefaultDevice()!
// Playground2Dのデータを用意する
lazy var planeStorage:PlaneStorage = .playgroundDefault(
device:device,
appendTextures:[ "deformed-lily" ]
)
// Lily Playgroundのデザイン関数
func design( screen:PGScreen ) {
PGPicture( "deformed-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
)
}
}
}
|
追加した画像をPGScreenのオブジェクトとして読み込むことができました.
画像読み込みのしくみ (テクスチャアトラス)#
Lily Playgroundで画像を使う時, 画像データを1枚の大きなテクスチャに並べて読み込みます. この仕組みを テクスチャアトラス といいます. テクスチャは最大で16,384x16,384ピクセルまで対応していますが, 読み込む画像が溢れると書き込みに失敗するようになります. 巨大な画像は読み込む前に適切なサイズに縮小してアセットに追加することも大切です. また画像が大きいほどテクスチャアトラスの作成にも時間がかかりますので, 縮小の工夫をしてみてください.