The International Simutrans Forum

 

Author Topic: [Tutorial] Criando um add-on: noções de como se cria uma imagem PNG  (Read 11919 times)

0 Members and 1 Guest are viewing this topic.

Offline H4CK3R

  • *
  • Posts: 115
  • Minhas Metas: 200 posts
Nome: [Tutorial] Criando as imagens PNG's (Spritsheet)
Autor: Caio Monteiro (H4CK3R)


Como criar uma imagem?
O pak 64, como é mais conhecido, contém uma base de 64 pixels, ou seja, o seu objeto deve ter 64 pixels ou menos. Os 64x64 podem ser formados também por mais quadros. No pak 64, cada quadradinho representa 64 pixels. Você pode criar edifícios maiores ou menores de 1 quadradinho. Por exemplo:

Você pode criar um prédio de base 128 e de altura 128, ou seja, 64+64=128(base) e 64+64=128(altura).
Você pode criar um prédio de 192 de base e de altura 192, ou seja, 64+64+64=192.
Você pode criar um prédio de 256 de base e de altura 256, ou seja, 64+64+64+64=256.
E assim sucessivamente...


Imagem de um quadrado de 64x64

O pak 128, como também é conhecido, contém uma base de 128 pixels, ou seja, o seu objeto deve ter 128 pixels ou menos. Os 128x128 podem ser formados também por mais quadros, como no pak 64, mas no jogo, cada quadradinho representa 128 pixels. Você pode também criar edifícios maiores de um quadradinho, por exemplo:
Você pode criar um prédio de base 256 e de altura 256, ou seja, 128+128=256(base) e 128+128=256(altura).
Você pode criar um prédio de 384 de base e de altura 384, ou seja, 128+128+128=384.
Você pode criar um prédio de 512 de base e de altura 512, ou seja, 128+128+128+128=512.
E assim sucessivamente.

Imagem de um quadrado de 128x128

Você pode criar um prédio com dimensões de base diferentes. Por exemplo: Você pode criar uma base de 64 pixels e alguma coisa sobre esta base menor que 64 pixels, nunca maior.

Cores:
Existem cores no Simutrans que são especiais, mas uma delas é muito importante. A cor azul claro ou E7FFFF. Ela é a cor transparência do jogo, ou seja, ela não aparecerá no jogo e sim apenas o objeto que você desenhou. Existem também aquelas que ficam luminosas a noite a aquelas que mudam de cor de acordo a cor de sua empresa.


Palete de cores(clique para ampliar)

Montagem:
Você pode montar seu edifício de qualquer maneira, desde que não ultrapasse os limites, por exemplo, se você montar um edifício de base 64 e no topo estiver 65, o jogo irá corta-lo ou dar bug. As vezes o Makeobj não os adiciona a pak por causa do tamanho inválido.

Cortando um edifício:
Se ele é muito grande, você não pode inseri-lo por inteiro, se ele tem mais de 64 ou 128 pixels de altura ou base, é necessário cortÁ-lo. Mas pra que isso? Meu edifício vai sair cortado no jogo? Não, você deve cortar seu edifício para que ele tenha partes de 64 ou 128 pixels, ou seja, se um prédio tem 128 pixels de altura e você quer inseri-lo no pak 64, você deve cortar duas partes de 64 pixels. Então ficaria andar 1=64x64 e andar 2=64x64, e assim também é válido para o pak 128. Se um edifício tem 256 de altura e você quer faze-lo para pak 128, você deve cortar sua altura em duas partes de 128.

Exemplo: uma biblioteca recortada para pak 64

Detalhamento:
Se você utilizar alguma imagem da internet, antes de usa-la, faça um tratamento nela, pois o Simutrans não possui gráficos muito realistas.


Salvando:
Para inserir no arquivo pak, as imagens devem estar em formato PNG.



O próximo passo é Criar o Dat.



Críticas, dúvidas, sugestões, só dizerem!
« Last Edit: September 18, 2010, 02:32:42 PM by IgorEliezer »

Offline VictorKoehler

  • *
  • Posts: 157
  • Ahh... Os Transportes de hoje em dia...
    • VK Simutrans - Absolutamente Tudo sobre Simutrans!
Re: [Tutorial] Criando um add-on: noções de como se cria uma imagem PNG
« Reply #1 on: December 30, 2010, 01:18:06 AM »
HACKER, eu poderia usar um pouco de seu material para usar no Simutrans Tikiwiki?
Lá está sem assunto. A Poucos meses atras, quando eu estava aprendendo a criar add-ons, tive que ficar traduzindo nos outros idiomas do Tikiwiki!

