Tag Sprite Kit

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で共有していただければ幸いです。