iPhone X layout

This topic contains 7 replies, has 2 voices, and was last updated by  Mario 6 months ago.

  • February 13, 2018 at 8:50 pm #180240

    Hello Justin,

    Best way for Adapt to the iPhone X Screen Size.
    I use the resolution 1900×1080 and on the iPhone X doesn’t work well.

    Any idea?

    Thanks

  • February 13, 2018 at 9:28 pm #180241

    Yeah, we got into that recently here. Link.

    SpriteKit project right? That should help, but hit me up with any followup questions.

  • February 14, 2018 at 3:26 am #180250

    Thank you,
    I’m asking in the story tellers kit 2. The best size for .sks phone, that can include the iPhone X.
    Or do have to change de code and create another.sks specific for the iPhone X?
    Hope make sense my question.
    I only try to understand the best way to get all the phones in a safe resolution,with one .sks .

    • February 14, 2018 at 10:35 am #180273

      Well, I’d like to think using a separate SKS file could be avoided within the iPhone family. If your app is landscape, can you extend the art horizontally, so on the non-X devices some of it is getting cut off? Obviously you don’t want to cut off anything important, but for example if the background is just a sky, you add some extra sky on the sides. Then on the X, you’d just see a bit more than you would on the non-X.

  • February 14, 2018 at 11:05 am #180275

    thanks , sorry for anything

    In the kit can i use a separate SKS, only for the iPhone X and other for the others phones plus the SKS iPad ?

    because, the problem is: with 1900×1080 works great on all phones except the X.

    I use a landscape mode and with this resolution cut on the height of the X.

    thank you Justin

  • February 14, 2018 at 2:17 pm #180280

    Yeah let me just test the code in the kit and I’ll make it an official change. Sounds like the iPhone X isn’t going away =)

  • February 14, 2018 at 2:44 pm #180281

    Okay, I’ll update the zip file for the kit in a second, but if you just want to paste the code into your version, Here goes….

    In GameViewController.swift

    find this line…

    if let scene = Page(fileNamed:"CoverPhone") {

    and ABOVE that, paste in…

    
    if (UIScreen.main.nativeBounds.width == 2436 || UIScreen.main.nativeBounds.height == 2436) {
                    //iPhone X
                   
                    print("must be iPhone X in either portrait or landscape ")
                    
                    if let scene = Page(fileNamed:"CoverPhoneX") {
                        
                        let skView = self.view as! SKView
                        // skView.showsFPS = true
                        //skView.showsNodeCount = true
                        
                        /* Sprite Kit applies additional optimizations to improve rendering performance */
                        skView.ignoresSiblingOrder = true
                        
                        /* Set the scale mode to scale to fit the window */
                        scene.scaleMode = .aspectFill
                        scene.currentPage = "Cover"
                        skView.presentScene(scene)
                        
                        return
                    }
                    
                }
    
    

    Now go over to Page.swift

    Easiest thing to do here is just find the finishLoadingNextScene function and replace the entire function with the code below…

    func finishLoadingNextScene(_ nextPage:String) {
            
            pageLoading = "" //probably not needed
            
            let nextPagePhone:String = nextPage + "Phone"
            let nextPagePhoneX:String = nextPage + "PhoneX"
            
            transition.pausesIncomingScene = false
            transition.pausesOutgoingScene = false
            
            
            if (isPhone == false) {
                
                print(nextPage)
                
                if let scene = Page(fileNamed: nextPage) {
                    
                    
                    scene.currentPage = nextPage
                    scene.scaleMode = .aspectFill
                    
                    self.view?.presentScene(scene, transition: transition )
                    
                }
                
            } else {
                //if on any iPhone...
                
                //interupt things now that we're living in the iPhone X world...
                
                if (UIScreen.main.nativeBounds.width == 2436 || UIScreen.main.nativeBounds.height == 2436) {
                    //iPhone X
                    
                    print("must be iPhone X, will check for a scene named \(nextPagePhoneX) ")
                    
                    if let scene = Page(fileNamed: nextPagePhoneX) {
                        
                        print( "found a custome iPhone X Scene" )
                        
                        scene.currentPage = nextPage
                        scene.scaleMode = .aspectFill
                        
                        self.view?.presentScene(scene, transition: transition)
                        
                        //returns out so the if statements below are ignored.
                        return
                        
                    }
                    
                }
                
                //resume the code from the pre-iPhoneX era.
                
                if let scene = Page(fileNamed: nextPagePhone) {
                    
                    scene.currentPage = nextPage
                    scene.scaleMode = .aspectFill
                    
                    self.view?.presentScene(scene, transition: transition)
                    
                } else if let scene = Page(fileNamed: nextPage) {
                    
                    scene.currentPage = nextPage
                    scene.scaleMode = .aspectFill
                    
                    self.view?.presentScene(scene, transition: transition)
                    
                }
                
                
            }
            
        }
    
     

    So any .sks file you want to run specifically on the iPhone X, should be named “PhoneX.sks” at the end of it. For example…

    CoverPhoneX.sks

    So really no different than before, just instead of Phone.sks use PhoneX.sks

    Size wise, if you are in landscape mode, you probably want to set the sks stage to 812 by 375.

    Keep me posted!

  • February 14, 2018 at 6:22 pm #180285

    Thank you,

    Work perfectly. And thank you for being so brief.

    When I Finnish the book I let you now. Only need to start paste de art for this new X.

    Best regards Mario

You must be logged in to reply to this topic.

Download the new CartoonSmart TV App - Tons of FREE and Premium Lessons

It's Free Right? Sure, I'll Get It!