チュートリアル
相互作用を使用したシンプルなランダムワールド
6min
📘 講義で使用されるプロジェクトファイル
概要 | ユーザーが近づくと表示されるインタラクションボタンを実装します。 |
|---|---|
難易度 | 初心者 |
必要な時間 | 30分 |
プロジェクトの目標
- インタラクティブボタンコントロールの適用とトリガー
- ワールドスペースキャンバス
- キャラクターアニメーションの適用
- オブジェクトインスタンスの作成
- 確率ランダムコードの適用
🎬 完成した世界のビデオ
CharacterController.ts
1import { ZepetoScriptBehaviour } from 'ZEPETO.Script'
2import { SpawnInfo, ZepetoPlayers, LocalPlayer, ZepetoCharacter } from 'ZEPETO.Character.Controller'
3import { WorldService } from 'ZEPETO.World';
4export default class CharacterController extends ZepetoScriptBehaviour {
5 Start() {
6 //ユーザーIDを取得（エディタを通じてログイン）
7 ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId,new SpawnInfo(), true);
8 ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
9 let _player : LocalPlayer = ZepetoPlayers.instance.LocalPlayer;
10 });
11 }
12}
Interaction.ts
1import { Canvas, AnimationClip, WaitForSeconds, GameObject, Object, Random } from 'UnityEngine';
2import { Button } from 'UnityEngine.UI';
3import { ZepetoPlayers, ZepetoCharacter } from 'ZEPETO.Character.Controller';
4import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
5
6// パスからカスタムスクリプトをインポート
7import UIController from './UIController';
8
9export default class Interaction extends ZepetoScriptBehaviour
10{
11 public openUIGesture: Button;
12 public interactionCanvas: Canvas;
13 public animationClip: AnimationClip;
14 public uiControllerObject: GameObject;
15 public badEffectFactory: GameObject;
16 public goodEffectFactory: GameObject;
17 public gift: GameObject;
18 public failureRatio: number = 50;
19
20 private uiController: UIController;
21 private zepetoCharacter :ZepetoCharacter;
22
23 Start()
24 {
25 // EventCameraを設定
26 this.interactionCanvas.worldCamera = ZepetoPlayers.instance.ZepetoCamera.camera;
27 // キャラクターを設定
28 ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
29 this.zepetoCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
30 });
31 // スクリプトインポート
32 this.uiController = this.uiControllerObject.GetComponent<UIController>();
33
34 //ボタンを隠す
35 this.openUIGesture.gameObject.SetActive(false);
36
37 //ボタンクリック時
38 this.openUIGesture.onClick.AddListener(()=>{
39 this.zepetoCharacter.SetGesture(this.animationClip);
40 this.StartCoroutine(this.FirstRoutine());
41 });
42 }
43
44 OnTriggerEnter(collider)
45 {
46 this.openUIGesture.gameObject.SetActive(true);
47 }
48 OnTriggerExit(collider)
49 {
50 this.openUIGesture.gameObject.SetActive(false);
51 }
52
53 *FirstRoutine()
54 {
55 this.uiController.Loading();
56 yield new WaitForSeconds(3);
57 this.zepetoCharacter.CancelGesture();
58 this.RandomCalculation();
59 }
60
61 private RandomCalculation()
62 {
63 let randomNumber: number;
64 randomNumber = Random.Range(0,100);
65 if (randomNumber <= this.failureRatio)
66 {
67 this.Lose();
68 }
69 else
70 {
71 this.Win();
72 }
73 this.StartCoroutine(this.SecondRoutine());
74 }
75
76 private Lose()
77 {
78 this.uiController.Lose();
79 //GameObjectを作成
80 var obj = Object.Instantiate(this.badEffectFactory) as GameObject;
81 obj.transform.position = this.transform.position;
82 }
83
84 private Win()
85 {
86 this.uiController.Win();
87 //GameObjectを作成
88 var obj = Object.Instantiate(this.goodEffectFactory) as GameObject;
89 obj.transform.position = this.transform.position;
90 var giftobj = Object.Instantiate(this.gift) as GameObject;
91 giftobj.transform.position = this.transform.position;
92 }
93
94 *SecondRoutine()
95 {
96 yield new WaitForSeconds(1);
97 this.uiController.Init();
98 //ボックスを破壊
99 GameObject.Destroy(this.gameObject);
100 }
101}
UIController.ts
1import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
2import { Text } from "UnityEngine.UI";
3import { GameObject } from 'UnityEngine';
4
5//使用する変数を定義
6export default class UIController extends ZepetoScriptBehaviour
7{
8 public messageUI: Text;
9
10 Start()
11 {
12 this.Init();
13 }
14
15 public Init()
16 {
17 this.messageUI.text = " ";
18 }
19
20 public Loading()
21 {
22 this.messageUI.text = "箱の中には何が入っているの？";
23 }
24
25 public Win()
26 {
27 this.messageUI.text = "おめでとう！あなたはそれを手に入れました";
28 }
29
30 public Lose()
31 {
32 this.messageUI.text = "空白です";
33 }
34
35}
