2014年03月29日

Sprite Kit Desginer - Video Samples

Video Samples

Posted on January 31, 2014 by skd

YouTube にアップされたサンプル動画を集めたもの

Timeline Editor

最初のサンプルは、どのようにしてシンプルな移動するアニメーションを作るかを見せています。

2番目のサンプルは、どのようにして回転する歯車を作るかを見せています。

次のサンプルは、どのようにしてやや複雑なアニメーションを作るのか、アクションを一緒にグルーピングしたり順番に流したりするのかを見せています。

最後のサンプルは、より複雑なアニメーションの例を見せています。

Layout Editor

例は、どのようにしてノード階層を作るか、ノードのアンカーポイントといくつかの他のプロパティを変更するかを見せています。

次のサンプルは、どのようにしてあなたが現在の SKD のバージョンを、タイルからレベルを作るために使うことができるのかを見せています。注意して欲しいのは、 SKD はタイルマップ編集に対してより大変に優れたサポートを含んでいるということです。


FruitsFields - 寄付代わりに購入いただけると嬉しいです。
Icon-72.png as_available_appstore_icon_20091006.png

サポートページはこちら。
http://cbbandtqb.toypark.in/FruitsFields/index_jpn.html

posted by cbbandtqb at 21:57| Comment(0) | TrackBack(0) | 備忘録 | このブログの読者になる | 更新情報をチェックする

Sprite Kit Desginer - How to create a level background using Tiled Background

How to create a level background using Tiled Background

Posted on January 31, 2014 by skd

Tiled Background とは何か?

もし大きくて連続したスクロールする背景を有しているなら、あなたは大きなテクスチャを背景として追加するのは避けるべきで、その理由は以下の通りです:

  1. テクスチャにはサイズ制限があり、例えば iPad2 上では 2048×2048 ピクセルとなります。
  2. 大きなスプライトのようなものを使うとパフォーマンスが落ちます。

より小さなタイルを使って背景を組み立てる方が大変良く、なぜなら Sprite Kit Framework は効果的な選択、そのようなタイルの生成機能を有しており、それらからオリジナルの画像を構築する方が大きな画像を使うより効果的なためです。このテクニックは、 Adventure Sprite Kit Framework のチュートリアルでも使われています。

Sprite Kit Designer ソリューション

Sprite Kit Designer はヘルパーノードを巨大な背景やレベルマップを作るために有しています。あなたのしなければならないことの全ては、背景画像を割り当て、大きさを指定するだけです。 SKD は割り当てられた画像をタイルに分割し、テクスチャアトラスをタイルセットから作り出し、実行時にこれらのタイルから画像を再構成します。

Tiled Background ノードとの連携

まず最初に、我々は、画像を背景のために必要とします。画像は磨き上げられていたり、最終バージョンであったりする必要はなく、ドラフトで十分です。もちろん、ディメンションやロケーションは最終バージョンと同じであるべきです(もしそうなっていなければ、あなたは他のノードを背景に合うように再配置する必要があるでしょう)。このチュートリアルのために、私は、2D レベルデザインを Deviant Art by AdrianKJW から使用しており、その画像のためのタイシルクリンクは以下にあります。 http://adriankjw.deviantart.com/art/2d-Level-Design-2-169381805

次のステップは、この画像を SKD Resource Manager にインポートすることです。あなたはそれらをATORASUNI追加する必要はなく、それらをスタンドアロンなテクスチャ中に置くだけです。あなたがプロジェクトをパブリッシュすると、背景画像のためだけに使われるテクスチャはパブリッシュされません。

