Monthly Archives: November 2014

開発者用 iOS デバイスの早見表(非Retina と iOS 6 未満切り捨て・最新版)

下位互換 iOS 6 未満かつ非 Retina ディスプレイデバイスを排除(iPad mini (1st) を除く)した、これから対応すべき iOS デバイスの一覧表を作成しました。 iPod touch (4th) と iPhone 4 に関してはリストに残しましたが、iOS 8 に未対応なため、2015年以降は多くのアプリの対応機種から外れていくものと思われます。 iPhone デバイス 解像度 @x バージョン iOS6 iOS7 iOS8 iPhone 4 (GSM) 640 x 960 @2x 4.0 – 7.1.2 ◎ ◎ × iPhone 4 (CDMA) 640 x 960 @2x 4.2.4 – 7.1.2 ◎ ◎ × iPhone 4S 640 x 960 @2x 5.0 – ◎ ◎ ◎ iPhone 5 640 x 1136 @2x 6.0 – ◎ ◎ ◎ iPhone 5c 640 x 1136 @2x 7.0 – × ◎ ◎ iPhone 5s 640 x 1136 @2x 7.0 – × ◎ ◎ iPhone 6 750 x 1334 @2x 8.0 – × × ◎ iPhone 6 plus 1242 x 2208 @3x 8.0 – × × ◎ iPad デバイス 解像度 @x バージョン iOS6 iOS7 iOS8 iPad (3rd) 1536 x 2048 @2x 5.1 – ◎ ◎ ◎ iPad (4th) 1536 x 2048 @2x 6.0 – ◎ ◎ ◎ iPad Air 1536 x 2048 @2x 7.0 – × ◎ ◎ iPad Air 2 1536 x 2048 @2x 8.0 – × ◎ ◎ iPad mini 768 x 1024 @1x 6.0 – ◎ ◎ ◎ iPad mini 2 1536 x 2048 @2x 7.0 – × ◎ ◎ iPad mini 3… 続きを読む

Xcode:Asset Catalog の使い方と画像リソース管理について(Xcode 5以降)

Xcode 5 から登場した Asset Catalog が便利です。 すでに Asset Catalog に関する情報はいくつもありますが、これらの情報をまとめ、実際に開発時に自身で使ってみた感想を踏まえながら、メモしておきたいと思います。 Asset Catalog とは? Asset Catalog 以前でもアイコンや起動画面等の画像は Xcode の General 設定から管理できましたが、画像ファイルがアイコンサイズやデバイス毎に増えていくため、画像数が膨大なアプリになってくると、管理が大変でした。 また、多くのアプリは git でバージョン管理を行い開発を進めていくことになりますが、チームでの開発では画像ファイルが増えてくるにつれ、画像の追加や削除、修正時にコンフリクトも頻繁に発生するようになり、開発は混沌としてきます。 Asset Catalog を使用すれば、一つの Asset Catalog ファイル(.xcassets)として、画像を一元管理出来るようになり、画像ファイルの追加・削除・修正を行ってもプロジェクトファイル(.pbxproj)は変更されないため、 git でのコンフリクトから開放され開発の効率がアップします。 登場から間もないため後方互換性やローカライズ等に問題点もありますが、これから開発を始めるのであれば Asset Catalog は必須となってくるのではないでしょうか。 Asset Catalog の使い方・インデックス Asset Catalog の作成 アイコン画像の設定 スプラッシュ画像(Launch Image)の設定 アプリで使用する画像の設定 画像をスライスする Asset Catalog の使い方・詳細 Asset Catalog の作成 Xcode ウインドウの一番左下の「+」ボタン より New file… を選択します。 Resource -> Asset Catalog を選択し Next をクリック。 Asset Catarog名(ここではimages)を入力し Create で作成完了。 以降はこの images.xcasset を使用して説明します。 アイコン画像の設定 Asset Catalog エディタ左下にある「+」ボタンより New App Icon を選択 Asset Catalog のメインウインドウに表示された各項目に、準備した画像をドラッグすれば画像がセットされます。 Asset Catalog のメインウインドウで AppIcon を選択すると、右カラムの Attributes Inspector からアセット名、対応デバイス、OSのバージョン等を変更することが出来ます。 あとは Target -> General タブの App Icons 項目から Asset Catalog で定義した AppIcon を選択すると、実行環境に合わせて自動的にアイコンが反映されます。 スプラッシュ画像(Launch Image)の設定 アイコンの例と同じく、Asset Catalog エディタ左下にある「+」ボタンより New Launch Image を選択します。 Asset Catalog のメインウインドウに表示された各項目に、準備した画像をドラッグすれば画像がセットされます。 Asset Catalog のメインウインドウで LaunchImage を選択すると、右カラムの Attributes Inspector からアセット名、対応デバイス、OSのバージョン等を変更することが出来ます。 Target -> General タブの App Icons 項目から Asset Catalog で定義した LaunchImage を選択すると、実行環境に合わせて自動的に起動画面が表示されます。 アプリで使用する画像の設定 Asset Catalog エディタ左下にある「+」ボタンより New Image Set を作成すれば、アプリ内で使用する画像を設定することができます。 ここでは Ladybird という画像を設定しました。 Asset Catalog で設定した画像は、Attributes Inspector の Image Set 項目の Name を使用すれば取得出来ます。以下のコードは UIImage に Asset Catalog の画像をセットした例です。 ビルドすれば画像が表示されます。 Asset Catalog は json により参照元の画像ファイル名と Image Set 項目の Name を管理しているため、画像名や拡張子を気にしなくて使用できるのでとても便利です。 画像をスライスする Asset Catalog では、これまでコードで行っていたスライス編集が視覚的に行えます。 Asset Caltakig の メインウインドウ内右下の Show Slicing ボタンをクリックするとスライス範囲の編集モードに入ります。この例では Retina 用の画像のみを準備し編集を行います。 編集モードで Start Slicing をクリックします。 未編集の画像を選択した場合、3種類のアイコンが表示されます。左から横方向のスライス、縦横両方向のスライス、縦方向のスライスとなります。今回は縦横両方向を選択します。 以下のようにガイドを設定することで、グレーになっている部分がトリミングされます。このガイドの操作は、言葉で説明するよりも実際に触りながらの方が分かりやすいかと思います。 ビルドすればトリミングされていることが確認できます。 まとめ Asset Catalog のスライス編集は、角丸のボタンやウインドウのフレームのストレッチ時のトリミング位置を指定することで、角丸のサイズを保ちつつ様々な大きさのオブジェクトに対応させることが可能です。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Objective-C:Sprite Kit ゲーム画面(SKScene)をキャプチャしアルバムへ保存する

