2D TOOLKIT を使ってみようず(中編)

20080923-1

基本はスプライト管理から

前回の続きです、今回は 2D TOOLKIT にスプライトを登録し、スプライトの表示を行うところまですすめてみます。

スプライトは画面内を自由に動き回るキャラクターの事です。

2D TOOLKIT によって表示されるスプライト等のデータは、まずスプライトコレクションに登録されます。

まぁ、まずはやってみましょう。今回使用する素材は縁さんからいただきましたかわいいドット絵です。
2dtk20131015-001

そして、ブロックのパタンが8パタン。これは次回の後編で使用します。
2dtk20131015-002

Project ビューに今回登録管理するキャラクター用のフォルダを作成します。

今回は sample001 ってフォルダにしておきましょう。
2dtk20131015-003

さらに、「元画像」を保存するためのフォルダを作成します。Project ビューで先ほど作成した sample001 フォルダを選択
2dtk20131015-004

さっきと同じようにフォルダを作成作業を行い、「SourcePicture」とでも名前をつけておきます。
2dtk20131015-005

で、素材に使用する画像ファイルを「SourcePicture」フォルダへドロップしてインポートしておきます。
2dtk20131015-006

スプライトコレクションの作成

スプライトコレクションを作成します。Project ビューから tk2d の Sprite Collection 作成を選択します。
2dtk20131015-007

すると、スプライトコレクションのプレハブを作成するためのダイアログが開きます。ここで注意、Project ビューでスプライトコレクションを作成したいフォルダを選択していてもダイアログでは Assets フォルダへ作成する指定になっています。ダイアログ内で自分で作成したいフォルダへ移動してからスプライトコレクションを作成しましょう。

今回は「sample001SC」って名前にしました。自分ルールで後ろの「SC」がスプライトコレクションを表してます。このへんの命名規則は各自好みに応じてつけると良いでしょう。
2dtk20131015-008

スプライトコレクションへ画像登録

女の子アニメーションの画像データをスプライトコレクションへ登録しましょう。sampleSC のプレハブを選択するとインスペクタにスプライトコレクションの編集ボタンが表示されますので「Open Editor…」ボタンをクリックします。
2dtk20131015-009

えらく気合の入ったスプライトコレクションの編集ウインドウが開きますので、スプライトシートをスプライトコレクションの中に追加します。スプライトシートとは、1枚の画像に複数アニメの含まれた画像を登録する時に使用します。Create → Sprite Sheet で空のスプライトシートが作成されます。
2dtk20131015-010

スプライトシートのテクスチャ画像右下の「Select」をクリックするとテクスチャ画像選択ウインドウが表示されます。今回はいっぱい色々なテクスチャ画像が出てきていますが、これは 2D TOOLKIT に含まれているサンプル画像達です。目的の「char.png」を見つけ出し、クリックする事で登録が完了します。

登録が完了したら最後にテクスチャ選択ウインドウは閉じておきましょう。
2dtk20131015-011

次にスプライトシートの設定情報を入力します。今回登録したシートはキャラクターパタンのサイズが 24×24 となってます。あと細かい事ですが 4 ドットのマージンを入れるとうまくパタンの中央に入るので今回は 4 ドット分のマージンを入れておきます。これで準備完了です。「Apply」を押しましょう。
2dtk20131015-012

これでスプライトの登録が完了しました、スプライトコレクションにスプライトシートから切り抜かれたパタンが28パタン分登録されています。

Sprites の下の char/0 ~ char/27 がそれです。一括登録する時はこれが楽チンですね!

画面右の詳細情報がスプライト個々の設定です、今は説明を省略しておきます。最後に右上の「Commit」をクリックしてください。設定変更を反映させるときは Commit が必ず必要です。
2dtk20131015-013

ここでちょっと脱線。Project ビューで Assets / sample001 / sample001SC Data フォルダを選択し、その中の atlas0 をクリックしてみてください。先ほど登録したテクスチャ画像の内部データが見れます。 2D TOOLKIT はこのようにスプライトパタンを1枚の画像にひとまとめにして管理します。

沢山の画像をまとめて登録するほど描画のパフォーマンスがあがります。うまく活用しましょう。
(細かい仕組みとかはまた別の機会に)
2dtk20131015-014

スプライトのテスト表示

先ほど登録したスプライトを表示してみます。Hierarchy ビューで tk2d の Sprite を生成し、インスペクタで Collection を sample001SC にしますと先ほど作成したスプライトコレクションのキャラクターが表示されます。
2dtk20131015-015

 

しかし、なんかえっらい汚いですね。滲んでしまってかわいらしさの欠片もありません。

原因はバイリニアフィルタリングというテクスチャを滲ませる効果が発動しているためです。今回のようなドット絵の場合は滲ませたらいかんのでバイリニアフィルタリングを無しにしておきます。

図のように、再度 sample001SC を開き、Texture Settings の Filter Mode を Bilinear から Point に変更し、Commit してクローズです。
2dtk20131015-016

 

これで見事に滲まないドット絵となりました。
2dtk20131015-017

 
ここで一旦保存しておきましょう、sample001 のシーンを保存なのでデフォルトの Assets フォルダ直下ではなく sample001 フォルダにシーンファイルを保存しておきます。
2dtk20131015-018

2dtk20131015-019

それではまた!

次回はアニメーションパタンの登録と表示と、タイルマップの表示を行います。

「シェアする」

ツイートツイート