Estou pedindo a liberação do conteúdo para passar para o Simutrans Tikiwiki. :D ;) ;D

Offline IgorEliezer br

  • Devotee
  • Administrator
  • *
  • Posts: 4087
  • Cake recipes are cool... REALLY!
    • Igor Eliezer Architect and Urban Planner/Arquiteto e Urbanista
  • Languages: PT, EN, AutoLISP, Python
Re: [Tutorial] Criando um add-on: noções de como se cria uma imagem PNG
« Reply #2 on: December 30, 2010, 03:25:38 PM »
As imagens acima hospedadas em graphics.simutrans.com são da comunidade, pode usá-las. Há mais imagens em graphics.simutrans.com que podem ser usadas.

Quanto ao H4CK3R, eu duvido que ele irá responder. Ele decidiu sair da comunidade depois que ele postou um tópico de protesto reclamando de "falta de apoio material" e de mais presença de nós administradores. Não se preocupe, ninguém saiu machucado ;D .

Então recomendo que você leia o texto e reescreva-o com suas palavras, por vias de dúvidas. Acho melhor assim.
« Last Edit: December 30, 2010, 03:30:22 PM by IgorEliezer »

Offline VictorKoehler

  • *
  • Posts: 157
  • Ahh... Os Transportes de hoje em dia...
    • VK Simutrans - Absolutamente Tudo sobre Simutrans!
Re: [Tutorial] Criando um add-on: noções de como se cria uma imagem PNG
« Reply #3 on: December 30, 2010, 10:07:02 PM »
É mesmo, vi o perfil dele, ele não entra desde 23 de Outubro de 2009. :o
Eu entro todo dia no fórum, ainda bem que ele não excluiu os posts depois deste acontecimento, então eu vou ler e passar! ;D
EDIT: :P :o :-[ :-X Quando eu testei o texto no Simutrans Tikiwiki, fiz uma bagunça danada. As imagens embaixo dos textos, uma bagunça!
Desisti, é melhor outra pessoa fazer isto por mim!
« Last Edit: December 30, 2010, 10:37:28 PM by VictorKoehler »

Offline An_dz

  • Web Admin
  • Administrator
  • *
  • Posts: 2908
  • D'oh
    • by An_dz
  • Languages: pt, en, it, (de)
Re: [Tutorial] Criando um add-on: noções de como se cria uma imagem PNG
« Reply #4 on: January 01, 2011, 07:01:00 PM »
Eu posso fazer isso, se você fala da pt_images eu estou traduzindo do SNFOS.

Não é fácil traduzir tudo e adicionar tanta informação, só de pensar em traduzir desisto. ;D

Pelo menos a pt_paksets já está com todas as informações prontas.
« Last Edit: January 01, 2011, 07:05:47 PM by An_dz »

Nick

  • Guest
Re: [Tutorial] Criando um add-on: noções de como se cria uma imagem PNG
« Reply #5 on: February 18, 2011, 11:35:34 PM »
vcs não podem fazer um video?

Offline IgorEliezer br

  • Devotee
  • Administrator
  • *
  • Posts: 4087
  • Cake recipes are cool... REALLY!
    • Igor Eliezer Architect and Urban Planner/Arquiteto e Urbanista
  • Languages: PT, EN, AutoLISP, Python
Re: [Tutorial] Criando um add-on: noções de como se cria uma imagem PNG
« Reply #6 on: February 19, 2011, 12:49:53 AM »
Heheh... acho que isso não será tão fácil ;D

Mas para a felicidade geral da nação, comecei a escrever o artigo, do zero, sobre a criação da imagem PNG.

http://www.simutrans-germany.com/wiki/wiki/tiki-index.php?page=pt_Images

Tenham um pouco de calma. Eu gosto de ser didático e explicar cada passo. Ainda o texto não faz muito sentido porque acabei de começar a escrever, então fui escrevendo o que estava na cabeça.

Fiquem à vontade para fazer perguntas. Isso ajuda muito na hora de explicar.


Nick

  • Guest
Re: [Tutorial] Criando um add-on: noções de como se cria uma imagem PNG
« Reply #7 on: February 19, 2011, 12:28:48 PM »
para os onibus nao precisa corta-los?

Offline An_dz

  • Web Admin
  • Administrator
  • *
  • Posts: 2908
  • D'oh
    • by An_dz
  • Languages: pt, en, it, (de)

Offline JP_Jr

  • *
  • Posts: 117
  • Languages: PT
Re: [Tutorial] Criando um add-on: noções de como se cria uma imagem PNG
« Reply #9 on: April 23, 2013, 12:45:47 PM »
Será que poderiam me tirar umas dúvidas muito bestas? :-[




Criei no paint um quadrado de 128x128, dentro desse quadrado tenho que inserir todas as posições o veículo? Ou criar um quadrado para cada posição? :o


Minha opção para criar um veículo, é somente desenhá-lo? :-[

Offline IgorEliezer br

  • Devotee
  • Administrator
  • *
  • Posts: 4087
  • Cake recipes are cool... REALLY!
    • Igor Eliezer Architect and Urban Planner/Arquiteto e Urbanista
  • Languages: PT, EN, AutoLISP, Python
Re: [Tutorial] Criando um add-on: noções de como se cria uma imagem PNG
« Reply #10 on: April 23, 2013, 03:24:24 PM »
Será que poderiam me tirar umas dúvidas muito bestas? :-[
Não é dúvidas bestas. É básicas. ;)

Criei no paint um quadrado de 128x128, dentro desse quadrado tenho que inserir todas as posições o veículo? Ou criar um quadrado para cada posição? :o
Minha opção para criar um veículo, é somente desenhá-lo? :-[
Vai ter que criar um quadro de 128x128 para cada posição. E além de criar a imagem, você terá que criar um arquivo dat (um arquivo de texto simples que diz ao Simutrans que objeto você está fazendo e suas propriedades).

Dê uma olhada neste tutorial.

Offline JP_Jr

  • *
  • Posts: 117
  • Languages: PT
Re: [Tutorial] Criando um add-on: noções de como se cria uma imagem PNG
« Reply #11 on: April 23, 2013, 04:20:53 PM »
Igor, eu já tinha entendido mais ou menos a questão do arquivo DAT, fiquei a manhã inteiro lendo alguns tutoriais.


Tirando mais alguma dúvidas;





Usando essa imagem acima, retirada do seu tutorial.
   
     Acredito ser um onibus para pak64. Então cada face do veículo está em um arquivo de 64x64, correto?


    Então para criar um novo veículo eu deveria então criar um retângulo no paint (supomos que para pak64) de 64 x 512px, então dividir sua largura em quadros de 64 e só então colocar uma face em cada quadro, obedecendo as posições como no exemplo acima?


     As posições estão na sequencia?    0.0 é a primeira figura que está indo para o sul,    0.1 é a segunda figura que está indo para o norte, e assim por diante obedecendo a ordem (S, N, L, O, SE, NW, NE, SW)?


     Bem, se eu acertei nas minhas suposições acima, acredito que o meu maior problema será na hora de desenhar o veículo ou edifício. Definitivamente não sou bem em desenho. ;D

Offline An_dz

  • Web Admin
  • Administrator
  • *
  • Posts: 2908
  • D'oh
    • by An_dz
  • Languages: pt, en, it, (de)
Re: [Tutorial] Criando um add-on: noções de como se cria uma imagem PNG
« Reply #12 on: April 23, 2013, 05:03:07 PM »
1. Arquivo não, quadrante. Cada face fica em um quadrado de 64x64 ou quadrante/quadro de 64px.

2. Sim, cada quadrante será utilizado na direção que ele representa. Você não precisa colocar cada quadrante em um arquivo de imagem separado, a imagem de exemplo pode ser utilizada como está.

3. Neste exemplo estão na ordem que você disse, mas não existe uma ordem a seguir. Pois o quadro a ser utilizado é definido no dat. Mas a numeração que você disse está correta, 0.0, 0.1, 0.2...

Já existe uma página na wiki bem detalhada para veículos. As informações e exemplos lá vão lhe ajudar.

Para alinhar no pak128 use esta imagem

Offline IgorEliezer br

  • Devotee
  • Administrator
  • *
  • Posts: 4087
  • Cake recipes are cool... REALLY!
    • Igor Eliezer Architect and Urban Planner/Arquiteto e Urbanista
  • Languages: PT, EN, AutoLISP, Python
Re: [Tutorial] Criando um add-on: noções de como se cria uma imagem PNG
« Reply #13 on: April 23, 2013, 05:11:13 PM »
Já existe uma página na wiki bem detalhada para veículos. As informações e exemplos lá vão lhe ajudar.
*aplausos*