Melhores Práticas para Arquivos no Roll20

Imagens Amigáveis para Web vs. Impressão

Se você estiver jogando a partir de um pacote de aventura comercial, há uma grande chance de que você esteja trabalhando a partir de um arquivo PDF. Para que os gráficos sejam legíveis e nítidos para impressão, a resolução da imagem, ou DPI (pontos por polegada), tem de ser mantida bastante elevada, pelo menos 300 DPI para a maioria dos PDFs com qualidade de impressão. Uma resolução de DPI (pontos por polegada) maior resulta em arquivos de imagem maiores e coloca mais pressão sobre o processador para exibir a imagem. Isso significa que mapas, retratos de personagens e anotações de PDFs comerciais terão tamanhos de arquivo maiores do que o necessário para um jogo no Roll20. TL/DR: Se simplesmente arrastar estes activos para o seu jogo, ele vai consumir o seu espaço de armazenamento.

Se você deseja que as imagens sejam executadas sem problemas no Roll20, recomendamos manter a resolução da imagem baixa. Qualquer valor entre 70 e 150 DPI deve ser adequado para as imagens do seu jogo. Isso pode ser feito ajustando a resolução usando um software de edição de imagens. Também oferecemos ativos otimizados através do nosso Marketplace Roll20.

Tipos de Arquivos

Arquivos de Imagem

Os três tipos de arquivos de imagem disponíveis que podem ser importados e usados no Roll20 são JPG, GIF e PNG. A partir do final de fevereiro de 2024, o tamanho máximo de carregamento é de 20 MB para os utilizadores Free, 50 MB para os utilizadores Plus e 100 MB para os utilizadores Pro. 

Vamos comparar os formatos de arquivo entre si:

JPEG é o tipo de arquivo de imagem preferido do Roll20. Arquivos JPEG oferecem gradientes suaves e um tamanho de arquivo pequeno. No entanto, não há opções de transparência, e a qualidade pode sofrer quando um JPEG é fortemente comprimido. Se tiver gráficos que não necessitem de qualquer transparência ou translucidez, opte por ficheiros de imagem JPG.
Tamanho do ficheiro: Média
Pode ser transparente? Não
Pode ser translúcido? Não
Pode ser animado? Não

Os ficheiros GIF são adequados para pixel art, oferecem controlo da paleta de cores e os GIFs animados podem ser apresentados na mesa virtual do Roll20. No entanto, os ficheiros GIF são maus a replicar gradientes, estão limitados a uma paleta de 256 cores "indexadas" e não são adequados para produzir imagens realistas. O tipo de ficheiro GIF é útil se pretender apenas uma imagem de recorte simples para objectos simbólicos, com ou sem animação.
Tamanho do ficheiro: Pequeno
Pode ser transparente? Sim
Pode ser translúcido? Não
Pode ser animado? Sim

Arquivos PNG oferecem compressão sem perdas, o que resulta em imagens de alta qualidade. No entanto, o tamanho do ficheiro aumenta drasticamente quando utiliza trabalho extensivo com canais alfa, e os ficheiros PNG maiores utilizam muitos recursos do sistema. PNG é um formato ideal para desenhos sólidos e imagens com grandes áreas exatamente da mesma cor. PNGs também podem funcionar para objetos de token ou imagens que requerem transparência, mas arquivos PNG animados não são suportados. Os PNGs são mais flexíveis do que os GIFs, o que pode resultar em tamanhos de arquivo maiores, mesmo para imagens visualmente semelhantes.
Tamanho do arquivo: Grande
Pode ser transparente? Sim
Pode ser translúcido? Sim
Pode ser animado? Não  

Dica: Se o seu software permitir, você pode ser capaz de alterar sua imagem de "cor completa" ou "RGB" para "paleta" ou "indexado". A última opção tem um número limitado (geralmente 256) de cores e é o único formato que o GIF suporta. Por isso, os arquivos GIF são menores. Arquivos PNG usando o mesmo tipo de paleta terão aproximadamente o mesmo tamanho das imagens GIF. Comparados ao GIF, a maioria dos arquivos PNG estão no formato RGB, armazenando mais dados por pixel e resultando em tamanhos de arquivo maiores. No entanto, isso preserva a integridade da imagem em maior medida.

 

Ficheiros de animação

Para arquivos animados no Roll20, suportamos três tipos de arquivo: GIF, mp4 e webm. A partir do final de fevereiro de 2024, o tamanho máximo de carregamento é de 20 MB para os utilizadores Free, 50 MB para os utilizadores Plus e 100 MB para os utilizadores Pro. 

Vamos comparar os formatos de arquivo animado entre si:

