摘要

KUOKUO的物理小游戏(二)_视频教程

CocosCreator 物理小游戏实战《KUOKUO的物理小游戏(一)》的视频教程也开更啦!来哔哩哔哩关注 KUOKUO 一起学习吧!视频连接:https://www.bilibili.com/video/BV1ck4y167mR

使用版本

CocosCreator 版本 2.3.4

资源划分

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

KUOKUO的物理小游戏(二)_小游戏_02

静态单例管理

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

  1. import GameManager from "./GameManager"

  2. import UIManager from "./UIManager"

  3.  

  4. export class StaticInstance {

  5.  

  6. static gameManager: GameManager | undefined = undefined

  7. static uiMannager: UIManager | undefined = undefined

  8.  

  9. static setGameManager(context: GameManager) {

  10. StaticInstance.gameManager = context

  11. }

  12.  

  13. static setUIManager(context: UIManager) {

  14. StaticInstance.uiMannager = context

  15. }

  16.  

  17. }

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

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

  2.  

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

  4.  

  5. @ccclass

  6. export default class GameManager extends cc.Component {

  7.  

  8. onLoad() {

  9. StaticInstance.setGameManager(this)

  10. }

  11.  

  12. }

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

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

  2.  

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

  4.  

  5. @ccclass

  6. export default class UIManager extends cc.Component {

  7.  

  8. onLoad() {

  9. StaticInstance.setUIManager(this)

  10. }

  11.  

  12. start () {

  13. console.log(StaticInstance.gameManager)

  14. }

  15.  

  16. }

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

继承UIBase

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

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

  2.  

  3. @ccclass

  4. export default class UIBase extends cc.Component {

  5.  

  6. @property({

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

  8. })

  9. isShowInit: boolean = false

  10.  

  11. onLoad() {

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

  13. }

  14.  

  15. show() {

  16. this.node.active = true

  17. }

  18.  

  19. hide() {

  20. this.node.active = false

  21. }

  22.  

  23. }

StartMenu制作

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

KUOKUO的物理小游戏(二)_小游戏_03

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

  1. import UIBase from "./UIBase"

  2. import UIManager from "../UIManager"

  3.  

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

  5.  

  6. @ccclass

  7. export default class StartMenu extends UIBase {

  8.  

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

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

  11.  

  12. onLoad() {

  13. super.onLoad()

  14. }

  15.  

  16. show() {

  17. super.show()

  18. }

  19.  

  20. init(uiManager: UIManager) {

  21.  

  22. }

  23.  

  24. }

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

KUOKUO的物理小游戏(二)_小游戏_04

结语

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

2020!我们一起进步!