search
LoginSignup
3

More than 1 year has passed since last update.

posted at

updated at

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

スクリーンショット 2020-12-17 16 32 54

回転

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のユーザー会のSlackを作りました!

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

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
3