组件

src/components/Button.ts

@@ -0,0 +1,62 @@
+import { Text, Graphics, Container, TextStyle } from "pixi.js";
+
+interface IOpts{
+    text: string
+}
+
+const defaultOpts:IOpts = {
+    text: ""
+}
+
+export default function Button(opts: IOpts) {
+    let curOpts: IOpts = {} as IOpts
+    Object.keys(defaultOpts).forEach((key: keyof IOpts) => {
+        if(opts[key]!=undefined){
+            curOpts[key] = opts[key]
+        }else{
+            curOpts[key] = defaultOpts[key]
+        }
+    });
+    console.log(curOpts);
+    
+    let textStyle = new TextStyle({fontFamily : 'Arial', fontSize: 50, fill : 0x000000, align : 'center'})
+    let textStr = new Text(curOpts.text, textStyle);
+    let xPadding = 60;
+    let yPadding = 20;
+
+    let button = new Container();
+    let width = textStr.width + xPadding;
+    let height = textStr.height + yPadding;
+
+
+    textStr.x = xPadding / 2;
+    textStr.y = yPadding / 2;
+
+    const circle = new Graphics();
+    circle.name = "circle";
+    circle.beginFill(0xff0000);
+    circle.drawRect(0, 0, width, height);
+    circle.endFill();
+    circle.interactive = true;
+    circle.buttonMode = true;
+    
+    button.addChild(circle);
+    button.addChild(textStr);
+
+    button.x = 100;
+    button.y = 50;
+    button.interactive = true
+    button.on("touchstart", ()=>{
+        button.alpha = .8
+    })
+    button.on("touchend", ()=>{
+        // 点击成功
+        console.log("success");
+        
+        button.alpha = 1
+    })
+    button.on("touchendoutside", ()=>{
+        button.alpha = 1
+    })
+    return button;
+}

src/stages/welcome/page_welcome.ts

@@ -1,3 +1,4 @@
+import Button from "@/components/Button";
 import { gameManager,defineWindow } from "@/Game";
 import { Container, Text } from "pixi.js";
 
@@ -13,10 +14,11 @@ defineWindow("welcome", class{
     onLoad(){
         console.log("onLoad 1");
         this.stage.addChild(Circle.render())
-        let text = new Text("sda")
+        let text = new Text("修仙人生日常")
         text.x = gameManager.getInfo().width-text.width
         text.y = gameManager.getInfo().height-text.height
         this.stage.addChild(text)
+        this.stage.addChild(Button({text: "修仙人生日常"}))
     }
     onUnLoad(){
         console.log("onUnLoad 1");