PlayCanvas コンポーネント操作のスクリプト【随時更新】

コンポーネント一覧

• anim
• Audio Listener
• Button
• Camera
• Collision
• Element
• Layout Child
• Layout Group
• Light
• Particle System
• Render
• Rigid Body
• Screen
• Script
• ScrollBar
• Scroll View
• Sound
• Sprite

また、こちらの記事の元となっているシーンが入っているプロジェクトはこちらです。
https://playcanvas.com/editor/project/951440

この記事で利用している3Dモデルについてはサンディーちゃんを利用しております。

3D

Render

https://playcanv.as/b/3pyfEpUp/

Renderコンポーネントはrenderとしてアクセスできます。

https://developer.playcanvas.com/en/api/pc.RenderComponent.html

const render = this.entity.render;

表示 (show)

render.show();

非表示 (hide)

render.hide();

Collision

https://playcanv.as/p/74yNM60T/

Colliisonはcollisionとしてアクセスできます。

https://developer.playcanvas.com/en/api/pc.CollisionComponent.html

// https://developer.playcanvas.com/en/api/pc.CollisionComponent.html
const collision = this.entity.collision;

• collisionstart

// Collisionを持ったコンポーネント同士がぶつかった場合
collision.on("collisionstart", () => {}, this);

• contact

collision.on("contact", () => {}, this);

• collisionend

// Collisionを持ったコンポーネント同士が離れた場合
collision.on("collisionend", () => {}, this);

Rigid Body

Rigid Bodyはrigidbodyとしてアクセスできます。

const rigidbody = this.entity.rigidbody;

https://playcanv.as/b/JRJUVBCH/

https://developer.playcanvas.com/en/api/pc.RigidBodyComponent.html

• applyForce

rigidbody.applyForce(0, 10, 0);

• applyImpluse

const impulse = new pc.Vec3(0, 5, 0);
rigidbody.applyImpulse(impulse);

• applytorque

const torque = new pc.Vec3(0, 5, 0);
rigidbody.applyTorque(torque);

• applyTorqueImpluse

const torque = new pc.Vec3(0, 5, 0);
rigidbody.applyTorqueImpulse(torque);

• teleport

rigidbody.teleport(0, 5, 0);

Animコンポーネント

https://playcanv.as/b/VLJCwlMd

animコンポーネントはanimとしてアクセスできます。

またエディタで設定をしたBaseレイヤーについてはbaseLayerとしてアクセスができます。

const anim = this.entity.anim;
const baseLayer = anim.baseLayer;

https://developer.playcanvas.com/en/api/pc.AnimComponent.html

トリガーの値を発火(setTrigger)

anim.setTrigger("jump");

レイヤー

ステートの移動 (transition)

baseLayer.transition("Initial State");

再生 (play)

anim.baseLayer.play();

停止 (pause)

anim.baseLayer.pause();

エフェクト

Particle System

https://playcanv.as/b/ITaTubPM

ParticleSystemはparticlesystemとしてアクセスできます。

https://developer.playcanvas.com/en/api/pc.ParticleSystemComponent.html

const particlesystem = this.entity.particlesystem;

再生 (play)

particlesystem.play();

停止 (stop)

particlesystem.stop();

一時停止 (pause)

particlesystem.pause();

再開(unpause)

particlesystem.unpause();

リセット(reset)

particlesystem.reset();

サウンド

Sound

https://playcanv.as/b/dkXoOKZZ/

const sound = this.entity.sound;

https://developer.playcanvas.com/en/api/pc.SoundComponent.html

• 再生 (play)

const slotName = "SE";
sound.play(slotName);

• 停止 (stop)

sound.stop();

• 一時停止 (pause)

sound.pause();

• 再開 (resume)

const slotName = "SE";
sound.resume(slotName);

2D

https://playcanv.as/b/kVJuoZpx/

Elementはelementとしてアクセスできます。

const element = this.entity.element;

https://developer.playcanvas.com/en/api/pc.ParticleSystemComponent.html

Element - エレメントコンポーネント

• クリック / マウスダウン / マウスアップ / ホバー
  • click
  • mousedown
  • mouseup
  • mouseenter

const onClick = () => alert("click");
this.clickElement.element.on("click", onClick, this);

// onMouseDown
const onMouseDown = () => alert("mousedown");
this.mouseUpElement.element.on("mousedown", onMouseDown, this);

// onMouseUp
const onMouseUp = () => alert("mouseup");
this.mouseDownElement.element.on("mouseup", onMouseUp, this);

// onMouseEnter
const onMouseEnter = () => alert("mouseenter");
this.mouseenterElement.element.on("mouseenter", onMouseEnter, this);

• タッチ / タッチ終了（モバイル)
  • onTouchStart
  • onTouchEnd

// モバイル判定
if(pc.platform.mobile){
	const onTouchStart = () => alert("onTouchStart");
	this.entity.element.on(pc.EVENT_TOUCHSTART, onTouchStart , this)

	const onTouchEnd = () => alert("onTouchEnd");
	this.entity.element.on(pc.EVENT_TOUCHEND, onTouchEnd , this)
}

https://developer.playcanvas.com/en/api/pc.ElementComponent.html

Audio Listener

https://developer.playcanvas.com/en/api/pc.AudioListenerComponent.html

Button

https://developer.playcanvas.com/en/api/pc.ButtonComponent.html

Sprite

https://developer.playcanvas.com/en/api/pc.SpriteComponent.html

Camera

https://developer.playcanvas.com/en/api/pc.CameraComponent.html

Light

https://developer.playcanvas.com/en/api/pc.LightComponent.html

Screen

https://developer.playcanvas.com/en/api/pc.ScreenComponent.html

Scrollbar

https://developer.playcanvas.com/en/api/pc.ScrollbarComponent.html

Scroll View

https://developer.playcanvas.com/en/api/pc.ScrollbarComponent.html

Script

https://developer.playcanvas.com/en/api/pc.ScriptComponent.html

Layout Child

https://developer.playcanvas.com/en/api/pc.LayoutChildComponent.html

Layout Group

https://developer.playcanvas.com/en/api/pc.LayoutGroupComponent.html