1. Definindo o servidor
Primeiro vamos definir o hotel em que queremos construir o personagem Habbo. Atualmente o Habbo está disponível em 9 línguas.
Hotel:
<select id="hotel" name="hotel">
<option selected="selected" value="habbo.com.br">Habbo.com.br (Brasil/Portugal)</option>
<option value="Habbo.com">Habbo.com (Internacional)</option>
<option value="habbo.de">Habbo.de (Alemanha)</option>
<option value="habbo.es">Habbo.es (Espanha)</option>
<option value="habbo.fi">Habbo.fi (Finlândia)</option>
<option value="habbo.fr">Habbo.fr (França)</option>
<option value="habbo.it">Habbo.it (Itália)</option>
<option value="habbo.nl">Habbo.nl (Holanda)</option>
<option value="habbo.com.tr">Habbo.com.tr (Turquia)</option>
</select>
Agora já temos o começo do nosso link, sendo:
http://www.habbo.com.br/habbo-imaging/avatarimage?
2. Definindo o usuário
Agora vamos definir o usuário que queremos consultar no servidor do Habbo para manipular, para isso é necessário o nome do personagem, o que é comum em geradores Habbo Editor Avatar Imager (Editor de imager Habbo), sendo assim é possível utilizar o nome de um personagem que exista naquele hotel local buscado (você configurou isso no passo 1). Também é possível utilizar a figura do personagem no lugar do nome do personagem, veja mais sobre isso em visuais Habbo, o que é comum em geradores Habbo Guarda-Roupa, Habbo Visuais.
Usuário:
<div class="info">Usuário:</div>
<input id="usuario" placeholder="ViaJovem" name="user" type="text">
Teremos o código "&user=ViaJovem" adicionado ao nosso link original, ficando assim:
http://www.habbo.com.br/habbo-imaging/avatarimage?&user=ViaJovem
3. Definindo a ação
Agora vamos definir a ação do nosso personagem, para isso vamos adicionar "&action=" no nosso link e complementar com o valor desejado, sendo que temos disponível várias ações diferentes. Veja que existem 3 tipos de ações (Ação no corpo do personagem, ação na mão esquerda e ação da mão direita).
<div class="info">Corpo: </div>
<select id="acao1" name="acao1">
<option value="">Nada</option>
<option value="std">Normal</option>
<option value="lay">Dormindo</option>
<option value="wlk">Andando (Animado)</option>
</select>
<div class="info">Corpo2: </div>
<select id="acao4" name="acao4">
<option value="">Nada</option>
<option value="sit">Sentado</option>
</select>
<div class="info">Esquerda: </div>
<select id="acao2" name="acao2">
<option value="">Nada</option>
<option value="respect">Respeito</option>
<option value="wav">Acenando (Animado)</option>
</select>
<div class="info">Direita: </div>
<select id="acao3" name="acao3">
<option value="">Nada</option>
<option value="crr">Mão esticada</option>
<option value="drk">Mão na boca</option>
<option value="blw">Mandando beijo</option>
</select>
Teremos o código "&action=std" adicionado ao nosso link original, ficando assim:
http://www.habbo.com.br/habbo-imaging/avatarimage?&user=ViaJovem&action=std
4. Definindo a direção do corpo
Agora vamos definir a direção do corpo do nosso personagem, para isso vamos adicionar "&direction=" no nosso link e complementar com o valor desejado, sendo que podemos usar valores entre 0 e 7.
&direction=2
Teremos o código "&direction=2" adicionado ao nosso link original, ficando assim:
http://www.habbo.com.br/habbo-imaging/avatarimage?&user=ViaJovem&action=std&direction=2
5. Definindo a direção da cabeça do personagem
Agora vamos definir a direção da cabeça do nosso personagem, para isso vamos adicionar "&head_direction=" no nosso link e complementar com o valor desejado, sendo que podemos usar valores entre 0 e 7.
&head_direction=2
Teremos o código "&head_direction=2" adicionado ao nosso link original, ficando assim:
http://www.habbo.com.br/habbo-imaging/avatarimage?&user=ViaJovem&action=std&direction=2&head_direction=2
6. Definindo o formato da imagem
Agora vamos definir o formato da imagem que queremos, para isso vamos adicionar "&img_format=" no nosso link e complementar com o valor desejado, sendo que podemos usar .png ou .gif.
Formato:
<div class="info">Formato:</div>
<select id="formato" name="formato">
<option value="png">PNG</option>
<option value="gif">GIF</option>
</select>
Teremos o código "&img_format=png" adicionado ao nosso link original, ficando assim:
http://www.habbo.com.br/habbo-imaging/avatarimage?&user=ViaJovem&action=std&direction=2&head_direction=2&img_format=png
7. Definindo os gestos faciais do personagem
Agora vamos definir a expressão facial que queremos, para isso vamos adicionar "&gesture=" no nosso link e complementar com o valor desejado.
Expressão:
<select id="rosto" name="rosto">
<option value="std">Normal</option>
<option value="spk">Falando</option>
<option value="sml">Sorrindo</option>
<option value="srp">Surpreso</option>
<option value="agr">Nervoso</option>
<option value="sad">Triste</option>
<option value="blw">Beijo</option>
<option value="eyb">Dormindo</option>
</select>
Teremos o código "&gesture=sml" adicionado ao nosso link original, ficando assim:
http://www.habbo.com.br/habbo-imaging/avatarimage?&user=ViaJovem&action=std&direction=2&head_direction=2&img_format=png&gesture=sml
⚠️ É possível fazer combinações com qualquer expressão facial, adicionando "wlk" ou "std", como "&action=wlk,wav" "&action=std,wav".
8. Definindo o frame
Agora vamos definir o frame da imagem que queremos, para isso vamos adicionar "&frame=" no nosso link e complementar com o valor desejado. Temos 4 opções de frame, ou seja, versões diferentes de uma mesma posição ao andar, basicamente são posições diferentes para os pés, o que ao juntar forma a versão do personagem caminhando. Os frames não estão disponíveis em todas ações e gestos, sendo possível visualizar as diferenças visuais apenas quando disponível.
Frame:
<div class="info">Frame:</div>
<select id="frame" name="frame">
<option value="1">Frame 1</option>
<option value="2">Frame 2</option>
<option value="3">Frame 3</option>
<option value="4">Frame 4</option>
</select>
Teremos o código "&frame=1" adicionado ao nosso link original, ficando assim:
http://www.habbo.com.br/habbo-imaging/avatarimage?&user=ViaJovem&action=std&direction=2&head_direction=2&img_format=png&gesture=sml&frame=1
9. Definindo se corpo inteiro ou apenas cabeça
Agora vamos definir se queremos a imagem do personagem completa ou apenas a cabeça na imagem final, para isso vamos adicionar "&headonly=" no nosso link e complementar com o valor desejado, sendo que podemos usar 0 ou 1.
<input type="checkbox" name="cabeca" id="cabeca" value="1">
<label for="cabeca">Apenas cabeça</label>
Teremos o código "&headonly=0" adicionado ao nosso link original, ficando assim:
http://www.habbo.com.br/habbo-imaging/avatarimage?&user=ViaJovem&action=std&direction=2&head_direction=2&img_format=png&gesture=sml&frame=1&headonly=0
10. Definindo o tamanho do personagem
Agora vamos definir o tamanho da imagem final, para isso vamos adicionar "&size=" no nosso link e complementar com o valor desejado, sendo que podemos usar "s" para pequeno, "m" para médio e "l" para grande.
Tamanho:
Pequeno
Normal
Grande
<div class="msg">Tamanho:</div>
<input type="radio" name="tamanho" value="s"> Pequeno
<input type="radio" name="tamanho" value="m" checked> Normal
<input type="radio" name="tamanho" value="l"> Grande
Teremos o código "&size=m" adicionado ao nosso link original:
http://www.habbo.com.br/habbo-imaging/avatarimage?&user=ViaJovem&action=std&direction=2&head_direction=2&img_format=png&gesture=sml&frame=1&headonly=0&size=m
11. Definindo os sinais do personagem (personalização)
Adicione sinais ao personagem, utilizando códigos entre 1 e 17.
Exemplo de link gerado:
https://www.habbo.com.br/habbo-imaging/avatarimage?&user=ViaJovem&action=std,sig=12&direction=2&head_direction=2&img_format=png&gesture=std&frame=1&headonly=0&size=m
⚠️ Também pode ser utilizado como &action=sig=1.
12. Definindo os itens de mão do personagem (personalização)
Adicione itens de mão ao personagem utilizando os códigos disponíveis. Use crr para segurar ou drk para beber:
<select id="objeto" name="objeto">
<option value="">Nenhum</option>
<option value="1">Leite</option>
<option value="2">Cenoura</option>
<option value="3">Sorvete de Baunilha</option>
<option value="5">Suco Bubblejuice</option>
<option value="6">Chá Refrescante</option>
<option value="9">Poção do Amor</option>
<option value="33">Calippo</option>
<option value="42">Saquê</option>
<option value="43">Suco de Tomate</option>
<option value="44">Líquido Radioativo</option>
<option value="45">Espumante Rosa</option>
<option value="46">Peixe</option>
<option value="47">Champanhe</option>
<option value="48">Refrigerante de Laranja</option>
</select>
13. Definindo animação da imagem (personalização)
Imagens animadas são compreendidas com a junção dos frames, estando disponível na junção de qualquer ação com wlk (andando) e/ou wav (acenando).
Acesse nosso gerador avatar em Habbo Imagem ou veja nosso código aberto em Gerador Habbo Codepen.
0 comentários :
Postar um comentário
Somente serão permitidos comentários de usuários do Google, Nome/Url e Anônimo. sendo que em Nome/Url é proibido colocar links de terceiros (deixe em branco).