When creating a simple HelloWorld Box2d template from cocos2d 2.0, the splash screen shrinks to half its normal size (after the flash). Its then as if every sprite is smaller. Is this normal?
Have you enabled Retina display mode? (It's on by default)
Did you add high resolution images (with -hd suffix) to your project?
If not, you'll notice all sprites being 50% smaller on a Retina display device because cocos2d is displaying the SD images on a Retina resolution surface. Either add -hd images that are twice as high and wide, or disable Retina display mode (look in AppDelegate.m).
Related
I am in the process of learning iOS development with XCode. I created a project to implement some of the things I've been learning and to begin learning how to manage image sizes and placement on different sized screens i.e. iPhone 8, iPhone 8+, iPad, etc. I am currently using XCode 10 Beta and I noticed that the View size on the main storyboard is half the actual screen size of any device I select to to View As:. For instance if I select View As: iPhone 8 the screen size is 375x667 instead of being 750x1334 like the actual device. I discovered this because I created a square image of 100x100px and thought I would be able to line up 7 across the screen. To my surprise the images took up twice as much screen as I had calculated.
Can anyone let me know why the screen Views in XCode are half that of actual screen size?
Do I just always assume to make my graphics half the size I would actually want them?
Edit: Here's a screenshot of what I am referring to in XCode
When I click on the empty view in the the XCode storyboard pane this is this resolution it displays for the view. Also, when I export my graphics from Illustrator the are exported with the #1x, #2x, and #3x variants. However, when I place an image in the view that is 100x100px it takes up about 1/3 of the screen instead of 1/7 of the screen as I would expect on a iPhone 8 which has a resolution of 750x1334.
Edit #2: So after playing around more with XCode I do see that the resolution for the views are in Points not pixels however, in this screenshot for a iPhone 8+ View:
I would assume with a screen resolution of 1080x1920 #3x the Point resolution would be 360x640 for an iPhone 8+ not 414x736.
It has to do with the difference between points and pixels. On the original iPhone when it was release it was 1 point per pixel but as resolution got better it became 2x pixels per point (4 pixels). Now the resolution is 3x pixels per point on some of the newer devices (9 pixels).
https://www.google.com/amp/s/blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/amp/
I am trying to make a game using sprite kit that works on both iPhone and iPad.
For iPhones I can set the scene size to 320x568 and scale it for all resolutions it works fine.
For iPads too this works fine. But as the point resolution on iPad is 768x1024 I can see scaling artifacts and also images are not sharp.
So I want to set the scene size to 768x1024 for iPads. Most of my game images are drawn using sprite kit instead of loading images. So when I set the new scene size the images look smaller.
What would be the best way to specify the correct dimensions for the images while drawing it? Would I have to convert each and every dimensions and points used based on the device type?
You can draw your images using the largest screen size and scale them down to fit smaller screen sizes. This works well if the aspect ratio is the same for devices like iPhone 5, 6 and 6+. You do have to create separate images and/or screen layouts for the iPad and iPhone 4 which have a different aspect ratio.
So I am creating a Sprite Kit game and I want to have the same look on every device(no iPad, for now), as if it was the same scaled image.
So far I have my background images figured, 4 images for every screen size, chosen at runtime by checking the height of the screen. All my other images are designed for iPhone 6 plus, so I have #3x and #2x(66.6% of the #3x original image), that means I have iPhone 6 plus and iPhone 6 pixel perfect images.
The problem: Ran on iPhone 5/5s or 4/4s the images don't change size, they are as big as on iPhone 6, which is normal, they use the #2x. I want the images to scale by screen size. I know I have 2 options: use 4 sizes for every single image or scale the images by "screen height" / 667(iPhone 6). Both solutions are not good, because the first makes the app bigger and the second involves checking if it is iPhone 6 plus(use the #3x) and then scaling every single image, also both add a lot of code, I strive for clean code.
The first solution is acceptable, only if there is no other. Sorry for the long explanation, just want you to know what's going on.
I have created a basic tilemap using Tiled. I am using JSTileMap with SpriteKit to get the map in the scene. As I understood, JSTileMap (rather SKTexture) handles the retina and different devices automatically. I have not been able to produce good results so far, here is my setup:
I have one .tmx file created at a base resolution using map.png as it's tile set. The .tmx is present in the project but I purposely did not add map.png (I do not want to support non-retina iPhones).
In the project I only added the following .png's:
map#2x~iphone.png (retina iPhones, using 48x48 tiles)
map~ipad.png (non-retina iPads, using 48x48 tiles)
map#2x~ipad.png (retina iPads, using 96x96 tiles)
Here are the results I get (after clean builds and reset content and settings on simulator):
Retina iPhone - tiles is wrong spots
iPad - no tilemap displayed, JSTileMap has parsing error
Retina iPad - tiles in wrong spots
If I use just a plain vanilla map.png (with 48x48 tiles):
Retina iPhone - tile map displays well but too large of course
iPad - tile map displays perfectly
Retina iPad - tile map display perfectly and is scaled.
I know I could just use a 24x24 tile map.png and apparently it will scale everything. I would prefer not to use scaled tile sets as the quality would suffer.
Thanks in advance.
E
I was able to narrow down that SKTexture ignores the ~ipad file extension for the #2x file extension. This only created more headaches in trying to build a tile map system for iPhone retina, iPad, and iPad retina.
I have decided to avoid the problem all together. I am not using a universal app in my project now. I have a iPhone project and a separate iPad Project. This way all I need to do to work with Retina is the #2x file extension in each project.
This does fully work (much easier). A word to the wise to those only building for retina iPhones... half your tile height and width sizes in the .tmx files, otherwise you will have a great time trying to deal with the content scaling.
Since you're using Sprite Kit and that requires iOS 7 there's actually no non-Retina iPhone to target anyway.
The thing in that instance is that you can't use #2x suffixed images without providing the same image without the #2x suffix. So the solution may be as simple as supplying the Retina iPhone images without the #2x suffix. You likely don't even need the ~iphone suffix either because the other two types of assets will only be used by the iPad devices.
This is based on an answer to a different question. I haven't personally verified it.
Kind of a fun question. I am hoping that is generates a lot of good thinking.
I am in the design, early alpha stage of my current orthogonal game project. I am experimenting with different tile sizes. A few questions as I would like to step off on the right foot.
Should we differentiate tile size (80x80, 32x32 etc) on retina vs. non retina displays, iPhone vs iPad displays?
What is a good recommended tile size that accommodates both the designer and the artist... and why?
Goals:
I would like to a clean, crisp visuals no matter the display format. Cartoony, colorful 16bit to 32bit images no matter the display.
I would like to keep to a 1024x1024 texture size for my atlas. I am hoping this will give me enough tiles to make the world look good and not crush my tile map system.
My current map size is 200 tiles wide x 120 tiles high. The map will be a a low detail (nautically focused) mercator projection of Earth.
Thanks in advance for all the good advice.
E
I usually try to make my games for iPad screen aspect where I'm making sure that the important elements are in a smaller Safe Zone. And the UI can be anchored on specified distance from the edges. Then for iPhone screen aspect I crop a small portion of the screen and layout the UI accordingly.
So if you are working in landscape here are the sizes you need to support:
480x320 - iPhone (0.5)
960x640 - iPhone Retina (1)
1024x768 - iPad (1)
2048x1736 - iPad Retina (2)
The number in brackets indicate the scale. I just like picking iPad (1024x768) for my ingame units. At this point I have all textures in 3 sizes, since I'm using OpenGL I use different mipmaps for each resolution I need. My texture loading function can skip mipmap levels so that on devices that I don't need high res I safe memory and loading time.
Depends if you need to click on individual tiles. In case you need to I'll suggest using 64x64 on iPhone (480x320) 256x256 on iPad Retina (2048x1736). Having all your art in power of 2 is always good. If the size is too large then consider 48x48 for iPhone and 192x192 for iPad Retina. If your game requires you can have smaller tiles but consider having larger active zone around the entities that you have to click (hopefully not every tile will be clickable).
I faced a similar issue a while ago and realized I was tackling the problem from the wrong angle.
You first need to consider the average finger/thumb size of the user and determine how many pixels/points consume that space.
From there you can derive the non-Retina Display pixel units and Retina Display point units to use.
N.B. that a game that might play well on the iPad might not work on the iPhone if the user's fingers obscure the view.