Como retrato uma rampa de uma perspectiva 2D de cima para baixo?

7

Estou escrevendo um aplicativo para Android e não consigo descobrir como exibir uma rampa (pode ser uma saliência, como uma lombada, mas de preferência uma rampa) de uma vista de cima para baixo em 2D

avestruz fazenda
fonte
5
Isso é um aparte, e não uma resposta, mas em um plano arquitetônico, uma seta indicaria a direção para cima em uma rampa ou escada.
e100
@ e100 Não vejo como isso não vale uma resposta completa. Você deve torná-lo um. A menos mais detalhe é especificado na pergunta, é perfeitamente lógico ..
naught101

Respostas:

13

Eu consideraria apenas inclinar a rampa 1 ou 2 graus e dar um pouco de sombra. Pode não ser real, mas dá a ilusão de profundidade.

A chave é que sua iluminação global permanece a mesma. Isso significa que você deixa as sombras projetarem da mesma maneira e que sua fonte de luz é direcionada da mesma maneira. Caso contrário, parece fora de lugar

Aqui está um exemplo simples. O resto é com você :)

Edit: Eu adicionei uma versão trapezoidal para mostrar como isso seria. Ótima dica de Abhranil Das, eu negligenciei a perspectiva nessa parte. É apenas um ligeiro aprimoramento, mas funciona muito bem!

Ramp up e uma rampa cheia

insira a descrição da imagem aqui

Roberto De Vivo
fonte
Observe também a costura sutil na rampa mais baixa (como você não mencionou, não sei se foi realmente intencional, mas faz com que a rampa pareça um pouco mais real).
Jari Keinänen
Foi um efeito colateral não intencional da sombra projetada, mas você está certo que acrescenta ainda mais à ilusão. Dá um pouco mais de textura. Em uma nota lateral: o efeito gradiente também pode ser usado um pouco mais fortemente em combinação com uma sombra maior ou menor ao efeito de que você pode abaixar ou aumentar a rampa.
Roberto De Vivo
O trapézio funciona porque cria uma perspectiva correta, pois será no real. Idealmente, se houver algum material em movimento passando por cima dele, você deve aumentar o tamanho do objeto em movimento à medida que ele também aumenta. Você pode usar o mesmo efeito se for apenas um salto.
Abr
para o "solavanco" da questão, torne o gradiente mais íngreme (mudança mais rápida) em direção ao exterior e mais plano na parte superior, parecerá muito mais arredondado. Você também pode definir o "centro" em direção à luz, se a iluminação no restante do aplicativo vier de uma única direção.
naught101
5

Não sou designer gráfico, mas você já pensou em usar gradientes? Por exemplo:

Rampa1 - gradiente da esquerda para a direita Esta poderia ser sua rampa padrão.

Ramp2 - gradiente simétrico Esta poderia ser sua lombada.

Obviamente, eles teriam que parecer um pouco mais agradáveis ​​que isso. : P

Buns Glazing
fonte
Sim, eu usei gradientes para os poços serem saltados, e ia usar gradiente para isso. Aprecio as imagens, você tem alguma idéia de como torná-la um pouco melhor? Obrigado!
farm
@farmostrich> Dar um pouco de profundidade, ou uma ilusão disso, seria o caminho a percorrer. Veja a resposta de Roberto.
Buns Glazing
4

A imagem de Roberto é boa o suficiente, mas o que eu acho que aumentaria o efeito é se você usar trapézios em vez de retângulos, com a extremidade mais larga significando a extremidade que está “acima”. Eu acho que isso completaria o efeito satisfatoriamente.

Abhranil Das
fonte
Grande dica, eu editei o meu post para mostrar o efeito
Roberto De Vivo