Ir para conteúdo

Simulador de Visuais


T.Degurechaff

Posts Recomendados

Olá pessoal, 

Venho lhes trazer uma plataforma para simular visuais que tem como base o bRO.

Na plataforma você terá acesso a todos os itens, classes, cabelos, roupas e cores disponíveis no jogo.

O sistema é totalmente gratuito, não requer cadastro e não utiliza nenhum dado seu. Isso foi possível graças aos planos gratuitos do Heroku e Google Cloud.

O melhor de tudo é que o código fonte é totalmente aberto e se você desejar conferir ou contribuir basta acessar o link do projeto no GitHub disponível no rodapé do site. A plataforma segue em desenvolvimento então bugs podem acontecer.

Segue algumas screenshots:

Plataforma:

spacer.png

 

Visuais:

vDf03a5.pngLVOAoC5.pngxtF0FTu.pngmqrQM4p.png1SPffvL.png

 

Link para acesso:

http://visualrag.herokuapp.com/

 

Se houver algum problema precisar entrar em contato comigo segue meu discord:

alisonserafim

 

Editado por T.Degurechaff
  • Like 14
  • Thanks 6
Link para o comentário
Share on other sites

Parabéns pela ferramenta, ficou muito incrível!

Se me permite, gostaria de fazer algumas sugestões.

  • Opção para exportar visual como gif, ou png em algum frame específico;
  • Poder navegar entre os visuais com as setas do teclado;
  • Adicionar opções de imagem de fundo no visualizador, além do fundo gradiente existente, para que possamos fingir que o personagem está no jogo
  • Adicionar opções de cores para que possamos filtrar visuais de determinada cor, facilitando o planejamento de visuais;
  • Corrigir tooltips que somem após pesquisar um item;
  • Alguma coisa acontece com a pesquisa que dá uma travada ao digitar;
  • Botão "Reset Character" ser substituído por 4 botões individuais para remover cada um dos 4 visuais, já que não é muito intuitivo selecionar o visual invisível;
  • Mover visuais desabilitados para o fim da listagem de itens;
  • Poder virar a cabeça do personagem

Ademais, o site está muito lindo visualmente e em funcionalidades. Vou usá-la bastante :D 

  • Like 1

renegados-boladoes.png.fec1678dcb6cfca12d2167436acfae56.png

Magnatrom - Renegado autocaster 175 | Relâmpago Dourado - Renegado híbrido 175 Instinto de Guerreiro - Renegado arco Crit 166 | Scarlet Yuuki - Sicária DD Crit 127 | Teeest3 - Sentinela aspd Crit 116 | Espírito da Montanha - Espiritualista 98

Link para o comentário
Share on other sites

14 horas atrás, Magnatrom disse:
  • Poder navegar entre os visuais com as setas do teclado;  um pouco difícil ja que a lista é dinamica
  • Adicionar opções de imagem de fundo no visualizador, além do fundo gradiente existente, para que possamos fingir que o personagem está no jogo  Sendo planejado se tiver sugestões de imagem manda por aqui
  • Adicionar opções de cores para que possamos filtrar visuais de determinada cor, facilitando o planejamento de visuais; um pouco dificil, mas adicionarei como um TO DO pra um futuro distante
  • Corrigir tooltips que somem após pesquisar um item;  corrigido
  • Alguma coisa acontece com a pesquisa que dá uma travada ao digitar;  corrigido
  • Botão "Reset Character" ser substituído por 4 botões individuais para remover cada um dos 4 visuais, já que não é muito intuitivo selecionar o visual invisível;  implementado
  • Mover visuais desabilitados para o fim da listagem de itens; implementado
  • Poder virar a cabeça do personagem  implementado

--------

Citar

Opção para exportar visual como gif, ou png em algum frame específico;

Quanto ao topico citado acima, a imagem é gerada em formato APNG, pra transformar em GIF, por hora, você pode salvar o personagem do site e utilizar esse link https://ezgif.com/apng-to-gif para converter.

Quanto ao frame, estou planejando um jeito de controlar, mas cada item/ação tem um numero diferente de frames

--------

No mais muito obrigado pelo feedback ❤️

