[PlayCanvas(JavaScript)] Tween에게 무작위 값을 주고 순환하기

PlayCanvas

PlayCanvas는 데스크톱 및 모바일 브라우저를 위한 제품입니다.
웹 페이지 5 게임 엔진.다양한 기능을 갖춘 3D 엔진 및
클라우드 관리를 갖춘 개발 환경과 도구 모음.
참조 소스: PLAYCANVAS
초보적인 사용 방법은 다음과 같이 요약한다.
【참조 링크】: [플레이캔버스(JavaScript)] 플레이캔버스를 만져봤어요.
이번에는 Tweentween.js을 테스트해야 하기 때문에 아래 링크에서 확인하십시오.
playcanvas-tween

데모

램프의 범위를 무작위 간격으로 무작위 크기로 바꾸다.
춤추는 사람과는 전혀 상관없다.

Tween에 무작위 값을 내서 순환시키는 일 때문에 조금 고생해서 필기를 했습니다.
초보자라서 과하게 썼을 수도 있어요.
부디 부드럽게 대해주세요.

코드

다음은 전문.
적절한 Enity에 연결

//宣言
var LightTween = pc.createScript('lightTween');

//アトリビュート　Editor画面にGUIで参照を設定可能に
LightTween.attributes.add('pointLightEntity', {type: 'entity', title: 'Point Light Entity'});

LightTween.prototype.initialize = function() {
    //初期化時Tweenの処理を担うメソッド呼び出す
    this.lightRandomFlash();
};

//ライトのレンジをランダムに変化
LightTween.prototype.lightRandomFlash = function(){
    //"this"を別の変数に持っておく
    var self = this;

    //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    //　ライトの範囲をTweenで変化させる
    //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

    //実行中のTween停止
    if(tweenLightRange){
        tweenLightRange.stop();
    }

    //単発でTween実行
    var tweenLightRange = this.app
    .tween(this.pointLightEntity.light).to({range: getRandomInt(3,8)},  getRandomInt(1,3), pc.SineOut)
    .yoyo(true)
    .on('complete', function () {
        //完了時、再帰的にメソッド呼び出し
        self.lightRandomFlash();
    })
    .start();
};

//ランダムな値生成
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return (Math.floor(Math.random() * (max-min)) + min);
}

결론적으로 Tween은 순환하지 않고 여러 번 반복적으로 불렀다.
단지 의심스럽게 순환(상)에 나타나고 있을 뿐이다.
왜냐하면, tween.js의 순환 처리가 최초로 정의된 tween 이후의 처리 순환을 하기 때문이다.
임의의 값을 교부하더라도 두 번째 이후의 처리는 고정된다.
(인식이 잘못되면 메시지를 남겨주세요.)
따라서 다음 순서에 따라 집행한다.
① HogeTween을 시작하는 방법이 기재된 호출
② HogeTween 작동 여부 확인, 작동 중지
③ 무작위 값을 HogeTween에게 넘겨 조작
④ HogeTween이 완료되었을 때 HogeTween을 다시 시작하는 방법을 호출합니다
⑤ 되돌아가다 ②

this

JavaScript의this는예상this을가리키지 않은듯혼란스러웠다.
【참조 링크】: 자바스크립트의'this'는'4가지'??
tween 방법 체인에서 호출 중 등록 처리 가능.on('hoge',function).
이 호출에서 사용this한 경우this의 내용은 tween이다.
이전 방법 체인에서 호출할 때의this의 내용은 Script의 인스턴스lightTween입니다.
문제점

 var tweenLightRange = this.app
    .tween(this.pointLightEntity.light).to({range: getRandomInt(3,8)},  getRandomInt(1,3), pc.SineOut)
    .yoyo(true)
    .on('complete', function () {
        //このthisは中身がtweenなのでエラーとなる
        this.lightRandomFlash();
    })
    .start();

따라서 tween에서 사용해야 한다lightTween 실례
변수에 인스턴스를 저장해야 합니다.

    //"this"を別の変数に持っておく
    var self = this; 

    var tweenLightRange = this.app
    .tween(this.pointLightEntity.light).to({range: getRandomInt(3,8)},  getRandomInt(1,3), pc.SineOut)
    .yoyo(true)
    .on('complete', function () {
        //selfは`lightTween`のインスタンスを指す
        self.lightRandomFlash();
    })
    .start();

【참조 링크】: What is the purpose of writing “self = this”?

끝말

JavaScript와 더 이상 관계를 맺지 못하면 PlayCanvas를 사용하는 것은 매우 번거롭다.
기초적으로 배우는 사이트나 아는 사람을 체계적으로 알려주세요.
사용자 커뮤니티 답변 감사합니다!

참조 링크

Math.random()