【コピペ用】PlayCanvasでよく使うスクリプト集 2020【随時更新】 

PlayCanvasで自分がよく使うスクリプト集です。

スクリプトはこちらのプロジェクトからもコピペで使えるようにしています。
https://playcanvas.com/editor/project/748094

##

## 
ES6対応

アップデートにより必要なくなりました

```javascript

/*jshint esversion: 6*/
```

## 回転
```rotate.js
/*jshint esversion: 6, asi: true, laxbreak: true*/
class Rotate extends pc.ScriptType {
  update() {
    this.entity.rotate(this.speed)
  }
}

pc.registerScript(Rotate)
Rotate.attributes.add("speed", { type: "vec3", default: [0, 0, 0] })

```

## 移動

```translate.js
/*jshint esversion: 6, asi: true, laxbreak: true*/
class Translate extends pc.ScriptType {
  update() {
    this.entity.translate(this.speed)
  }
}

pc.registerScript(Translate)
Translate.attributes.add("speed", { type: "vec3", default: [0, 0.5, 0] })
```

# tween.jsライブラリを使った移動・回転

Tween.jsはPlayCanvasに対応している、tween用のライブラリです。
[tween.js](https://github.com/playcanvas/playcanvas-tween/blob/master/tween.js)をエディターにコピーをすることで使用できます。

<img width="140" alt="スクリーンショット 2020-12-17 16 32 54" src="https://user-images.githubusercontent.com/39250588/102457099-8ae4a380-4085-11eb-96eb-b4c3f191578c.png">


## 回転

```tween-rotate.js
/*jshint esversion: 6, asi: true, laxbreak: true*/
class TweenRotate extends pc.ScriptType {
  initialize() {
    const rotation = this.entity.getLocalEulerAngles()
    const tween = this.entity.tween(rotation).rotate(this.to, this.duration, pc[this.easing]).yoyo(this.yoyo).loop(this.loop)
    tween.start()
  }
}

pc.registerScript(TweenRotate)
TweenRotate.attributes.add("to", { type: "vec3", default: [0, 0, 180] })
TweenRotate.attributes.add("duration", { type: "number", default: 3 })
TweenRotate.attributes.add("yoyo", { type: "boolean", default: true })
TweenRotate.attributes.add("loop", { type: "boolean", default: true })
TweenRotate.attributes.add("easing", {
  type: "string",
  default: "Linear",
  enum: [
    { Linear: "Linear" },
    { QuadraticIn: "QuadraticIn" },
    { QuadraticOut: "QuadraticOut" },
    { QuadraticInOut: "QuadraticInOut" },
    { CubicIn: "CubicIn" },
    { CubicOut: "CubicOut" },
    { CubicInOut: "CubicInOut" },
    { QuarticIn: "QuarticIn" },
    { QuarticOut: "QuarticOut" },
    { QuarticInOut: "QuarticInOut" },
    { QuinticIn: "QuinticIn" },
    { QuinticOut: "QuinticOut" },
    { QuinticInOut: "QuinticInOut" },
    { SineIn: "SineIn" },
    { SineOut: "SineOut" },
    { SineInOut: "SineInOut" },
    { ExponentialIn: "ExponentialIn" },
    { ExponentialOut: "ExponentialOut" },
    { ExponentialInOut: "ExponentialInOut" },
    { CircularIn: "CircularIn" },
    { CircularOut: "CircularOut" },
    { CircularInOut: "CircularInOut" },
    { BackIn: "BackIn" },
    { BackOut: "BackOut" },
    { BackInOut: "BackInOut" },
    { BounceIn: "BounceIn" },
    { BounceOut: "BounceOut" },
    { BounceInOut: "BounceInOut" },
    { ElasticIn: "ElasticIn" },
    { ElasticOut: "ElasticOut" },
    { ElasticInOut: "ElasticInOut" },
  ],
})

```
## 拡大
```tween-scale.js
/*jshint esversion: 6, asi: true, laxbreak: true*/
class TweenScale extends pc.ScriptType {
  initialize() {
    const scale = this.entity.getLocalScale()
    const tween = this.entity.tween(scale).to(this.to, this.duration, pc[this.easing]).yoyo(this.yoyo).loop(this.loop)
    tween.start()
  }
}

pc.registerScript(TweenScale)
TweenScale.attributes.add("to", { type: "vec3", default: [2, 2, 2] })
TweenScale.attributes.add("duration", { type: "number", default: 3 })
TweenScale.attributes.add("yoyo", { type: "boolean", default: true })
TweenScale.attributes.add("loop", { type: "boolean", default: true })
TweenScale.attributes.add("easing", {
  type: "string",
  default: "Linear",
  enum: [
    { Linear: "Linear" },
    { QuadraticIn: "QuadraticIn" },
    { QuadraticOut: "QuadraticOut" },
    { QuadraticInOut: "QuadraticInOut" },
    { CubicIn: "CubicIn" },
    { CubicOut: "CubicOut" },
    { CubicInOut: "CubicInOut" },
    { QuarticIn: "QuarticIn" },
    { QuarticOut: "QuarticOut" },
    { QuarticInOut: "QuarticInOut" },
    { QuinticIn: "QuinticIn" },
    { QuinticOut: "QuinticOut" },
    { QuinticInOut: "QuinticInOut" },
    { SineIn: "SineIn" },
    { SineOut: "SineOut" },
    { SineInOut: "SineInOut" },
    { ExponentialIn: "ExponentialIn" },
    { ExponentialOut: "ExponentialOut" },
    { ExponentialInOut: "ExponentialInOut" },
    { CircularIn: "CircularIn" },
    { CircularOut: "CircularOut" },
    { CircularInOut: "CircularInOut" },
    { BackIn: "BackIn" },
    { BackOut: "BackOut" },
    { BackInOut: "BackInOut" },
    { BounceIn: "BounceIn" },
    { BounceOut: "BounceOut" },
    { BounceInOut: "BounceInOut" },
    { ElasticIn: "ElasticIn" },
    { ElasticOut: "ElasticOut" },
    { ElasticInOut: "ElasticInOut" },
  ],
})

```

## 移動
``` tween-translate.js
/*jshint esversion: 6, asi: true, laxbreak: true*/
class TweenTranslate extends pc.ScriptType {
  initialize() {
    const position = this.entity.getLocalPosition()
    const tween = this.entity.tween(position).to(this.to, this.duration, pc[this.easing]).yoyo(this.yoyo).loop(this.loop)
    tween.start()
  }
}

pc.registerScript(TweenTranslate)
TweenTranslate.attributes.add("to", { type: "vec3", default: [3, 0, 0] })
TweenTranslate.attributes.add("duration", { type: "number", default: 3 })
TweenTranslate.attributes.add("yoyo", { type: "boolean", default: true })
TweenTranslate.attributes.add("loop", { type: "boolean", default: true })
TweenTranslate.attributes.add("easing", {
  type: "string",
  enum: [
    { Linear: "Linear" },
    { QuadraticIn: "QuadraticIn" },
    { QuadraticOut: "QuadraticOut" },
    { QuadraticInOut: "QuadraticInOut" },
    { CubicIn: "CubicIn" },
    { CubicOut: "CubicOut" },
    { CubicInOut: "CubicInOut" },
    { QuarticIn: "QuarticIn" },
    { QuarticOut: "QuarticOut" },
    { QuarticInOut: "QuarticInOut" },
    { QuinticIn: "QuinticIn" },
    { QuinticOut: "QuinticOut" },
    { QuinticInOut: "QuinticInOut" },
    { SineIn: "SineIn" },
    { SineOut: "SineOut" },
    { SineInOut: "SineInOut" },
    { ExponentialIn: "ExponentialIn" },
    { ExponentialOut: "ExponentialOut" },
    { ExponentialInOut: "ExponentialInOut" },
    { CircularIn: "CircularIn" },
    { CircularOut: "CircularOut" },
    { CircularInOut: "CircularInOut" },
    { BackIn: "BackIn" },
    { BackOut: "BackOut" },
    { BackInOut: "BackInOut" },
    { BounceIn: "BounceIn" },
    { BounceOut: "BounceOut" },
    { BounceInOut: "BounceInOut" },
    { ElasticIn: "ElasticIn" },
    { ElasticOut: "ElasticOut" },
    { ElasticInOut: "ElasticInOut" },
  ],
})
```


## カスタムデータ

``` javascript
/*jshint esversion: 6, asi: true, laxbreak: true*/
class TweenCustomProperty extends pc.ScriptType {
  initialize() {
    const light = this.entity.light
    const tween = this.entity.tween(light).to({
      intensity: this.to
    }, this.duration, pc[this.easing]).yoyo(this.yoyo).loop(this.loop)
    tween.start()
  }
}

pc.registerScript(TweenCustomProperty)
TweenCustomProperty.attributes.add("to", { type: "number", default: 3})
TweenCustomProperty.attributes.add("duration", { type: "number", default: 3 })
TweenCustomProperty.attributes.add("yoyo", { type: "boolean", default: true })
TweenCustomProperty.attributes.add("loop", { type: "boolean", default: true })
TweenCustomProperty.attributes.add("easing", {
  type: "string",
  enum: [
    { Linear: "Linear" },
    { QuadraticIn: "QuadraticIn" },
    { QuadraticOut: "QuadraticOut" },
    { QuadraticInOut: "QuadraticInOut" },
    { CubicIn: "CubicIn" },
    { CubicOut: "CubicOut" },
    { CubicInOut: "CubicInOut" },
    { QuarticIn: "QuarticIn" },
    { QuarticOut: "QuarticOut" },
    { QuarticInOut: "QuarticInOut" },
    { QuinticIn: "QuinticIn" },
    { QuinticOut: "QuinticOut" },
    { QuinticInOut: "QuinticInOut" },
    { SineIn: "SineIn" },
    { SineOut: "SineOut" },
    { SineInOut: "SineInOut" },
    { ExponentialIn: "ExponentialIn" },
    { ExponentialOut: "ExponentialOut" },
    { ExponentialInOut: "ExponentialInOut" },
    { CircularIn: "CircularIn" },
    { CircularOut: "CircularOut" },
    { CircularInOut: "CircularInOut" },
    { BackIn: "BackIn" },
    { BackOut: "BackOut" },
    { BackInOut: "BackInOut" },
    { BounceIn: "BounceIn" },
    { BounceOut: "BounceOut" },
    { BounceInOut: "BounceInOut" },
    { ElasticIn: "ElasticIn" },
    { ElasticOut: "ElasticOut" },
    { ElasticInOut: "ElasticInOut" },
  ],
})
```


# モデル

## アセットから3Dモデルを読み込む

```model-load-asset.js
/*jshint esversion: 6, asi: true, laxbreak: true*/
class ModelLoadAsset extends pc.ScriptType{
    initialize(){
       const entity = new pc.Entity()

       entity.addComponent("model", {
           asset: this.model
       })
       entity.reparent(this.entity)
    }
}

pc.registerScript(ModelLoadAsset)
ModelLoadAsset.attributes.add("model",{"type": "asset"})
```


# UI
## エレメントコンポーネント

エレメントコンポーネントがタップされた時

```element.js
/*jshint esversion: 6, asi: true, laxbreak: true*/
class Element extends pc.ScriptType{
    initialize(){
        // クリック時
        this.entity.element.on(pc.EVENT_MOUSEDOWN, this.click , this)
        
        // タップ時
        this.entity.element.on(pc.EVENT_TOUCHSTART, this.touch , this)
    }
    alert(){
        alert("ALERT!!")   
    }
    touch(){
        this.alert()
    }
    click(){
        this.alert()
    }
}

pc.registerScript(Element)
```

## ボタンコンポーネント
ボタンコンポーネントがホバーされた時

```button.js
/*jshint esversion: 6, asi: true, laxbreak: true*/
class Button extends pc.ScriptType{
    initialize(){
        // クリック時
        this.entity.button.on("hoverstart", this.hoverstart , this)
        
        // タップ時
        this.entity.button.on("hoverend", this.hoverend , this)
    }
    alert(){
        alert("Hover status changed!")   
    }
    hoverstart(){
        this.alert()
    }
    hoverend(){
        this.alert()
    }
}

pc.registerScript(Button)
```

## Video Texture
Tutorial: Video Textures
https://playcanvas.com/project/405850

# キャラクターコントロール

## FPS
First Person
http://playcanvas.github.io/#camera/first-person.html
## TPS

Third Person Controller
https://developer.playcanvas.com/ja/tutorials/third-person-controller/


<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>
- [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)
- [React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す](https://qiita.com/yushimatenjin/items/7c7ad5d35473c11f32f2)
- [PlayCanvasのエディター上でHTML, CSSを組み込む方法](https://qiita.com/yushimatenjin/items/814b4a32db53397219df)
- [日本PlayCanvasユーザー会 - Slack](https://join.slack.com/t/playcanvasjphq/shared_invite/zt-9aihkaep-TNA04tqgvYDFhBJABLLckw)


</font>

<font color="OrangeRed">
その他関連

- [PlayCanvasタグの付いた記事一覧](https://qiita.com/tags/playcanvas)
</font>

### PlayCanvasのユーザー会のSlackを作りました！

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

- [日本PlayCanvasユーザー会 - Slack](https://join.slack.com/t/playcanvasjphq/shared_invite/zt-9aihkaep-TNA04tqgvYDFhBJABLLckw)