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

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

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

ES6対応

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

/*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をエディターにコピーをすることで使用できます。

回転

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" },
  ],
})

カスタムデータ

/*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/

PlayCanvas開発で参考になりそうな記事の一覧です。

• PlayCanvas入門- モデルの作成～ゲームに入れ込むまで
• JavaScriptでスロットを実装する。【PlayCanvas】
• 3Dモデルのビューワーを3分で作る【初めてのPlayCanvas】

- [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) その他関連

• PlayCanvasタグの付いた記事一覧

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

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

• 日本PlayCanvasユーザー会 - Slack