Editar formato barra de energia feito no canvas
4 participantes
Página 1 de 1
Editar formato barra de energia feito no canvas
Amigos, tudo certo?
bem, fiz uma barra de energia ali no canvas...tudo certinho, bonito, etc, etc...só que eu quero editar o estilo, tipo, tirando as quinas, pois está bem padrão retangular.... é possível? eu procurei e nada.... pensei em fazer no paint mas não achei um tuto legal pois ficou tudo esticado e tal..... vou mandar um video. Desde já, eu agradeço.
bem, fiz uma barra de energia ali no canvas...tudo certinho, bonito, etc, etc...só que eu quero editar o estilo, tipo, tirando as quinas, pois está bem padrão retangular.... é possível? eu procurei e nada.... pensei em fazer no paint mas não achei um tuto legal pois ficou tudo esticado e tal..... vou mandar um video. Desde já, eu agradeço.
valerio123- Iniciante
- PONTOS : 1366
REPUTAÇÃO : 2
Respeito as regras :
Re: Editar formato barra de energia feito no canvas
É só voce ir no background do seu slider de barra de energia no canvas, ir no component Image, na opção de seleção Source Image e adicionar um sprite mais arredondado nas quinas
Pokedlg- ProgramadorMaster
- PONTOS : 2336
REPUTAÇÃO : 198
Áreas de atuação : Iniciante: ShaderLab, Blender, Java, C++, ASP.NET.
Intermediário: C#.NET, Unity, Shader Graph.
Respeito as regras :
Re: Editar formato barra de energia feito no canvas
sim @Pokedlg mas eu fiz direto no canvas a borda. A barra inteira, é dividido em 3 partes, a borda que é a primeira camada, inteira na cor cinza, de medida 750 x 40, sem material especifico, veio a segunda camada, um pouco menor de 745x35 está com material cor preta e a última é um sprite de 745x35 também. Eu pensei que fosse possível editar a formato da primeira camada, q foi feito diretamente no canvas, na hora que escolhe o tamanho e tal.... mas vou ver se consigo fazer no paint mesmo. Obrigado
valerio123- Iniciante
- PONTOS : 1366
REPUTAÇÃO : 2
Respeito as regras :
Re: Editar formato barra de energia feito no canvas
O ideal é fazer a imagem que você deseja, deixar bem bonita e tal, e na Unity, alterar apenas o fill da imagem, no próprio componente de Imagem da UI.
Re: Editar formato barra de energia feito no canvas
olá @MarcosSchultz
então, resolvi fazer uma imagem com fundo e tal...ficou certinho MAS eu não consigo jogar o material da cor dourado nela, parece que não pega, fica toda branca ou preta....auhauauhauha eu salvei a imagem em png.... não sei o que fazer....
então, resolvi fazer uma imagem com fundo e tal...ficou certinho MAS eu não consigo jogar o material da cor dourado nela, parece que não pega, fica toda branca ou preta....auhauauhauha eu salvei a imagem em png.... não sei o que fazer....
valerio123- Iniciante
- PONTOS : 1366
REPUTAÇÃO : 2
Respeito as regras :
Re: Editar formato barra de energia feito no canvas
Pra deixar as bordas redondas você precisa usar um componente Mask na UI.
Eu montei um exemplo usando isso, você pode baixá-lo aqui:
[LINK REMOVIDO, link atualizado nas próximas mensagens ]
Pra importar clique com o botão direito na pasta Assets e vá em Import Package > Custom Package.
Eu montei um exemplo usando isso, você pode baixá-lo aqui:
[LINK REMOVIDO, link atualizado nas próximas mensagens ]
Pra importar clique com o botão direito na pasta Assets e vá em Import Package > Custom Package.
Última edição por Fagner em Sáb Mar 20, 2021 7:33 am, editado 1 vez(es)
Fagner- Moderador
- PONTOS : 4442
REPUTAÇÃO : 667
Áreas de atuação : Modelagem 3D, Programação.
Respeito as regras :
Re: Editar formato barra de energia feito no canvas
Valeu @Fagner vou ver isso, vamos ver o que sai....auhauhauhauha obrigado
valerio123- Iniciante
- PONTOS : 1366
REPUTAÇÃO : 2
Respeito as regras :
Re: Editar formato barra de energia feito no canvas
Lembrando que pra uma imagem não ficar esticada, você precisa ir no sprite editor e definir o valor das bordas que a Unity vai respeitar quando esticar, aqui na Imagem você pode ver essa grade verde, o que fica no centro estica e as bordas não. No caso queremos manter as curvas da imagem intactas.
Olhe no exemplo, lá tá tudo configurado certinho, âncoras, bordas...
Olhe no exemplo, lá tá tudo configurado certinho, âncoras, bordas...
Fagner- Moderador
- PONTOS : 4442
REPUTAÇÃO : 667
Áreas de atuação : Modelagem 3D, Programação.
Respeito as regras :
Re: Editar formato barra de energia feito no canvas
@Fagner opa, aí sim..... farei isso, valeu.....
valerio123- Iniciante
- PONTOS : 1366
REPUTAÇÃO : 2
Respeito as regras :
Re: Editar formato barra de energia feito no canvas
@Fagner jóia? então, a barra branca...tranquilo mas como faço para o materia com alguma textura/cor grudar nesta maldita barra? fiz outras e nada.... no que vc mandou, tem os gradientes mas não consegui colocar a borda arredondada.... olha, já fiz alguns desenhos mas nenhum material gruda, fica tudo branco ou preto...ehehehe isso que já vasculhei na internet...sei lá o que eu faço
valerio123- Iniciante
- PONTOS : 1366
REPUTAÇÃO : 2
Respeito as regras :
Re: Editar formato barra de energia feito no canvas
Cara, tem que dar uma brincada com as mascaras até conseguir o efeito que você quer, nesse novo exemplo que estou enviando, usei a mascara na borda, e filho dessa borda tem outra imagem com a "textura".
O resultado é esse aqui:
Também montei um exemplo estilo MK11, que é o que acontece se você fizer usando a dica do MarcosSchultz.
Esse estilo tem problemas, ele não se adapta bem a mudanças de proporção de tela, a menos que você deixe a barra ancorada em uma quina e o tamanho dela se altere como um todo. Também, não tem como usar aquilo que falei na reposta anterior pois a Unity não sabe recriar a textura, ela só estica ficando distorcido...
Já a outra barra se ajusta a proporção da tela, respeitando sempre 50px do centro e 100px das bordas, a textura que fica sobre a barra é seamless e tá com o repeat ligado, então não importa o tamanho da barra, tudo se ajusta e fica certinho pois é feito com os componentes da UI;
Se não for isso, aí complica, tô sem ideias.
Segue o novo link
https://drive.google.com/file/d/144XBuqHSsgcmpczMiBSnmslfG5GeZoDA/view?usp=sharing
O resultado é esse aqui:
Também montei um exemplo estilo MK11, que é o que acontece se você fizer usando a dica do MarcosSchultz.
Esse estilo tem problemas, ele não se adapta bem a mudanças de proporção de tela, a menos que você deixe a barra ancorada em uma quina e o tamanho dela se altere como um todo. Também, não tem como usar aquilo que falei na reposta anterior pois a Unity não sabe recriar a textura, ela só estica ficando distorcido...
Já a outra barra se ajusta a proporção da tela, respeitando sempre 50px do centro e 100px das bordas, a textura que fica sobre a barra é seamless e tá com o repeat ligado, então não importa o tamanho da barra, tudo se ajusta e fica certinho pois é feito com os componentes da UI;
Se não for isso, aí complica, tô sem ideias.
Segue o novo link
https://drive.google.com/file/d/144XBuqHSsgcmpczMiBSnmslfG5GeZoDA/view?usp=sharing
Fagner- Moderador
- PONTOS : 4442
REPUTAÇÃO : 667
Áreas de atuação : Modelagem 3D, Programação.
Respeito as regras :
Re: Editar formato barra de energia feito no canvas
@Fagner auhuhaauha valeu, verei o que faço aqui..... olha, vasculhei tudo que é lugar, mexi de tudo que é forma....mas uma hora sai....vamos ver. Não imaginei que esta como do mk11 desse mais zica mas vamos ver, vou tentando aqui e posto depois. Obrigado novamente.
valerio123- Iniciante
- PONTOS : 1366
REPUTAÇÃO : 2
Respeito as regras :
Tópicos semelhantes
» [Duvida]Como fazer uma barra de vida usando o canvas?obs:so a parte de diminuir a barra
» [DUV] Barra de Energia
» BARRA DE ENERGIA NÃO RESETA QUANDO O PLAYER RENASCE.
» Erro ao exportar modelo 3D no formato FBX
» Dúvida Sistema de Energia para jogo android
» [DUV] Barra de Energia
» BARRA DE ENERGIA NÃO RESETA QUANDO O PLAYER RENASCE.
» Erro ao exportar modelo 3D no formato FBX
» Dúvida Sistema de Energia para jogo android
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos