CocosCreator 스 킬 쿨 링 효과 구현

CocosCreator 스 킬 CD 효과 구현
많은 게임 에서 스 킬 이 있 습 니 다.유 저 는 스 킬 버튼 을 클릭 하면 스 킬 이 냉각 되 는 시간 이 있 습 니 다.냉각 시간 이 지나 야 스 킬 을 다시 사용 할 수 있 습 니 다.
cocos 에서 이 효 과 를 실현 하 는 것 은 간단 합 니 다.엘 프 구성 요 소 를 사용 해 야 합 니 다.
우선 스 킬 버튼 의 그림 을 canvas 아래로 끌 어 내 립 니 다.

그리고 스 킬 버튼 아래 에 label 을 새로 만 듭 니 다.
이렇게

그리고 TS 스 크 립 트 를 새로 만들어 서 아래 코드 를 복사 해서 붙 여 넣 습 니 다.


const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Sprite)
    skill:cc.Sprite = null;//    

    @property(cc.Label)
    time_label:cc.Label = null;//             

    @property
    time:number = 3;//      

    @property
    isshow_label:boolean = true;//      

    onLoad(){
        this.skill.fillRange = 1;//               1
    }

    update(dt:number){
        if(this.skill.fillRange != 1){//           1            
            this.skill.fillRange += dt / this.time;//                 /       
            this.time_label.string = Math.floor(((1 - this.skill.fillRange) * this.time)).toString();//          
            //        1 -           *       ，  Math.floor  

            if(this.isshow_label == true){//        
                this.time_label.node.active = true;//          
            }        }
        if(this.skill.fillRange == 1){//          1            
            this.skill.getComponent(cc.Button).interactable = true;//    
            this.time_label.node.active = false;//          
        }
    }

    onbtn(){//          
        this.skill.fillRange = 0;//         0
        console.log("     ");//  log
        this.skill.getComponent(cc.Button).interactable = false;//    
    }

}

코드 마다 제 가 상세 한 주석 을 썼어 요.
기 록 된 스 크 립 트 를 스 킬 단추 에 걸 고 노드 를 연결 합 니 다.

필요 에 따라 마음대로 수정 할 수 있다

Time 은 스 킬 의 쿨 타임 입 니 다.원 하 는 만큼 고 쳐 주세요

Isshow_time 은 남 은 시간 을 식 히 는 텍스트 를 표시 할 지 여부 입 니 다.텍스트 를 표시 하지 않 으 려 면 그 를 지 웁 니 다.기본 값 은 표시

입 니 다.
코드 만 으로 는 부족 합 니 다.스 킬 버튼 을 설정 해 야 합 니 다.
sprite(엘 프)구성 요 소 를 변경 하고 스 킬 단추 에 button(단추)구성 요 소 를 추가 해 야 합 니 다.

그림 에 맞추어 맞추다

Type 은 정령 의 렌 더 링 모드 를 채 우기

로 바 꿔 야 합 니 다.

Fill Type 충전 방식 을 부채 형 충전 으로 변경

Fill Center 는 부채 형의 중심 점 0,0 을 왼쪽 아래 1,1 은 오른쪽 상단 으로 바 꾸 었 습 니 다.우 리 는 부채 형 이 중심 점 을 중심 으로 채 워 지 기 를 원 하기 때문에 0.5,0.5

로 바 꾸 었 습 니 다.

Fill Range 는 충전 총량 을 1

로 변경 합 니 다.
마지막 으로 스 킬 단추 에 button(단추)구성 요 소 를 추가 합 니 다.

바 인 딩 된 이벤트 가 onbtn 입 니 다.보기 위해 button 구성 요소 의 Transition 을 COLOR 로 변경 합 니 다.

큰 성 과 를 거 두 었 으 니,이렇게 하면 된다.
클릭 하여 실행 해 보 세 요.

정말 괜찮다
스 킬 버튼 을 눌 렀 을 때 어떤 기능 을 이 루 고 싶 으 면 코드 를 onbtn 에 넣 으 면 됩 니 다.

여기에 넣 으 면 돼 요.
예 를 들 어 스 킬 버튼 을 눌 렀 을 때 필터 애니메이션 을 재생 할 수 있 습 니 다.

이상 은 바로 CocosCreator 가 스 킬 쿨 링 효 과 를 실현 하 는 상세 한 내용 입 니 다.더 많은 CocosCreator 스 킬 쿨 링 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 해 주 십시오!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

CocosCreator 스 킬 쿨 링 효과 구현

많은 게임 에서 스 킬 이 있 습 니 다.유 저 는 스 킬 버튼 을 클릭 하면 스 킬 이 냉각 되 는 시간 이 있 습 니 다.냉각 시간 이 지나 야 스 킬 을 다시 사용 할 수 있 습 니 다. 그리고 스 킬 버튼 아...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

CocosCreator 스 킬 쿨 링 효과 구현

좋은 웹페이지 즐겨찾기