Link para o comentário
Share on other sites

6 horas atrás, T.Degurechaff disse:

Poder navegar entre os visuais com as setas do teclado;  um pouco difícil ja que a lista é dinamica

Sem problemas, fiz aqui com javascript: https://pastebin.com/D2ZwqvPx

 

6 horas atrás, T.Degurechaff disse:

Adicionar opções de imagem de fundo no visualizador, além do fundo gradiente existente, para que possamos fingir que o personagem está no jogo  Sendo planejado se tiver sugestões de imagem manda por aqui

Fiz alguns aqui:

 

6 horas atrás, T.Degurechaff disse:

Alguma coisa acontece com a pesquisa que dá uma travada ao digitar;  corrigido

Hoje mais cedo eu vi que estava lisinho, sem nenhum engasgo. Porém agora parece que está igual antes, não sei se minha máquina.

Edit: voltou a ficar bom kkkk

 

6 horas atrás, T.Degurechaff disse:
  • Corrigir tooltips que somem após pesquisar um item;  corrigido
  • Alguma coisa acontece com a pesquisa que dá uma travada ao digitar;  corrigido
  • Botão "Reset Character" ser substituído por 4 botões individuais para remover cada um dos 4 visuais, já que não é muito intuitivo selecionar o visual invisível;  implementado
  • Mover visuais desabilitados para o fim da listagem de itens; implementado
  • Poder virar a cabeça do personagem  implementado

Muuuuito obrigado, fico feliz que tenha gostado das sugestões e ainda concluiu super rápido. Você é incrível :D

 

 

renegados-boladoes.png.fec1678dcb6cfca12d2167436acfae56.png

Magnatrom - Renegado autocaster 175 | Relâmpago Dourado - Renegado híbrido 175 Instinto de Guerreiro - Renegado arco Crit 166 | Scarlet Yuuki - Sicária DD Crit 127 | Teeest3 - Sentinela aspd Crit 116 | Espírito da Montanha - Espiritualista 98

Link para o comentário
Share on other sites

2 horas atrás, Magnatrom disse:

Sem problemas, fiz aqui com javascript: https://pastebin.com/D2ZwqvPx

Eu testei, refatorei e implementei o uso de setas pra se mover entre os itens.

Durante os testes o mover scroll de acordo com o item não me pareceu funcionar como deveria, como estou sem tempo subi só o que estava certo.

 

Citar

Salvei aqui, vou estudar uma maneira de adicionar

 

 

Citar

Hoje mais cedo eu vi que estava lisinho, sem nenhum engasgo. Porém agora parece que está igual antes, não sei se minha máquina.

tenta recarregar a pagina com ctrl + f5 ou limpa o cache, testei algumas vezes no Chrome e no Mozilla e me pareceu normal

 

Obrigado pela ajuda e feedback ❤️

  • Like 1
Link para o comentário
Share on other sites

18 horas atrás, TheFenix95 disse:

Não curti esses icones, seria melhor terem colocado uma lista por escrito com o nome de cada classe.

