【027】UI引导（最小闭环版）

喵喵哭唧唧 · 发表于 2023-6-27 15:41:53

本帖最后由哭唧唧的细狗于 2023-10-30 14:05 编辑

最近有好哥哥问有没有UI引导的功能，这不是忙嘛，弄了一个最小demo版本，保证大家能用，能改，尽量不会看天书，希望能帮助到大家

在DefalutUI里加了显示入口，客官可以自己用个单例之类的维护UI调用显示



InputUtil.onKeyDown(mw.Keys.I, () => {

   (mw.UIService.getUI(GuideUI) as GuideUI).guideByStep(1);

})



InputUtil.onKeyDown(mw.Keys.P, () => {

    (mw.UIService.getUI(GuideUI) as GuideUI).guideByStep(2);

})

实际逻辑填充的地方，想把哪里的UI弄来显示，就自己添加步骤，加逻辑



// 实际逻辑写的地方

guideByStep(step: number) {

    mw.UIService.show(GuideUI);

    this.setVisibility(this.button, true)

    this.bg.visibility = mw.SlateVisibility.Collapsed;



    switch (step) {

         case 1:// 第一步

             let atkBtn = (mw.UIService.getUI(UIDefault) as UIDefault).AttackBtn;



             // 通过localToViewport这个方法能获得即使是嵌套UI的真实屏幕坐标位置

             // 如果直接atkBtn.position获得的位置很可能是这位按钮相对于它的rootCanvas的位置

             mw.localToViewport(atkBtn.tickSpaceGeometry, mw.Vector2.zero, this.outPixelPos, this.outViewPos);



             // 闯入outViewPos这个真正需要显示的屏幕位置

             this.cover(this.outViewPos, atkBtn.size,

                new mw.Vector2(500, 400), "请点击开始按钮", 0, true)

             break;

         case 2:// 第二步

            this.cover(new mw.Vector2(0, 0), new mw.Vector2(960, 1080),

                new mw.Vector2(50, 300), "请滑动该区域进行移动", 0, true)

            break;



         // 可以继续增加无数步

         default:

            mw.UIService.hide(GuideUI);

    }

}

最小demo在此，客观您请：

guideUI.rar (99.99 KB, 下载次数: 76)

叽里咕噜小胡桃 · 发表于 2023-6-27 15:42:53

喵老师，我的超人！

喵喵哭唧唧 · 发表于 2023-6-27 15:47:53

叽里咕噜小胡桃发表于 2023-6-27 15:42
喵老师，我的超人！

喵喵喵

猪头BOOM · 发表于 2023-8-7 15:36:44

请问下引导2滑动该区域进行移动，这个区域是可以跟手机适配的吗？

喵喵哭唧唧 · 发表于 2023-8-7 17:09:18

猪头BOOM 发表于 2023-8-7 15:36
请问下引导2滑动该区域进行移动，这个区域是可以跟手机适配的吗？

是的，只要UI本身做了自适应，那么引导获取的位置就是适配后的位置

猪头BOOM · 发表于 2023-8-8 01:34:36

喵喵哭唧唧发表于 2023-8-7 17:09
是的，只要UI本身做了自适应，那么引导获取的位置就是适配后的位置

4张image设置成自适应，(...想要做成要点击引导的位置才会完成引导，而不是任意位置)，
然后我这样设置了button，但是不是想要的效果，嗯...
this.button.position = new Type.Vector2(this.image3.position.x, this.image2.position.y);
this.button.size = new Vector(this.image4.position.x - this.image3.position.x, this.image3.position.y - this.image1.position.y);