Tag Objective-C

Objective-C:iOSアプリ起動画面(スプラッシュ)を動画に変更する

アプリが起動すると表示されるスプラッシュ画像は Xcode 上で設定すれば簡単に表示されますが、このスプラッシュ画像を静止画ではなく動画にしたいと思ったことはないでしょうか。 今回はこのスプラッシュ画像を動画にする方法を紹介したいと思います。 アプリ起動画面(スプラッシュ)を動画に変更する 冒頭ではアプリの起動画面に動画を表示すると述べていますが、具体的には通常のスプラッシュの後に mp4 等の動画ファイルを再生する方法を説明していきます。 通常のスプラッシュ画像は設定をしないか、アニメーションの背景色と同じ画像を設定しておくことで、スプラッシュが動画になっているように見せるというものです。 概要 動画ファイルを準備する Xcode プロジェクトに動画ファイルをコピーする 必要なフレームワークのインポート AppDelegate.m にコードを記述する アプリをビルドし確認する 手順詳細 動画ファイルを準備する 起動時に表示したい動画ファイルをあらかじめ準備しておきます。Objective-C のプレイヤーがサポートしている形式 mp4、mov、avi、mpg 等で出力したものであれば問題なく使用できるかと思います。 Xcode プロジェクトに動画ファイルをコピー (1)で準備した動画ファイルを Xcode のプロジェクトにドラッグして追加します。ここでは SpriteKit Game のテンプレートを使用しています。 Destination の Copy items… にチェック、Create Groups… を選択し、Add to targets をチェック し Finish をクリックします。 必要なフレームワークのインポート 動画の再生に必要なフレームワークをインポートします。 プロジェクトの設定 General の Linked Frameworks and Libraries 項目の 「+」をクリックし MediaPlayer.framework を追加します。 AppDelegate.m にコードを記述する AppDelegate.m のソースコードを開き #import “AppDelegate.h” の下に MPMoviePlayerViewController を定義します。 次に – (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions メソッドに以下のコードを追加します。 続いて上記メソッドの下に動画再生後に実行される以下のメソッドを追加します。このメソッドでは動画再生完了後に、画面がブラックアウトするアニメーションを再生、ブラックアウト完了後にスプラッシュに関連するビューを削除するというものです。 このメソッドは動画の内容に応じて実行する内容を変更しても構いません。 アプリをビルドし確認する ビルドしアプリが起動すれば、起動時に動画が再生され、再生完了後に ViewController の画面が表示されます。 まとめ アプリがダウンロードされるかどうかは、もちろんアプリそのものの出来不出来こそが重要なファクターですが、アプリを起動したときの画面に動きがあるだけで「このアプリはちゃんと一手間かけて作られているんだな」という印象をユーザーに対し与えることが出来ます。 アニメーションの制作から実装まで、全ての工数を考えると大変手間のかかる作業ですが、多数のアプリのなかから差別化をはかり、アプリのブランディング力を高めるためにとても効果的ですので、ぜひ一度お試し下さい。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Objective-C:StoryboardからUnwind Segueを使用して前の画面に戻る

