Quadrado da interface do usuário da unidade que preenche a largura OU a altura

11

Estou tentando criar um quadro com estes requisitos:

  • Será quadrado.
  • Caberá na largura ou altura disponível.
  • DEVE estar centrado na tela.
  • PODE ser envolvido em quantas telas intermediárias adicionais forem necessárias.

Estou brincando com âncoras, mas não encontro nenhuma combinação para fazer isso. A única solução que posso pensar é escrever algum tipo de "OnResize" do contêiner e definir o tamanho do quadro programaticamente.

Esse é o layout original. (1) é o BoardCanvas. (2) é o Conselho.

Layout original

Quero que, se a tela ficar mais alta, o quadrado cresça, mas ainda seja quadrado:

insira a descrição da imagem aqui

Ou reduz:

insira a descrição da imagem aqui

Mas, embora esses exemplos anteriores estejam alinhados nas bordas superior e inferior, também quero que, se o espaço vertical se tornar mais alto que a largura disponível, o quadrado limite seu tamanho, dependendo das bordas esquerda e direita:

insira a descrição da imagem aqui

Q1: existe uma maneira de fazer isso com as âncoras / pivôs? Não há problema em criar telas intermediárias entre o BoardCanvas e o próprio Board, se isso funcionar.

P2: Se sim, onde devo posicionar as âncoras? Preciso de objetos intermediários?

T3: caso contrário, o script é a solução? Existe algum OnResize na tela para manipular? Não consigo ver nenhum evento de redimensionamento na lista, mas talvez não saiba onde procurá-lo. Sinto que testá-lo em todos os quadros parece um pouco exagerado, o evento orientado parece melhor.

Obrigado!

Xavi Montero
fonte

Respostas:

13

Finalmente, encontrei uma maneira de fazer isso (testado na v5.0.0), de uma maneira que:

  • Não precisa de código ou condicionais para verificar a orientação.
  • Não corta balanças e nem precisa de uma resolução de referência.

Nos tutoriais em vídeo da interface do usuário, há uma grande parte ausente, embora bem documentada na documentação de texto: O sistema "layouts automáticos".

Os layouts automáticos são mecanismos feitos de "layouts" e "controladores de layout". Controladores de layout são componentes que podem ser anexados ao objeto de jogo da interface do usuário. Os controladores podem redimensionar Rect Transforms de forma inteligente.

Certos controladores podem redimensionar o objeto em que o componente é aplicado, enquanto outros controladores podem redimensionar os filhos desse objeto.

Existem alguns controladores embutidos. Um deles é o Aspect Ratio Fitter.

Primeiro, seleciono meu Boardpainel e anexo um novo Aspect Ratio Fittercomponente:

insira a descrição da imagem aqui

O Aspect Ratio Fitterobjetivo parece "manter" a proporção desejada do objeto. Para fazer isso, o objeto pode ser configurado para "envolver" um objeto filho (enquanto mantém a proporção) ou pode ser configurado para expandir e ajustar seu contêiner (mantendo a proporção).

Em seguida, seleciono a Fit In Parentopção e especifico que desejo um quadrado perfeito, definindo a proporção desejada como 1:

insira a descrição da imagem aqui

insira a descrição da imagem aqui

Isso resulta em um layout muito semelhante ao que eu queria, mas não precisava informar ao conselho suas dimensões. Mas ainda assim, sabe que deve ser quadrado, como representado:

insira a descrição da imagem aqui

Se eu diminuir verticalmente ou expandir, o quadrado segue o pai, mantendo a proporção:

insira a descrição da imagem aqui

insira a descrição da imagem aqui

Magicamente, quando a alteração é feita ao reduzir a largura, não há script a ser anexado nem propriedade a ser alterada, pois o "Ajustador de relação de aspecto" faz isso por nós automaticamente:

insira a descrição da imagem aqui

Por fim, como eu queria um pouco de margem, basta colocar uma transformação rect de container que atua como espaçador e mover a Boardpartir de BoardCanvaspara a MarginCanvas:

insira a descrição da imagem aqui

Xavi Montero
fonte
Ah, incrível, isso parece uma excelente solução. Que bom que você encontrou, obrigado por compartilhar!
22615 Chris McFarland
3

Isso é possível, mas provavelmente com apenas uma pequena linha de código ou duas para definir se a tela é paisagem ou retrato e alterar alguns valores.

Na tela, você precisa fazer com que o "Modo de escala da interface do usuário" seja "Escala com tamanho da tela" e "Modo de correspondência de tela" como "Largura ou altura da correspondência":

insira a descrição da imagem aqui

Supondo que a Resolução de referência padrão de 800x600 seja usada e assumindo que a janela de exibição da tela seja paisagem (por exemplo, Screen.widthmaior que Screen.height), o controle deslizante de Correspondência precisa ser definido até Altura como 1.

Você vai querer uma imagem na tela usando a predefinição de âncora no meio / centro. Você também deseja que a largura e a altura da imagem correspondam ao valor Y da resolução de referência do escalador de tela.

insira a descrição da imagem aqui

Você pode redimensionar a viewport da câmera e ver se a imagem mantém sua forma enquanto estica sua altura para corresponder à altura da viewport:

insira a descrição da imagem aqui


Se a tela estiver em modo retrato - e é aqui que você provavelmente precisará codificar para verificar e / ou alterar conforme necessário -, faça com que o valor da correspondência do escalador seja 0e altere a altura e a largura da imagem para corresponder à resolução de referência. Valor X. (nas figuras abaixo, a largura e a altura da imagem são ambas 800)


Se você estiver tentando ajustar uma imagem menor, poderá "dimensionar" a imagem ajustando sua largura e altura com o valor X ou Y da resolução de referência (dependendo da paisagem ou do retrato). Por exemplo, criei um quadrado azul que usa metade do valor X das resoluções de referência (já que a janela de exibição é retrato), e ela aumenta e diminui muito bem:

insira a descrição da imagem aqui

Além disso, se você quiser um tabuleiro de damas ou algo assim, a posição X e Y de cada imagem e a Altura e Largura podem ser baseadas em uma porcentagem da Resolução do Canvas Scaler para fazer o que você quiser:

insira a descrição da imagem aqui

Chris McFarland
fonte
1
Obrigado Chris pela sua resposta altamente detalhada. Por fim, encontrei uma solução que não precisa de nenhuma linha de código para verificar a orientação, não mexe nas balanças e não usa uma resolução de referência. Vou postar minha própria resposta, mas não queria passar adiante sem agradecer seu esforço e ilustração.
Xavi Montero