おもちゃラボ

Unityで遊びを作っていきます

【iOS】画面のサイズに応じて文字のサイズを変更する

XcodeのAutoLayoutを使って文字を配置した場合、そのままだと画面サイズが変わっても同じフォントサイズで文字が表示されてしまいます。

これだと下図のように文字が画面からはみ出てしまったり、見切れてしまったりしまいます。ここでは、端末の画面サイズが変わったときに、自動的に文字のサイズもスケールする方法を紹介します。

f:id:nn_hokuson:20190806210143p:plain:w300 f:id:nn_hokuson:20190806210152p:plain:w206

文字を中央に固定する

まずはLabelを中央に配置して、文字サイズとAlignmentを調節します。ここではフォントサイズを120、Alignmentを中央寄せにしました。また、文字がLabel領域の中央に表示されるように、Baselineは「Align Centers」に設定しています。

f:id:nn_hokuson:20190806210256p:plain:w300

次に文字を画面中央に固定します(べつに固定するのは左上でもどこでも大丈夫です)。Labelを選択した状態で、Xcode右下のAlignメニューから「Horizontally in Container」と「Vertically in Container」にチェックを入れます。これでLabelが画面中央に表示されるようになります。
f:id:nn_hokuson:20190806210322p:plain:w350
また、画面サイズが変わってもLabelのアスペクトは固定したいので、「Add New Constraints」メニューから「Aspect Ratio」にチェックを入れます。
f:id:nn_hokuson:20190806210334p:plain:w350

自動的に文字サイズを変更する

画面サイズによって文字サイズを自動的に変更するには、Autoshrinkのドロップダウンメニューを「Minimum Font Scale」に設定します。これによってLabelの領域が小さくなると、そのサイズに応じて文字のフォントサイズも縮小されます。

f:id:nn_hokuson:20190806210451p:plain:w300

今の状態では画面のサイズが変わってもLabelの領域は変わりません。画面サイズに比例してLabelの領域も変わるように設定します。Xcodeの左側のLabelメニューからControlキーを押しながらViewにドラッグして「Equal Widths」を選択します。

f:id:nn_hokuson:20190806210502g:plain:w300

最後に今設定した「Proportional Width to SuperView」のMultiplierに「Labelの横幅 / 画面の幅」の値を設定します。ここでは画面幅が1024px、Labelの幅が614pxだったので614/1024=0.8を設定しています。

f:id:nn_hokuson:20190806210519p:plain:w300

これで画面サイズに応じて文字のサイズが自動的に拡縮されるようになりました。シミュレータで変更して試してみてください。

f:id:nn_hokuson:20190806210529p:plain:w300 f:id:nn_hokuson:20190806210537p:plain:w213

【iOS12対応】Visionを使って顔検出を行う

ここではVisionを使って顔を検出する方法を紹介します。VisionはiOS11から使える画像処理フレームワークです。ここではiOS12を使って説明します。

f:id:nn_hokuson:20190725211217j:plain:w550

Visonフレームワークとは

Vision は画像処理用のフレームワークです。ただOpenCVなどのように汎用的な画像処理ではなく、顔検出や文字検出など機械学習に特化したフレームワークになっています。

Visionフレームワークを使うと、次のようなものを簡単に検出することができます。それぞれのものについては個別に説明します。

  • 顔検出
  • 顔ランドマーク検出
  • 文字検出
  • 矩形検出
  • バーコード
  • オブジェクトトラッキング

顔検出の流れ

Visionフレームワークを使って顔検出をするには「リクエスト」と「リクエストハンドラ」の2つを使います。

リクエストハンドラ(VNImageRequestHandler)に処理したい画像とリクエスト内容を渡すことで、指定されたオブジェクトの検出処理が行われます。検出結果はObservationクラスを使って取得することができます。

f:id:nn_hokuson:20190725210217j:plain

リクエストには次のような種類があります。ここでは顔検出をしたいのでVNDetectFaceRectanglesRequestを使用しています。

VNDetectFaceRectanglesRequest 顔検出
VNDetectFaceLandmarksRequest 顔ランドマーク検出
VNDetectRectanglesRequest 矩形検出
VNDetectBarcodesRequest バーコード検出
VNDetectTextRectanglesRequest テキスト検出

