カテゴリー: Cocos Creator

[Cocos creator]リソースに配置した画像を一括でロード

どうも、キャプテンです。

最近、プログラムをいじいじする時間がなかなか取れません。
とりあえず少し前に手こずった事を書き残しておきます。。

お題はコチラ
リソースに配置した画像を一括でロード
です。

前提：
Cocos Creator Ver.1.3.1
Windows 10

前回、prefabを動的に生成（instantiate）して画像を差し替える、という事をしました。
これにより、例えばグラデ■ウスのようなシューティングの開発で、アイテムを実装する場合に「形は似てるけど色だけ違うアイテム」なんかを実装しやすくなりますね。

しかしながら、いちいち画像をComponentに配置してると、画像が多い場合に大変な手間がかかります。
例えばトランプだったり、麻雀だったりのように、画像点数が多いゲームの場合、、、

cocos2d-xであれば、リソースフォルダに画像入れといて
適当に画像名を配列で定義しといて
ぐるぐる回してSpriteBatchNode::createあたりで読み込んで保持しとけばいいだけなのに、
Cocos creatorだとイマイチよく分かりません。

そして、暗中模索してググりまくること数十分・・・
loadResAll
なるいかにもそれっぽいメソッドを発見しました！

とりあえずよく分からないのでassetsフォルダの中にimgsというフォルダを作り、その中に麻雀牌の画像をたくさん配置して、
onLoadの最後あたりでloadResAllを呼び出し。
引数にはフォルダ名と型と完了時のcallbackらしきメソッドを指定して

callbackのfunctionを適当に書いて、
いざ！
ウキウキしながら試してみると、、、

：
：
画像が表示されず！
デバッグでcallbackの中を見てみると、、、
blog_20161205_1
画像が読み込まれてない(‘A`)DAYONE

と、いうわけで、仕方が無いのでcocosの中のloadResAllのソースコードを読んでみると、
メソッドコメントの冒頭にこんな一文が！！！
Load all assets in a folder inside the “assets/resources” folder of your project.

よく分からんけど、とりあえずコメント通りにassetsの中にresourcesフォルダを作り、そこに
さっきのimgsフォルダをぶち込んで、
（↓こんなカンジ）
blog_20161205_2
もう一度実行してみると、、、

blog_20161205_3
画像がぜんぶ読み込まれた！＼(^o^)／ﾔｯﾀｰ

あとはこれをクラスの変数に持っておけば、いつでも好きな時に使えますね！
連想配列で持っておくと便利そう。
（もちろん、callbackの中でthisを使う場合は定義の際にbindしておきましょう。）

これでprefabを生成したり、好きな画像をセットしたり、
あんなことやこんなことをやり放題ですね！ドラえも■みたいに！

loadResAll自体はCocos2d-JSのあたりの名残なのかな？（たぶん。）

分かりづらくてハマった事案でした。

ではまた～

[Cocos Creator]prefabを生成して画像を変更して設置する

どうも。
最近趣味でCocos Creatorをいじることがありまして四苦八苦しながら開発を進めているのですが、Cocos Creatorの情報を検索しても
cocos2d-x(HTML5)
とか
cocos2d-JS
とか
Cocos Studio
の情報が多い！
Cocos Creator自体がこれらの系譜なのだとは思いますが、とりあえず自分への備忘も兼ねて書き残していきます。

で、まず最初は
prefabを生成して画像を変更して設置する
です。

前提：
Cocos Creator Ver.1.3.1
Windows 10

とりあえず、メインとなるシーンをCanvasなりにセットして、そこにスクリプトをComponentとしてくっつけてると思います。
（ここでは、そのスクリプトをMainSceneとします。）

まずは差し替え元の画像をCanvas上にD&Dしておき、それをNode TreeペインからAssetsペインにD&Dしてprefab化しときます。
このprefabをソースコード内で動的に生成し、かつ、別の画像に切り替える、というのが目的です。
（シューティングゲームなんかで、敵を動的に生成・出現させる時、prefabは同じだけど見た目だけ変える、など。）

MainSceneをエディタで開き、propertiesの中に下記を記述します。

そうすると、Node TreeペインでCanvasを選択するとPropertiesペインの下の方にComponentとして
imgPrefab
と
newSprite
が設定できるようになってますので～
↓こんなカンジ
20161121_1
Assetsペインから
imgPrefab　には　作成したprefab
newSprite　には　新しく設定したい画像
をD&Dしてセットしておきましょう。
ここまではよくやると思います。

あとはソースコード上の任意の箇所で、下記手順で実装します。

  • instantiateでprefabを生成
  • getComponentでprefabのSpriteを取る
  • 取ったSpriteのspriteFrameに、新しい画像のspriteFrameをセット
  • 上記をaddChild

です。
具体的にソースコードにすると、下記のようにします。

要するに、prefabのspriteFrameに新しいspriteFrameをセットしてあげれば良いのですね。
いちいちgetComponent(cc.Sprite)しなきゃいけないのが面倒ですね。

ただこの例だと、新しい画像をnewSpriteにセットしておかなきゃなりません。
もし敵の画像が100種類あったら、
newSprite1
newSprite2
newSprite3
：
みたいに、100個もComponentを作らないといけないのかって話になりますね。
画像の一括ロードは次回にでも書きます。

ではまた～。