Arquivos GIF, como mencionado na seção de imagem acima, oferecem controle de paleta de cores ao serem criados, são ótimos para arte de pixel e GIFs animados serão animados na mesa de jogo virtual do Roll20. No entanto, os arquivos GIF não são bons em replicar gradientes, têm uma paleta limitada de 256 cores e não são adequados para produzir imagens realistas. Por armazenarem mais dados por quadro de animação do que outros formatos, animações grandes têm um desempenho ruim.
Tamanho do arquivo: Pequeno
Pode ser transparente? Sim
Pode ser translúcido? Não

Arquivos MP4 são na verdade formatos de arquivo de vídeo, o que se traduz em uma experiência melhor. A transparência (chamada de canal Alfa) não é suportada por este tipo de arquivo. Mapas e fundos animados funcionam bem neste tipo de arquivo. Uma vez carregados no Roll20, esses arquivos não manterão o áudio do arquivo original. O formato MP4 não possui opções de transparência e pode ter qualidade reduzida com compressão pesada. Para animações, arquivos MP4 serão mais disponíveis, mas converter MP4 para WEBM reduzirá o tempo necessário para colocar seus arquivos no Roll20.
Tamanho do arquivo: Grande, melhor eficiência
Pode ser transparente? Não
Pode ser translúcido? Não

WEBM é projetado para uso na web. Suporta transparência e translucência (com Canal Alfa de 8 bits). Arquivos WEBM oferecem tanta qualidade quanto MP4, mas em um tamanho muito menor. A principal desvantagem é que este tipo de arquivo não é tão universal quanto MP4 ou GIF.
Tamanho do arquivo: Pequeno, mais eficiente
Pode ser transparente? Sim
Pode ser translúcido? Sim  

A partir de março de 2025, o Roll20 lançou uma atualização do processo de carregamento de gráficos que deverá resultar em carregamentos mais rápidos e eficientes.

Anteriormente, o seu browser era responsável pela transcodificação através de JavaScript (um processo ineficiente e pesado em termos de CPU), o que tornava o processo e o seu computador consideravelmente mais lentos. Agora, transferimos este trabalho para servidores dedicados que processam mais rapidamente sem sobrecarregar a sua máquina. As vantagens desta atualização incluem:

• Uploads drasticamente mais rápidos: ficheiros de grandes dimensões que anteriormente demoravam horas a ser concluídos são agora concluídos em minutos. Os nossos testes indicaram uma redução média de 76% no tempo de carregamento de uma variedade de ficheiros animados, com alguns a terem um desempenho até 98% mais rápido, e muitos ficheiros que não eram concluídos anteriormente são agora concluídos numa média de quatro minutos
• Qualidade de animação superior: pixelização reduzida e reprodução mais suave
• Redução da lentidão: particularmente percetível em máquinas que não tinham a capacidade de transcodificar anteriormente, a transferência deste processo para os nossos servidores liberta a sua máquina para outras tarefas

Perguntas frequentes

• P: Esta atualização irá afetar as animações existentes anteriormente carregadas nas minhas campanhas?
  Não. Para tirar partido das actualizações, os activos terão de ser transferidos novamente.
• P: As actualizações de carregamento de animações afectam todos os tamanhos de ficheiros?
  Sim, mas as melhorias de desempenho serão mais visíveis com ficheiros de animação maiores.
• P: Isto terá impacto nos activos animados comprados no Roll20 Marketplace ou oferecidos através do Roll20 Reserve?
  Não. Estas actualizações aplicam-se a activos animados que carrega diretamente para as suas campanhas.
• P: Poderá haver casos em que a qualidade ou o desempenho da animação seja pior do que antes?
  Não é essa a nossa expetativa ou experiência nos testes. Se tiver algum problema, informe-nos. Planeamos afinar as definições ao longo do tempo para obter um desempenho ainda melhor. Por exemplo: estamos a recolher informações sobre tipos de ficheiros comuns, tamanhos de animação e casos de utilização (como gráficos vs. mapas) para ajudar a otimizar a qualidade, à semelhança da forma como gerimos atualmente a Textura de iluminação.
• P: Algumas animações podem ser carregadas mais lentamente em comparação com o processo antigo?
  Para GIFs muito pequenos, poderá notar um ligeiro atraso de alguns segundos devido à nova fila de processamento do lado do servidor. Além disso, o novo processo de carregamento tem como objetivo alcançar uma maior fidelidade e resolução da animação para aumentar a qualidade da mesma, o que pode ter um ligeiro impacto no tempo de carregamento. No entanto, na maioria dos casos e especialmente para ficheiros maiores, o novo processo deverá ser significativamente mais rápido em geral.
