I'm trying to use a PDF/SVG Image as the SKTexture for an SKSpriteNode.
I know that this can be done for a UIImageView by ticking "Preserve Vector Data", setting Scaled to "Single Scale" and configuring the UIImageView to
imageView.adjustsImageSizeForAccessibilityContentSizeCategory = true
Is this possible to do when using the UIImage in an SKTexture? This would prevent the creation of #2x & #3x images.
Thanks
You cannot use vector images for an SKTexture
A SKTexture doesn't have a vector format, it's simply a bitmap image.
So when you add a PDF vector image to your asset catalog and then you create a SKTexture out of it, you get a bitmap image (also if you selected Preserve Vector Format and Single scale)
The good part of this procedure is that you don't need to create the 1x, 2x and 3x sized images since Xcode will do it for you at build time. But the generated texture is still going to be in bitmap format.
Related
I can't get my UIButton image to not end up pixelated. The original image is 432X417 and my button size is 18X17. I'm setting up the button in interface builder and setting the content mode to aspect fit.
You absolutely should NOT try to install a 432x417 pixel images into a 18x17 point button.
You should create your image at the target size(s) in an image editor (e.g. Photoshop) and install that into your asset catalog. Remember that for most devices an 18x17 point images will need to be 36x34 pixels for 2x retina, and 54x51 pixels for the #3x scaled needed for the 6+ and 7+ devices.
If the image is a vector PDF then it should scale well, although 18x17 points is quite small and hard to show much detail.
I am new in developing games with Xcode for iPhone/iPad. Thus I need some help with the correct procedure to create images/sprites for the game.
By now I have created my sprites with Illustrator and I exported them as PDF files. In Xcode I created this single scale asset and put the PDF in it.
If I understand the documentation correctly, Xcode automatically generates image files at #1x, #2x and #3x from the PDF. Does it generate PNG files?
Then I create a SKSpriteNode and set the size like this: abc.size = CGSize(width: 123, height: 123). Instead of 123, I fill in the width and height corresponding to the frame/image size I set up in Illustrator. Is this correct? I think so, because this is #1x version?!
But if I need the same image for iPhone and iPad in different sizes, i can't simply resize it, because the #1x image version isn't a vector anymore and bounded to the frame size I chose in Illustrator? What to do then? Do I have to resize my image in Illustrator and export it in a different size?
What is the correct procedure? Do I have to draw a sketch with pencil at the very beginning on a paper and the measure it with ruler? Then I would go to illustrator and set the frame width height at that what I measured manually?
So many questions. I am very confused with this images sizes, resolutions and #1x, #2x and #3x version. I am not sure why I should use vector files, if I still can't resize the images in the developing process as I would like to, because they are still bound to the frame size I chose in Illustrator.
Is there no possibility to set ratios between all my images and then just use the vector PDF file? How should I setup my Illustrator?
I hope somebody can bring some light into the dark. Thank you.
Your pdf should be sized in points #1x (not pixels). The points should be the same physical size on the phone and the ipad, but if you want them smaller on the phone you need a second set of images; the asset catalog lets you swap out images based on iphone/ipad. Xcode renders your pdf to png's #1x, #2x and #3x and your app will pick the correct png based on the resolution of the device. You are correct that these are no longer vector assets and that scaling them up could leave you with blurry/pixelated images. You have a couple of choices:
1) include a scaled up version of your image at its maximum scale in app and use this version only when you need to scale up (otherwise its a waste of memory and processing if you are always rendering a much smaller image). This is probably the easiest solution.
2) leave your assets as vectors and load them as vectors, You still can render them to images for performance at a constant scale or range of scales, but you can always re-render them at any scale if needed. Most likely you want to use an SVG library for this.
3) You can directly import your assets as code using a program such as paint code. There used to be similar plugins for illustrator but I haven't seen one for Swift 3/Illustrator CC. This is obviously faster than #2 since there is no need to decode the vector file. If your file has a lot of overdraw you may still want to rasterize to images for performance.
Here's what I've found from my experience:
1) Xcode does not generate #2x and #3x from .png files. It can't really - you need to manually supply #1x, #2x, and #3x sizes.
2) Whatever size you use for the CGSize(...), that should be your #1x image, then generate #2x, and #3x from that. I started by designing the size of a level in the scene editor, then made a generic SKSpriteNode shape just to get the size I wanted, then I started making the image from the size I found that looks good.
3) Xcode supports vector based graphics (svg, pdf), but you can't use them as part of a texture atlas, which makes them much less useful in my opinion.
In my project I am using an image asset that is based on a PDF icon:
I am now using this image in a UIButton but the image takes up too much space. Is there an elegant way to set the size of the image:
Xcode converts PDF image assets to bitmaps at build time, so at runtime you actually aren't dealing with a vector image. Hence you can't actually do perfect scaling. For this reason it's best to have a separate image asset for your button if its size is different.
I use vector graphics in my app and would like the image to be bigger. Unfortunately all posts I found on this just scaled the image, not using the through vector graphics available higher resolution.
photoButton = [[UIButton alloc] initWithFrame:CGRectMake(width/3.0*2.0-15,
15,
width/3.0,
height/3.0)];
[photoButton setImage:[UIImage imageNamed:#"Photo"] forState:UIControlStateNormal];
[photoButton addTarget:self action:#selector(photo) forControlEvents:UIControlEventTouchUpInside];
Any ideas?
Ah, what you're seeing is a result of how the vector images are used in ios and os x. They are not stored as vector images in the compiled bundle. The vector image is used, at compile time, to create all the required standard and retina versions of the image. These are then stored as png files in the bundle and the png file for the screen resolution (standard, 2x, 3x retina) are used to display them.
What you probably want is to use a resizable image. For this you can't use vector images you have to provide a png. Then you can "slice" the image into resizable and non-resizable sections.
For instance you can create a button background image that will resize to the button dimensions and keep the corners nice and rounded by making sure the corners are not distorted.
Take a look at the "show slicing" options in the asset catalog in Xcode.
I have a series of images that I would look to loop through using iOS's [UIView startAnimating]. My trouble is that, when I exported the images, they all came standard in a 240x160 size, although only 50x50 contains the actual image, the rest being transparent parts that are just taking up space.
When I set the frame of the image automatically using image.size.width and image.size.height, iOS takes into images' original size of 240x160, so I am unable to get a frame that conforms to the actual parts of the image. I was wondering if there is a way using Illustrator or Photoshop, or any other graphics editing software for me to export the images based on their natural dimensions, and not a fixed dimension. Thanks!
I am a fan of vector graphics and thinks everything in the world should be vector ;-) so here is what you do in illustrator: file - document setup - edit artboards. Then click on the image, and the artboard should adjust to the exact size. You can of course have multiple artboards, or simply operate with one artboard and however-many images.