Shibby-Shabs
03-07-2011, 06:01 AM
This tutorial will go through how to make a Habbo avatar generator, it's really simple to do and therefore I'll be creating it in one file which for the tutorial we'll name gen.php gen being short for generator.
Habbo Imaging Link
http://www.habbo.com/habbo-imaging/avatarimage?user=shibby-shabs&direction=2&head_direction=2&action=wav&size=b
Above is a link that Habbo has provided, it allows us to generate the Habbo and add actions to it as well as change the direction. In the image below I've changed size=b to size=s so we're able to see the result without it taking a lot of room, b just means big and s means small. I'm also setting the action to action=wav (Not typo, actually wav not wave) so that the character waves. You should be able to adjust the variables to get the character you want.
http://www.habbo.com/habbo-imaging/avatarimage?user=shibby-shabs&direction=2&head_direction=2&action=wav&size=s
HTML Form
The form I use for the example is going to be basic with only the option to choose the username otherwise the tutorial will be to big and take more time to explain, I put extra variables you can add to the link at the bottom.
The form is coded through HTML but I'm going to echo it out because that's how we'll keep it on the same page.
<?php
echo "<form action='gen.php' method='post'>
Habbo Name: <input type='text' name='habbo'> <input type='submit' name='submit' value='Generate'>";
?>
Above I've set the action to gen.php which is the single page we'll be using, I set the method to post so that it won't show in the URL, ie. gen.php?habbo=. The below image is what it would look like.
http://i1207.photobucket.com/albums/bb470/JF_V30/Tutorial%20-%20Habbo%20Gen/gen_form.png
If The Button Has Been Pressed
The first part of the code is already there, this is where the form was echoed, the next part is checking whether the user has clicked the button "Generate". We do this with a simple if statement as seen below.
<?php
if (isset($_POST['submit'])) {
// more code will go here
}
echo "<form action='gen.php' method='post'>
Habbo Name: <input type='text' name='habbo'> <input type='submit' name='submit' value='Generate'>";
?>
}
The code above adds an if statement that checks if $_POST['submit'], which is the button, is set (or isset). If it returns true then it will carry on with the code, the form is not in the else result because we want to continue showing the form.
If The Text Field Is Empty
To test if the text field is empty (or ==null) when the button is pressed we do another if statement.
<?php
if (isset($_POST['submit'])) {
// The button has been pressed
if (!empty($_POST['habbo'])) {
$habbo_name = $_POST['habbo']; // Habbo name entered in form
echo "<img src='http://www.habbo.com/habbo-imaging/avatarimage?user=$habbo_name&direction=2&head_direction=2&action=wav&size=l'> <br />"; // HTML image display
}
else
echo "No habbo username was entered! <br />";
}
echo "<form action='gen.php' method='post'>
Habbo Name: <input type='text' name='habbo'> <input type='submit' name='submit' value='Generate'>
</form>";
?>
In the code above I added a if statement that check if $_POST['habbo'], which is the name of the text field, is not (!) empty (or !=null) then it creates a variable called $habbo_name which is equal (=) to $_POST['habbo'] so it's easier to write, then it echos out the link as shown in "Habbo Imaging Link" and where it has user= I put that as user=$habbo_name so it displays the name that the user entered. If the text field is empty then it echos an error message, I did this instead of using die(); so that it still displays the form.
Please note: for the else code I didn't use curly brackets because it was a single line of code.
The script is complete, you can style it if you want but it will usually just be integrated into a site.
Result: http://scripts.jspace.netai.net/gen.php
Imaging Link - More Actions
Below the list of actions that can be used to make the character move into different positions etc. These all go in action=
wav (Wave)
wlk (Walk)
drk=1 (Drink=id) Different drink ids produce different drinks
sit (Sit)
lay (lay)
If you want to use two fields then separate the actions with commas, eg. action=wlk,drk=1
Other Information
I've gotten a lot better since my last tutorial so if you need help then post in this thread. If you would like to put this tutorial on your website or another place please provide a link to this thread.
Tutorial written and coded by Shibby-Shabs, Jack. ( jspace.netai.net )
Moved from 'Design & Dev' by Recursion (Forum Moderator): Fantastic tutorial, keep it up! :)
Habbo Imaging Link
http://www.habbo.com/habbo-imaging/avatarimage?user=shibby-shabs&direction=2&head_direction=2&action=wav&size=b
Above is a link that Habbo has provided, it allows us to generate the Habbo and add actions to it as well as change the direction. In the image below I've changed size=b to size=s so we're able to see the result without it taking a lot of room, b just means big and s means small. I'm also setting the action to action=wav (Not typo, actually wav not wave) so that the character waves. You should be able to adjust the variables to get the character you want.
http://www.habbo.com/habbo-imaging/avatarimage?user=shibby-shabs&direction=2&head_direction=2&action=wav&size=s
HTML Form
The form I use for the example is going to be basic with only the option to choose the username otherwise the tutorial will be to big and take more time to explain, I put extra variables you can add to the link at the bottom.
The form is coded through HTML but I'm going to echo it out because that's how we'll keep it on the same page.
<?php
echo "<form action='gen.php' method='post'>
Habbo Name: <input type='text' name='habbo'> <input type='submit' name='submit' value='Generate'>";
?>
Above I've set the action to gen.php which is the single page we'll be using, I set the method to post so that it won't show in the URL, ie. gen.php?habbo=. The below image is what it would look like.
http://i1207.photobucket.com/albums/bb470/JF_V30/Tutorial%20-%20Habbo%20Gen/gen_form.png
If The Button Has Been Pressed
The first part of the code is already there, this is where the form was echoed, the next part is checking whether the user has clicked the button "Generate". We do this with a simple if statement as seen below.
<?php
if (isset($_POST['submit'])) {
// more code will go here
}
echo "<form action='gen.php' method='post'>
Habbo Name: <input type='text' name='habbo'> <input type='submit' name='submit' value='Generate'>";
?>
}
The code above adds an if statement that checks if $_POST['submit'], which is the button, is set (or isset). If it returns true then it will carry on with the code, the form is not in the else result because we want to continue showing the form.
If The Text Field Is Empty
To test if the text field is empty (or ==null) when the button is pressed we do another if statement.
<?php
if (isset($_POST['submit'])) {
// The button has been pressed
if (!empty($_POST['habbo'])) {
$habbo_name = $_POST['habbo']; // Habbo name entered in form
echo "<img src='http://www.habbo.com/habbo-imaging/avatarimage?user=$habbo_name&direction=2&head_direction=2&action=wav&size=l'> <br />"; // HTML image display
}
else
echo "No habbo username was entered! <br />";
}
echo "<form action='gen.php' method='post'>
Habbo Name: <input type='text' name='habbo'> <input type='submit' name='submit' value='Generate'>
</form>";
?>
In the code above I added a if statement that check if $_POST['habbo'], which is the name of the text field, is not (!) empty (or !=null) then it creates a variable called $habbo_name which is equal (=) to $_POST['habbo'] so it's easier to write, then it echos out the link as shown in "Habbo Imaging Link" and where it has user= I put that as user=$habbo_name so it displays the name that the user entered. If the text field is empty then it echos an error message, I did this instead of using die(); so that it still displays the form.
Please note: for the else code I didn't use curly brackets because it was a single line of code.
The script is complete, you can style it if you want but it will usually just be integrated into a site.
Result: http://scripts.jspace.netai.net/gen.php
Imaging Link - More Actions
Below the list of actions that can be used to make the character move into different positions etc. These all go in action=
wav (Wave)
wlk (Walk)
drk=1 (Drink=id) Different drink ids produce different drinks
sit (Sit)
lay (lay)
If you want to use two fields then separate the actions with commas, eg. action=wlk,drk=1
Other Information
I've gotten a lot better since my last tutorial so if you need help then post in this thread. If you would like to put this tutorial on your website or another place please provide a link to this thread.
Tutorial written and coded by Shibby-Shabs, Jack. ( jspace.netai.net )
Moved from 'Design & Dev' by Recursion (Forum Moderator): Fantastic tutorial, keep it up! :)