CocosCreator implementiert Skill-Kühleffekt

CocosCreator realisiert Skill-CD-Effekt

In vielen Spielen gibt es Fertigkeiten. Nachdem der Spieler auf die Fertigkeitsschaltfläche geklickt hat, hat die Fertigkeit eine Abklingzeit. Nach Ablauf der Abklingzeit kann die Fertigkeit erneut verwendet werden.

Es ist sehr einfach, diesen Effekt in Cocos zu erzielen. Sie müssen die Sprite-Komponente verwenden. Ziehen Sie zuerst das Bild der Skill-Schaltfläche auf die Leinwand.

Erstellen Sie dann ein neues Label unter dem Skill-Button
So was

Erstellen Sie dann ein neues TS-Skript und kopieren Sie den folgenden Code darin

const {ccclass, Eigenschaft} = cc._decorator;

@ccklasse
exportiere Standardklasse NewClass erweitert cc.Component {

    @Eigenschaft(cc.Sprite)
    Fähigkeit:cc.Sprite = null; //Fähigkeits-Sprite @property(cc.Label)
    time_label:cc.Label = null; //Zeige den Text der verbleibenden Zeit der Skill-Abkühlung @property
    Zeit:Zahl = 3; //Skill-Abkühlzeit @Eigenschaft
    isshow_label:boolean = true; //Ob Text angezeigt werden soll onLoad(){
        this.skill.fillRange = 1; //Wenn das Spiel beginnt, ist der Skill-Fill-Bereich 1
    }

    update(dt:Nummer){
        if(this.skill.fillRange != 1){//Wenn die Füllung des Skill-Assistenten nicht 1 ist, bedeutet dies, dass der Skill verwendet wurdethis.skill.fillRange += dt / this.time;//Der pro Frame wiederhergestellte Wert für den Skill ist Framerate / Skill-Abkühlzeitthis.time_label.string = Math.floor(((1 - this.skill.fillRange) * this.time)).toString();//Aktualisiere die verbleibende Zeit des Skills pro Frame//Die verbleibende Zeit des Skills ist zuerst 1 - der Füllungsgrad des Skill-Assistenten und dann * die Skill-Abkühlzeit und schließlich Math.floor gerundetif(this.isshow_label == true){//Wenn der Text angezeigt werden kannthis.time_label.node.active = true;//Zeige die verbleibende Zeit der Skill-Abkühlung} }
        if(this.skill.fillRange == 1){//Wenn die Füllung des Skill-Sprites 1 ist, bedeutet das, dass der Skill noch nicht verwendet wurde. this.skill.getComponent(cc.Button).interactable = true;//Schaltfläche starten this.time_label.node.active = false;//Verbleibende Zeit der Skill-Abkühlung ausblenden}
    }

    onbtn(){//Ereignis, wenn die Skill-Schaltfläche gedrückt wird this.skill.fillRange = 0;//Der Skill-Füllbereich wird auf 0 gesetzt
        console.log("Verwendete Fähigkeiten"); //Protokoll drucken
        this.skill.getComponent(cc.Button).interactable = false; //Schaltfläche deaktivieren}

}

Ich habe zu jeder Codezeile ausführliche Kommentare geschrieben.

Hängen Sie das geschriebene Skript an den Skill-Button und binden Sie den Knoten

Kann nach Bedarf geändert werden

• Die Zeit ist die Abklingzeit der Fertigkeit, Sie können sie beliebig ändern
• Isshow_time gibt an, ob der Text der verbleibenden Abkühlzeit angezeigt werden soll. Wenn Sie nicht möchten, dass der Text angezeigt wird, deaktivieren Sie das Kontrollkästchen. Die Standardeinstellung ist die Anzeige

Das Schreiben von Code reicht nicht aus. Sie müssen auch einige Einstellungen für die Skill-Schaltfläche vornehmen. Sie müssen die Sprite-Komponente ändern und der Skill-Schaltfläche eine Schaltflächenkomponente hinzufügen.

Passen Sie entsprechend dem Bild an

1. Der Typ muss den Rendering-Modus des Sprites ändern, um zu füllen
2. Fülltyp ändert die Füllmethode in fächerförmige Füllung
3. Fill Center ändert den Mittelpunkt des Sektors. 0,0 ist die untere linke Ecke und 1,1 ist die obere rechte Ecke. Wir möchten, dass der Sektor um den Mittelpunkt herum gefüllt wird, also ändern Sie ihn auf 0,5,0,5
4. Füllbereich ändert die Gesamtfüllmenge auf 1

Zum Schluss fügen Sie die Schaltflächenkomponente zur Skill-Schaltfläche hinzu

Das gebundene Ereignis ist onbtn. Damit es besser aussieht, ändern Sie den Übergang der Schaltflächenkomponente in FARBE.

Sie sind fertig. Klicken Sie auf „Ausführen“, um es anzuzeigen.

Wirklich gut

Wenn Sie auf die Skill-Schaltfläche klicken, geben Sie einfach den Code in onbtn ein.

Trage es einfach hier ein

Beispielsweise können Sie eine Spezialeffektanimation abspielen, wenn Sie eine Fertigkeitstaste drücken

Oben sind die Details, wie CocosCreator den Skill-Cooling-Effekt implementiert. Weitere Informationen zum Skill-Cooling von CocosCreator finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!