カテゴリー: 未分類

Rearity Composer Pro を使って炎のパーティクルを再現したので下記にその際の設定の画像を貼っておきます。

Emmiter

まずはエミッターの設定
公式のDeveloperのビデオの中でも最初にエミッターからいじることをおすすめされていました。
ポイントはサイズとEmitterShapeの選択欄で表現したい形に近いものを選ぶことです。

Loopのチェックが入ってることを確認して、再生ボタンを押して、
右サイドバーにある再生ボタン▶️を押して動作確認をしましょう。

Particle

次にパーティクルの設定です。
炎のエフェクトはデフォルトでプリセットに入っていなかったので自分で設定しました。

こんな感じです。

Birth Rate の設定の数値を1000程度に設定すると、よりリアルな豊かな表現になるのですが、
あまり数値を上げすぎると重くなるようなので低くすることを心がけました。

低い値に設定すると、
PropertiesのSizeを大きめに設定しないとスカスカになるので、
少しチープな感じにもなりますが、逆にポップになっていいかなって感じで実装しました。

炎を再現するときにカラーは中心部を明るくして、
先端の方に少しブラックの入った垢に設定すると、煤けた感じが表現できていい感じでした。

Noiseを設定すると、ランダム性が出るのでおすすめです。

Attract の設定で上下方向（Y軸）の値を正の値にして、他の軸の方向を０にしないと風に靡かれたような表現になるので注意です。

Vortexの設定をすると回転の表現になるので、一応設定しました。

終わりに

今後もVisionOSの開発もしていきます。仕事等の連絡あればフォームからお願いします。

cannnot preview in this file

というエラーが出て全く動画が読み込まれない時があります。

そんな時は動画のファイルをXCodeで開いて、
右のインスペクターからTarget MemberShipに自分のプロジェクトを選択しましょう。

動画を扱うたびにこのことを忘れてパニクるので備忘録がてらです。

SwiftUIでカメラ機能を実装する方法についてです。

基本機能の実装

import SwiftUI
import AVFoundation

struct CameraContentView: View {
    var body: some View {
        CameraView()
            .edgesIgnoringSafeArea(.all)
    }
}

struct CameraView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView { BaseCameraView() }
    func updateUIView(_ uiView: UIViewType, context: Context) {}
}

class BaseCameraView: UIView {
    override func layoutSubviews() {
        super.layoutSubviews()
        _ = initCaptureSession
        (layer.sublayers?.first as? AVCaptureVideoPreviewLayer)?.frame = bounds
    }

    lazy var initCaptureSession: Void = {
        guard let device = AVCaptureDevice.DiscoverySession(deviceTypes: [.builtInWideAngleCamera],
                                                            mediaType: .video,
                                                            position: .unspecified)
                .devices.first(where: { $0.position == .front }),
              let input = try? AVCaptureDeviceInput(device: device) else { return }

        let session = AVCaptureSession()
        session.addInput(input)
        session.startRunning()

        layer.insertSublayer(AVCaptureVideoPreviewLayer(session: session), at: 0)
    }()
}

このコードを実行すると、フロントカメラが起動し、画面全体に映像が表示されます。

画面の向きに合わせてカメラの向きを変える

このままだと、端末の向きを変えた時に縦：横＝16:9の比率を保ったまま回転してしまうので、画面の向きに応じたカメラの映像が出てこなくなってしました。

そこで下記コードを追記しました。

enum Orientation: Int {
    case right = -1, down = 0, left = 1, up = 2
}

private func getDeviceOrientation() -> Orientation {
    guard let interfaceOrientation = UIApplication.shared.windows.first(where: { $0.isKeyWindow })?.windowScene?.interfaceOrientation else {
        return .right
    }
    switch interfaceOrientation {
    case .landscapeLeft:
        return .left
    case .landscapeRight:
        return .right
    case .portrait:
        return .down
    case .portraitUpsideDown:
        return .up
    default:
        return .right
    }
}

private func fixCameraOrientation() {
    let rotation: CGFloat = CGFloat(getDeviceOrientation().rawValue) * 90
    previewLayer?.transform = CATransform3DMakeRotation(rotation / 180 * CGFloat.pi, 0, 0, 1)
}

これらの関数をlayoutSubviewsに追加することで、デバイスの向きが変わるたびにカメラの向きも適切に調整されます。

参考文献様

以下の記事に助けられました感謝

https://zenn.dev/platina/articles/5b9683f6d50938

MacOS向けのAppを制作しています。

動画を再生する機能をつけたところ横に帯が出てしまいました。
（下記画像：紫のボーダーの内側左右に黒い帯が出てしまっている）

調べたところ、iOS向けにこれを消す記事があったのですがMacOSではこれが使えなかったので、試してみたことを記事に残しておきます。

この記事のことをやるとした画像のようになります。角丸を飛び越えてしまってるので調子が必要そう…。

事前準備　動画の再生まで

まず、動画の準備から始めます。再生したい動画ファイルをプロジェクトに追加し、そのURLをAVPlayerにセットします。

import SwiftUI
import AVKit

struct VideoView: View {
    private let player = AVPlayer(url: Bundle.main.url(forResource: "HowToSetIcon", withExtension: "mov")!)

    var body: some View {
        PlayerView(player: player)
    }
}

黒い帯を消す方法

次に、AppKitの力を借りて、NSViewRepresentableを使用してAVPlayerViewをラップします。これにより、動画がビュー全体にフィットするように調整できます。

struct PlayerView: NSViewRepresentable {
    let player: AVPlayer

    func makeNSView(context: Context) -> NSView {
        let playerView = AVPlayerView()
        playerView.player = player
        return playerView
    }

    func updateNSView(_ nsView: NSView, context: Context) {
        // none
    }
}

class AVPlayerView: NSView {
    var player: AVPlayer? {
        didSet {
            (self.layer as? AVPlayerLayer)?.player = player
        }
    }

    override init(frame frameRect: NSRect) {
        super.init(frame: frameRect)
        self.wantsLayer = true
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        self.wantsLayer = true
    }

    override var layer: CALayer? {
        didSet {
            guard let layer = self.layer as? AVPlayerLayer else { return }
            layer.videoGravity = .resizeAspectFill
        }
    }

    override func makeBackingLayer() -> CALayer {
        return AVPlayerLayer()
    }
}

これで、動画がフルスクリーンで表示され、再生や停止のUI部品は表示されません。これにより、動画の横に黒い帯が表示される問題を防ぐことができます。

やっぱめんどくさい（追記）

SwiftUI標準のプレイヤーだとホバー時に再生停止ボタンと、シークバーが標準で付いているので、AppKitを使ってしまうとそれを自分で構築しなければならないので大変…。

最初にも書いたけど、CornerRadiusかけたときに切り取れるようにする方法がわからない。

結局動画編集して比率を変更してAspectRatioを指定することにした。コードで切り取っていい感じにするのは諦めた…。

VideoPlayer(player: player)
        .aspectRatio(4 / 3, contentMode: .fit)