_TakeGoblet/assets/module_take_goblet/Script/Component/Water.ts

import { _decorator, BoxCollider2D, Button, CircleCollider2D, Collider2D, Color, Component, Enum, find, Node, NodeEventType, Sprite } from 'cc';
import { WaterColorHex, WaterColors } from '../TakeGobletGlobalInstance';
const { ccclass, property, executeInEditMode } = _decorator;

@ccclass('Water')
@executeInEditMode
export class Water extends Component {
    private _color: WaterColors = WaterColors.Blue;

    @property({ type: Enum(WaterColors) })
    get color() {
        return this._color;
    }
    set color(value: WaterColors) {
        this._color = value;
        this.updateColor();
    }

    @property(Sprite)
    private sprite: Sprite = null!;

    private updateColor() {
        if (this.sprite) {
            this.sprite.color = new Color(WaterColorHex[this._color]);
        }
    }

    start() {
        this.updateColor();
    }
}