Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Export to XCODE - Can you set the size to be an iPhone version instead of ipad?

edited February 2014 in Questions Posts: 316

So I've run an initial test with my app as I'm developing it in XCODE now.

The game on my Codea screen fits perfectly, but the whole thing is twice the size it should be when in XCODE.

The game uses 8bit style images. I've drawn them in pixels then blown up the sprite sheets in photoshop to be 4 times the size with nearest neighbour as the graphical setting to keep them looking old school 8 bit.

They look fine when I'm developing in Codea but not when running the demo in XCODE.

Have I missed something during importing images or exporting the XCODE?

Thanks,
The Major

ADDENDUM as I know now the issue that I'm trying to resolve, see my post almost at the bottom I'm looking for this thread to talk about adapting this code to work on an iphone or at least an iphone screen size.

Comments

  • edited April 2014 Posts: 198

    They should work fine. I have an ipad 3 and when I ran my spacewar app on the ipad from Xcode it looked just like it did when it ran from codea. The simulator was huge on my non retina macbook and really slow. Have you tried running it on the device as opposed to the simulator?

    I guess I am trying to say I have not run into that problem. The exported project worked perfectly. All I had to do was put in my code signing so that it would run on my device and I could then upload to the App Store.

  • Posts: 152

    Hi @MajorMorgan,

    Maybe this thread can help:
    http://twolivesleft.com/Codea/Talk/discussion/3793/export-to-xcode:-retina-version-uses-non-retina-sprites/p1

    Also search the forum maybe for 'retina image size', I think there may be similar things encountered by other people...

    Brookesi

  • Hi @brookesi and @MrScience101

    Thanks for your posts.

    I've checked it on the device and its doing the same thing as the simulation.

    Ive coded the

    Basically on the IPAD CODEA screen it all fits to the screen size, but when its brought into an iphone simulator and the iphone itself its cropped.

    most likely this is due to the images being a certain size designed to work off of the IPAD screen. But I understand that there is a way to make sure the images and code are displayed as a ratio.

    the threads show what happens when you use a retina image which appears small. In my case I don't have these set to retina as I want them big and chunky regardless of the device. But on all devices the whole game appears cropped, just in the center.

    The code I have at the beginning of the main is:

    displayMode( FULLSCREEN_NO_BUTTONS )
    supportedOrientations(PORTRAIT)
    

    But I take it that the code above doesn't make the app fit to the screen of the device.

    It does mention:
    ContentScaleFactor

    But I'm wondering where I use that. Is it in the header of main or in one of the XCODE libraries?

    Any help will be amazing!

    thanks,
    Major

  • Sorry I've been a bit of a div.

    Its because its a game for an IPAD and it works fine on an IPAD.

    what I need to do is scale the whole version for an iphone version.

    IS that something I can do in the XCODE to make that happen?

    I'd love to have an Iphone version of the game.

    Any help would be awesome as I'm using the Universal settings on XCODE

  • I am sorry. I have no experience with using Codea to program iphone games. There is a fellow who made a game called "ironcrow" if you search for it in the forums and contact him, he might be able to help you.

  • Thanks @MrScience101 much appreciated. I'll look into it.

    I'm also thinking about cheating it. I'll try a scale maybe with my variables. If I do a variable = x/2 and see if I can export an iphone only version.

    The Iphone version displays the ipad version with a centered crop of the ipad canvas. I could cheat it and make sure all my game maths happens in the 320x480 area of the ipad game and let the iphone crop off the stuff you don't need to see.

    I don't know if it will get past the ios store developers but I can see.

    Also i'm thinking somewhere in the XCODE export of the codea app there's a setting for screen size?

  • The WIDTH and HEIGHT values do change when you switch from portrait to landscape and from fullscreen to standard screen (with parameter window). So, I wonder if you could code something simple using only proportions of WIDTH and HEIGHT, i.e. not using explicit numbered coordinates. You could then export that and see if the iPhone simulator displays everything.

  • @time_trial that's a good call. I'm going to see if I can program that with a simple demo first to see how it works. If it does I could go back into my game code and start re-working it based on those findings.

    Thanks!

  • Posts: 725

    @Majormorgan have a look at @reefwing's tutorials, in particular:

    http://codeatuts.blogspot.com.au/2012/10/tutorial-22-building-universal-app-in.html

    This describes the steps about making a Universal app. Making use of screen positions relating to WIDTH and HEIGHT is recommended. One other thing to watch is that if you set up a variable based on either WIDTH or HEIGHT, then subsequently alter the orientation of the screen, then the original old value will be retained (not the new one). This goes for setting the display mode to FULLSCREEN too.

  • @west Thanks! I have just found the same thing from @reefwing's codeatuts site this morning. I'm going to rework the code this weekend to be width and height based and also as the game is an 8bit pixel style I'm going to build it around the iphone measurements (360x480) and then scale up according to screen width and height of the device with smoothing turned off to retain the pixel graphic effect on larger screens.

    Also I'm fixing the game to a portrait setting as I prefer that for this game in particular.

    The interesting thing to see will be the

    @reefwing just looking through your excellent tutorials, the thing I found this morning in the one @west mentions is number 22.

    You mention looking for this file in the XCODE:
    CodifyAppDelegate

    I can't find one in my xcode export.

    Also there is one called AppDelegate.mm and that had a version of the code you said to have which is
    self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];

    but it doesn't have the 'autorelease' part in it as it doesn't like it.

    Do I take it its autoscaling the canvas already, its just my images are way too big for the iphone as they are created for an ipad size?

  • Posts: 563

    @Majormorgan - glad you enjoyed the tutes. I have been distracted with other projects and haven't updated the tutes for a while. I believe that Codea has been updated to use ARC which makes memory management in Objective C much easier. With ARC you no longer use autorelease, so don't worry if it isn't there.

    As you have discovered, you need to work out whether your code is running on an iPad or iPhone (3.5 inch or 4 inch screen) and adjust your images accordingly. You can use the following macros to do this:

    #define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
    #define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
    #define IS_IPHONE_5 (IS_IPHONE && [[UIScreen mainScreen] bounds].size.height == 568.0f)
    #define IS_IPHONE_4 (IS_IPHONE && [[UIScreen mainScreen] bounds].size.height == 480.0f)
    

    The other thing to be aware of regarding images on different devices is the varying scale factor. Have a read of http://codeatuts.blogspot.com.au/2012/11/interlude-13-pixels-vs-points-in-ios.html

    Happy coding!

  • Thanks @Reefwing. I'll read through those again once I've started my scale tests.

    A quick question, I'm not going to create retina specific assets with increased resolution as I want it to stay looking pixelated and 8-bit-like. I'm looking to use width and height code to work out if the device is an iPad and display images 2x bigger than the same asset used in detecting a 320 point wide. Or do I still need to save a retina file anyway?

  • Another question. WIDTH and HEIGHT are the screen width and height which I'm using to determine the size of the screen.

    When I draw sprites you set the X,Y but you can also set the width and height.

    Ideally once I detect the screen size and use @Reefwing 's code to do so, I'd love to be able to set the height and width of each image and add /2 to get a half size for the iphone only graphics.

    I've already got the detection code, its just the width and height of each sprite.

    for example

    sprite(imgfence, groundX, groundY,<imagewidth/2>, <imageheight/2>
    

    Any ideas what I could use in the <>? Variables for each and every object width would be cumbersome.

    Thanks

  • I think I've worked it out. I need the scale to be a contant so as long as I have worked out what the proportions of the image are in relation to the screen I can do a WIDTH/screenres and use that consistently across all code. It also means I can set a variable for that division value for screenres is once I check the size of the screen and set the values in one place for ipad or iphone.

    Thanks

  • edited February 2014 Posts: 316

    @Reefwing thank you for your help so far. I'm making my way through it slowly but surely.

    So I've reworked part of my game based on the if deviceIsIpad() code by checking the width of the screen (I'm forcing it to be just portrait) is 768 then true and everything else is an iphone.

    I've worked out the sizing and scaling based off of WIDTH and HEIGHT calculations.

    What's not working is the XCODE detecting which size the device is.

    I've pasted the code you posted earlier into the AppDelegate.mm file as that is the one that also has the self.window code

    //
    //  AppDelegate.mm
    //  size test scale
    //
    //  Created by Richard Morgan on Friday, 28 February 2014
    //  Copyright (c) Richard Morgan. All rights reserved.
    //
    
    #import "AppDelegate.h"
    #import "CodeaViewController.h"
    
    
    #define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
    #define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
    #define IS_IPHONE_5 (IS_IPHONE && [[UIScreen mainScreen] bounds].size.height == 568.0f)
    #define IS_IPHONE_4 (IS_IPHONE && [[UIScreen mainScreen] bounds].size.height == 480.0f)
    
    @implementation AppDelegate
    
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
    
        self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
        self.viewController = [[CodeaViewController alloc] init];
    
        NSString* projectPath = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"sizetestscale.codea"];
    
        [self.viewController loadProjectAtPath:projectPath];
    
        self.window.rootViewController = self.viewController;
        [self.window makeKeyAndVisible];
    
        return YES;
    }
    
    - (void)applicationWillResignActive:(UIApplication *)application
    {
    }
    
    - (void)applicationDidEnterBackground:(UIApplication *)application
    {
    }
    
    - (void)applicationWillEnterForeground:(UIApplication *)application
    {
    }
    
    - (void)applicationDidBecomeActive:(UIApplication *)application
    {
    }
    
    - (void)applicationWillTerminate:(UIApplication *)application
    {
    }
    
    
    @end
    

    But the screen is still fullsize Ipad screen but on an iphone device (I can see the bottom left corner of the screen on iphone.

    Now either I've not put the code in the right place or I might be missing something else.

    I think its just not scaling the app to fit the device and is cropping it from the bottom left instead. I summise this because the graphics on screen are placed based on HEIGHT/2 and WIDTH/2

    Can you help further?

    Thanks,
    The Major

  • @Majormorgan thank you, I've been looking for some code like yours!

  • Posts: 316

    Hi @erickyamato I hope its useful. A lot is from reading the code from tutorials and code that other people have posted.

  • Posts: 316

    So what I'm now doing is creating calculating a percentage of the width and height and storing that as a variable at the beginning. Effectively giving me 1% percent of the width and height.

    So in main

    WIDTH/100 = widthPC
    HEIGHT/100 = heightPC
    

    Then when I assign a size or position to a sprite or mesh I'm using the widthPC or heightPC variables and calling it in the x,y,width or height code.

    e.g. this is a line of code in a class hence 'self'

    sprite(self.imagepond, widthPC*100, heightPC*0, widthPC*60, heightPC*15)
    

    That in theory, on a 320x480 portrait screen, should give me a drawing placed at full frame right, on the bottom of the screen with a width 192 by a height of 72.

  • Posts: 113

    Thanks for sharing your findings, @Majormorgan. Scaling all drawing as a percentage of whatever WIDTH and HEIGHT values are present seems very logical. If I get as far as producing a universal app, I'll be trying your idea first.

  • edited March 2014 Posts: 316

    you're welcome @time_trial . To be honest that bit is theory until I test it tonight and I'm sure there's someone out there with a better and more easier way, but for now it makes sense to me so I'll give it a go.

    I'll let you know how I get on.

    thanks for all the advice!

  • Posts: 316

    OMG !

    It works!

    by creating graphics and positions based on dividing the screensize into 10ths, 20ths etc... I can work the positions in photoshop design of 320x480 (iphone 4S) and then each device thats bigger, like an IPAD or an Iphone 5S will scale it accordingly.

    I'm so freaken excited!

  • Posts: 563

    @Majormorgan - You are not doing anything with the macros, that is why they are having no effect.

    The idea is that you test what device you are working on and then use the appropriate image. For example:

    if (IS_IPAD) {
        // Use iPad images }
    else if (IS_IPHONE_5) {
        // Use images for 4 inch screen }
    else
       // Use 3.5 inch images }
    

    This is if you want to make the changes from the objective C code. You wouldn't normally do this within the AppDelegate - usually it is within the relevant view controller.

    However, I suspect you really want to make the changes from within the Lua code. If so, then you can use something like:

    function deviceIsIpad()
    
        if CurrentOrientation == LANDSCAPE_LEFT 
          or CurrentOrientation == LANDSCAPE_RIGHT then
            if WIDTH == 1024 then
                return true
            else
                return false
            end
        else
            if WIDTH == 768 then
                return true
            else
                return false
            end
        end
    
    end
    

    To work out what device your app is running on. You can then just use "if deviceIsIpad()" to work out which images to load.

    Your scaling approach will also work but watch out for the aspect ratios (e.g. these are different for an iPhone 5 and iPhone 4 so the images will look different on the 2 devices). In general you are better using bigger images and scaling down rather than vice versa, but since you are looking for a pixelated effect this may not matter.

  • edited March 2014 Posts: 316

    Hey @reefwing thanks for the heads up. The Xcode side is a kicker for me. Too complex. The good news is that the code I wrote in Lua works perfect with even one additional side effect.

    So the problem I had was I had hard coded the pixel values in my first engine which meant everything was twice as big on screen on the iPhone and also just bottom left corner visible.

    I had hoped that scaling the whole game worked automatically like in flash when you build an animation inside a clip, you can place the clip on the stage and scale it and everything inside scales perfectly including code. But it didn't and people had excellent suggestions in terms of how to rebuild the engine (or rather the maths part) to work with width and height percentages.

    Well in Lua that worked and also when I compiled the Xcode and ran it it worked. I did have one Xcode glitch but that was because I had a number in a sprite name and Xcode thought lua was trying to pass that number with the image. A quick rename in file and code and it worked well.

    Now to the interesting side effect of my scaling technique.

    So if you recall I've created two variables:

    scalerX = WIDTH/100
    scalerY = HEIGHT/100
    

    This gives me a percentage of the screen width and height that it can use to set object x position and width with scalerX and applying a multiplier like *10 giving me 10 percent of the width to use as either a placement of x or width of objects,

    It works really well and I've based my game design and math around an iPhone 4 at 320x480 pixels or points. I'm not playing a landscape game but I could work that out easily too using the same code and a rotation.

    The advantage if working 320x480 is that it is the middle ratio of size between the iPad (wider by about 10 or 15% and also between the iPhone 5 which is about 10 or 15% taller.

    So both screens stretch a little. The iPad is fatter and the iPhone 5 is taller images.

    And the iPhone 4 is just right.

    The side effect is all my maths is done on the scalerX and ScalerY positions and divisions.

    So if my iPhone 5 is taller and I can detect the height as in your code @reefwing I could set the scalerY = height/110 instead of 100 for just iphone 5 displays to make it slightly shorter and all the maths for position scales down with it. For iPad I scale the height to be /90 which makes it a little taller. That way all graphics are set to look as square as they were intended too and I don't have to recode all my measurements for every little thing.

    As my pixel graphics are 1 pixel drawn they scale up lovely.

    Make sense?

  • Posts: 563

    @Majormorgan - very impressive.

  • Posts: 316

    It all hinges on the device detection @reefwing which is where your code is very handy! But at the moment I can mannual set the scalerY whilst testing and it all looks great.

    Thank you for all your help and advice @reefwing !

  • Posts: 211

    @Reefwing and @Majormorgan thank you guys! You are helping me to solve the device sizes.

    @CodeaNoob, this can help us! :)>-

  • Posts: 563

    @erickyamato - pleasure

Sign In or Register to comment.