I am creating a runner type game on the iPhone in landscape orientation. I have created three tilesets with different tile sizes (32x32, 64x64 and 96x96) to be used with @1x, @2x and @3x screen resolutions respectively. I created the map so that it is 10 tiles high and 180 wide (don’t want scrolling in the y direction, just x) and uses tiles sized 32x32. It loads up just fine for the iPhone 4s and 5 with 10 tiles in the y direction as expected (note that these phones are both 640 pixels in the y direction in landscape mode).
However when I try running it on the iPhone 6 I start getting problems due to the different screen size (750 for the iphone6 vs 640 for the 4s and 5) and the tiles are no longer positioned in their correct spot. Rather everything shifts up by a bit. I get the same problem for the iPhone 6Plus because it is using the @3x tiles where the tiles are 96x96 but the screen size is 1080. So I understand what is causing the problem but have no idea how to go about fixing it since I can’t change the tile size in Xcode to match the screen size.
If you load higher-resolution images, you’ll have to account for that by also increasing the resolution of your tiles. It’s up to your game code, or whatever framework your game is based on, to support this use-case correctly.
I’m not sure what you mean with “I can’t change the tile size in Xcode”. Are you using some framework with which this seems to be not possible? If so, which one?
I am increasing my tiles’ resolution to 64x64 for retina screens which works fine for the 4s and 5 (due to screen height being 640 so ends up working perfectly with ten tiles in the y direction) but it doesn’t do so well with the iPhone 6 despite the fact that the it also is a retina screen.
I understand that this behaviour is due to the fact there is 750 pixels with this phone due to bigger screen size but it uses @2x image sets just like the 4s and 5 and normally it would rescale the image assets to fit it but it doesn’t seem to be doing that when I use the tmx file.
What framework do you use to load and present the tilemaps? JSTilemap? Custom-made?
If you are using either SpriteKit or Cocos2D (-Objc/-SpriteBuilder) and would be willing to give TilemapKit a try I could help you debug these sorts of scaling problems, especially if you could provide me with access to the project or at least the TMX files and tileset images.
TilemapKit should internally scale the map, objects, etc. based on the phone’s resolution if corresponding @x tileset images are available, but I haven’t done thorough testing. Which is why I could use a test case for multiscreen resolutions. Specifically to ensure it works as expected and can be used intuitively.
Feel free to send me your project & resource files to steffen (at) learn-cocos2d.com and I’ll check if I can make this work to your specifications on all @x screen resolutions.
Had a look at the project and it looked exactly what I would expect it to given the varying screen sizes. If I divide the screen size of the devices by 96 and 64 I get the following number of tiles (rounded) on the screen for each device:
iPhone 6 Plus -> 23x12.9 tiles for 2208x1242 pixel resolution @3x
iPhone 6 -> 20.8x11.7 tiles for 1334x750 pixel resolution @2x
iPhone 5(S) -> 17.8x10.0 tiles for 1136x640 pixel resolution @2x
iPhone 4(S) -> 15.0 x 10.0 tiles for 960x640 pixel resolution @2x
Necessarily, the iPhone 6 and 6 Plus will show more tiles in the verticel and horizontal directions simply because they render a larger portion of the game map.
I’m not sure, perhaps you are misunderstanding what @2x and @3x images do. They basically bring down the pixel resolution down to point resolution. But even at point resolution, the iPhone 6 (Plus) screens are larger than the iPhone 4/5 screens, so there’s no inherent way to “fix this” other than to account for it when designing the game.
If I understand you correctly, your goal is to have all iPhone versions show the same portion of the TMX map. The best you can do is to try and scale the map up based on the screen’s aspect ratio. For instance the iPhone 6 Plus screen shows 1.53 tiles more in horizontal direction than the iPhone 4S. So if you were to scale the map on iPhone 6 Plus by 1.53 it should show the same amount of horizontal tiles. Of course that would also introduce blurring of the graphics while also reducing the height of the map to less than what one could see on the iPhone 4 since the height doesn’t change by a factor of 1.53 but by 1.29.
I tried to upscale the @3x image by 1.53 which roughly renders the same width but also corrupts the tiles because the tilemap renderer doesn’t account for such an odd scaling factor for the graphics.
So I’m not really sure what you can do here, unless I misunderstood it doesn’t seem like a “fixable” problem but one that calls for design, basically looking for a good tradeoff between scaling the map/image and trying to match the screen aspect ratios, preferably without distorting (stretching/compressing) the images.
I think the following article, while written for a specific framework, is anyway useful since it shows how you could handle this situation in your game:
Regarding the map, basically you need to put some more visual content along the edges, which will show only on devices with certain aspect ratios.
@Ahmed_Elmelegy Btw, I forgot to mention that you’re using a property named “camera” which in iOS 9 will become a “real” property of SKScene, so you may want to rename that. I couldn’t start the project without removing the camera node because assigning an ordinary SKNode to the overwritten camera property somehow resulted in a nil node (probably SKScene rejected the non-SKCameraNode node).
I’m working on a similar game for both Android and iPhone targets… I started with a similar approach but adopted a slightly different strategy that you might find useful.
Instead of packing several different resolutions of my tile sheet assets, I only ship my highest resolution source assets. At init time, I calculate the desired tile-size to achieve a fixed number of tiles to display (I’m using 30x16.785, based on 1080p with 64x64 tiles), and I calculate the size of “black bars” needed (if any are). When loading my tile sheets, I scale each cell individually into a new texture (because some sizes are a multiple of 3, you would get seam artifacts if you scale the sheet as a whole)… unfortunately, the scaling had to be done by hand because different display devices have different limits on texture size.
I thought I’d offer as this strategy might be useful to you as well.