Storyboad を使用すればコーディングなしで簡単に画面遷移を行う事が可能です。 Xcode5 になってから Storyboard の利便性も少しづつ良くなっていますが、実用性のあるアプリを作成する場合には、View のレイアウトや画面遷移が Storyboard 上だけで完結するわけではありません。 誰しもサンプルアプリを作るのが最終目標ではないはずですので、実戦向けの内容としてまとめました。 Unwind Segueを使用して前の画面に戻る(準備) 準備手順 「Single View Application」テンプレートを作成し、Xcode の一番左下の「+」から「New File…」で ViewControllerクラスの SecondViewController を追加します。 Main.storyboard を選択し、ViewContoroller を配置します。 storyboard 上の ViewController を選択し、identity inspector タブ > Custom Class から SecondViewController を選択します。これで storyboard で追加した ViewController と SecondViewController が関連付けられました。 storyboard から ViewController と SecondViewController に 画面遷移のための UIButton をそれぞれ配置します。 画面遷移を確認しやすくするため、SecondViewController.m の viewDidLoad に 以下の1行を追加し、SecondViewController の背景色を赤に変更します。(背景色は Storyboard 上のインスペクタで設定してもかまいません。) 準備完了 ここまでで、プロジェクト内には以下のファイルがある状態となります。(※AppDelegate.h/mを除く) Main.storyboard ViewController.h/m SecondViewController.h/m Unwind Segueを使用して前の画面に戻る 次に Storyboard の Unwind Segue を使用して画面遷移の設定を行います。 Storyboard の Unwind Segue を使用し設定する Storyboard の ViewController に配置した UIButton を右ドラッグし、SecondViewController 上で離します。今回は segue を modal としました。これで アプリをビルドして ViewController 内のボタンをクリックすれば SecondViewController へ遷移します。(この状態では SecondViewController から ViewController へは戻ってこれません。) 続いて、SecondViewController の UIButton をクリックすれば ViewController へ戻るためのメソッドを ViewController.m に記述します。(SecondViewController.m ではないので注意。)メソッド内に NSLog を記述していますが、空でもかまいません。 Storyboard の SecondViewController の 緑色アイコンの Exit をクリックし、Connections inspector タブを選択すると、上記 firstViewReturnActionForSegue が表示されるので、右の「◯」から今度は左ドラッグで SecondViewController の UIButton へ接続します。 以上で双方向からの画面遷移の設定が完了しました。 まとめ ViewController 間での値の受け渡し等も後日まとめてみたいと思います。お疲れ様でした。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

App:UIデザイン時に必須!iOS のフォントと出力サンプル一覧

フォント出力見本の一覧がないとアプリのUIデザインは困難です。とくにフォントに精通していない非デザイナー出身の開発者であれば尚更です。 と言うわけで、自分用も兼ねて iOS にインストールされているフォント、サンプルコード、出力画像の一覧を作成しました。 PostScript名を調べなくてもサンプルコードをコピペすれば、即使用可能なので便利かと思いますのでお役立て下さい。 更新履歴 [2014.12.28] 表示画像のサイズを修正しました。 iOS7 フォントと出力サンプル一覧 画像ファイルが多いため、初回読み込みは少々時間がかかりますのでご了承下さい。 Academy Engraved LET Plain Al Nile Al Nile Bold American Typewriter American Typewriter Bold American Typewriter Condensed American Typewriter Condensed Bold American Typewriter Condensed Light American Typewriter Light Apple Color Emoji Apple SD Gothic Neo Bold Apple SD Gothic Neo Light Apple SD Gothic Neo Medium Apple SD Gothic Neo Regular Apple SD Gothic Neo SemiBold Apple SD Gothic Neo Thin Arial Regular Arial Bold Arial Bold Italic Arial Italic Arial Hebrew Arial Hebrew Bold Arial Hebrew Light Arial Italic Arial Rounded MT Bold Avenir Black Avenir Black Oblique Avenir Book Avenir Book Oblique Avenir Heavy Avenir Heavy Oblique Avenir Light Avenir Light Oblique Avenir Medium Avenir Medium Oblique Avenir Oblique Avenir Roman Avenir Next Bold Avenir Next Bold Italic Avenir Next Condensed Bold Avenir Next Condensed Bold Italic Avenir Next Condensed Demi Bold Avenir Next Condensed Demi Bold Italic Avenir Next Condensed Heavy Avenir Next Condensed Heavy Italic Avenir Next Condensed Italic Avenir Next Condensed Medium Avenir Next Condensed Medium Italic Avenir Next Condensed Regular Avenir Next Condensed Ultra Light Avenir Next Condensed Ultra Light Italic Avenir Next Demi Bold Avenir Next Demi Bold Italic Avenir Next Heavy… 続きを読む

