摘要

CocosCreator 物理小游戏实战的视频教程也开更啦！来哔哩哔哩关注 KUOKUO 一起学习吧！

正文

使用版本

CocosCreator 版本 2.3.4

资源划分

素材导入后进行资源分类，我这里将其分为 game 文件夹与 ui 文件夹，对应游戏场景使用资源和显示 UI 资源。

静态单例管理

UIManager 与 GameManger 分别绑定至管理节点，两者通讯靠 StaticInstance 脚本。

1. import GameManager from "./GameManager"

2. import UIManager from "./UIManager"

4. export class StaticInstance {

6. static gameManager: GameManager | undefined = undefined

7. static uiMannager: UIManager | undefined = undefined

9. static setGameManager(context: GameManager) {

10. StaticInstance.gameManager = context

11. }

13. static setUIManager(context: UIManager) {

14. StaticInstance.uiMannager = context

15. }

17. }

两个 Manager 脚本的 onLoad 中传入实例，在后面就可以相互调用了。

1. import { StaticInstance } from "./StaticInstance"

3. const {ccclass, property} = cc._decorator

5. @ccclass

6. export default class GameManager extends cc.Component {

8. onLoad() {

9. StaticInstance.setGameManager(this)

10. }

12. }

在 start 及其以后即可访问实例。

1. import { StaticInstance } from "./StaticInstance"

3. const {ccclass, property} = cc._decorator

5. @ccclass

6. export default class UIManager extends cc.Component {

8. onLoad() {

9. StaticInstance.setUIManager(this)

10. }

12. start () {

13. console.log(StaticInstance.gameManager)

14. }

16. }

这样就可以实现 UIManager 与 GameManager 的相互调用。

继承UIBase

我们有 6 个 UI 要进行管理，每个 UI 都应该有显示与隐藏的方法，故抽出其共有属性与方法，实现一个 UIBase，让 6 个 UI 脚本去继承 UIBase 即可。

1. const {ccclass, property} = cc._decorator

3. @ccclass

4. export default class UIBase extends cc.Component {

6. @property({

7. displayName: '初始显隐状态'

8. })

9. isShowInit: boolean = false

11. onLoad() {

12. this.isShowInit ? this.show() : this.hide()

13. }

15. show() {

16. this.node.active = true

17. }

19. hide() {

20. this.node.active = false

21. }

23. }

StartMenu制作

拖入对应的 ui 图片完成布局，然后做成预制体。

声明两个按钮属性，写下几个方法，注意是继承 UIBase 的。

1. import UIBase from "./UIBase"

2. import UIManager from "../UIManager"

4. const {ccclass, property} = cc._decorator

6. @ccclass

7. export default class StartMenu extends UIBase {

9. @property(cc.Node) startButton: cc.Node = undefined

10. @property(cc.Node) levelSelectButton: cc.Node = undefined

12. onLoad() {

13. super.onLoad()

14. }

16. show() {

17. super.show()

18. }

20. init(uiManager: UIManager) {

22. }

24. }

如下 UML 图，在 StartMenu 中就拥有了这些属性方法。

结语

视频已经开始更了哦，视频链接为：https://www.bilibili.com/video/BV1ck4y167mR

2020！我们一起进步！O(∩_∩)O~~

微信公众号

本文分享自微信公众号 - 一枚小工（caizj_cn）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。