search
LoginSignup
18
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

cocos2d-js v2.2.x -> v3.0beta アップグレードログ

とりあえず動くようにするまで

基本的にここに書いてあるものは変更を網羅してるわけではなく自分が行った修正について記述.
元のコード自体も間違っている可能性もあるし,その他変更もあると思うのでその点は注意.

index.html

v3.0-beta では index.html で記述する,最初に読み込むスクリプトとして CCBoot.js と自分の js ファイル( template では main.js )呼ぶようにする.
たしか 2.2.x では main.js 決め打ちだったはずなのでまあそのまま main.js でもいい.

<script src="cocos2d.js"></script>

<script src="../CCBoot.js"></script>
<script src="main.js"></script>

cocos2d.js -> project.json

v2.2.x で cocos2d.js に記述していた設定( document.ccConfig に入れていたもの)は project.json に書くように変更.
基本的に変数に入れていたものをそのまま project.json に json 形式になるように書き写せば良い.

下記は特に変更が必要だったもの.

v2.2.x (cocos2d.js) v3.0beta (project.json) 説明(あれば)
COCOS2D_DEBUG debugMode
tag id
appFiles jsList
chipmunk, box2d modules modules に chipmunk とか box2d とか追加する(他の)

main.js

cc.Application や cc.AppControl はなくなったらしい(参考) ので cc.game を使う.

v2.2.x/main.js
var cocos2dApp = cc.Application.extend({
});
var myApp = new cocos2dApp(MyScene);
v3.0beta/main.js
cc.game.onStart = function(){
  cc.director.runScene(new MyScene());
};
cc.game.run();

あと getInstance() してるものは基本的に先頭小文字になってる (参考)
(しれっと書いてるけど シーン表示するときは runScene() を使うらしい)

v2.2.x
cc.Director.replaceScene(new MyScene());
v3.0beta
cc.director.runScene(new MyScene());

ここらへんの修正で自分のプロジェクトはとりあえず最初のシーン表示までいった.

キー入力・マウス入力

ここ によると cc.eventManager に全部まとまったらしい.

とりあえず キー入力・マウス入力を有効にするために下記の記述がある場合は削除.標準で動くらしい.

        this.setKeyboardEnabled(true);
        this.setMouseEnabled(true);
        this.setTouchEnabled(true);

イベントの登録は onMouseUp() などを cc.Layer のオブジェクトに登録などではなく cc.eventManager.addListener を使うらしい.
キー入力については beta では後述する点について注意.

v2.2.x
var MyLayer = cc.Layer.extend({
  onEnter: function() {

  },
  /** @override */
  onMouseUp: function(evt) {
  },
  /** @override */
  onKeyUp: function(evt) {

  }
});
v3.0beta
var MyLayer = cc.Layer.extend({
  onEnter: function() {
    cc.eventManager.addListener(cc.EventListener.create({
      event: cc.EventListener.MOUSE,
      onMouseUp: function(evt) {  
      }
    }), this);
    cc.eventManager.addListener(cc.EventListener.create({
      event: cc.EventListener.KEYBOARD,
      onKeyReleased: function(key) {
      }
    }), this);
  },
});

v3.0beta におけるキー入力のバグ

キー入力は このコミット の修正がないとイベントを拾ってくれない.
チケット もあるけど何も書いてないに等しい)
キー入力を扱ってる場合は v3.0beta の次のものを待つか自分でそのコミットの修正を適用しないと動かないと思う.

sys について

モバイルかどうかについて自分のところでは下記のように書いてあったのが動かなかったが cc.sys.isMobile になったらしい.

v2.2.x
var platform = cc.Application.getInstance().getTargetPlatform();
if (platform === cc.TARGET_PLATFORM.MOBILE_BROWSER) {
}
v3.0beta
if (cc.sys.isMobile) {
}

ほかにも sys.localStorage のような sys に入ってるものは cc.sys.localStorage のように cc.sys になっている.

色について

参考

自分のところでは cc.c3b() を使っていたが参考ページのように cc.color に変更になっている.
他にも cc.c4f() を使っていたが, これの場合は 0 〜 1 の実数だったものが 0 〜 255 の整数に変わってるので書き換え時に注意.

LabelTTF について

cc.LabelTTF.create() は内部で new に書き換わっているので new を使ったものに書き換えてもいいししなくてもいい.

ソース

cocos2d-html5/cocos2d/core/labelttf/CCLabelTTF.js
cc.LabelTTF.create = function (text, fontName, fontSize, dimensions, hAlignment, vAlignment) {
    return new cc.LabelTTF(text, fontName, fontSize, dimensions, hAlignment, vAlignment);
};

また, Mac で開発しててデプロイを別サーバにするなどしている場合に多分ハマるものとして,ディレクトリ名が小文字になっているためアクセス時に HTTP ステータスが 404 になる可能性があるのでなんとかして書き換える必要があるかも.

リソースの読み込みについて

テンプレートの resource.js については多分変更されてない.
v2.2.x でも v3.0 でも main.js で呼んでると思う.

tmx の場合に中で image タグで png ファイルなどが設定されている場合は v3.0beta にすると下記のようなエラーが発生するかもしれない.

Uncaught Please load the resource first: xxx.tmx

これは resouce.js で tmx と png の順番が問題で, png よりも tmx ファイルを読み込む必要がある.これは resource.js を見る限りだと罠っぽい.

また,音声ファイルなどでは 下記のように type を指定している場合はその type が変更になっているようなので注意.

resource.js
var g_resources = [
    //bgm
    {type:"bgm",src:"res/sound/music.m4a"}
];
resource.js
var g_resources = [
    //bgm
    {type:"m4a",src:"res/sound/music.m4a"}
];

とりあえずソースを検索して出るものは以下のもの.

cocos2d/audio/CCAudio.js
1029:cc.loader.register(["mp3", "ogg", "wav", "mp4", "m4a"], cc._audioLoader);

cocos2d/core/platform/CCLoaders.js
31:cc.loader.register(["txt", "xml", "vsh", "fsh", "atlas"], cc._txtLoader);
38:cc.loader.register(["json", "ExportJson"], cc._jsonLoader);
50:cc.loader.register(["png", "jpg", "bmp","jpeg","gif"], cc._imgLoader);
61:cc.loader.register(["serverImg"], cc._serverImgLoader);
72:cc.loader.register(["plist"], cc._plistLoader);
122:cc.loader.register(["font", "eot", "ttf", "woff", "svg"], cc._fontLoader);

cocos2d/labels/CCLabelBMFont.js
1140:cc.loader.register(["fnt"], cc._fntLoader);

cocos2d/tilemap/CCTMXXMLParser.js
916:cc.loader.register(["tmx", "tsx"], cc._txtLoader);

extensions/ccb-reader/CCBReader.js
1124:cc.loader.register(["ccbi"], cc._binaryLoader);

width とか height とかについて

たとえば getBoudingBox() などで幅や高さを得る場合は cc.Rect が返ってくるはず.

この cc.Rect が getWidth()getHeight() では取得できなくなってる様子. たぶんこれに該当すると思うだけどこれみてわかるか!

とりあえず以上.

参考文献

このリンク先がだいたい 404 なんだよなぁ…

Upgrade guide from Cocos2d-html5 v2.2.x to Cocos2d-JS v3.0 beta | Documents | Cocos2d-x

http://www.cocos2d-x.org/docs/manual/framework/html5/release-notes/v3.0a/upgrade-guide/en#1-event-manager

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
18
Help us understand the problem. What are the problem?