サイトのトップへ戻る

Cocos2d-x ドキュメント 日本語訳

サイト内検索

スプライト



スプライトとは

スプライトとは、rotation, position, scale, colorなどのようなプロパティを変更することでアニメーションや編集を行うことができる2D 画像です。



スプライトを作成する

あなたのやりたいことによってスプライトを作成する方法は変わってきます。 PNG, JPEG, TIFF, その他様々な形式の画像からSpriteを作成することができます。 それでは、いくつかの作成方法について実際にやってみて、その説明をします。



スプライトを作成する

Sprite は使用する画像ファイルを設定することで作成できます。

C++
  auto mySprite = Sprite::create("mysprite.png");
Javascript
  var mySprite = new cc.Sprite(res.mySprite_png);

上記のコードでは 画像mysprite.png を使ってSpriteを作成しています。 その結果として、作成された Spriteは画像全部を使用しています。 Spritemysprite.pngと同じサイズになります。 画像ファイルのサイズが 200 x 200 の場合、作成された Sprite のサイズは 200 x 200になります。



Rectを使ってスプライトを作成する

上記の例では、作成された Sprite のサイズはオリジナルの画像ファイルと同じでした。 画像ファイルの特定の部分のみを使ってSpriteを作成したい場合は、 Rectを指定してスプライトの作成をすることができます。

Rect には 4 つの値があります: origin xorigin ywidthheightです。

C++
auto mySprite = Sprite::create("mysprite.png", Rect(0,0,40,40));
Javascript
var mySprite = new cc.Sprite(res.mySprite_png, cc.rect(0,0,40,40));

Rect の開始点は左上の位置です。 画面上で配置を決める場合は左下が開始点となるので、それとは反対になります。 こうして作成された Spriteは画像ファイルの一部のみとなります。 この場合、Spriteのサイズは左上を開始点とした 40 x 40 になります。

Rectを指定しない場合、 Cocos2d-x は設定された画像ファイルの横幅と高さを自動的にフルで使います。 以下の例を見てみましょう。 サイズ200 x 200の画像を使用する場合、以下二つのコードは同じ結果になります。

C++
auto mySprite = Sprite::create("mysprite.png");

auto mySprite = Sprite::create("mysprite.png", Rect(0,0,200,200));
var mySprite = new cc.Sprite(res.mySprite_png);

var mySprite = new cc.Sprite(res.mySprite_png, cc.rect(0,0,200,200));


スプライトシートからスプライトを作成する

スプライトシートとは、複数のスプライトを組み合わせて一つのファイルにする方法です。 スプライトシートを使用すると複数の描写命令を一括で処理するのでパフォーマンスが向上します。 スプライトが一つのシートにまとめられていると、より効果的にディスク容量やビデオメモリを節約できます (まとめるには一般的に特別なツールが必要です)。 高度な章でより詳しく読むことになりますが、これはゲーム開発界隈におけるパフォーマンスを向上させるための数ある標準的手法の一つです。

スプライトシートを使用すると、まず最初にその全体がSpriteFrameCacheに読み込まれます。 SpriteFrameCache は後から素早くアクセスするためにSpriteFrameオブジェクトを保持したままにしておく、キャッシュクラスです。 SpriteFrameは一度に読み込まれ、 SpriteFrameCache内に保持されます。

以下がスプライトシートの例です:

内容はそれほど多くありませんが、何をやっているのか詳しく見てみましょう:

スプライトシートを見て分かるように、なるべく不要なスペースは省いて全てのスプライトを一つのファイルに統合します。

それでは、全てのスプライトを一つのスプライトシートにまとめてみましょう!



スプライトシートを読み込む

使用するスプライトシートSpriteFrameCacheに読み込みます、おそらくAppDelegate内で:

C++
// load the Sprite Sheet
auto spritecache = SpriteFrameCache::getInstance();

// the .plist file can be generated with any of the tools mentioned below
spritecache->addSpriteFramesWithFile("sprites.plist");
Javascript
// load the Sprite Sheet
var spritecache = cc.SpriteFrameCache;

// the .plist file can be generated with any of the tools mentioned below
spritecache.addSpriteFramesWithFile(res.sprites_plist);

これで スプライトシートSpriteFrameCache への読み込みが完了したので、これを使ってSpriteオブジェクトを作成できます。



SpriteFrameCacheからスプライトを作成する

以下のコードでは SpriteFrameCacheを元にして Sprite を作成しています。

C++
// Our .plist file has names for each of the sprites in it.  We'll grab
// the sprite named, "mysprite" from the sprite sheet:
auto mysprite = Sprite::createWithSpriteFrameName("mysprite.png");
Javascript
// Our .plist file has names for each of the sprites in it.  We'll grab
// the sprite named, "Blue_Front1" from the sprite sheet:
var mysprite = cc.Sprite.createWithSpriteFrameName(res.mySprite_png);