それでは早速、写真から顔を検出するプログラムを作ってみましょう。

写真から顔を検出する

まずは読み込んだ写真から顔の位置を検出して、その周りに矩形を表示するプログラムを作ってみましょう。

Xcodeのプロジェクトを作成して、次のtest.jpgの画像をプロジェクトに追加します。追加できたらViewController.swiftに次のプログラムを入力してください。

import UIKit
import Vision

class ViewController: UIViewController {

    var image : UIImage!
    
    func drawRect(box:CGRect){
        let xRate : CGFloat = self.view.bounds.width / self.image.size.width
        let yRate : CGFloat = self.view.bounds.height / self.image.size.height
        
        let faceRect = CGRect(
            x: (box.minX) * self.image.size.width * xRate,
            y: (1 - box.maxY) * self.image.size.height * yRate,
            width: box.width * self.image.size.width * xRate,
            height: box.height * self.image.size.height * yRate
        )
        
        let faceTrackingView = UIView(frame: faceRect)
        faceTrackingView.backgroundColor = UIColor.clear
        faceTrackingView.layer.borderWidth = 1.0
        faceTrackingView.layer.borderColor = UIColor.green.cgColor
        self.view.addSubview(faceTrackingView)
        self.view.bringSubviewToFront(faceTrackingView)
    }
        
    override func viewDidLoad() {
        super.viewDidLoad()

		// 画像を読み込む
        self.image = UIImage(named: "test.jpg")
        
        // 顔検出用のリクエストを生成
        let request = VNDetectFaceRectanglesRequest { (request: VNRequest, error: Error?) in

            for observation in request.results as! [VNFaceObservation] {
                
                // 枠線を描画する
                self.drawRect(box:observation.boundingBox)
            }
        }
        
        // 顔検出開始
        if let cgImage = image.cgImage {
            let handler = VNImageRequestHandler(cgImage: cgImage, options: [:])
            try? handler.perform([request])
        }
    }
}

viewDidLoadメソッドの最初でVNDetectFaceRectanglesRequestで顔検出のリクエストを作成しています。

顔が見つかった場合はrequest.resultsにVNFaceObservationの配列として結果が格納されているので、ひとつずつ取り出してdrawRectメソッドで矩形を描画しています。

リクエストは作成しただけでは実行されません。最後にVNImageRequestHandlerを作って、performメソッドに先程の顔検出のリクエストを渡して実行しています。このタイミングで実際の顔検出が行われています。

動画から顔を検出する

一枚の写真から顔が検出できるようになったところで、次は動画から顔を検出してみます。といっても動画は時系列に画像が並んだものとみなせるので、顔検出の方法はほとんど同じです。ただiOSで動画を扱うにはAVCaptureSessionを使う必要があり、これが結構面倒です・・・

動画で顔検出する処理を追加したプログラムは、次のようになります。まずは全プログラムを載せておきます。

import UIKit
import Vision
import AVFoundation

class ViewController: UIViewController, AVCaptureVideoDataOutputSampleBufferDelegate {

    private var _captureSession = AVCaptureSession()
    private var _videoDevice = AVCaptureDevice.default(for: AVMediaType.video)
    private var _videoOutput = AVCaptureVideoDataOutput()
    private var _videoLayer : AVCaptureVideoPreviewLayer? = nil
    private var rectArray:[UIView] = []
    var image : UIImage!
    
    func setupVideo( camPos:AVCaptureDevice.Position, orientaiton:AVCaptureVideoOrientation ){
        // カメラ関連の設定
        self._captureSession = AVCaptureSession()
        self._videoOutput = AVCaptureVideoDataOutput()
        self._videoDevice = AVCaptureDevice.default(.builtInWideAngleCamera, for: .video, position: camPos)
        
        // Inputを作ってSessionに追加
        do {
            let videoInput = try AVCaptureDeviceInput(device: self._videoDevice!) as AVCaptureDeviceInput
            self._captureSession.addInput(videoInput)
        } catch let error as NSError {
            print(error)
        }
        
        // Outputを作ってSessionに追加
        self._videoOutput.videoSettings = [kCVPixelBufferPixelFormatTypeKey as AnyHashable as! String : Int(kCVPixelFormatType_32BGRA)]
        self._videoOutput.setSampleBufferDelegate(self, queue: DispatchQueue.main)
        self._videoOutput.alwaysDiscardsLateVideoFrames = true
        self._captureSession.addOutput(self._videoOutput)
        
        for connection in self._videoOutput.connections {
            connection.videoOrientation = orientaiton
        }
        
        // 出力レイヤを作る
        self._videoLayer = AVCaptureVideoPreviewLayer(session: self._captureSession)
        self._videoLayer?.frame = UIScreen.main.bounds
        self._videoLayer?.videoGravity = AVLayerVideoGravity.resizeAspectFill
        self._videoLayer?.connection?.videoOrientation = orientaiton
        self.view.layer.addSublayer(self._videoLayer!)
        
        // 録画開始
        self._captureSession.startRunning()
    }
    
    private func imageFromSampleBuffer(sampleBuffer: CMSampleBuffer) -> UIImage {
        let imageBuffer: CVImageBuffer = CMSampleBufferGetImageBuffer(sampleBuffer)!
        CVPixelBufferLockBaseAddress(imageBuffer, CVPixelBufferLockFlags(rawValue: 0))
        
        let colorSpace = CGColorSpaceCreateDeviceRGB()
        let bitmapInfo = (CGBitmapInfo.byteOrder32Little.rawValue | CGImageAlphaInfo.premultipliedFirst.rawValue)
        let context = CGContext(data: CVPixelBufferGetBaseAddressOfPlane(imageBuffer, 0), width: CVPixelBufferGetWidth(imageBuffer), height: CVPixelBufferGetHeight(imageBuffer), bitsPerComponent: 8, bytesPerRow: CVPixelBufferGetBytesPerRow(imageBuffer), space: colorSpace, bitmapInfo: bitmapInfo)
        let imageRef = context!.makeImage()
        
        CVPixelBufferUnlockBaseAddress(imageBuffer, CVPixelBufferLockFlags(rawValue: 0))
        let resultImage: UIImage = UIImage(cgImage: imageRef!)
        return resultImage
    }
    
    func drawRect(box:CGRect){
        let xRate : CGFloat = self.view.bounds.width / self.image.size.width
        let yRate : CGFloat = self.view.bounds.height / self.image.size.height
        
        let faceRect = CGRect(
            x: (1 - box.maxX) * self.image.size.width * xRate,
            y: (1 - box.maxY) * self.image.size.height * yRate,
            width: box.width * self.image.size.width * xRate,
            height: box.height * self.image.size.height * yRate
        )
        
        let faceTrackingView = UIView(frame: faceRect)
        faceTrackingView.backgroundColor = UIColor.clear
        faceTrackingView.layer.borderWidth = 1.0
        faceTrackingView.layer.borderColor = UIColor.green.cgColor
        self.view.addSubview(faceTrackingView)
        self.view.bringSubviewToFront(faceTrackingView)
        rectArray.append(faceTrackingView)
    }
    
    func captureOutput(_ output: AVCaptureOutput, didOutput sampleBuffer: CMSampleBuffer, from connection: AVCaptureConnection) {
        
        DispatchQueue.main.async {
            self.image = self.imageFromSampleBuffer(sampleBuffer: sampleBuffer)
            // 顔検出用のリクエストを生成
            let request = VNDetectFaceRectanglesRequest { (request: VNRequest, error: Error?) in
                
                self.rectArray.forEach{ $0.removeFromSuperview() }
                self.rectArray.removeAll()
                
                for observation in request.results as! [VNFaceObservation] {
                    
                    // 枠線を描画する
                    self.drawRect(box:observation.boundingBox)
                }
            }
            
            // 顔検出開始
            if let cgImage = self.image.cgImage {
                let handler = VNImageRequestHandler(cgImage: cgImage, options: [:])
                try? handler.perform([request])
            }
        }
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupVideo(camPos: .front, orientaiton: .portrait)
    }
}

