Menu button

assets/Scenes/Menu.scene

@@ -24,11 +24,11 @@
     "_active": true,
     "_components": [],
     "_prefab": {
-      "__id__": 20
+      "__id__": 25
     },
     "autoReleaseAssets": false,
     "_globals": {
-      "__id__": 21
+      "__id__": 26
     },
     "_id": "1a3bccb5-bbb7-4058-846c-ed41b52415b0"
   },
@@ -158,16 +158,16 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 16
+        "__id__": 21
       },
       {
-        "__id__": 17
+        "__id__": 22
       },
       {
-        "__id__": 18
+        "__id__": 23
       },
       {
-        "__id__": 19
+        "__id__": 24
       }
     ],
     "_prefab": null,
@@ -287,19 +287,29 @@
   },
   {
     "__type__": "cc.Node",
-    "_name": "Sprite",
+    "_name": "PlayBtn",
     "_objFlags": 0,
     "_parent": {
       "__id__": 10
     },
-    "_children": [],
+    "_children": [
+      {
+        "__id__": 14
+      }
+    ],
     "_active": true,
     "_components": [
       {
-        "__id__": 14
+        "__id__": 17
       },
       {
-        "__id__": 15
+        "__id__": 18
+      },
+      {
+        "__id__": 19
+      },
+      {
+        "__id__": 20
       }
     ],
     "_prefab": null,
@@ -329,7 +339,112 @@
       "y": 0,
       "z": 0
     },
-    "_id": "e8TprDYH9A/q3+npC+6JfK"
+    "_id": "bbP+5rQ2xDL49yPkqLl3zS"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Label",
+    "_objFlags": 512,
+    "_parent": {
+      "__id__": 13
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 15
+      },
+      {
+        "__id__": 16
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_layer": 33554432,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "9cvVAJ775DI6mAU0a4JjZP"
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 14
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 100,
+      "height": 40
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "e6Th9aGu5D2oZJmzRb/Er4"
+  },
+  {
+    "__type__": "cc.Label",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 14
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_string": "Play",
+    "_horizontalAlign": 1,
+    "_verticalAlign": 1,
+    "_actualFontSize": 20,
+    "_fontSize": 20,
+    "_fontFamily": "Arial",
+    "_lineHeight": 40,
+    "_overflow": 1,
+    "_enableWrapText": false,
+    "_font": null,
+    "_isSystemFontUsed": true,
+    "_spacingX": 0,
+    "_isItalic": false,
+    "_isBold": false,
+    "_isUnderline": false,
+    "_underlineHeight": 2,
+    "_cacheMode": 0,
+    "_id": "82K+PQD91NhalDNdkwTMj/"
   },
   {
     "__type__": "cc.UITransform",
@@ -342,7 +457,7 @@
     "__prefab": null,
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 102.2,
+      "width": 100,
       "height": 40
     },
     "_anchorPoint": {
@@ -350,7 +465,7 @@
       "x": 0.5,
       "y": 0.5
     },
-    "_id": "3bM1/JCd5CI4KtT2wE4DLx"
+    "_id": "97zojrixBHsZwjGvSDevzO"
   },
   {
     "__type__": "cc.Sprite",
@@ -375,7 +490,7 @@
       "__uuid__": "20835ba4-6145-4fbc-a58a-051ce700aa3e@f9941",
       "__expectedType__": "cc.SpriteFrame"
     },
-    "_type": 0,
+    "_type": 1,
     "_fillType": 0,
     "_sizeMode": 0,
     "_fillCenter": {
@@ -388,7 +503,81 @@
     "_isTrimmedMode": true,
     "_useGrayscale": false,
     "_atlas": null,
-    "_id": "61f5gttftKjJUo3WDA6ZG3"
+    "_id": "1asoNSq9BEnZJqr4HVbmHg"
+  },
+  {
+    "__type__": "cc.Button",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 13
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "clickEvents": [],
+    "_interactable": true,
+    "_transition": 2,
+    "_normalColor": {
+      "__type__": "cc.Color",
+      "r": 214,
+      "g": 214,
+      "b": 214,
+      "a": 255
+    },
+    "_hoverColor": {
+      "__type__": "cc.Color",
+      "r": 211,
+      "g": 211,
+      "b": 211,
+      "a": 255
+    },
+    "_pressedColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_disabledColor": {
+      "__type__": "cc.Color",
+      "r": 124,
+      "g": 124,
+      "b": 124,
+      "a": 255
+    },
+    "_normalSprite": {
+      "__uuid__": "20835ba4-6145-4fbc-a58a-051ce700aa3e@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_hoverSprite": {
+      "__uuid__": "20835ba4-6145-4fbc-a58a-051ce700aa3e@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_pressedSprite": {
+      "__uuid__": "544e49d6-3f05-4fa8-9a9e-091f98fc2ce8@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_disabledSprite": {
+      "__uuid__": "951249e0-9f16-456d-8b85-a6ca954da16b@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_duration": 0.1,
+    "_zoomScale": 1.2,
+    "_target": {
+      "__id__": 13
+    },
+    "_id": "abjYBOPMJCK7GsAsqNfoj3"
+  },
+  {
+    "__type__": "55e5f5nQ8dHiL5fPWjgdXbH",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 13
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_id": "8d2ldk4JNJYKGBH48A9kCb"
   },
   {
     "__type__": "cc.UITransform",
@@ -464,6 +653,9 @@
     },
     "_enabled": true,
     "__prefab": null,
+    "playBtn": {
+      "__id__": 20
+    },
     "_id": "12ZDz/3H9Ff76Ay4iDl43K"
   },
   {
@@ -478,19 +670,19 @@
   {
     "__type__": "cc.SceneGlobals",
     "ambient": {
-      "__id__": 22
+      "__id__": 27
     },
     "shadows": {
-      "__id__": 23
+      "__id__": 28
     },
     "_skybox": {
-      "__id__": 24
+      "__id__": 29
     },
     "fog": {
-      "__id__": 25
+      "__id__": 30
     },
     "octree": {
-      "__id__": 26
+      "__id__": 31
     }
   },
   {

assets/Scripts/Menu/Menu.ts

@@ -1,11 +1,14 @@
-import { _decorator, Component, Node } from "cc";
+import { _decorator, Component, Node, Button } from "cc";
+import { UIButton } from "../Services/UI/Button/UIButton";
 
 import { GameRunner } from "./GameRunner";
 const { ccclass, property } = _decorator;
 
 @ccclass("Menu")
 export class Menu extends Component {
+    @property(UIButton) private playBtn: UIButton;
+
     public async start(): Promise<void> {
-        GameRunner.Instance.playGame();
+        this.playBtn.InteractedEvent.on(() => GameRunner.Instance.playGame(), this);
     }
 }

assets/Scripts/Services/UI/Button.meta

@@ -0,0 +1,12 @@
+{
+  "ver": "1.1.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "75b52184-72e7-4686-9688-e6baa2cb1d70",
+  "files": [],
+  "subMetas": {},
+  "userData": {
+    "compressionType": {},
+    "isRemoteBundle": {}
+  }
+}

assets/Scripts/Services/UI/Button/UIButton.ts

@@ -0,0 +1,22 @@
+import { _decorator, Component, Node, NodeEventType } from "cc";
+import { ISignal } from "../../EventSystem/ISignal";
+import { Signal } from "../../EventSystem/Signal";
+const { ccclass, property } = _decorator;
+
+@ccclass("UIButton")
+export class UIButton extends Component {
+    private interactedEvent = new Signal<UIButton>();
+
+    public start(): void {
+        this.node.on(Node.EventType.TOUCH_START, this.interact, this);
+    }
+
+    public get InteractedEvent(): ISignal<UIButton> {
+        return this.interactedEvent;
+    }
+
+    private interact(): void {
+        console.log("interact");
+        this.interactedEvent.trigger(this);
+    }
+}

assets/Scripts/Services/UI/Button/UIButton.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "55e5fe67-43c7-4788-be5f-3d68e07576c7",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}