diff --git a/src/components/Button.ts b/src/components/Button.ts new file mode 100644 index 0000000..23f8de2 --- /dev/null +++ b/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; +} diff --git a/src/stages/welcome/page_welcome.ts b/src/stages/welcome/page_welcome.ts index 1c79425..9d83904 100644 --- a/src/stages/welcome/page_welcome.ts +++ b/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");