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

Questions
1

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.

2

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.

3

Hi @MajorMorgan,

Maybe this thread can help:
http://twolivesleft.com/Codea/Talk/discussion/3793/export-to-xcode%3A-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

4

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

5

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

6

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.

7

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?

8

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.

9

@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!

10

@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.

11

@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?

12

@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!

13

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?

14

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

15

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

16

@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

17

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

18

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

19

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.

20

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.