iOSアプリの画像の作り方[Xcode6]

今までiOSのアプリの開発では各デバイスのスケールに合わせて
x1 x2 x3 の画像ファイルを用意していました。

Xcode6からは、Assets Catalogにベクター画像が使用できるようになり、
ベクター画像を使うと、1つのファイルを用意するだけで、
全てのデバイスに対応できます。
かなり手間が省ける用になりました！

また、今まで画像はPNG形式のみだったのですが、
Xcode6からは JPEG形式 にも対応したようです。
リソースの容量削減ができますね！

またスプラッシュ、アイコンの画像については、こちらに記載しています。

#ベクター画像を使うには

##1.データを用意する
Assets Catalogでベクター形式の画像を取り扱う場合、
PDF 形式のファイルにする必要があります。
Adope IllustratorやAdope Photoshop等色々ツールはありますが
おそらくどれを使ってもPDFで出力はできると思います！

###サイズについて
基本的には、x1のサイズで用意すればいいようです。
(例外については下の方で説明します)

###拡大・縮小について
大きい物を小さく表示するものについては問題ありませんが、
小さいものを大きく表示すると、ぼやけます。
今までと一緒で、拡大には弱いようです。

###例
30x30(px)の画像を用意してみました。

30pxの時は綺麗にみえてますが、大きくなるに連れてぼやけてしまいますね。

こんどは300x300(px)で用意します。

全てのサイズで綺麗に表示されました！

###まとめ
PDFで画像を用意するときは、
実際に表示するサイズで作りましょう！

また、PNG形式だと、画像のサイズを大きくすると、比例してファイルサイズも大きくなりましたが、
PDF形式になったことで、 画像のサイズを大きくしてもほとんど変わらなくなりました！
リソースの容量を心配する必要もないようです。

##2.Xcode Assetsに読み込む
では実際にプロジェクトに組み込んでいきましょう。

###Step 1
今まで通りに xcassets の中にドラッグアンドドロップします。

###Step 2
右側を見てみると、新しく Type という項目が増えています。
その部分を Vectors に変更します。

###Step 3
画像がUnassignedのままの場合、
Universalに移動します。

###その他
Typeを Bitmap and Vectors にすると、
今までどおり、スケールによって使用する画像を変更できます。

それ以外にも、Xcode6から SizeClasses というものが導入されたので、
画面サイズに合わせて別のものを用意する、ということもできます。

#使用するにあたって

###パフォーマンス悪くなる？
iOSアプリの場合、PDFで用意したファイルは、ビルド時に自動で@1x,@2x,@3xのPNG画像が作成され、
実際はそれを表示する仕組みになっているようです。
ということは、表示については今までと同じなので、それが原因でアプリが重くなるということはないようです。

###ローカライズは？
Xcode6になっても、XcodeAssetsのローカライズはできないようです。
なので、画像をローカライズしたい場合は今まで同様、PNG形式のファイルを用意して
プロジェクトに組み込む必要があります。
（XcodeAssetsをローカライズする方法はないわけではないのですが、公式的にはできないので省略します）

###ソースコード上でサイズの指定は自由？
[scaling]:http://qiita.com/Yuta/items/ad02e5e93694c8add089#%E4%BE%8B
上記にあるように、ビルド時に@1x,@2x,@3xの画像が作成されているだけで、
完全なベクター画像ではありません。
ソースコード上で拡大や縮小をすると、ぼやけたりジャギーになったりします。([上記画像][scaling]参照)
完全なベクターを使用したい場合はSVG形式のファイルをAssetsCatalog以外のところに入れて使用しましょう。

###使用できるiOSのバージョンは？
どうやらiOS6以前では使えないようです。（XcodeAssetsに対応していないため）
ただ、iOS7ではちゃんと動くようなので、使用する場合は対応OSを iOS7以降 にする必要があるみたいです。

###ipaの中ではどうなってるの？
ipaファイルの中を見てみると
Assets.car
というファイルにまとめられています。
zip形式のような圧縮方法ではないので、簡単には中身を見ることはできません。

###なんかうまく動かないんだけど……
上記に書いたローカライズ等、まだ対応されていない部分はあるようです。
そういう場所では、AssetsCatalogを使用せずに、今まで通り、PNG/JPEG形式の画像を用意しましょう。

###PDF形式以外の形式は使えるの？
ベクターといえばSVG形式等、いろいろありますが、
今のところ使える形式は PDF形式のみ のようです。
将来的には増えるかもしれませんが、PDF形式で用意しましょう。

###スプラッシュやアイコンにも使えるの？
スプラッシュやアイコンはベクター画像に対応していません。
今までどおりPNG/JPEG形式で各サイズの画像を用意しましょう。
詳しくはこちらに記載しています。

###画像の取得方法は？

[UIImage imageNamed:"画像名"];

で取得できます。
画像名については実際のファイル名ではなく、
Assets Catalogに登録した名前 で取得します。
ただし、 LaunchImage については特殊なので
詳しくはこちらを参照してください。