• P: Existem outros factores que possam afetar a forma como as animações são carregadas no jogo?
  Embora o processo de carregamento seja agora mais rápido e eficiente, a velocidade da Internet e a largura de banda podem ainda afetar as experiências individuais. As animações maiores podem demorar mais tempo a carregar completamente para os jogadores, dependendo do seu hardware e ligação. Nos nossos testes internos, os ficheiros com cerca de 100 MB podiam demorar entre 10 a 20 minutos a carregar completamente em ligações 3G, o que levava a potenciais choppines ou imagens estáticas a serem apresentadas durante esse tempo.
• P: Que factores afectam o tempo de carregamento e qual é uma expetativa razoável?
  O tamanho e a resolução do ficheiro, a duração e a complexidade da animação, a largura de banda do computador e a velocidade da Internet podem afetar os carregamentos. Para animações muito grandes (~90MB, alta resolução, efeitos complexos), os carregamentos podem demorar mais de 20 minutos em casos raros. No entanto, a maioria dos carregamentos deve ser concluída entre 10 segundos e 5 minutos.
• P: O que é a transcodificação e como afecta o meu armazenamento?
  A transcodificação é o processo de conversão de ficheiros de vídeo em formatos normalizados optimizados para apresentação na mesa virtual. Utilizamos o ffmpeg padrão da indústria para garantir que as suas animações mantêm a qualidade, melhorando o desempenho de reprodução, mantendo a consistência visual (como manter as definições de transparência intactas) e minimizando a variabilidade do tempo de carregamento. Uma vez que os diferentes codecs lidam com a compressão de forma diferente, a transcodificação pode, por vezes, reduzir o tamanho do ficheiro, mas se o seu ficheiro original já estiver muito comprimido, pode aumentar de tamanho. A utilização do armazenamento baseia-se no tamanho final do ficheiro transcodificado e não no carregamento original.
• P: Posso ajustar os meus ficheiros para reduzir a utilização do armazenamento?
  Sim, pode reduzir a resolução das suas animações antes de as carregar utilizando ferramentas como: ffmpeg, HandBrake ou software de edição de vídeo como o Adobe Premiere Pro. No entanto, uma vez que o armazenamento se baseia no tamanho do ficheiro transcodificado e não no original (ver perguntas acima), tenha em mente que a compressão extrema pode não ter um impacto significativo no espaço poupado após o processamento.

Trabalhando com Espaço de Tela

Quando um GM entrega documentos para seus jogadores ao redor de uma mesa física, o item geralmente é escrito ou impresso em papel orientado para retrato. Em um tablet, uma pessoa pode simplesmente virar a tela, seja um gráfico em retrato ou paisagem. Virar uma tela realmente não pode ser feito em um monitor de computador. Ao criar folhetos ou telas de apresentação para uso no Roll20, tenha em mente que o usuário médio geralmente está trabalhando em um monitor de tela larga com resolução de tela fixa. Você deseja criar e planejar folhetos e telas de apresentação que se encaixem perfeitamente na tela do usuário coletivo. Em vez de pensar em retrato/vertical, opte pela orientação paisagem/horizontal para notas, cartas, imagens ou qualquer outra coisa que não vá ser um mapa de mesa.

Em relação à resolução da tela, tenha uma ideia do que seus jogadores estão usando. Eles estão trabalhando em estações desktop? Tablets? Laptops? Encontre um meio-termo entre a resolução da tela e ajuste o tamanho dos seus gráficos de acordo para evitar que os outros tenham que ajustar suas configurações de zoom para visualizar suas imagens. Websites like w3schools.com keep yearly tallies of the average screen resolution over the years if you need a generic design guide.

Roll20 Image Dimensions

Here are specific Roll20 dimensions for certain graphic elements.

Image Dimensions

* A grade hexagonal é desenhada matematicamente, então a altura e largura em pixels para uma única unidade hexagonal é uma aproximação

Imagens de Token

Devido ao seu tamanho pequeno, imagens de token são mais adequadas para formatos PNG para melhor qualidade. As PNGs também oferecem transparência. Se você não estiver usando uma grade quadrada ou hexagonal para o movimento dos tokens, você não precisa se preocupar com as dimensões reais da imagem. No entanto, se for utilizando uma grelha, deverá certificar-se de que a sua imagem tem um preenchimento transparente suficiente. O motivo para fazer isso é que quando uma imagem é colocada em uma mesa de jogo com grade, o Roll20 irá distorcer as dimensões da imagem para melhor se ajustar a uma única unidade da grade. Esse processo pode alterar as proporções da sua imagem. Por exemplo, se você estiver usando tokens que ocupam um espaço de 1 x 1, 2 x 2 ou 3 x 3 unidades, você vai querer garantir que as dimensões finais da imagem sejam iguais tanto em altura quanto em largura. Se tiver uma ficha oblonga, deve certificar-se de que a dimensão final da largura ou da altura é exatamente o dobro ou talvez o triplo da outra.

Problemas Comuns: