Adaptação de tela do criador do Cocos fitHeight / fitWidth, tela vertical do celular, adaptação do navegador do PC, adaptação da tela cheia da resolução do PC, adaptação da barra de sangue

 

1. Use o criador3.3.2 para realizar os efeitos de adaptação do telefone celular e do navegador, respectivamente, da seguinte forma Pacote web-mobile (existe essa necessidade/suor!)

exibição do navegador do pc

Exibição do terminal móvel

 

 

1. Primeiro defina a resolução e a adaptação padrão no projeto, aqui é 750*1334, o padrão é adaptar à largura

Defina a adaptação do widget do Canvas, o código é suspenso no Canvas, pcBg é a área azul mostrada na figura no navegador do pc, o código é o seguinte

  @property(Node)
    pcBg: Node = null;

    onLoad() {

        let design = view.getDesignResolutionSize(); // 设计分辨率，。就是设置的 750 1334 根据不同端做适配
        if(!sys.isMobile)
        {// pc端
            view.setDesignResolutionSize(design.width, design.height, ResolutionPolicy.FIXED_HEIGHT);
        }
        else
        {// 手机端
            view.setDesignResolutionSize(design.width, design.height, ResolutionPolicy.FIXED_WIDTH);
        }

        this.updateSizeFit();
        let _this = this;
        // 监听浏览器窗口大小变化
        view.setResizeCallback(function () {
            _this.updateSizeFit();
            // rect.left, rect.top, rect.width, rect.height (像素值)
        });
    }
     // 根据浏览器窗口变化适配
     updateSizeFit() {
        var rect = view.getVisibleSize();// 获取实际显示的尺寸
        var design = view.getDesignResolutionSize();// 获取设计分辨率
        let wi = this.node.getComponent(Widget);
        // 设置手机端和pc端canvas的显示位置，在pc是横屏的，但是canvas应该是中间的手机位置。所以要左右减 
        //  实际屏幕宽度的一半减去手机屏宽的一半，就是pcBg距离Canvas左侧的距离
        if (!sys.isMobile) { // pc端加背景图，实现中间显示手机界面
            wi.right = rect.width/2-(rect.height*design.width/design.height)/2;
            wi.left = rect.width/2-(rect.height*design.width/design.height)/2;
            wi.top = 0;
            wi.bottom = 0;
            wi.updateAlignment();
        }
        else
        { // 手机端 屏幕宽度高，就是canvas的宽高。，距离是0就可以
            wi.right = 0;
            wi.left = 0;
            wi.top = 0;
            wi.bottom = 0;
            wi.updateAlignment();
        }
        // pc大背景全屏显示，大背景图平铺到pc上，相对于canvas 左右都是负的宽的的一半
        var widget = this.pcBg.getComponent(Widget)
        widget.right = -rect.width/2;
        widget.left = -rect.width/2;
        widget.top = 0;
        widget.bottom = 0;
        widget.target = this.node;
        widget.updateAlignment();
    }

 2. Por querer evitar o quase grande e o muito pequeno, a câmera que irradia o personagem foi alterada para uma câmera ortogonal

3. Ainda de acordo com a targetTexture da câmera, projete o 3D no display 2D e atribua a RenderTexture à câmera e ui para exibir o sprite projetado. O código é o seguinte

 

  começar() {

        // Projete a projeção da iluminação 3d na interface do usuário 2d

        const renderTex = this.render;

        this.cam.targetTexture = renderTex;

        this.show3d.spriteFrame.texture = renderTex;

    }

4. Perceba que a barra de sangue segue o protagonista. Uma vez que segue, a interface do usuário da barra de sangue não pode ser adicionada como um widget. player3dHps é a posição do ponto de suspensão da barra de sangue de todos os jogadores em 3D e uiHps é o sprite de todo o sangue barras. Por meio de worldToScreen, as coordenadas do mundo são transferidas para a posição na interface do usuário e, em seguida, atribuem-na à barra de sangue interface do usuário

 this.player3dHps.forEach((item, i) => {

            // barra de sangue

            deixe ve1 = new Vec3(0, 0, 0)

            this.cam.worldToScreen(item.worldPosition, ve1);

            this.uiHps[i].worldPosition = ve1

        })

Mas o resultado final não é problema exibido no celular, mas é o mesmo efeito no PC

