更新棋子状态效果

src/views/Candy.ts

@@ -1,34 +1,103 @@
+import { Stage } from "./Stage"
+
 const { regClass } = Laya
 
 @regClass()
 export class Candy extends Laya.Script {
   declare owner: Laya.Box
 
+  private _stage: Stage
+
+  private offset: Laya.Box
+  private bg_sprite: Laya.Sprite
+  private bg_filter: Laya.GlowFilter
   private show_sprite: Laya.Sprite
+  private mask_sprite: Laya.Sprite
   private label_show: Laya.Label
   private label_left: Laya.Label
 
   private show: number
   private left: number
+  private available: boolean = true
 
-  public onInit(handler: any, func: any): void {
-    this.owner.on(Laya.Event.CLICK, handler, func)
-    this.show_sprite = this.owner.getChildByName("offset").getChildByName("Image") as Laya.Image
+  public onInit(handler: any): void {
+    this._stage = handler
+    this.owner.on(Laya.Event.CLICK, this, ()=>{
+      if (this.available === false)
+        return
+      this._stage.onApplyCandy(this.show, false)
+    })
+
+    this.owner.on(Laya.Event.MOUSE_DOWN, this, ()=>{
+      if (this.available === false)
+        return
+      Laya.Tween.to(this.bg_sprite, { alpha: 0 }, 200)
+      Laya.Tween.to(this.mask_sprite, { alpha: 0.1 }, 200)
+      Laya.Tween.to(this.offset, { scaleX: 0.92, scaleY: 0.92 }, 200)
+    })  
+    this.owner.on(Laya.Event.MOUSE_UP, this, ()=>{
+      if (this.available === false)
+        return
+      Laya.Tween.to(this.bg_sprite, { alpha: 0.12 }, 200)
+      Laya.Tween.to(this.mask_sprite, { alpha: 0 }, 200)
+      Laya.Tween.to(this.offset, { scaleX: 1, scaleY: 1 }, 200)
+    }) 
+    this.owner.on(Laya.Event.MOUSE_OVER, this, () => {
+      if (this.available === false)
+        return
+      Laya.Render.canvas.style.cursor = "pointer"
+      Laya.Tween.to(this.bg_sprite, { alpha: 0.16 }, 200)
+      Laya.Tween.to(this.bg_filter, { offX: 4, blur: 8 }, 200)
+      Laya.Tween.to(this.mask_sprite, { alpha: 0.05 }, 200)
+    })
+    this.owner.on(Laya.Event.MOUSE_OUT, this, () => {
+      if (this.available === false)
+        return
+      Laya.Render.canvas.style.cursor = ""
+      Laya.Tween.to(this.bg_sprite, { alpha: 0.12 }, 200)
+      Laya.Tween.to(this.bg_filter, { offX: 2, blur: 4 }, 200)
+      Laya.Tween.to(this.mask_sprite, { alpha: 0 }, 200)
+    })
+    this.offset = this.owner.getChildByName("offset") as Laya.Box
+    this.bg_sprite = this.owner.getChildByName("offset").getChildByName("shadow") as Laya.Sprite
+    this.bg_filter = this.bg_sprite.filters[0] as Laya.GlowFilter
+    this.show_sprite = this.owner.getChildByName("offset").getChildByName("Sprite") as Laya.Sprite
+    this.mask_sprite = this.owner.getChildByName("offset").getChildByName("mask") as Laya.Sprite
     this.label_show = this.owner.getChildByName("offset").getChildByName("label") as Laya.Label
     this.label_left = this.owner.getChildByName("offset").getChildByName("label_left") as Laya.Label
   }
 
+  public setAvailableStatus(available: boolean) {
+    this.available = available
+    if (available) {
+      Laya.Tween.to(this.bg_sprite, { alpha: 0.12 }, 200)
+      Laya.Tween.to(this.label_show, { alpha: 1 }, 200)
+      Laya.Tween.to(this.label_left, { alpha: 1 }, 200)
+    } else {
+      Laya.Tween.to(this.bg_sprite, { alpha: 0 }, 200)
+      Laya.Tween.to(this.label_show, { alpha: 0.4 }, 200)
+      Laya.Tween.to(this.label_left, { alpha: 0.4 }, 200)
+    }
+  }
+
   public setNoteStatus(note_open: boolean) {
     if (note_open) {
-      this.show_sprite.visible = false
-      this.label_show.color = "#7b818c"
+      this.label_show.color = "#2d3138"
     } else {
-      this.show_sprite.visible = true
       this.label_show.color = "#2559c0"
     }
   }
 
   public setCandy(show: number, left: number): void {
+    this.offset.scaleX = 1
+    this.offset.scaleY = 1
+    this.bg_sprite.alpha = 0.12
+    this.bg_filter.offY = 2
+    this.bg_filter.blur = 4
+    this.mask_sprite.alpha = 0
+    this.label_show.alpha = 1
+    this.label_left.alpha = 1
+
     this.show = show
     this.left = left
     this.updateCandy()

src/views/Stage.ts

@@ -129,7 +129,7 @@ export class Stage extends Laya.Script {
       for (let j = 0; j < hbox.numChildren; j++) {
         const candy = hbox.getChildAt(j).getComponent(Candy)
         this.candys.push(candy)
-        candy.onInit(this, this.onClickCandy)
+        candy.onInit(this)
       }
     }
 
@@ -340,6 +340,9 @@ export class Stage extends Laya.Script {
     this.selectedBlock.setSelected(true)
     this.onSetBlock(this.selectedBlock)
     this.data.set_select_index(this.selectedBlock.getData().get_index())
+    for (let i = 0; i < this.candys.length; i++) {
+      this.candys[i].setAvailableStatus(this.selectedBlock.getData().get_checked() === false)
+    }
   }
 
   onClickBlock(evt: Laya.Event): void {
@@ -534,14 +537,6 @@ export class Stage extends Laya.Script {
     }
   }
 
-  public onClickCandy(evt: Laya.Event): void {
-    const candy = evt.target.getComponent(Candy)
-    this.onApplyCandy(candy.get_show(), false)
-    const sp = evt.target.getChildByName("offset") as Laya.Sprite
-    Laya.Tween.to(sp, { scaleX: 0.9, scaleY: 0.9 }, 100, Laya.Ease.linearIn)
-    Laya.Tween.to(sp, { scaleX: 1, scaleY: 1 }, 100, Laya.Ease.linearInOut, null, 100)
-  }
-
   onKeyUp(evt: Laya.Event): void {
     const n = Number(evt.key)
     if (n && n > 0) {