次のステップは、 Tiled Node のゲームオブジェクトあるいはシーンへの追加です。この例では、私は DesertScene と呼称する新しいシーンを作っており、 Tiled Background をこのシーンに追加しています。

  1. Scenes パネル下部の+ボタンをクリックします。
  2. それを DesertScene にリネームします。
  3. Scenes ツリー中の DesertScene ノードを選択し、再度+ボタンをクリックします。
  4. 有効なノード型に基づいて Tiled Node を選択し、それから OK をクリックします。
  5. 新しく追加された Tiled Background ノードを選択し、それを DesertBackground にリネームします。
  6. 変更される必要のあるプロパティが2つあります。最初の一つは Texture property です。 ... ボタンをクリックします。
  7. そして背景テクスチャを Select Texture ダイアログから選択します。
  8. あなたは Tile Size プロパティを生成されたタイルのサイズを指定するために修正できます。デフォルトでは、 50×50 ピクセルです。あなたは画像サイズ/タイルサイズの余りについて気にする必要はありません。もし余りがゼロでない場合、 SKD は透明なボーダーを画像にタイルを生成する前に追加します。例えば、もし画像の幅とタイルの幅の余りが4だとすると、左側と右側に2ピクセル広いボーダーがあることになります。

以上です。あなたはあなたの背景画像を必要に応じて配置し、あなたの必要に合うようにスケール/ローテートできます。あなたがこのプロジェクトをパブリッシュすると、 SKD はテクスチャアトラスを作成し、タイルから正確な同一画像を構築するためのコードを生成するでしょう。

上記のスクリーンは、 iOS Simulator 内にロードされたサンプル画像を示しています。注意して欲しいのは、シーンは312のノードから構築されている、ということです。


FruitsFields - 寄付代わりに購入いただけると嬉しいです。
Icon-72.png as_available_appstore_icon_20091006.png

サポートページはこちら。
http://cbbandtqb.toypark.in/FruitsFields/index_jpn.html

posted by cbbandtqb at 21:47| Comment(0) | TrackBack(0) | 備忘録 | このブログの読者になる | 更新情報をチェックする

Sprite Kit Desginer - Using Animations with Sprite Kit Designer – Part 1

Using Animations with Sprite Kit Designer – Part 1

Posted on February 7, 2014 by skd

アニメーションの基礎

SKD は、アニメーションに対して2種類のサポートを有しています。両方の場合において、SKD はアニメーションフレームを Texture Atlas からロードするので、もしあなたがアニメーションにしたい画像のセットを持っているなら、あなたはそれらをアトラスの中に含めるべきです。SKD はフレームを名前でソートしますが、この順序はフレームの順番となります。

アニメーション化されるノード

Animation をあなたのプロジェクトに追加するもっともシンプルな方法は、 Animated Node を使うことであり、それは実際には Sprite ですが、そのテクスチャを指定する代わりに、あなたは Texture Atlas を選択し、フレーム間のディレイを指定することができます。アニメーションを再生/停止するために、あなたは Animated Node’s Enabled プロパティを設定することができます。以下の例では、私は Vicki Wenderlich からダウンロードされたアニメーションフレームを使うことになります。

  1. Texture Atlas をアニメーションフレームからインポートします。
  2. 新しい Scene を Towers と名付けて生成し、3つの Animated Nodes を当該シーンに追加し、それらを Tower1, Tower2 及び Tower3 とリネームします。注意して欲しいのは、 Atlas の名前と Animated Node の名前の間にはつながりがないので、私はより読みやすいようにそれらをリネームしただけ、ということです。
  3. Atlas を Animated Node それぞれに対して指定します。あなたは Frame Delay プロパティをアニメーションを速くしたり遅くしたりするために変更することもできます。
  4. Animation をプレビューします。パフォーマンス上の理由から、 Layout Editor はオープン時に一時停止しますが、その意味は、アクションは実行されない、ということです。なぜなら、 Animated Node はアクションを、シーンの背後のアニメーションのために使い、それは全てアニメーションされるわけではないからであり、例えあなたが当該ノードをイネーブルにしてもそうなります。 Layout Editor を開始するには、あなたは上部のツールバーにある再生ボタンをクリックし、停止するためには一時停止ボタンをクリックして下さい。

私は、実際に動作させて見せる短い動画を作ってみました:


FruitsFields - 寄付代わりに購入いただけると嬉しいです。
Icon-72.png as_available_appstore_icon_20091006.png

サポートページはこちら。
http://cbbandtqb.toypark.in/FruitsFields/index_jpn.html

posted by cbbandtqb at 12:34| Comment(0) | TrackBack(0) | 備忘録 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。