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モデルについてはサンディーちゃんを利用しております。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/48e19b8b-f2d8-e82b-501b-b0dddbce1284.png" width="300px" />

https://playcanvas.jp/sandy

## 3D

### Render

[https://playcanv.as/b/3pyfEpUp/](https://playcanv.as/b/3pyfEpUp/)

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

[https://developer.playcanvas.com/en/api/pc.RenderComponent.html](https://developer.playcanvas.com/en/api/pc.RenderComponent.html)

```jsx
const render = this.entity.render;
```

#### 表示 (show)

![スクリーンショット 2022-06-29 18.19.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/b6c4e429-e38a-3edb-0f51-24e3804f70f5.png)

```jsx
render.show();
```

#### 非表示 (hide)

![スクリーンショット 2022-06-29 18.19.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/5e15711b-d4d0-f4da-6584-c416c66b6b46.png)

```jsx
render.hide();
```

### Collision

![スクリーンショット 2022-06-30 12.11.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/fda64532-d9a5-8f6b-c725-16aa489a4efc.png)

[https://playcanv.as/p/74yNM60T/](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)

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

- collisionstart

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

- contact

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

- collisionend

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

### Rigid Body

![スクリーンショット 2022-06-30 12.12.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/e7b54ede-1d00-75d0-7881-6d1a73397cd5.png)

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

```jsx
const rigidbody = this.entity.rigidbody;
```

[https://playcanv.as/b/JRJUVBCH/](https://playcanv.as/b/JRJUVBCH/)

[https://developer.playcanvas.com/en/api/pc.RigidBodyComponent.html](https://developer.playcanvas.com/en/api/pc.RigidBodyComponent.html)

- applyForce

```jsx
rigidbody.applyForce(0, 10, 0);
```

- applyImpluse

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

- applytorque

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

- applyTorqueImpluse

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

- teleport

```jsx
rigidbody.teleport(0, 5, 0);
```

### Animコンポーネント

![スクリーンショット 2022-06-29 17.23.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/67fbc0cd-6c30-e830-f79c-802d43a58b4c.png)

[https://playcanv.as/b/VLJCwlMd](https://playcanv.as/b/VLJCwlMd)

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

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

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


[https://developer.playcanvas.com/en/api/pc.AnimComponent.html](https://developer.playcanvas.com/en/api/pc.AnimComponent.html)

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

```jsx
anim.setTrigger("jump");
```

### レイヤー

#### ステートの移動 (transition)

```jsx
baseLayer.transition("Initial State");
```

#### 再生 (play)

```jsx
anim.baseLayer.play();
```

#### 停止 (pause)

```jsx
anim.baseLayer.pause();
```

## エフェクト

### Particle System

![スクリーンショット 2022-06-29 17.44.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/34015350-0338-ff51-7c93-17d71a5ceb20.png)

[https://playcanv.as/b/ITaTubPM](https://playcanv.as/b/ITaTubPM)

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

[https://developer.playcanvas.com/en/api/pc.ParticleSystemComponent.html](https://developer.playcanvas.com/en/api/pc.ParticleSystemComponent.html)

```jsx
const particlesystem = this.entity.particlesystem;
```

#### 再生 (play)

```jsx
particlesystem.play();
```

#### 停止 (stop)

```jsx
particlesystem.stop();
```

#### 一時停止 (pause)

```jsx
particlesystem.pause();
```

#### 再開(unpause)

```jsx
particlesystem.unpause();
```

#### リセット(reset)

```jsx
particlesystem.reset();
```

## サウンド

### Sound

![スクリーンショット 2022-06-30 12.20.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/072d743c-0461-5bcc-ca27-d419394fd5ee.png)

[https://playcanv.as/b/dkXoOKZZ/](https://playcanv.as/b/dkXoOKZZ/)

```jsx
const sound = this.entity.sound;
```

[https://developer.playcanvas.com/en/api/pc.SoundComponent.html](https://developer.playcanvas.com/en/api/pc.SoundComponent.html)

- #### 再生 (play)

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

- #### 停止 (stop)

```jsx
sound.stop();
```

- #### 一時停止 (pause)

```jsx
sound.pause();
```

- #### 再開 (resume)

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

### 

## 2D

![スクリーンショット 2022-06-30 12.16.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/d803786a-f6f1-227d-43a6-f34c1034490e.png)

[https://playcanv.as/b/kVJuoZpx/](https://playcanv.as/b/kVJuoZpx/)

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

```jsx
const element = this.entity.element;
```

[https://developer.playcanvas.com/en/api/pc.ParticleSystemComponent.html](https://developer.playcanvas.com/en/api/pc.ElementComponent.html)

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

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

```jsx
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

```jsx
// モバイル判定
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](https://developer.playcanvas.com/en/api/pc.ElementComponent.html)



### Audio Listener
[https://developer.playcanvas.com/en/api/pc.AudioListenerComponent.html](https://developer.playcanvas.com/en/api/pc.AudioListenerComponent.html)

### Button
[https://developer.playcanvas.com/en/api/pc.ButtonComponent.html](https://developer.playcanvas.com/en/api/pc.ButtonComponent.html)

### Sprite
[https://developer.playcanvas.com/en/api/pc.SpriteComponent.html](https://developer.playcanvas.com/en/api/pc.SpriteComponent.html)

### Camera
[https://developer.playcanvas.com/en/api/pc.CameraComponent.html](https://developer.playcanvas.com/en/api/pc.CameraComponent.html)

### Light
[https://developer.playcanvas.com/en/api/pc.LightComponent.html](https://developer.playcanvas.com/en/api/pc.LightComponent.html)

### Screen
[https://developer.playcanvas.com/en/api/pc.ScreenComponent.html](https://developer.playcanvas.com/en/api/pc.ScreenComponent.html)

### Scrollbar
[https://developer.playcanvas.com/en/api/pc.ScrollbarComponent.html](https://developer.playcanvas.com/en/api/pc.ScrollbarComponent.html)

### Scroll View
[https://developer.playcanvas.com/en/api/pc.ScrollbarComponent.html](https://developer.playcanvas.com/en/api/pc.ScrollbarComponent.html)

### Script
[https://developer.playcanvas.com/en/api/pc.ScriptComponent.html](https://developer.playcanvas.com/en/api/pc.ScriptComponent.html)

### Layout Child
[https://developer.playcanvas.com/en/api/pc.LayoutChildComponent.html](https://developer.playcanvas.com/en/api/pc.LayoutChildComponent.html)

### Layout Group
[https://developer.playcanvas.com/en/api/pc.LayoutGroupComponent.html](https://developer.playcanvas.com/en/api/pc.LayoutGroupComponent.html)