Isso ocorre porque nossa tela do lado do PC é a posição intermediária do celular. Depois que as coordenadas do mundo são giradas para a tela, elas são relativas à área azul, não à área azul escura da tela do celular, então + (o deslocamento esquerdo do widget da tela - a tela do meio com metade da largura da região) a região

 let canvasWidget = find("Canvas").getComponent(Widget)

    this.uiHps[i].worldPosition = ve1.add(new Vec3(canvasWidget.left,0,0));

obterá a posição correta 

Ainda existem alguns pequenos problemas realmente exibidos no celular, porque o celular é adaptado de acordo com a largura e a altura real da tela é diferente da altura do design, porque se a tela real do celular for maior que a altura do design, a posição da barra de sangue será maior do que Há muita sobrecarga, primeiro olhe para o código

 let canvasWidget = find("Canvas").getComponent(Widget)

            let offsetHeight = !sys.isMobile?0: ((view.getVisibleSize().width*design.height/design.width)-view.getVisibleSize().height);// Calcula a diferença entre a altura e a resolução real ,

            this.uiHps[i].worldPosition = ve1.add(new Vec3(canvasWidget.left,-offsetHeight/2,0));

Pode-se entender que a barra de sangue y é 100 na altura de 1334, e pode ser 120 na altura de 1600, resultando em exceder o valor normal da posição do topo da cabeça. Os alunos que tiverem tempo podem depurar este offsetHeight, e ficará claro no navegador móvel.

GitHub no endereço do projeto  - SuiFengErQu/cocos-creator3d-mini_demo: cocos Creator3.3.2 Hand Practice Small Function      AdaptationScreen Scene

2. Adaptação em tela cheia do navegador do PC, você pode entender olhando o código, a resolução do design é 1920*1280, usando o cocos Creator2.4.4

Teste o alinhamento da imagem com base no Canvas 

 

  onLoad() {
        this.updateSizeFit();
        let _this = this;
        // 监听浏览器窗口大小变化
        cc.view.setResizeCallback(function () {
            _this.updateSizeFit();
            // rect.left, rect.top, rect.width, rect.height (像素值)
        });
    }  
  // 根据浏览器窗口变化适配
    updateSizeFit() {
        var rect = cc.game.canvas.getBoundingClientRect();
        let rateWidth = Math.round(rect.width / 1920 * 100) / 100;
        let rateHeight = Math.round(rect.height / 1080 * 100) / 100;
        // console.log("屏幕发生变化", rateWidth, rateHeight) 手机端和pc参数不同
        if (Math.abs(rateWidth - rateHeight) > (GameConfig.getPlatform(true)===GameConfig.PLATFORM.PC?0.2:0.5) || rateWidth == rateHeight) {// 宽高差距太大或者宽高比=，不做适配
            cc.Canvas.instance.fitHeight = false;
            cc.Canvas.instance.fitWidth = false;
            UIModalMgr.inst.updateMaskView();// 更新popUI mask大小
            EventCenter.emit(EventCenterNameEnum.ScreenChange);
            return;
        }
        if (rateWidth < rateHeight) {
            cc.Canvas.instance.fitHeight = false;
            cc.Canvas.instance.fitWidth = true;
        }
        else if (rateHeight < rateWidth) {
            cc.Canvas.instance.fitHeight = true;
            cc.Canvas.instance.fitWidth = false;
        }
        UIModalMgr.inst.updateMaskView();// 更新popUI mask大小
        EventCenter.emit(EventCenterNameEnum.ScreenChange);
    }

Aqui está realmente calculando a proporção da largura real para a largura do design, a proporção da altura real para a altura do design

Quando a proporção é a mesma, ou o valor absoluto da subtração da proporção é maior que 0,2, então não é adequado, caso contrário a interface ficará desordenada. Aqui, se for o terminal móvel, é > 0,5, porque a proporção a diferença do terminal móvel é relativamente grande, então o valor deve ser ajustado o máximo possível. Adapte-se a mais telefones celulares.

Se a relação de largura for pequena, adapte-se à largura, caso contrário, adapte-se à altura

O resto é adicionar widgets na interface para ajustar, você pode ver o efeito de exibição em diferentes situações

 

Se exceder uma certa proporção, não caberá mais e a parte direta ficará oculta

Exibição do terminal móvel