NavBarController.ts 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  1. import { _decorator, Color, Component, Node, Sprite, find, Vec3 } from 'cc';
  2. import EventBus, { GameEvents } from '../Core/EventBus';
  3. import { GameStartMove } from '../Animations/GameStartMove';
  4. const { ccclass, property } = _decorator;
  5. @ccclass('NavBarController')
  6. export class NavBarController extends Component {
  7. @property({ type: [Node] }) panels: Node[] = []; // 依次给 Main、Shop、Upgrade、Skill
  8. @property({ type: [Node] }) buttons: Node[] = []; // 依次给 Battle、Shop、Upgrade、Skill
  9. @property({ type: [Node] }) buttonBorders: Node[] = []; // 按钮边框节点数组,需要手动配置
  10. private normalColor = new Color(255, 255, 255, 255);
  11. private lockedColor = new Color(128, 128, 128, 255); // 灰色(锁定状态)
  12. // 按钮锁定状态数组 - 对应 Battle、Shop、Upgrade、Skill 四个按钮
  13. private buttonLockStates: boolean[] = [false, true, false, false]; // 默认只锁定Shop按钮
  14. // 存储按钮原始位置
  15. private buttonOriginalPositions: Vec3[] = [];
  16. // 当前激活的按钮索引
  17. private currentActiveButtonIndex: number = -1;
  18. // GameStartMove组件引用,用于重置镜头位置
  19. private gameStartMoveComponent: GameStartMove = null;
  20. start () {
  21. // 保存按钮原始位置
  22. this.saveButtonOriginalPositions();
  23. // 默认打开 MainUI
  24. this.switchTo(0);
  25. // 初始化按钮状态,设置shop按钮为锁定状态
  26. this.updateButtonStates();
  27. // 设置事件监听
  28. this.setupEventListeners();
  29. }
  30. onDestroy() {
  31. // 移除事件监听
  32. this.removeEventListeners();
  33. }
  34. /**
  35. * 设置事件监听器
  36. */
  37. private setupEventListeners() {
  38. const eventBus = EventBus.getInstance();
  39. // 监听返回主菜单事件
  40. eventBus.on(GameEvents.RETURN_TO_MAIN_MENU, this.onReturnToMainMenu, this);
  41. }
  42. /**
  43. * 移除事件监听器
  44. */
  45. private removeEventListeners() {
  46. const eventBus = EventBus.getInstance();
  47. eventBus.off(GameEvents.RETURN_TO_MAIN_MENU, this.onReturnToMainMenu, this);
  48. }
  49. /**
  50. * 保存按钮原始位置
  51. */
  52. private saveButtonOriginalPositions() {
  53. this.buttonOriginalPositions = [];
  54. this.buttons.forEach(btn => {
  55. this.buttonOriginalPositions.push(btn.position.clone());
  56. });
  57. console.log('[NavBarController] 已保存按钮原始位置');
  58. }
  59. /**
  60. * 处理返回主菜单事件
  61. */
  62. private onReturnToMainMenu() {
  63. console.log('[NavBarController] 收到返回主菜单事件,切换到主界面');
  64. // 重置镜头位置到原始位置
  65. this.resetCameraPosition();
  66. // 切换到主界面(Battle按钮对应的Main面板,索引0)
  67. this.switchTo(0);
  68. }
  69. /**
  70. * 重置镜头位置到原始位置
  71. * 确保从游戏中返回主界面时镜头位置正常
  72. */
  73. private resetCameraPosition() {
  74. // 如果还没有获取GameStartMove组件,尝试获取
  75. if (!this.gameStartMoveComponent) {
  76. const cameraNode = find('Canvas/Main Camera');
  77. if (cameraNode) {
  78. this.gameStartMoveComponent = cameraNode.getComponent(GameStartMove);
  79. }
  80. }
  81. // 如果成功获取到组件,重置镜头位置
  82. if (this.gameStartMoveComponent) {
  83. console.log('[NavBarController] 重置镜头位置到原始位置');
  84. this.gameStartMoveComponent.resetCameraToOriginalPosition(0.3);
  85. } else {
  86. console.warn('[NavBarController] 未找到GameStartMove组件,无法重置镜头位置');
  87. }
  88. }
  89. onBattleClick () {
  90. // 检查Battle按钮是否被锁定(索引0)
  91. if (this.buttonLockStates[0]) {
  92. console.log('[NavBarController] Battle按钮被锁定,无法点击');
  93. // 发送Toast事件显示锁定提示
  94. EventBus.getInstance().emit(GameEvents.SHOW_TOAST, {
  95. message: '暂未解锁该功能!',
  96. duration: 2.0
  97. });
  98. return;
  99. }
  100. this.switchTo(0);
  101. }
  102. onUpgradeClick () {
  103. // 检查Upgrade按钮是否被锁定(索引2)
  104. if (this.buttonLockStates[2]) {
  105. console.log('[NavBarController] Upgrade按钮被锁定,无法点击');
  106. // 发送Toast事件显示锁定提示
  107. EventBus.getInstance().emit(GameEvents.SHOW_TOAST, {
  108. message: '暂未解锁该功能!',
  109. duration: 2.0
  110. });
  111. return;
  112. }
  113. this.switchTo(1);
  114. }
  115. onShopClick () {
  116. // 检查shop按钮是否被锁定(索引1)
  117. if (this.buttonLockStates[1]) {
  118. console.log('[NavBarController] Shop按钮被锁定,无法点击');
  119. // 发送Toast事件显示锁定提示
  120. EventBus.getInstance().emit(GameEvents.SHOW_TOAST, {
  121. message: '暂未解锁该功能!',
  122. duration: 2.0
  123. });
  124. return;
  125. }
  126. this.switchTo(2);
  127. }
  128. onSkillClick () {
  129. // 检查Skill按钮是否被锁定(索引3)
  130. if (this.buttonLockStates[3]) {
  131. console.log('[NavBarController] Skill按钮被锁定,无法点击');
  132. // 发送Toast事件显示锁定提示
  133. EventBus.getInstance().emit(GameEvents.SHOW_TOAST, {
  134. message: '暂未解锁该功能!',
  135. duration: 2.0
  136. });
  137. return;
  138. }
  139. this.switchTo(3);
  140. // 注意:滚动功能现在由SkillNodeGenerator组件通过装饰器直接处理
  141. }
  142. private switchTo (index: number) {
  143. // 显示对应面板
  144. this.panels.forEach((p, i) => p.active = i === index);
  145. // 按钮索引到面板索引的映射:根据实际的点击事件调用
  146. // 按钮索引: [0:Battle, 1:Shop, 2:Upgrade, 3:Skill]
  147. // 面板索引: [0:Main, 1:Shop, 2:Upgrade, 3:Skill]
  148. // 实际映射: Battle->Main(0), Shop->Upgrade(2), Upgrade->Shop(1), Skill->Skill(3)
  149. const buttonToPanelMap = [0, 2, 1, 3]; // Battle->Main(0), Shop->Upgrade(2), Upgrade->Shop(1), Skill->Skill(3)
  150. // 重置所有按钮到原始位置和状态
  151. this.buttons.forEach((btn, buttonIndex) => {
  152. const sp = btn.getComponent(Sprite);
  153. if (sp) {
  154. // 重置按钮位置到原始位置
  155. if (this.buttonOriginalPositions[buttonIndex]) {
  156. btn.position = this.buttonOriginalPositions[buttonIndex].clone();
  157. }
  158. // 设置按钮颜色(只处理锁定状态)
  159. if (this.buttonLockStates[buttonIndex]) {
  160. sp.color = this.lockedColor; // 锁定状态显示灰色
  161. } else {
  162. sp.color = this.normalColor; // 正常状态显示白色
  163. }
  164. }
  165. });
  166. // 隐藏所有边框
  167. this.buttonBorders.forEach(border => {
  168. if (border) {
  169. border.active = false;
  170. }
  171. });
  172. // 找到当前激活的按钮索引
  173. let activeButtonIndex = -1;
  174. for (let buttonIndex = 0; buttonIndex < buttonToPanelMap.length; buttonIndex++) {
  175. if (buttonToPanelMap[buttonIndex] === index) {
  176. activeButtonIndex = buttonIndex;
  177. break;
  178. }
  179. }
  180. // 如果找到激活按钮且未被锁定,则应用激活效果
  181. if (activeButtonIndex !== -1 && !this.buttonLockStates[activeButtonIndex]) {
  182. const activeBtn = this.buttons[activeButtonIndex];
  183. if (activeBtn && this.buttonOriginalPositions[activeButtonIndex]) {
  184. // 向上移动20px
  185. const newPos = this.buttonOriginalPositions[activeButtonIndex].clone();
  186. newPos.y += 20;
  187. activeBtn.position = newPos;
  188. // 显示对应的边框
  189. if (this.buttonBorders[activeButtonIndex]) {
  190. this.buttonBorders[activeButtonIndex].active = true;
  191. }
  192. this.currentActiveButtonIndex = activeButtonIndex;
  193. }
  194. } else {
  195. this.currentActiveButtonIndex = -1;
  196. }
  197. }
  198. /**
  199. * 更新按钮状态,主要用于设置锁定按钮的视觉效果
  200. */
  201. private updateButtonStates() {
  202. this.buttons.forEach((btn, buttonIndex) => {
  203. const sp = btn.getComponent(Sprite);
  204. if (sp) {
  205. if (this.buttonLockStates[buttonIndex]) {
  206. sp.color = this.lockedColor; // 设置锁定按钮为锁定颜色
  207. // 确保锁定的按钮在原始位置
  208. if (this.buttonOriginalPositions[buttonIndex]) {
  209. btn.position = this.buttonOriginalPositions[buttonIndex].clone();
  210. }
  211. // 隐藏锁定按钮的边框
  212. if (this.buttonBorders[buttonIndex]) {
  213. this.buttonBorders[buttonIndex].active = false;
  214. }
  215. } else {
  216. sp.color = this.normalColor; // 设置未锁定按钮为正常颜色
  217. }
  218. }
  219. });
  220. }
  221. /**
  222. * 解锁指定按钮
  223. * @param buttonIndex 按钮索引 (0:Battle, 1:Shop, 2:Upgrade, 3:Skill)
  224. */
  225. public unlockButton(buttonIndex: number) {
  226. if (buttonIndex >= 0 && buttonIndex < this.buttonLockStates.length) {
  227. this.buttonLockStates[buttonIndex] = false;
  228. this.updateButtonStates();
  229. const buttonNames = ['Battle', 'Shop', 'Upgrade', 'Skill'];
  230. console.log(`[NavBarController] ${buttonNames[buttonIndex]}按钮已解锁`);
  231. }
  232. }
  233. /**
  234. * 锁定指定按钮
  235. * @param buttonIndex 按钮索引 (0:Battle, 1:Shop, 2:Upgrade, 3:Skill)
  236. */
  237. public lockButton(buttonIndex: number) {
  238. if (buttonIndex >= 0 && buttonIndex < this.buttonLockStates.length) {
  239. this.buttonLockStates[buttonIndex] = true;
  240. this.updateButtonStates();
  241. const buttonNames = ['Battle', 'Shop', 'Upgrade', 'Skill'];
  242. console.log(`[NavBarController] ${buttonNames[buttonIndex]}按钮已锁定`);
  243. }
  244. }
  245. /**
  246. * 检查指定按钮是否被锁定
  247. * @param buttonIndex 按钮索引 (0:Battle, 1:Shop, 2:Upgrade, 3:Skill)
  248. */
  249. public isButtonLocked(buttonIndex: number): boolean {
  250. if (buttonIndex >= 0 && buttonIndex < this.buttonLockStates.length) {
  251. return this.buttonLockStates[buttonIndex];
  252. }
  253. return false;
  254. }
  255. /**
  256. * 批量设置按钮锁定状态
  257. * @param lockStates 锁定状态数组 [Battle, Shop, Upgrade, Skill]
  258. */
  259. public setButtonLockStates(lockStates: boolean[]) {
  260. if (lockStates.length === 4) {
  261. this.buttonLockStates = [...lockStates];
  262. this.updateButtonStates();
  263. console.log('[NavBarController] 按钮锁定状态已更新:', lockStates);
  264. }
  265. }
  266. /**
  267. * 获取当前所有按钮的锁定状态
  268. */
  269. public getButtonLockStates(): boolean[] {
  270. return [...this.buttonLockStates];
  271. }
  272. /**
  273. * 获取当前激活的按钮索引
  274. */
  275. public getCurrentActiveButtonIndex(): number {
  276. return this.currentActiveButtonIndex;
  277. }
  278. }