Sprite Kit で制作するゲームアプリで、ゲーム画面をキャプチャし、キャプチャした画像をアルバムに保存する方法をメモしておきます。 ゲーム画面(SKScene)をキャプチャしアルバムに保存する SpriteKit Game テンプレートを新規作成します。 キャプチャを実行したいシーン(MyScene.m)に、以下の captureScreen メソッドを記述します。 あとは実行したいタイミングで captureScreen を呼び出せば PNG データでアルバムにキャプチャ画像が保存されます。このサンプルでは、画面タッチでスクリーンキャプチャし、キャプチャした画像をアルバムに保存します。 画面をタッチすれば画面をキャプチャします。アルバムにアクセスするとゲーム画面が保存されていることが確認できます。 MyScene.m は以下のようになります。 MyScene.m まとめ 次回はキャプチャした画像を twitter で共有する方法を説明したいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Objective-C:Sprite Kit ゲーム画面(SKScene)をキャプチャして twitter で画像を共有する

前回はゲーム画面をキャプチャした画像を、アルバムに保存する方法を説明しました。 今回はキャプチャした画像を twitter で共有する方法を説明したいと思います。 ゲーム画面をキャプチャして twitter で画像を共有する・インデックス 新規プロジェクトの作成(SpriteKit Game テンプレート) フレームワークのインポート ViewController へツイートのメソッドを記述 キャプチャのメソッドの記述 シーンから ViewController のツイートメソッドの呼び出し ゲーム画面をキャプチャして twitter で画像を共有する・詳細手順 新規プロジェクトの作成(SpriteKit Game テンプレート) Xcode のメニューから File -> New -> Project… を選択し、SpriteKit Game のテンプレートを新規作成します。 フレームワークのインポート twitter 共有のためのフレームワークをインポートします。 ViewController へツイートのメソッドを記述 先ほど追加したフレームワーク(Social.h)を ViewController.h にインポートし、インターフェースにメソッド名を記述します。ソースコード全体は以下のようになります。 ViewController.h ViewController.m にツイートのメソッドを記述します。 ViewController.m キャプチャのメソッドの記述 シーンファイルから ViewController のメソッド呼び出すため、シーンのヘッダファイルに ViewController.h をインポートします。ソースコード全体は以下のようになります。 MyScene.h 続いて画面をクリックしたとき、キャプチャを行うメソッドを touchesBegan: へ記述します。 MyScene.m シーン から ViewController のツイートメソッドの呼び出し 上記で記述した captureGameScreen を記述します。画面のキャプチャが完了したとき、(3)の ViewController メソッドへキャプチャ画像を引数で渡し、ツイート共有を実行します。 MyScene.m アプリをビルドし、キャプチャボタンをクリックするとツイート画面が立ち上がります。 まとめ ゲーム体験をソーシャルメディア等で共有することで、プレイヤーの達成感をより満たすことができます。 twitter やそのほかの SNS によるゲーム体験の共有は、今日のゲームにおいては実装すべき機能のうちのひとつだと言えます。多少面倒でも頑張って実装すれば、ゲームのダウンロード数にいい影響が生まれるかもしれませんね。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。