Objective-C:Sprite Kit シーン間の画面遷移(トランジション)アニメーションサンプル

Sprite Kit であらかじめ用意されているトランジションを利用すれば、簡単に画面遷移時のアニメーションを表現することが可能です。 今回はこの画面遷移のサンプルコードと、実際の挙動をアニメーションgif で書き出しました。サンプルコードをコピペするだけで、目的のトランジションを即利用可能ですので、是非ご活用下さい。 [ 2014.12.13 gif画像の表示崩れを修正しました。] Sprite Kit シーンの移動 シーンの準備 MyScene(Sprite Kit テンプレートのデフォルトシーン) に MyScene2 クラスを追加します。 シーン移動のサンプルコード MyScene, MyScene2 の各画面をタップで、互いのシーンを行き来するようにします。 MyScene.m MyScene2.m ここまでをビルドすれば、画面タッチで2つのシーンが切り替わります。 以降のサンプルコードではこの2つのシーンを使用し説明していきます。 Sprite Kit シーン間の画面遷移(トランジション)・インデックス リンクをクリックでサンプルコードへジャンプします。 crossFadeWithDuration: doorsCloseHorizontalWithDuration: doorsCloseVerticalWithDuration: doorsOpenHorizontalWithDuration: doorsOpenVerticalWithDuration: doorwayWithDuration: fadeWithColor:duration: fadeWithDuration: flipHorizontalWithDuration: flipVerticalWithDuration: moveInWithDirection:duration: pushWithDirection:duration: revealWithDirection:duration: Sprite Kit シーン間の画面遷移(トランジション)・サンプルコード crossFadeWithDuration: MyScene.m MyScene2.m doorsCloseHorizontalWithDuration: MyScene.m MyScene2.m doorsCloseVerticalWithDuration: MyScene.m MyScene2.m doorsOpenHorizontalWithDuration: MyScene.m MyScene2.m doorsOpenVerticalWithDuration: MyScene.m MyScene2.m doorwayWithDuration: MyScene.m MyScene2.m fadeWithColor:duration: MyScene.m MyScene2.m fadeWithDuration: MyScene.m MyScene2.m flipHorizontalWithDuration: MyScene.m MyScene2.m flipVerticalWithDuration: MyScene.m MyScene2.m moveInWithDirection:duration: MyScene.m MyScene2.m pushWithDirection:duration: MyScene.m MyScene2.m revealWithDirection:duration: MyScene.m MyScene2.m まとめ カスタムクラスでオリジナルのトランジションを作成しなくても、用意されたものを上手に使用するだけで、大抵のゲームアプリは作成出来てしまいます。 Sprite Kit は後発だけあって、かなりよく出来たゲームフレームワークだと思います。 この記事がみなさんのお役に立ちましたら、下記「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で共有していただければ幸いです。

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 スプライト(spriteNode)のアンカーポイントを変更する

スプライトのポジションを指定したり、回転させたりする際のピボット(アンカーポイント)の位置を変更します。 スプライト(spriteNode)のアンカーポイントを変更する デフォルトのアンカーポイントは、スプライトの中心 CGPointMake(0.5,0.5) となっています。 Sprite Kit の座標は左下が基準 (0,0) となっているので、SpriteNode のアンカーポイントに関しても左下を基準に指定します。 アンカーポイントを左右中心上端に アンカーポイントを左右中心下端に アンカーポイントを上下中心左端に アンカーポイントを上下中心右端に まとめ アフィン変換時のオブジェクトのアンカーポイントと指定の仕方は同じです。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Objective-C:Sprite Kit の SKAction サンプルコード一覧

