iPhoneX、iPhoneXs、iPhoneXs Max、iPhoneXr画面サイズとセキュリティゾーンを調整する

この記事は、Appleの最新の3つのiPhoneX、iPhoneXs Max、iPhoneXrをどのように適応させるかを説明する、前の記事( http://www.ifiero.com/index.p …)の補足です。

レビュー:2048 1536の画面サイズに従って、シーン内のすべての画像を描画したいのはなぜですか? つまり、背景画像のサイズは2048 1536であり、この比率に応じて他の画像が描画されます。

なぜあなたはこれをやっていますか?

我々は、2048 1536がiPad Retinaの解像度であることを知っています。 それはまた、適応するために必要な機器の最高解像度です。 そのため、低解像度のデバイスと互換性を持たせるため、このサイズをゲームで選択しました。 2048 1536は、iPad Retinaで完璧です。 他のデバイスでは、最初にAspectFillを使用して、対応する画面解像度の縦横比Ratioを拡大縮小し、異なるiPhoneサイズに合わせて適用します。 AspectFillスケーリングのコードは次のとおりです。

if let scene = GameScene(fileNamed: "GameScene") {
                scene.size = CGSize(width: 2048, height: 1536)
                scene.scaleMode = .aspectFill /// 缩放
                view.presentScene(scene)
 }

スケーリングにAspectFillを使用する方法を理解してから、今度はiPhoneXの画面解像度を見てみましょう。

iPhoneXの画面サイズ解像度(上記の画像の高さは812 = 2436が1/3に縮小されています):

設備 画面サイズの解像度 対応する場所を保存する画像
iPhoneX(1x @ 1x) 375×812 @ 1x
iPhoneX(2倍@ 2倍) 750×1624 @ 2x
iPhoneX(3倍@ 3倍) 1125×2436 @ 3x

iPhoneX / iPhoneXs / iPhoneXsのスクリーンサイズ解像度Max / iPhoneXr

iPhoneXシリーズの画面解像度:

設備 画面解像度 画像が保存されている場所
iPhoneX(3倍@ 3倍) 1125×2436 @ 3x
iPhoneX(3x @ 3x) 1125×2436 @ 3x
iPhoneXs Max(3x @ 3x) 1242×2688 @ 3x
iPhoneXr(2倍@ 2倍) 828×1792 @ 2x

上記のiPhoneXシリーズの画面解像度によると、アスペクト比Ratioは2.16です。

AspectFillでスケーリングした後、scene.scaleMode = .aspectFill、黒いワイヤフレーム内の領域は、デバイスに表示されるシーンの実際のサイズ(つまり、画面の表示可能範囲)を示します。

iPad Retina:オレンジ色の領域と黒いワイヤフレーム内の領域は完全に一致しているため、デバイス上に完全に表示することができます。

iPhone6 / 7/8 / Plus:黒いワイヤフレームの内側の領域は2048 * 1152です。ブラックボックスを超えたコンテンツは見えません。ゲームを設計するときは、スプライトの位置を目に見えない位置にしないでください。エリア。

iPhoneX:黒いワイヤフレームの内側の領域は、2048 * 948(青は安全領域)です。ここで、高さは948 = 2048 / 2.16(アスペクト比)です。

異なるサイズのiPhoneの画面サイズ比と画面縦横比
|機器|スクリーンスケール|スクリーンアスペクト比|
| – |: – : – | – :|
| iPad Retina | 4/3 | 1.33 |
| iPhone 6/7/8 | 16/9 | 1.77 |
| iPhone 6/7/8 Plus | 16/9 | 1.77 |
| iPhone X / Xs / Xr / Xs Max | – | 2.16 |

さらに、SpriteKitのゲーム開発には主に適応しているため、ナビゲーションナビゲーションバーの高さやTabBarステータスバーの高さを計算する必要はありませんが、可視領域(画面の可視範囲)を計算するだけで、必要に注意してください。インタラクティブな要素は危険領域危険地域ではなく、安全領域SafeAreaに配置されます。

視覚的領域(画面の可視範囲)=安全領域安全領域+危険領域危険領域

原則を理解した後、コードを書くことにしましょう。

1.拡張UIDeviceを展開して、デバイスがiPhoneまたはiPhoneXシリーズかiPadかを判断します

import UIKit
import SpriteKit

// iPhone X  375*812(H) @1x
// 竖屏
public let AREA_INSET_HEIGHT_TOP   :CGFloat = (UIScreen.main.bounds.height == 812 || UIScreen.main.bounds.height == 896) ? 44.0 : 0
public let AREA_INSET_HEIGHT_BOTTOM:CGFloat = (UIScreen.main.bounds.height == 812 || UIScreen.main.bounds.height == 896) ? 34.0 : 0
// 横屏(安全区域)
public let AREA_INSET_WIDTH_LEFT  :CGFloat = (UIScreen.main.bounds.width == 812 || UIScreen.main.bounds.width == 896) ? 44.0 : 0
public let AREA_INSET_WIDTH_RIGHT :CGFloat = (UIScreen.main.bounds.width == 812 || UIScreen.main.bounds.width == 896) ? 34.0 : 0

extension UIDevice {
    /// 是不是iPhoneX ,如果是竖屏则 UIScreen.main.bounds.height == 812
    public func isPhoneX() -> Bool {
        if UIScreen.main.bounds.width == 812 || UIScreen.main.bounds.width == 896 {  /// 横屏
            return true
        }
        return false
    }
    /// 是不是iPad
    public func isPad() -> Bool {
        return (UIDevice.current.userInterfaceIdiom == .pad) ? true : false;
    }
    
}

2.どのデバイスが検出されたか

  // MARK: - 检测是哪种设备
    func initCheckDevice(){
        if UIDevice.current.isPhoneX() {
            maxAspectRatio = 2.16         /// iPhoneX || iPhoneXs || iPhoneXs Max || iPhoneXr 2.16 高/宽比 ratio
        }else {
            maxAspectRatio  = UIDevice.current.isPad() ? (4.0 / 3.0) : (16.0 / 9.0)  /// iPhone 16:9,iPad 4:3
        }
        /// 画出可视区域
        drawPlayableArea(size: self.size,ratio: maxAspectRatio)
        /// 画出安全区域
        drawSafeArea(size: self.size,ratio: maxAspectRatio)
    }

3.セーフエリアを描画する

 // MARK: - 安全区域即用户交互的区域,非可视区域 (iPhoneX的安全区域 < 可视区域)
    func drawSafeArea(size:CGSize,ratio:CGFloat){
        
        playableHeight  = size.width / ratio
        playableMargin = (size.height - playableHeight ) / 2.0   /// P70
        
        let safeInsetLeft   =  AREA_INSET_WIDTH_LEFT * ratio
        let safeInsetRight  =  size.width - safeInsetLeft - AREA_INSET_WIDTH_RIGHT * ratio
        
        playableRect = CGRect(x: safeInsetLeft, y: playableMargin, width:safeInsetRight, height:  playableHeight)  /// 注意 scene的anchorPoint(0,0)原点的位置;
        let shapeFrame = SKShapeNode(rect: playableRect)
        shapeFrame.zPosition = 2
        shapeFrame.strokeColor = SKColor.green
        shapeFrame.lineWidth = 6.0
        addChild(shapeFrame)
        
    }

4.可視領域を描画し、可視領域の物理特性を割り当てます

 // MARK: - 画出可视区域
    func drawPlayableArea(size:CGSize,ratio:CGFloat){
        
        playableHeight  = size.width / ratio
        playableMargin = (size.height - playableHeight ) / 2.0   /// P70
        playableRect = CGRect(x: 0, y: playableMargin, width: size.width, height:  playableHeight)  /// 注意 scene的anchorPoint(0,0)原点的位置;
        print("playable Margin",playableMargin)
        
        let shapeFrame = SKShapeNode(rect: playableRect)
        shapeFrame.zPosition = 1
        shapeFrame.strokeColor = SKColor.red
        shapeFrame.lineWidth = 5.0
        addChild(shapeFrame)
        
        /// 可视区域的物理状态
        let playableBody = SKPhysicsBody(edgeLoopFrom: playableRect)
        playableBody.friction = 0
        self.physicsBody = playableBody
        playableBody.categoryBitMask    = PhysicsCategory.Frame
        playableBody.contactTestBitMask = PhysicsCategory.Ball
        playableBody.collisionBitMask   = PhysicsCategory.Ball
        
        /// 地板
        setupFloor()
    }

このように、ボールボールは可視領域(画面の可視範囲)内を移動するだけです。

重要な点は、画面サイズとセキュリティ領域の違いを理解することです。一般に、スクリーンは任意の範囲の要素に配置できますが、すべてのユーザー操作は安全な領域(青色のボックス)に配置する必要があります。

すなわち、可視領域(画面可視範囲)=安全領域安全領域+危険領域危険領域

ソースコードポータル: https//github.com/apiapia/Br …
その他のゲームチュートリアル: http : //www.iFIERO.com – 私はゲーム開発を誇りに思います

元のリンク