Vamos aprender! - Criando um charset maior que o normal

[Shephiroth]

Apresenta

[box class=catbg2]Introdução[/box]
[box class=windowbg2] O projeto Vamos aprender! foi criado na intenção de ajudar e auxiliar na hora da criação de um game. O projeto também faz parte do One Winged Angel Labor, e a principio constará com tutoriais simples e básicos, passando aos mais difíceis e avançados. Procurarei criar tutoriais variados e diferentes do convencional, tentarei explicar como funciona muitas partes do maker que muitos não sabem, e os que sabem não ensinam, ou deixam essa parte passar batida. Bem vamos ao que interessa?
[/box]
[box class=catbg2]Criando um Charset maior que o normal[/box]
[box class=windowbg2]
Compatibilidade: Qualquer maker
Dificuldade: Iniciante
Software usado: Photofiltre Studio X

-----------------------------------------------

FAQ

FAQ

O que é um Charset?
R- Charset é o template padrão do RPG Maker usado para utilização de Recursos gráficos, nesse caso para Characters (personagens).

Devo usar somente o Photofiltre Studio X?
R- Não, você pode usar qualquer programa de edição de imagens.

[close]

-----------------------------------------------

É um tutorial bem simples, e uma parte bem simples também, mas quem nunca viu aquele char de um dragão enorme e super maneiro?! Só que o tamanho do dragão não cabe no template padrão de chars do Maker... Mas você ainda pode coloca-lo lá! Basta criar um charset próprio pro char! Veja como é bem simples!

OBS: Os procedimentos podem variar dependendo das ferramentas disponíveis no editor de imagens que você escolher!

Vou dividir o processo por passos e com algumas imagens para ajudar :D

1º Passo - Caça aos recursos! - Primeiramente escolha o recurso que irá utilizar, e certifique-se de que ele possui todos os frames necessários para caminhar normalmente dependendo da Engine (RPG Maker) que você está utilizando.

2º Passo - Tirando as medidas! - Abra o editor de imagens e coloque a imagem no editor, agora faça um quadrado de seleção em volta de apenas 1 frame de posição. Tome cuidado para que não corte alguma parte do frame.

[hs width=320 height=240]http://i38.servimg.com/u/f38/15/86/87/46/110.png[/hs]

3º Passo - Deixando uniforme! - Agora arraste o quadro de seleção para todos os outros frames, e aumente apenas se necessário o tamanho, tente deixar o quadro de seleção em um tamanho (o menor possível) que todos os frames caibam nele.

[hs width=320 height=240]http://i38.servimg.com/u/f38/15/86/87/46/210.png[/hs] [hs width=320 height=240]http://i38.servimg.com/u/f38/15/86/87/46/310.png[/hs]

4º Passo - Recriando as medidas! - Após conseguir uma medida que caiba todos os frames (1 por vez), crie um novo arquivo no editor usando essas medidas, você pode ver a Altura e o Comprimento na barra inferior do programa. Lembrando que width significa comprimento e height significa altura. Nomeie o arquivo de PRIMEIRO ARQUIVO.

[hs width=320 height=240]http://i38.servimg.com/u/f38/15/86/87/46/510.png[/hs]

5º Passo - Multiplicando - Agora vem a parte da matemática! Se não tiver afinidade com ela use e abuse da calc do seu computador. Primeiramente pegue o valor do Comprimento (Width) e multiplique por 3, isso dará um resultado X. Agora pegue a Altura (Height) e multiplique por 4, isso dará um resultado Y. Agora crie um novo arquivo no editor usando comprimento X e altura Y que você obteve na multiplicação. Nomeie o arquivo para SEGUNDO ARQUIVO. No meu exemplo fica assim:

[hs width=320 height=240]http://i38.servimg.com/u/f38/15/86/87/46/610.png[/hs]

6º Passo - Organizando! - Agora que você já criou 2 arquivos, você deverá colorir totalmente o primeiro arquivo com uma cor a sua escolha, use uma cor bem chamativa. Agora copie o primeiro arquivo e cole-o no segundo arquivo, organize corretamente para que ele fique no canto superior esquerdo e encaixa perfeitamente nas bordas. Ficará assim:

[hs width=320 height=240]http://i38.servimg.com/u/f38/15/86/87/46/710.png[/hs]

7º Passo - Indo por partes! - Agora você deve recolorir o primeiro arquivo com uma segunda cor diferente da primeira, essa por sua vez deverá ser chamativa também. Copie novamente o primeiro arquivo e cole-o novamente no segundo arquivo, agora organize de forma que ele fique encostado na borda superior central, ficará dessa forma:

[hs width=320 height=240]http://i38.servimg.com/u/f38/15/86/87/46/810.png[/hs]

8º Passo - Ajeitando as pontas! - Agora seu template está quase tomando forma! Agora copie a Layer que está no canto superior esquerdo, a que você colocou primeiramente, e ajeite no canto superior direito, fechando a primeira fileira.

[hs width=320 height=240]http://i38.servimg.com/u/f38/15/86/87/46/910.png[/hs]

9º Passo - A união faz a força! - Agora que a primeira linha está completa, você deverá juntar todas as Layers, transformando tudo em uma única imagem. Tenha certeza que está tudo correto e não existe nada desalinhado! Agora duplique a imagem e arraste para baixo organizando exatamente as pontas, deixa a segunda fileira com a sequencia de cores diferente da primeira. Se a primeira fileira começa com cor verde e depois rosa, a segunda fileira DEVERÁ começar com a cor rosa e depois a verde. Vá fazendo isso até preencher o Segundo arquivo inteiro, lembrando de mesclar as 2 cores.

