I'm working on Universal Game App with Swift and SpriteKit. I'm using images.xcassets for background and any images in my project.
And I have some question.
Can I add image at 3x only (2208px X 1536px) becuase images.xcassets automatically resize image to 2x and 1x really ? But I want to know between Add image with all size 1x,2x,3x and Add image at 3x only on performance or any problems.
some case
iPhone 6 use 2x (images.xcassets automatically resize from 3x) slower than use actually 2x
This is my artwork resolution
http://i.stack.imgur.com/5fDRl.png
I'm sorry for my bad English.
Thank you
There are quite a few tools out there helping out with generating asset catalogs. Google seems to favour this one:
https://itunes.apple.com/us/app/asset-catalog-creator-app/id809625456?mt=12
If you don´t like scaling resources, it is also possible to add vector assets using PDF. They will be rendered during build time:
http://martiancraft.com/blog/2014/09/vector-images-xcode6/
Related
I've started developing an iOS app, adding pictures in resolution which is ok for standard retina screens. Now I want to add #3x pictures for iphone 6 plus and 7 plus. I don't want to include 1x version for older devices. I've renamed all image files to name#2x but these are not recognized in the project anymore. I was thinking that #2x name modifier will be ignored, but this is not the case. Do I need to explicitely add "#2x" in all places I'm referencing these pictures in the code? Or should I leave standard retina versions without any name change and these will be used anyway as #2x and only use #3x name modifier for higher resolution versions?
Use asset catalogs. See Apple Documentation
Then it's really easy to define 1x, 2x and 3x images by drag&drop. If you load the image in code by name (without scale) it works like a charm. If 1x is missing the next possible image will be used automatically.
You can import pdf-images or well known as vector-images as single vector in assets.Hence No need of 1x,2x,3x seperatly.
You can use Blade
Better asset workflow for iOS developers. Generate Xcode image catalogs for iOS / OSX app icons, universal images, and more.
with a definition file like this will generate all the images for you and put it in the right place
blades:
- source: store/slice1.png # this image should be the only image, and the biggest image you can use (typically for icons, 1024x1024)
mount: Project/Assets.xcassets/AppIcon.appiconset
I recently asked a question about why we use the 3 different image types listed above, and got good/detailed responses. It also lead me to question something else...
Assume I am working in XCode (with SWIFT) and have the three image sizes #1x, #2x, #3x for a particular say UIImage on an iPhone. Now, I want it to look nice on iPad, so I add some scaling. However, this will change the sizes of the 1x, 2x, 3x images I need for the iPad, so I need to make 3 more to compensate for that new size. Now how will XCode differentiate between the two? Do I need to check what size screen I am using and then choose the images?
I read that assets could help me, but that only deals with iPhone vs. iPad, what if I scale my images across iPhone 4, 5, 6 and iPad. That's a lot of different sizes and #x images, and I read Apple doesn't like device checking so I'm not sure how that would happen.
I hope this makes sense. I get the #1x, 2x, 3x per device, but if my app is being designed for universal device use, then how do I manage all of these different sizes in code for the proper device?
You really should use image asset catalog. It makes it almost too easy. Here is the definition Apple gives so you know it's not hearsay:
Image sets: Used for most types of images, an image set contains all the versions, or representations, of an image that are necessary to support various devices and scale factors.
And it goes on further:
Each set in an asset catalog has a name. You can use that name to programmatically load any individual image contained in the set. To load an image, call the platform specific class method, passing in the name of the set that contains the image. The OS will load the image from the set that is most appropriate for the current scale factor
So there really is not much for you to do. I don't know where you heard the opposite
See Documentation here
You need to check the size of the biggest image, if you are using an iPad figure out the size of the UIImageView frame. For instance if it is 400*400pts then your image will be 1200*1200. Just use a single image. I don't think you need to include the #2x and #1x. The 1200*1200 covers your bases for the largest possible image and scaling down will still have plenty of pixels left over for the full #3x resolution on other devices and so on. This is how I understand it anyway. I also wondered this myself and only found #1x #2x #3x useful for things that I didn't scale up as the screen size increased such as some buttons.
In the last 6 months I have been able to make a pretty good app in iOS Swift. But Now I want to touch upon some performance and best practices in development.
So I wanted to know what is the best practice of using images in Xcode? To be specific, I usually drag and drop images in my project folder to use it inside my app. But I know that we can also use image.xcassets to do the same thing.
The question is, which one is the right way? Or which one should be used when?
I have seen in image.xcassets we have to provide 3 images. 1x, 2x and 3x. Does that mean that I am increasing the size of the app (considering I am using many images)? Also how does it effect the performance? Is there any difference in fetching the file from project folder or from image.xcassets?
On the top of my head "Image.xcassets" has a bug in Xcode 6 where you cannot load JPEG images. Other than that, it is the best practice of organizing your images. The 1x, 2x, 3x are for the different screen resolutions of iOS devices. 3x images load on iPhone 6 Plus, 2x on any device with a retina screen (iPhone 6, iPhone 5/5s/5c, iPhone 4/4s, etc), and 1x on some of the older iPads and iPhones
Take a look at this image:
I have an image in the center in the 2x placeholder. Its just a slightly grey image.
its from the image.xcassets folder in xcode 6.1.
If i dont put an image in the first and third place holders will the image get scaled down to 1x and likewise scaled up to 3x ?
the project im building is for all screen sizes. if it does scale is it best practice to put a image in the 2x and have it scale up and down or 3x and have it scale downwards.
That's what we do and scaling does apply. Upscaling looks blurry and isn't a good idea generally but it works :)
To us just a single image for all the scales you can better use the Vector Image which is now available in xcode 6 and above. Try using that.
This is its example to use: Use vector image in ios
With the need of 3x images in iOS 8 I figured it would be easier to manage images with an asset catalog in Xcode 6. I am trying to just provide a single image, the 3x scaled image to the asset catalog and I want Xcode to automatically downscale that image to generate 2x and 1x versions of the 3x image, so that I don't have to do it manually.
Right now this is what I have:
I really hope that Xcode has such a feature to automatically create 2x and 1x images and I just have not discovered it yet. If there isn't any such feature, are there any alternatives? (I know IconKit but it is annoying and hasn't been updated to support 3x images. If it was made properly in the first place it wouldn't even need an update..)
I know that Xcode automatically can generate all images from a vector pdf, but thats not what I am looking for!
I ended up making a small mac app that takes care of the dirty work. You can drag and drop one or multiple .jpg or .png files into the app's main view; it will detect the input image's scale and create the smaller scaled images. With this app I only need to create a single, 3x image and drag it into the app to create the two smaller images. It saves so much work!
The source can be found on my GitHub page, simply download it and run it on your mac! https://github.com/JonasGessner/ImageReducer
There is another way to solve this problem.
Use Automator to create Mac OS X service which create #3x, #2x and normal image on base of 1 image in #3x resolution automatically. It use just 3 methods: duplicate images, scale down, and rename.
Ready Mac OS X service made in Automator you can find here:
https://github.com/lukszar/iOS-Images-Prepare
late to the party but there is one tool which make all assets #1x, #2x, #3x and icons for you in just one click. And also export to XCAssets file.
You can find it here: https://github.com/angelvasa/AVXCAssets-Generator
Hope this will help someone
If you do not provide 1x or 2x assets, and your app is run on a 1x or 2x device, it should downsample the 3x asset at runtime. This may look fine, but depending on the scaling method used, it may also look really bad, so make sure this is really what you want.
If a folder named *.imageset, and the contents in it is well organized, Xcode will actually recognize them as an image. So this is another way to do this: https://github.com/albert-zhang/gen_xcassets
This python script will quickly auto generate #2x version for all images in a folder.