Sprite Kit の SKAction を使えば、簡単にスプライトをアニメーションさせることが可能です。 今回は Apple 公式の SKAction クラスリファレンスを参考に SKAction のメソッドと、サンプルコードをリスト化しました。コピペで即使用可能ですので、ご活用下さい。 SKAction 一覧・インデックス 移動 回転 アニメーションの実行速度 拡大縮小 フェードイン・フェードアウト 透明度 リサイズ テクスチャアニメーション カラー サウンド再生 複数アクションを同時に実行 複数アクションを順番に実行 アクションを指定回数だけ実行 アクションを無限に実行 アクションを待機 アクションを逆再生 イージング SKAction サンプルコード一覧 ※ 各アクションの xxxBy は現在の値を基準に、xxxTo は元の値を基準にアニメーションを実行する。 サンプルコードで使用するスプライト(共通) XXX.png ファイルでスプライトを生成する 移動 座標 (x:160 y:320) へ移動 左(反時計回り)に180度回転 アニメーションの実行速度 回転の実行速度を3秒かけて5倍に変化させる 拡大縮小 2倍に拡大する フェードイン・フェードアウト フェードアウトする 透明度 リサイズ 元のサイズの width に 100, height に 50 を加算する テクスチャアニメーション texture1.png の表示0.5秒後、texture2.png に切り替える カラー 青色に変更 サウンド再生 サウンドファイル sound.aif を再生 複数アクションを同時に実行 回転しながら透明度を0にする 複数アクションを順番に実行 2倍に拡大後、フェードアウト アクションを指定回数だけ実行 平行移動を3回繰り返す アクションを無限に実行 無限に回転させる 待機 3秒待機した後、2倍に拡大 アクションを逆再生 180度左回転後、180度右回転する イージング 任意のアクション (action) の実行速度を設定する まとめ group と sequence を使えばかなり自由度の高いアニメーションが作成できます。SpriteKit を使えば、ガシガシ動きのあるアプリが簡単に作れますね。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Objective-C:Sprite Kit Texture Atlas を使用しアニメーションを表示する

SpriteKit の Texture Atlas を使用すれば、驚くほど簡単にアニメーションを作成することができます。 今回は Texture Atlas でアニメーションを実装する手順と注意点を説明したいと思います。 Texture Atlas を使用しアニメーションを表示する 概要 Texture Atlas フォルダの準備 アニメーション画像の準備 フォルダを Xcode プロジェクトにコピー プロジェクトの設定 コードの記述 手順の詳細 Texture Atlas のフォルダを Finder 上で新規作成します。フォルダ名の末尾は必ず .atlas にします。ここでは ball.atlas としました。 Photoshop等で画像を作成します。ボールがバウンドする画像を作成し ball.atlas フォルダ内に書き出します。画像ファイル名は任意のもので結構です。 Texture Atlas のフォルダをドラッグし、Xcode のプロジェクトに追加します。 Destination の Copy items… にチェック、Create Groups… を選択し、Add to targets をチェック し Finish をクリックします。 SpriteKit のプロジェクト新規作成(※)し、プロジェクトの設定の BuildSettings から、SpriteKit Deployment Target > Enable Texture Atlas Generation を Yes にします。先に Texture Atlas のフォルダをプロジェクトに追加しておかないと Enable Texture Atlas Generation 項目は表示されません。 ※プロジェクトファイルが置かれているパスに日本語が入っていると Texture Atlas が表示されないので注意。 タッチした場所でボールアニメーションが実行されるように、touchesBegan デリゲートに以下のコードを記述します。 ビルドして画面をタッチするとアニメーションが実行されます。とても簡単です。 まとめ Sprite Kit は楽しいですね。Swift の学習と並行しながら Sprite Kit で遊んでみようと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Objective-C:指定時間後にメソッドを実行する

タイマーを使うまでもなく、指定時間後にメソッドを実行したいときは、performSelector を使用すれば簡単に実現できます。 コピペで即使用可能ですのでご活用下さい。 指定時間後にメソッドを実行する サンプルでは myMethod を 2秒後に実行します。 まとめ 今までこのサンプルのような引数なしの void を実行するのに NSTimer でガリガリ書いてました。。。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。