Também não curti muito :(

Seria melhor serem separaados por classe 1, 2, 3 e expandidas, algo assim. Ou então incluindo o nome como você disse.

renegados-boladoes.png.fec1678dcb6cfca12d2167436acfae56.png

Magnatrom - Renegado autocaster 175 | Relâmpago Dourado - Renegado híbrido 175 Instinto de Guerreiro - Renegado arco Crit 166 | Scarlet Yuuki - Sicária DD Crit 127 | Teeest3 - Sentinela aspd Crit 116 | Espírito da Montanha - Espiritualista 98

Link para o comentário
Share on other sites

6 horas atrás, Dundé disse:

só colocar uma tip, quando passar o mouse em cima do ícone aparece o nome

Acaba sendo mais fácil clicar no ícone e ver a sprite do personagem do que parando pra ler a tooltip.

Uma organização melhor os ícones, ou até adicionar o nome das classes ao lado, ajudaria bastante na identificação de cada ícone.

renegados-boladoes.png.fec1678dcb6cfca12d2167436acfae56.png

Magnatrom - Renegado autocaster 175 | Relâmpago Dourado - Renegado híbrido 175 Instinto de Guerreiro - Renegado arco Crit 166 | Scarlet Yuuki - Sicária DD Crit 127 | Teeest3 - Sentinela aspd Crit 116 | Espírito da Montanha - Espiritualista 98

Link para o comentário
Share on other sites

1 hora atrás, T.Degurechaff disse:

estou com tempo apertado ultimamente mas fiz esses 2 layouts, acho que agrupando por classes deve ficar mais facil pra saber qual é, estou aceitando sugestoes.

Gostei da estrutura que escolheu.

Pode tentar usar aquela linha azul pontilhada para separar esses subgrupos de classes, e com um espaçamento de uns 2 ou 3 pixels entre eles, para não ficarem tão grudados.

O fundo gradiente é muito bonito, mas como ele já está na parte direita da tela acaba ficando estranho. Então acho melhor usar fundo branco mesmo, sem cores.

 

Em 6/10/2022 em 5:49 PM, T.Degurechaff disse:

Durante os testes o mover scroll de acordo com o item não me pareceu funcionar como deveria, como estou sem tempo subi só o que estava certo.

Pelo que eu testei no inspetor a função que seleciona o item estava sendo chamada depois da função que faz o scroll, então a tela sempre rolava 1 linha a menos do que deveria pois contabilizou o momento anterior.

renegados-boladoes.png.fec1678dcb6cfca12d2167436acfae56.png

Magnatrom - Renegado autocaster 175 | Relâmpago Dourado - Renegado híbrido 175 Instinto de Guerreiro - Renegado arco Crit 166 | Scarlet Yuuki - Sicária DD Crit 127 | Teeest3 - Sentinela aspd Crit 116 | Espírito da Montanha - Espiritualista 98

Link para o comentário
Share on other sites

  • 2 weeks later...

Mais uma vez meus parabéns pelo site, realmente ficou muito incrível, eu mesmo tenho utilizado bastante a ferramenta.

Desse modo, gostaria de sugerir uma melhoria para o site, ao qual tenho sentido falta.

Poderia colocar (fixar) o nome do visual depois que equipo o personagem? Pois muitas das vezes eu clico em visuais aleatórios para ver como fica o resultado final e depois de um tempo pesquisando já não me lembro qual o nome do visual selecionado anteriormente, desse modo precisando ter que voltar na tabela de seleção para localizá-lo novamente.

ezgif.com-gif-maker.png.d97a8306558ba4e90eac2194f29c6e36.png

Link para o comentário
Share on other sites

5 horas atrás, Med ▲ disse:

Poderia colocar (fixar) o nome do visual depois que equipo o personagem? Pois muitas das vezes eu clico em visuais aleatórios para ver como fica o resultado final e depois de um tempo pesquisando já não me lembro qual o nome do visual selecionado anteriormente, desse modo precisando ter que voltar na tabela de seleção para localizá-lo novamente.

Pensei no mesmo ontem quando estava brincando na ferramenta.

Seria legal algo assim:

image.png.6fcdf6c99e665021a3369e7bec319d19.png

  • Like 1

renegados-boladoes.png.fec1678dcb6cfca12d2167436acfae56.png

Magnatrom - Renegado autocaster 175 | Relâmpago Dourado - Renegado híbrido 175 Instinto de Guerreiro - Renegado arco Crit 166 | Scarlet Yuuki - Sicária DD Crit 127 | Teeest3 - Sentinela aspd Crit 116 | Espírito da Montanha - Espiritualista 98

Link para o comentário
Share on other sites

Não sei o quanto conhecimento de programação vocês tem, mas se souberem um pouco de git podem fazer um pull la.

Eu testo e se tiver tudo certo eu aprovo. O melhor é que ja vai na mesma hora pro live.

https://github.com/alisonrag/vue-visual-simulator

 

caso não saiba e quiser me mandar o codigo css+html podem utilizar o pastebin

Link para o comentário
Share on other sites

3 horas atrás, T.Degurechaff disse:

Não sei o quanto conhecimento de programação vocês tem, mas se souberem um pouco de git podem fazer um pull la.

Eu testo e se tiver tudo certo eu aprovo. O melhor é que ja vai na mesma hora pro live.

https://github.com/alisonrag/vue-visual-simulator

 

caso não saiba e quiser me mandar o codigo css+html podem utilizar o pastebin

Pior que não sei nada disso kkkk

ezgif.com-gif-maker.png.d97a8306558ba4e90eac2194f29c6e36.png

Link para o comentário
Share on other sites

  • 2 weeks later...

Legal, tem até os visuais alternativos das 3ª classes, e as 4ª classes. Acho que seria melhor mudar esse post pra outra área se possível, não pode falar de Ragnarok no OT!! E deve ficar mais visível mais pra cima do fórum.

O agrupamento não está aparecendo aqui. Talvez colocar uma arte da classe no bg dos agrupamentos facilitasse a identificação.

A coloração da Cavaleira Rúnica está estranha aqui.

2101579652_Screenshot2022-07-08at19-42-25RagnarokOnlineVisualSimulator.png.ced9aa64dcdcb8b0088b3cedbc0f0569.png

Dando uma olha nos visuais, notei que eles repetiram os nomes de umas perucas!! Uns Apliques ficaram com nome igual:

107725191_Screenshot2022-07-08at19-52-15RagnarokOnlineVisualSimulator.png.2a274338835464a6fc3837f752bda8e4.png

Dá pra ver no Divine também. Azul, Branco, Marrom, Roxo, Verde e Vermelho.

coldwolf.gif

Link para o comentário
Share on other sites

  • 2 months later...

@T.Degurechaff

Está tendo algum problema que não carrega a imagem do personagem:
image.png.92c79b822feb1f3544d433497eaef39e.png

 

Talvez esteja relacionado ao problema do site estar constando como conexão não segura.

renegados-boladoes.png.fec1678dcb6cfca12d2167436acfae56.png

Magnatrom - Renegado autocaster 175 | Relâmpago Dourado - Renegado híbrido 175 Instinto de Guerreiro - Renegado arco Crit 166 | Scarlet Yuuki - Sicária DD Crit 127 | Teeest3 - Sentinela aspd Crit 116 | Espírito da Montanha - Espiritualista 98

Link para o comentário
Share on other sites

30 minutos atrás, Squirt disse:

nah, a função só quebrou mesmo.

image.png.9f08555e0b11cfb5340b543c4a940ff4.png

Essa fetch é uma função que consulta uma url, para consultar uma API por exemplo. Quando um site consta como não seguro, ou se não tem as devidas permissões, essa url pode negar a fornecer os dados, o que pode gerar esse erro.

Outro possível problema é esse IP indicado na print ter sido alterado em algum momento.

renegados-boladoes.png.fec1678dcb6cfca12d2167436acfae56.png

Magnatrom - Renegado autocaster 175 | Relâmpago Dourado - Renegado híbrido 175 Instinto de Guerreiro - Renegado arco Crit 166 | Scarlet Yuuki - Sicária DD Crit 127 | Teeest3 - Sentinela aspd Crit 116 | Espírito da Montanha - Espiritualista 98

Link para o comentário
Share on other sites

43 minutos atrás, Magnatrom disse:

Essa fetch é uma função que consulta uma url, para consultar uma API por exemplo. Quando um site consta como não seguro, ou se não tem as devidas permissões, essa url pode negar a fornecer os dados, o que pode gerar esse erro.

Outro possível problema é esse IP indicado na print ter sido alterado em algum momento.

então, o que acredito que causou a falha foi timeout de onde as imagens dos personagens estão, dai a fetch não funcionou

Editado por Squirt
Link para o comentário
Share on other sites

Participe da conversa

Você pode postar agora e se cadastrar mais tarde. Se você tem uma conta, faça o login para postar com sua conta.

Visitante
Responder este tópico...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emojis são permitidos.

×   Seu link foi automaticamente incorporado.   Mostrar como link

×   Seu conteúdo anterior foi restaurado.   Limpar o editor

×   Não é possível colar imagens diretamente. Carregar ou inserir imagens do URL.

×
×
  • Criar Novo...