PlayCanvasでJavasScriptのクラス構文を使って開発をする

### 2023/03/23 こちらは不要となりました。

```javascript
class Class  extends pc.ScriptType {
  initialize(){}
  update(){}
}

pc.registerScript('Class', Class);
```
https://github.com/playcanvas/engine/pull/3325

こちらで記述できるようになりました。

### PlayCanvasのpcオブジェクトの拡張について
PlayCanvasで拡張機能を作る場合にはよく`pc.extend`を使用して拡張を行います。
[Spine](https://github.com/playcanvas/playcanvas-spine)のプラグインなどもその方法で作られています。


PlayCanvasのGUIからスクリプトを作ると初期状態ではこのような状態でスクリプトが生成され、スクリプトが適用されます。

### スクリプト作成をした初期状態
```rotate.js
var Rotate = pc.createScript('rotate');

Rotate.prototype.initialize = function() {
};
Rotate.prototype.update = function(dt) {
};

```

### 回転をアップデート毎に行うスクリプト
```rotate.js
var Rotate = pc.createScript('rotate');

Rotate.prototype.initialize = function() {
};
Rotate.prototype.update = function(dt) {
    this.entity.rotate(0,1,0)
};

```


[今回作ったスクリプト](https://cdn.jsdelivr.net/gh/yushimatenjin/playcanvas-utils@master/plugins/registerScript.js)を事前に読み込んでおくとおくと以下の流れで`Script`を記述することができるようになります。

```rotate.js
const registerScript = (App, attributeses) => {
  const name = App.name.toLowerCase();
  const app = pc.createScript(name);
  if (attributeses !== undefined) {
    const attributes = Object.values(attributeses);
    for (let attr of attributes) {
      Object.entries(attr).forEach(item => {
        app.attributes.add(item[0], item[1]);
      });
    }
  }
  Object.setPrototypeOf(app.prototype, App.prototype);
};

class Rotate {
  initialize() {}

  update() {
    this.entity.rotate(0, 1, 0);
  }
}

registerScript(Rotate);

//PlayCanvasエディター上にregisterScriptのコードをコピーした場合は pc.registerScript(Rotate)で登録ができます。
// External Scriptsから読み込んだ場合は registerScriptとして呼び出します。

```
とすると回らせることができます。

### 補足 
`属性(アトリビュート）`を追加することでGUIから色々値を変更できるようになります。

```javascript
const registerScript = (App, attributeses) => {
  const name = App.name.toLowerCase();
  const app = pc.createScript(name);
  if (attributeses !== undefined) {
    const attributes = Object.values(attributeses);
    for (let attr of attributes) {
      Object.entries(attr).forEach(item => {
        app.attributes.add(item[0], item[1]);
      });
    }
  }
  Object.setPrototypeOf(app.prototype, App.prototype);
};

class Rotate {
  initialize() {}

  update() {
    this.entity.rotate(this.x, this.y, this.z);
  }
}
const attributeses = [
  {
    x: {
      type: "number",
      default: 0
    },
    y: {
      type: "number",
      default: 0
    },
    z: {
      type: "number",
      default: 0
    }
  }
];

registerScript(Rotate, attributeses);
```
![s3l9i-9w0o6](https://user-images.githubusercontent.com/39250588/63835077-400dbc80-c966-11e9-81ad-2106dadccf7f.gif)

<font color="OrangeRed">
PlayCanvas開発で参考になりそうな記事の一覧です。
</font>
<font color="OrangeRed">
入門

- [PlayCanvas入門- モデルの作成～ゲームに入れ込むまで](https://qiita.com/yushimatenjin/items/2a2c35fe7b1d08f9e361)
- [JavaScriptでスロットを実装する。【PlayCanvas】](https://qiita.com/yushimatenjin/items/e84c42da74df1eb07386)
- [3Dモデルのビューワーを3分で作る【初めてのPlayCanvas】](https://qiita.com/yushimatenjin/items/4b09c9e2076a0b2a6933)
</font>
<font color="OrangeRed">
応用
</font>

- [PlayCanvasのコードエディターでes6に対応する](https://qiita.com/yushimatenjin/items/a61a21c64c1c1a550dd4)
- [Gulpのプラグインを書いたらPlayCanvasでの開発がめちゃくちゃ便利になった](https://qiita.com/yushimatenjin/items/5f0f178e8a4ba4a5ee57)
- [PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む](https://qiita.com/yushimatenjin/items/7a64220cceac66843d7d)
</font>
<font color="OrangeRed">
その他の記事はこちらになります。

- [React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す](https://qiita.com/yushimatenjin/items/7c7ad5d35473c11f32f2)
- [PlayCanvasのエディター上でHTML, CSSを組み込む方法](https://qiita.com/yushimatenjin/items/814b4a32db53397219df)
- [【iOS13】新しくなったWebVRの使い方 ](https://qiita.com/yushimatenjin/items/344d86b3d193e0a88567)
</font>

<font color="OrangeRed">
その他関連
- [PlayCanvasタグの付いた記事一覧](https://qiita.com/tags/playcanvas)
</font>


### PlayCanvasのユーザー会のSlackを作りました！
少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！

[日本PlayCanvasユーザー会 - Slack](https://t.co/IdSRIfJhN5?amp=1)