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 でもいい．

https://github.com/cocos2d/cocos2d-html5/blob/Cocos2d-html5-v2.2.3/template/index.html#L25

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

https://github.com/cocos2d/cocos2d-html5/blob/Cocos2d-html5-v3.0-beta/template/index.html#L22

```html
<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 とか追加する([他の](https://github.com/cocos2d/cocos2d-html5/blob/Cocos2d-html5-v3.0-beta/moduleConfig.json)) |

### main.js 

cc.Application や cc.AppControl はなくなったらしい（[参考](http://www.cocos2d-x.org/docs/manual/framework/html5/release-notes/v3.0a/upgrade-guide/en#2-game-creation-and-configuration)) ので cc.game を使う．

```js:v2.2.x/main.js
var cocos2dApp = cc.Application.extend({
});
var myApp = new cocos2dApp(MyScene);
```


```js:v3.0beta/main.js
cc.game.onStart = function(){
  cc.director.runScene(new MyScene());
};
cc.game.run();
```

あと `getInstance()` してるものは基本的に先頭小文字になってる （[参考](http://www.cocos2d-x.org/docs/manual/framework/html5/release-notes/v3.0a/upgrade-guide/en#6-singleton-objects))
（しれっと書いてるけど シーン表示するときは `runScene()` を使うらしい）

```js:v2.2.x
cc.Director.replaceScene(new MyScene());
```

```js:v3.0beta
cc.director.runScene(new MyScene());
```

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

### キー入力・マウス入力

[ここ](http://www.cocos2d-x.org/docs/manual/framework/html5/release-notes/v3.0a/upgrade-guide/en#1-event-manager) によると `cc.eventManager` に全部まとまったらしい．

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

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

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

例

```js:v2.2.x
var MyLayer = cc.Layer.extend({
  onEnter: function() {
    
  },
  /** @override */
  onMouseUp: function(evt) {
  },
  /** @override */
  onKeyUp: function(evt) {
    
  }
});
```

```js: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 におけるキー入力のバグ

キー入力は [このコミット](https://github.com/cocos2d/cocos2d-html5/commit/39a85b791ae4e2c1f870f12d47d087094629e1b3) の修正がないとイベントを拾ってくれない．
（[チケット](http://cocos2d-x.org/issues/5412) もあるけど何も書いてないに等しい）
キー入力を扱ってる場合は v3.0beta の次のものを待つか自分でそのコミットの修正を適用しないと動かないと思う．

### sys について

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

```js:v2.2.x
var platform = cc.Application.getInstance().getTargetPlatform();
if (platform === cc.TARGET_PLATFORM.MOBILE_BROWSER) {
}
```

```js:v3.0beta
if (cc.sys.isMobile) {
}
```

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

### 色について

[参考](http://www.cocos2d-x.org/docs/manual/framework/html5/release-notes/v3.0a/upgrade-guide/en#5-basic-data-structures)

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

### LabelTTF について

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

[ソース](https://github.com/cocos2d/cocos2d-html5/blob/Cocos2d-html5-v3.0-beta/cocos2d/core/labelttf/CCLabelTTF.js)

```js: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 になる可能性があるのでなんとかして書き換える必要があるかも．

https://github.com/cocos2d/cocos2d-html5/tree/Cocos2d-html5-v2.2.3/cocos2d/core/labelTTF

https://github.com/cocos2d/cocos2d-html5/tree/Cocos2d-html5-v3.0-beta/cocos2d/core/labelttf

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

テンプレートの [resource.js](https://github.com/cocos2d/cocos2d-html5/blob/Cocos2d-html5-v3.0-beta/template/src/resource.js) については多分変更されてない．
v2.2.x でも v3.0 でも [main.js](https://github.com/cocos2d/cocos2d-html5/blob/Cocos2d-html5-v3.0-beta/template/main.js#L13) で呼んでると思う．

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

```
Uncaught Please load the resource first: xxx.tmx
```

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


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

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

```js: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 が返ってくるはず．

- [v2.2.x のcc.Rect](https://github.com/cocos2d/cocos2d-html5/blob/Cocos2d-html5-v2.2.3/cocos2d/core/cocoa/CCGeometry.js#L208)
- [v3.0beta の cc.Rect](https://github.com/cocos2d/cocos2d-html5/blob/Cocos2d-html5-v3.0-beta/cocos2d/core/cocoa/CCGeometry.js#L130)

この cc.Rect が `getWidth()` や `getHeight()` では取得できなくなってる様子． たぶん[これ](http://www.cocos2d-x.org/docs/manual/framework/html5/release-notes/v3.0a/upgrade-guide/en#4-property-apis)に該当すると思うだけどこれみてわかるか！

とりあえず以上．

# 参考文献

このリンク先がだいたい 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