SpriteFrameからスプライトを作成する

他にも同じ様に Spriteを作成する方法として、SpriteFrameCacheからSpriteFrameを取得してそのSpriteFrameを使ってSpriteを作成する方法があります。例:

C++
// this is equivalent to the previous example,
// but it is created by retrieving the SpriteFrame from the cache.
auto newspriteFrame = SpriteFrameCache::getInstance()->getSpriteFrameByName("Blue_Front1.png");
auto newSprite = Sprite::createWithSpriteFrame(newspriteFrame);
Javascript
// this is equivalent to the previous example,
// but it is created by retrieving the SpriteFrame from the cache.
var newspriteFrame = cc.SpriteFrameCache.getSpriteFrameByName(res.sprites_plist);
var newSprite = cc.Sprite.createWithSpriteFrame(newspriteFrame);



スプライトシールを作成するツール

手動でスプライトシート を作成するのは面倒くさいです。 幸い、スプライトシートを自動で作成できるツールがあります。 さらにこれ他のツールを使うことでスプライトシートを最大限最適化することもできます!

ツールをいくつか紹介します:



スプライトの操作

Spriteを作成した後、 そのSpriteの操作可能な様々なプロパティにアクセスできます。

Given:

C++
auto mySprite = Sprite::create("mysprite.png");
Javascript
var mySprite = new Sprite(res.mysprite_png);



Anchor Point と 位置情報

Anchor Pointとは、Sprite の位置を設定する時に使用されるPointのことです。 Anchor Point は変形可能なプロパティにのみ影響を与えます。 そういったプロパティには、scale, rotation,skewが含まれます。 coloropacityは含まれません。 このanchor point では左下を開始点とした座標系が使用されます。 つまりX,Y座標の値を指定する場合には、左下隅を開始点となっているかを確認して計算する必要があります。 既定では、全ての Node オブジェクトは (0.5, 0.5)anchor point を既定値として持っています。

anchor pointを設定するのは簡単です:

C++
// DEFAULT anchor point for all Sprites
mySprite->setAnchorPoint(0.5, 0.5);

// bottom left
mySprite->setAnchorPoint(0, 0);

// top left
mySprite->setAnchorPoint(0, 1);

// bottom right
mySprite->setAnchorPoint(1, 0);

// top right
mySprite->setAnchorPoint(1, 1);
Javascript
// DEFAULT anchor point for all Sprites
mySprite.setAnchorPoint(cc._p(0.5, 0.5));

// bottom left
mySprite.setAnchorPoint(cc._p(0, 0));

// top left
mySprite.setAnchorPoint(cc._p(0, 1));

// bottom right
mySprite.setAnchorPoint(cc._p(1, 0));

// top right
mySprite.setAnchorPoint(cc._p(1, 1));

これを表示すると以下のようになります:



anchor pointの影響を受けるSprite プロパティ

anchor pointを使用すると、変形を行うことができるプロパティのみが影響を受けます。このプロパティにはscale, rotation, skewが含まれます。



位置情報

anchor point は位置を決める際の開始点として使用されるので、 sprite の位置情報 はanchor pointの影響を受けます。 それでは、どのようなことが起こるかを実際に見てみましょう。 色線とspriteの 位置がanchor pointに関連していることに注目してください。 anchor point の値を変更したので sprite の表示位置が変わっています。 変更したのはanchor point値だけということが重要です。 setPosition() 文を使用せずに位置を変えることができました:

anchor point以外にも位置を設定する方法があります。 Spriteオブジェクトでは setPosition() メソッドを使って設定することができます。

C++
// position a sprite to a specific position of x = 100, y = 200.
mySprite->setPosition(Vec2(100, 200));
Javascript
mySprite.setPosition(cc._p(100, 200));


回転度

正か負の角度を設定してspriteの 回転度を変更します。 正の値を設定すると Sprite オブジェクトは時計回りに回転し、負の値を設定するとSpriteオブジェクトは反時計回りに回転します。 既定値は 0です。

C++
// rotate sprite by +20 degrees
mySprite->setRotation(20.0f);

// rotate sprite by -20 degrees
mySprite->setRotation(-20.0f);

// rotate sprite by +60 degrees
mySprite->setRotation(60.0f);

// rotate sprite by -60 degrees
mySprite->setRotation(-60.0f);
Javascript
// rotate sprite by +20 degrees
mySprite.setRotation(cc._p(20.0));

// rotate sprite by -20 degrees
mySprite.setRotation(cc._p(-20.0));

// rotate sprite by +60 degrees
mySprite.setRotation(cc._p(60.0));

// rotate sprite by -60 degrees
mySprite.setRotation(cc._p(-60.0));



Scale

xかyに値を設定する、もしくはxとyに同じ値を設定することで、 spriteのscaleを変更します。 既定値はxとyの両方とも 1.0 です。