[hs width=320 height=240]http://i38.servimg.com/u/f38/15/86/87/46/1010.png[/hs]

10º Passo - Cada macaco no seu galho! - Agora una todas as imagens em uma única layer, transformando em uma única imagem. Agora seu Template especifico está pronto! Agora você precisa colocar os Frames corretamente em seu lugar. Preste muita atenção na posição correta do frame, a primeira fileira será para a posição olhando abaixo. O quadro central sempre será para o frame parado. E a dos lados será o movimento dele caminhando. Tente organizar o frame para que fique mais no centro possível.

[hs width=320 height=240]http://i38.servimg.com/u/f38/15/86/87/46/1110.png[/hs]

11º Passo - Completando o quadro! - Agora que já fez o primeiro, complete todos os quadros cada frame na sua posição correta. Tome bastante cuidado para que o frame não ultrapasse o quadrado da outra cor.

[hs width=320 height=240]http://i38.servimg.com/u/f38/15/86/87/46/1210.png[/hs]

12º Passo - Finalizando - Agora estamos quase no final! Selecione a layer que possui os quadros coloridos e deixe ela invisível e salve em formato de imagem PNG.

[hs width=320 height=240]http://i38.servimg.com/u/f38/15/86/87/46/1310.png[/hs]

13º Passo - Dando nome aos bois - Pronto! Seu char está pronto! Oh wait, ainda não! Para que ele funcione no maker, você deverá renomeá-lo, adicionando um "$" Cifrão na frente do nome e exporte-o para o maker usando o gerenciador de recursos do próprio. Divirta-se!

[/box]
[box class=catbg2]Observações finais[/box]
[box class=windowbg2]Pronto   
Espero que não tenha sido cansativo de ler tudo isso, e espero que tenha ficado direto e intuitivo. Se alguém tiver alguma dúvida basta perguntar.[/box]
[box class=catbg2]Créditos[/box]
[box class=windowbg2]- A mim, Shephiroth, por criar e dispor o tutorial.
- E a você por estar lendo este tópico![/box]

[Kazuyashi]

WOW! Ótimo tutorial esse, Shep! Ótimo mesmo! Com certeza vai ajudar bastante gente. Mas assim, embora eu também use o Photo Filtre pra fazer chars maiores, o processo é ligeiramente diferente.

Faço igual ao passo 2: seleciono apenas 1 frame e deixo as bordas da seleção uns 5 pixels afastadas da sprite. Clico com botão direito na seleção, vou em "Definições Manuais" e desmarco "manter proporcionalidade". Daí checo os valores da seleção. Pego primeiro o número da largura e divido por 32. Se der uma divisão exata, eu mantenho o número. Se der um número quebrado, por exemplo 3,2222235, arredondo o valor por baixo (3) e multiplico por 32. Daí o resultado dessa cálculo será a nova largura. Depois repito o procedimento para a altura.

Achados os valores, insiro no espaço destinado, ainda em "Definições Manuais", e dou Ok. A imagem vai se ajustar ao padrão do maker. Depois é colorir o espaço, fazer a intercalação de cores e repetir os passos que você destrinchou tão bem no tutorial. =)

Parabéns novamente, meu irmão! Ficou muito bom!

Um grande abraço e qualquer coisa estamos aí!

Kazuyashi.

[Shephiroth]

Valeus Kazuuu :DD
Nossa velho, o seu acaba se tornando mais complicado nas matemática euhaehuaehuaehuaehu
Acho que assim do jeito que fiz está simples e de fácil entendimento ;D

[Uhtred]

Ótimo tutorial Shep!

Lembro que uma vez eu tentei fazer isso, e foi dificil de descobrir como fazer sozinho eahuaeh com teu tuto fica mais fácil do pessoal se adequar.

E é uma coisa que poucos usam, na maioria dos projetos eu vejo todos chars do mesmo tamanho, mesmo que seja um monstro muito maior que o personagem ... se os autores usassem dimensões diferentes para cada personagem (ao menos dos monstros) o jogo ficaria mais real e a qualidade em relação aos gráficos ficaria muito melhor.

[Nidan81]

Obrigada cara, ajudou muito :)

[SylarFeits]

  Simplesmente perfeito.
Ótimo tutorial e bem simples.
Me ajudou muito, cara!

[RenatoDias]

Muito útil um tutorial desse pra quem desenvolve recursos para os makers. E matemática, me lembro quando fazia BGs e banners de StepMania, os banners tinham uma altura e comprimento certos, se abusasse um pouco, saía zoado. Uma puta duma matemática pra acertar alturaXcomprimento de BG e Banner de StepMania. Pior ainda que eu era Themista de SM, fazia temas visuais pro jogo(fiz um de Guitar Hero), aí tinha que acertar os tamanhos.

Ótimo tutorial, cara!

[Shephiroth]

Opa muito obrigado galera :D

@RenatoDias de fato, matemática é complicado, um calculo errado pode destruir muita coisa haha
Conheço um amigo que trabalhou em uma grande empresa que fazia doces (chocolates), e na mistura 10g a mais do ingrediente x comprometeu o caldeirão inteiro, litros e litros foram jogados fora...

Eu amo matemágica *-* faz parte de meu alinhamento e formação.
Certa vez, dando aula de matemática pro ensino médio, fiquei abismado, a sala não acompanhava contas que tinham mais de uma operação (ex: 2+3*5)... Triste realidade :(

Enfim, que bom que tenha gostado do tutorial :D
Forte abraço!