AVCaptureSessionを使うために、次のようにプログラムを変更しています。

  1. import AVFoundationを追加
  2. AVCaptureVideoDataOutputSampleBufferDelegateを継承
  3. setupVideoメソッドの中でAVCaptureSessionの初期化
  4. captureOutputデリゲートを宣言して、その中で顔検出

AVCaptureSessionには入力ソースと出力形式を指定する必要があります。入力にはiPhoneデバイスのカメラを指定します。一方出力には「静止画」「動画」「音声」などを選ぶことができます。
f:id:nn_hokuson:20190725202848j:plain
ここでは入力にはフロントカメラを指定しました。また、出力には動画のフレームデータがほしいのでAVCaptureVideoDataOutput指定しています。また、画像フォーマットやdelegateメソッド、表示の向きなどもあわせて指定します。

AVCaptureSessionが正しく設定できると、captureOutputメソッドが1フレームごとに呼び出されるようになります。この中で顔検出の処理を行って矩形を描画しています(ここは写真から顔検出するのとほぼ同じです)

プログラムができたらinfo.plistにPrivacy - Camera Usage Descriptionを追加してから(忘れたらアプリがクラッシュします!)実行してみてください。↓のような感じで動くと思います。

【Unity】Blenderでテクスチャをベイクする

Unityでライトマップをベイクして、影をテクスチャに焼き付けることもできますが、Blenderでモデルを作った時点でAOなどの影をベイクすることもできます。ここではBlender2.8を使ってテクスチャに影をベイクする方法を紹介します。

f:id:nn_hokuson:20190716220927j:plain:w600

レンダリングの設定をする

テクスチャをベイクするには、Belnder2.8から採用されたEeveeではなくCyclesというレンダーエンジンを使う必要があります。そこで、Sceneアイコンを選択してレンダーエンジンを「Cycles」に設定します。

f:id:nn_hokuson:20190716220557p:plain:w300

アンビエントオクルージョンの影もベイクするためにワールドアイコンを選択して、アンビエントオクルージョンにチェックを入れます。

f:id:nn_hokuson:20190716220628p:plain:w300

ベイクするテクスチャを作成する

まずはベイクするためのテクスチャを作成します。メニューバーから「UV Editing」を選択して2画面にします。UV展開画面の上にある「新規」ボタンをクリックしてベイクするテクスチャを作成します。

f:id:nn_hokuson:20190716220647p:plain:w450

ここでは名前を「ao」、幅と高さは1024pxに設定しました。ベイクするテクスチャの大きさが大きくなるほど、ベイクにも時間がかかるので、最初は小さいテクスチャで実験したほうがいいかもしれません。

f:id:nn_hokuson:20190716220659p:plain:w300

次にモデルをUV展開します。右のモデリング画面で、すべての頂点を選択した状態で「Uキー」→「スマートUV投影」を選択してUV展開します。

f:id:nn_hokuson:20190716220736j:plain:w450

ベイクするマテリアルの設定

今作成したテクスチャをベイクするマテリアルに、指定します。画面左のエディター選択メニューから「シェーダーエディタ」を選択します。

f:id:nn_hokuson:20190716220812j:plain:w650

「追加」→「テクスチャ」→「画像テクスチャ」を選択します。

f:id:nn_hokuson:20190716220829j:plain:w600

追加された画像テクスチャノードのテクスチャに先程作成した「ao」を設定します。

f:id:nn_hokuson:20190716220716p:plain:w300

ベイクする

Sceneアイコンからベイクを選択して、ベイクボタンを押してください。簡単なモデルであれば数秒でベイクが完了して、次のようなベイクテクスチャが表示されます。

f:id:nn_hokuson:20190716220857j:plain:w350

画面上の画像ボタンから「保存」を選択してください。

f:id:nn_hokuson:20190716220917j:plain:w200

Unityで表示する

作成したモデルとベイクしたテクスチャをUnityにインポートし、シーンビューでマテリアルをアタッチしてください。次のようにAOの効果がベイクされた状態のテクスチャが設定できます。

f:id:nn_hokuson:20190716220927j:plain:w600