C++
// increases X and Y size by 2.0 uniformly
mySprite->setScale(2.0);

// increases just X scale by 2.0
mySprite->setScaleX(2.0);

// increases just Y scale by 2.0
mySprite->setScaleY(2.0);
Javascript
// increases X and Y size by 2.0 uniformly
mySprite.setScale(cc._p(2.0));

// increases just X scale by 2.0
mySprite.setScaleX(cc._p(2.0));

// increases just Y scale by 2.0
mySprite.setScaleY(cc._p(2.0));



Skew

xかyに値を設定する、もしくはxとyに同じ値を設定することで、 spriteのskewを変更します。 既定値はxとyの両方とも 0.0 です。

C++
// adjusts the X skew by 20.0
mySprite->setSkewX(20.0f);

// adjusts the Y skew by 20.0
mySprite->setSkewY(20.0f);
Javascript
// adjusts the X skew by 20.0
mySprite.setSkewX(cc._p(20.0));

// adjusts the Y skew by 20.0
mySprite.setSkewY(cc._p(20.0));



anchor pointの影響を受けないSprite プロパティ

Spriteオブジェクトにはanchor pointの影響を受けないプロパティがいくつかあります。 なぜでしょう?それは、影響を受けないプロパティはcoloropacityのような見た目の部分のみを変更するためです。



Color

spriteの色を変更します。変更するには、Color3B オブジェクトを引数として渡します。 Color3Bオブジェクトとは、 RGB 値です。 Color3B という言葉は初めて出てきましたが、これは単にRGB colorを定義したオブジェクトです。 RGB color とは、0から250の範囲の3バイトの値です。 Cocos2d-x ではあらかじめ定義されている色情報も使用することができます。 事前に定義されているので、これらを使うと少し速くなります。 いくつか例を挙げます: Color3B::WhiteColor3B::Red

C++
// set the color by passing in a pre-defined Color3B object.
mySprite->setColor(Color3B::WHITE);

// Set the color by passing in a Color3B object.
mySprite->setColor(Color3B(255, 255, 255)); // Same as Color3B::WHITE
Javascript
// set the color by passing in a pre-defined Color3B object.
mySprite.setColor(cc.color.WHITE);

// Set the color by passing in a Color3B object.
mySprite.setColor(cc.color(255, 255, 255)); // Same as Color3B::WHITE



不透明度

値を設定して spriteの不透明度を変更します。 不透明なオブジェクトは、全く透明ではありません。 このプロパティには0から255までの値を設定し、255は完全不透明を意味し、0は完全透明を意味します。 Think: zero opacity means invisible, and you'll always understand how this works. 既定値は 255 です(完全不透明)。

C++
// Set the opacity to 30, which makes this sprite 11.7% opaque.
// (30 divided by 256 equals 0.1171875...)
mySprite->setOpacity(30);
Javascript
// Set the opacity to 30, which makes this sprite 11.7% opaque.
// (30 divided by 256 equals 0.1171875...)
mySprite.setOpacity(30);



Polygon Sprite

Polygon SpriteSpriteの一種で、これは 2d 画像を表示するのに使用されます。 しかし、三角形を二つだけ使って構成された四角範囲で表される通常の Sprite オブジェクトと違って、 PolygonSprite オブジェクトの範囲は複数の三角形で構成されます。



なぜ Polygon Spriteを使うのか?

答えは簡単、 パフォーマンスのためです!

There is a lot of technical jargon that we can toss around here about pixel fill rate but the take home lesson is that a PolygonSprite draws based upon the shape of your Sprite, not a simple rectangle around the largest width and height. これにより不要な描写の多くを省くことができます。以下の例を見てみましょう:

左のバージョンと右のバージョンの違いに気づきましたか?

左の画像は、二つの三角形を使った四角範囲の様式で描写された典型的な Sprite です。

右の画像は、多くの小さい三角形で描写された PolygonSprite です。

Whether or not this trade-off is worth it for purely performance reasons depends on a number of factors (sprite shape/detail, size, quantity drawn on screen, etc.), but in general, vertices are cheaper than pixels on modern GPUs.



AutoPolygon

AutoPolygon はヘルプ用のクラスです。これの目的は、実行時に画像を2Dのポリゴンメッシュに変換することです。

全ての点のトレースから三角測量まで、変換処理の各ステップではいくつかの処理が行われます。 作成されたポリゴン情報をSpriteオブジェクトのcreateメソッドに引数として渡すことで、PolygonSpriteを作成することができます。 例:

C++
// Generate polygon info automatically.
auto pinfo = AutoPolygon::generatePolygon("filename.png");

// Create a sprite with polygon info.
auto sprite = Sprite::create(pinfo);
Javascript
// Generate polygon info automatically.
var pinfo = cc.autopolygon.generatePolygon(res.mysprite_png);

// Create a sprite with polygon info.
var sprite = new cc.Sprite(pinfo);