読者です 読者をやめる 読者になる 読者になる

モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

スプライトシートから画像を取得:Cocos2d-x v3.7(JavaScript)

Cocos JavaScript

 スプライトシートから画像を取得してスプライト(cc.Sprite)に設定する方法について説明します。
 直接画像ファイルから読み込む場合は画像ファイルのパスを引数で渡すだけなのですが、スプライトシートから取り込む場合は手順が変わります。

 使用しているCocos2d-xのバージョンは3.7です。

スプライトシートの作成

スプライトシートの作成方法については、下記の記事を御覧ください。
スプライトシート:Cocosドキュメント - モーリーのメモ

スプライトシートから画像を取得

『resource.js』への登録

 下記のように、『.plistファイル』と『.pngファイル』を追加します。
 必須ではありませんが、先読みしておきます。

var res = {
    MainScene_json : "res/MainScene.json",
    TitleScene_json : "res/TitleScene.json",
    Plist_plist : "res/Plist.plist", // 『.plistファイル』を追加
    Plist_png : "res/Plist.png" // 『.pngファイル』を追加
};

スプライトの取得

 以下のコードでスプライトが取得できます。

// スプライトシートをキャッシュに登録
cc.spriteFrameCache.addSpriteFrames(res.Plist_plist); // ctor()等に記述

var mySpriteFrame = cc.spriteFrameCache.getSpriteFrame("LevelSelection/LS07.png"); // スプライトフレームを取得
var mySprite = cc.Sprite(mySpriteFrame); // スプライトフレームからスプライトを作成
mySprite.setPosition(320, 480); // 中心に配置
this.addChild(mySprite); // ノードにスプライトを追加

// キャッシュからスプライトシートを削除
cc.spriteFrameCache.removeSpriteFramesFromFile(res.Plist_plist); // onExit()等に記述
キャッシュへのスプライトシートの登録

 『cc.spriteFrameCache.addSpriteFrames()』:アプリの共有のキャッシュにスプライトシートを登録します。
 削除するまで存在するので、コンストラクタ等で1度だけ登録します。

スプライトフレームの取得

 『cc.spriteFrameCache.getSpriteFrame()』:キャッシュからスプライトフレーム(cc.SpriteFrame)を取得します。
 スプライト(cc.Sprite)と異なり、位置情報やスケールの情報がありません。

スプライトシートの作成

『cc.Sprite()』:ノードに組み込んで配置するために、スプライトフレームからスプライトを作成します。

キャッシュからスプライトシートを削除

 画面遷移する場合など、スプライトシートの画像を使用しなくなったタイミングで削除します。
 『cc.spriteFrameCache.removeSpriteFramesFromFile()』で削除します。
  
以上です。

あとがき

 スプライトシートからスプライトフレームを取得し、スプライトに変換して使用するという流れでした。
 直接スプライトを取得する方法があるのかはわかりません。