Dynamic Signature

From VbGORE Visual Basic Online RPG Engine

(Redirected from Dynamic signature)

So you want something new and exciting for players on your server...you've thought of EVERYTHING, but are still looking to offer players something to show off all their hard work? We've all been there - so that is why I am here to offer you something new and different! You should give my vbgore dynamic info signature a spin =D

Using this code

While it is pretty much guaranteed that this script is 100% safe, secure and awesome - you take all responsibility for any damage you may cause your website / web server with any of this. Some of this coding might be a little unorthodox, incorrect, tedious etc. and there might be quicker, better ways, but it is what works best for myself and is the best way that I know how...USE AT YOUR OWN RISK!

What does it do?

  • It makes an image (in .png format) that shows a players stats and info
  • Updates EVERY time the image loads
  • Gives your players bragging rights without them having to say a word!

What does it take?

  • A working VbGore server (alothough it only reads from MySQL, there's no point in having this if your server isn't running :P)
  • Webhosting with PHP, GD Library, ability to read from your VbGore Database from your site (a.k.a. remote access) and the ability to alter the .htaccess file(s) on your webserver (don't know if you have these and want to find out? More info at the very bottom)
  • One .PNG image of your liking (something that shows off your server :P )
  • A little time and patience

Adding dynamic signatures

Assuming that you meet all of the requirements listed above - you start out by planning. I originally created this for the premium members and winners of special events on my server, so in my example, we will set this up once for each user. So on my webhost, I created a new folder called, "dynsigs". This folder will contain ALL signature images for the members who get one (again, in this example, I am making this on a per-player basis).

So now that we have a folder to hold all of them, fire up your favorite graphics creation program and create a new signature image (for this example, the image I have created is 400x110 pixels - the standard signature size, but you can use any size you'd like). Here is what I will use in this example:

Stats img.png

Save this image as "stats_img.png" and place it into your folder that will hold all of the player's signatures (remember I called it "dynsigs").

Now that we have that image done, open up your favorite html/php editor (I personally use crimson editor and recommend it for anyone who works with anything related to scripting). In a new document, copy and paste the following:

<php> <?PHP

$dbhost = 'localhost'; $dbuser = 'root'; $dbpass = 'password'; $dbname = 'vbgore'; $username = 'Playersname'; $serverdesc = 'My ORPG Server Name - visit us at www.mysite.com'; $pathtoimg = 'stats_img.png';

//Connect to the database $conn = mysql_connect("$dbhost","$dbuser","$dbpass"); $db = mysql_select_db("$dbname"); $conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql'); mysql_select_db($dbname);

//Pull the info from the row with $username as their name $query = "SELECT * FROM users WHERE name = '$username'"; $result = mysql_query($query); while($row = mysql_fetch_assoc($result)) {

   extract($row);

}

// Let's do a function, shall we? =D // Let's see if they are online and assign a variable if ($online == '0') { $reallyonline = 'Offline'; } else { $reallyonline = 'Online'; }


//Set up the image and font style(s) and color(s) Header ("Content-type: image/png"); $img_handle = imageCreateFromPNG("$pathtoimg"); $color = ImageColorAllocate ($img_handle, 0, 0, 0);


// Show your server's info, w00t! =D ImageString ($img_handle, 2, 25, 7, "$serverdesc", $color); //Show Players IGN and level ImageString ($img_handle, 3, 70, 23, "$name ($reallyonline)", $color); ImageString ($img_handle, 3, 70, 35, "Level:", $color); ImageString ($img_handle, 2, 115, 35, "$stat_elv", $color); // Show HP ImageString ($img_handle, 3, 70, 47, "HP:", $color); ImageString ($img_handle, 2, 93, 47, "$stat_hp_min", $color); ImageString ($img_handle, 2, 125, 47, "/", $color); ImageString ($img_handle, 2, 137, 47, "$stat_hp_max", $color); // Show MP ImageString ($img_handle, 3, 70, 59, "MP:", $color); ImageString ($img_handle, 2, 93, 59, "$stat_mp_min", $color); ImageString ($img_handle, 2, 125, 59, "/", $color); ImageString ($img_handle, 2, 137, 59, "$stat_mp_max", $color); // Show Gold ImageString ($img_handle, 3, 70, 71, "Gold:", $color); ImageString ($img_handle, 2, 108, 71, "$stat_gold", $color); // Show Player Description ImageString ($img_handle, 2, 25, 86, "$descr", $color);

ImagePng ($img_handle); ImageDestroy ($img_handle); //Close the Database connection just in case it didn't do it already mysql_close($conn);

?> </php>

Looks easy enough, right? No? Don't worry, you don't have to edit much, plus it's very straight forward :) Let me help you out here...

At the top, find these lines: <php> $dbhost = 'localhost'; $dbuser = 'root'; $dbpass = 'password'; $dbname = 'vbgore'; $username = 'Playersname'; $serverdesc = 'My ORPG Server Name - visit us at www.mysite.com'; $pathtoimg = 'stats_img.png'; </php>

All you have to do is change the values on the right to your information. So if My server had the following info: "The best ORPG for hamsters - visit us at www.hamstersforORPGS.com" and you wanted to make this image for a player named "ilovehamsters" Your setup would look like:

<php> $dbhost = 'localhost'; $dbuser = 'root'; $dbpass = 'password'; $dbname = 'vbgore'; $username = 'ilovehamsters'; $serverdesc = 'The best ORPG for hamsters - visit us at www.hamstersforORPGS.com'; $pathtoimg = 'stats_img.png'; </php>

Now, wasn't that simple? Alrighty, I recommend that before you do anything else that you save this as a .php file just to back it up. But if you want to skip that, go ahead and save this file as "<playername>.png" (that's right, a .png file!) where <playername> is the name of the player the signature is for (earlier I said it was for a player named "ilovehamsters" so the full name would be "ilovehamsters.png").

We're getting closer to being done! Now, that alone won't make it work...we have to do a little editing of the '.htaccess' file...so in your folder with the image(s) you just created, create a new file and call it ".htaccess" and add the following line:

<php> AddType application/x-httpd-php .png </php>

If you already have a .htaccess file, just add that to the end of the file and you'll be fine ;) So, now are we done? Well, we sure are! Let's just make sure that everything is working...

  • Upload the file to your webserver and then point your browser to the url of the player's image (in this example the url would be something like "www.yoursite.com/dynsigs/ilovehamsters.png") and check to see if you have something like this:

Stats final.png

If all info was done correctly, you should see your brand new dynamic info signature! Congrats! Now go share it with your players :P

Common Questions

  • To edit the location and font style of words just change the values inline

Example: <php> ImageString ($img_handle, 2, 25, 7, "$serverdesc", $color); </php> In that line, the position of the text is 25 pixels from the left, and 7 pixels from the top. And the font style is 2 (normal size, but not bold, play around with these values until you find something that looks good)

  • To edit the color of the font just change the value in the $color variable

Example: <php> $color = ImageColorAllocate ($img_handle, 0, 0, 0); </php> The three zeros in that line make the font black. Just change it to suit your needs (you can easily find the color you need by using the program "ToolColorCon.exe" that comes with VbGore). Remember, it HAS to be in RBG value =)

  • How to add different fields from the Database

Example: You want to add the value of X but don't know how to do it....well, that's no biggie ^^ Due to the way information is pulled from the database (via the code), all you have to do is add "$" to the beginning of any colum name to pull the information. So if you want to pull out a players experience points, you look for the colum that shows their exp. It is called "stat_exp". Now what do you do with that? Simple, just add a "$" infront of it and plug it into the output line like this: <php> ImageString ($img_handle, 2, 115, 35, "$stat_exp", $color); </php> That line will now show the players expeience points! How simple was that?! And it works FOR ALL columns in the row!

Adding HP and MP Bars

  • Start off by searching for the following code snippet from the code above:

<php> { $reallyonline = 'Offline'; } else { $reallyonline = 'Online'; } </php>

After that (a couple lines down), add the following lines of code: <php> //This one will get the HP Percentage (rounded of course =P) $hptotalpercent = round($stat_hp_min * 100 / $stat_hp_max); //This one will get the MP Percentage (rounded of course =P) $mptotalpercent = round($stat_mp_min * 100 / $stat_mp_max); </php>

  • Those two lines will find the percentage of both HP and MP rounded to the nearest whole number (by decimal - ie: 32.5 becomes 36).

Next you will have to set up the colors for the bars. Since this example already has a black color set, we will use it for the box around the bar(s). But we need to set you the colro red for HP and the color blue for MP. So find the following line in the code: <php> $color = ImageColorAllocate ($img_handle, 0, 0, 0); </php> After that line, add the following code: <php> $redcolor = ImageColorAllocate ($img_handle, 255, 0, 0); $bluecolor = ImageColorAllocate ($img_handle, 0, 0, 255); </php>

  • These lines declare red and blue for the bars (as is evident from the RGB values)

Okay, so it's time to set up the boxes. For the HP bar, add this code after the color lines you just added above: <php> // Set up how far from the left the red HP bar box starts $hpfromleft = '93'; // Now let's draw a rectangle for the HP % bar imagerectangle($img_handle, 92, 47, 193, 58, $color); // Now, lets FILL that with the red color for HP imagefilledrectangle($img_handle, $hpfromleft, 48, ($hptotalpercent + $hpfromleft), 57, $redcolor); </php>

  • The first line ($hpfromleft) tells the image how far from the left the red HP box will start from. You have to declare it in this spot, or the last command in line will not work.
  • The second line will set up the HP bar outline 92 pixels from the left, and 48 pixels down from the top. You should not have to change the dimensions, as it has 100 bars in between to be filled.
  • The last line will set up a solid red rectangle one pixel down and to the right of the outside box, essentially 'filling' the bar with the correct percentage of red.

Now, it's time to add the MP bar - it's almost the same, but uses blue, and is in a different spot. After the HP bar code from above, add the following lines of code to show the MP bar: <php> // Set up how far from the left the red HP bar box starts $mpfromleft = '93'; // Now let's draw a rectangle for the MP % bar imagerectangle($img_handle, 92, 60, 193, 71, $color); // Now, lets FILL that with the blue color for MP imagefilledrectangle($img_handle, $mpfromleft, 61, ($mptotalpercent + $mpfromleft), 70, $bluecolor); </php>

  • That will then show the blue MP bar just underneath the HP bar following the same guidelines listed above, but for MP).

Here is what the product should look like (the bars have replaced the actual amounts from the previous image):

Stats hpmp bars.png

Paperdolling The Player's Exact Character

Paperdolling is a little bit more difficult compared to everything else, but this should explain pretty much everything you will need to know in order to get it working! By following this tutorial, you could easily intigrate paperdolling into a control panel as well as the dynamic signatures...This process is not quick, nor easy - infact, it's very time consuming and can become rather difficult at times. Don't get discouraged though, this will show you how to get it running and it is easily worth the time and trouble =)

Firstly, you will need to find your folder that contains the signatures (above it is called "dynsigs"). In that folder, create another folder called "paperdoll". Once you have done that, create the following folders inside of the "paperdoll" folder (the folder names must be exact or you will have errors when loading the signature):

  • body
  • hair
  • head
  • weapon
  • wings

Next, create a 1 pixel by 1 pixel transparent .png. In this example, the transparent color is pink (255, 0, 255 in RBG) and it is VERY important that it is that color, more about this later on. Once you have created that, save it as "0.png" in every folder inside of the "paperdoll" folder (that means you'll save it as a transparent "0.png" in 5 folders).

Now that all five of those folders have a transparent 1x1 .png file, things get a little bit confusing. Go into your "Grh" folder for your client, and find the first set of wings...for this tutorial, we will use "Angel Wing" (ID: 1 in the "char_wings" column of the "users" table when worn and image name by default: "111.png"). Notice that when the player wears this wing, it shows the number "1" in the "char_wings" column. You will need to remember this number for something coming up.

Now since we don't want to show the whole image on the signature, we have to crop the image to show just the southern facing part like in the following image:

111.png

That full image should become:

111 2.png

  • Notice the background color is the pink again (255, 0, 255)
  • Notice the image IS NOT completely cropped around the wings, rather it starts at the very top left part of that single frame, THIS IS IMPORTANT because it will line up all wing images in the same way so you do not have to set the size up for each one. However, you can completely crop the bottom and right side of the image to the sides of the wings like shown above (and all other paperdoll images can be done the same way).

Alright, now save that as a transparent .png (again, the pink color is to be used as transparent) in the "wings" folder under the name "1.png". The reason it has to be named "1.png" is because remember earlier when you saw that it said the number "1" when the player was wearing it? That's how the image will know which one to show...Since when these wings are worn it says 1, we have to name it "1.png". If it said 43 when they are put on, we would name the image "43.png". Simple, no?

Now comes the part that takes the most time...do that for every paperdolling item (all bodies, hair, head, weapons and wings). If you come across an item such as "Ninja Stars" that do not paperdoll, but rather they set the paperdoll to "0", you do not have to create an image for them, because they will automatically use the "0.png" that you added to each folder at the beginning. Once done, you'll come up with something like these:

Dysig paperdoll preview.gif

  • Notice ALL images use pink (255, 0, 255) for transparency
  • Notice ALL of the images start from the top left corner of the single frame and are cropped to the bottom and right edges of the graphic itself.

After you are done with that very lengthy task, let's set up the code...we'll skip ahead a little and add all of the code instead of jumping back and fourth. Find the following lines of code:

<php> { $reallyonline = 'Offline'; } else { $reallyonline = 'Online'; } </php>

And add the following lines underneath them:

<php> //========================================================================== // Now, tell the signature where the paperdoll images are at and the name(s) //========================================================================== // wing number $wingimage = ("./paperdoll/wings/" . $char_wings . ".png"); // body number $bodyimage = ("./paperdoll/body/" . $char_body . ".png"); // Head number $headimage = ("./paperdoll/head/" . $char_head . ".png"); // Hair number $hairimage = ("./paperdoll/hair/" . $char_hair . ".png"); // Weapon number $weaponimage = ("./paperdoll/weapon/" . $char_weapon . ".png"); //Set up the color to be used for transparency $transparentcolor = ImageColorAllocate ($img_handle, 255, 0, 255); </php>

Those lines will tell the image which folder to look in for each image, plus the number, and that it should be a .png extension. And the last line will tell the signature that the pink color (255, 0, 255) will be the color that should be transparent.

After the lines you just entered, add these lines:

<php> // ==================================== // Now let's show the players paperdoll // ====================================

// Set up and show the wings $wing_img_handle = imageCreateFromPNG("$wingimage"); imagetruecolortopalette($wing_img_handle, true, 256); imagecolortransparent($wing_img_handle, $transparentcolor); imagecopy($img_handle, $wing_img_handle, 25, 35, 0, 0, imagesx($wing_img_handle), imagesy($wing_img_handle)); // Set up and show the body $body_img_handle = imageCreateFromPNG("$bodyimage"); imagetruecolortopalette($body_img_handle, true, 256); imagecolortransparent($body_img_handle, $transparentcolor); imagecopy($img_handle, $body_img_handle, 25, 35, 0, 0, imagesx($body_img_handle), imagesy($body_img_handle)); // Set up and show the head $head_img_handle = imageCreateFromPNG("$headimage"); imagetruecolortopalette($head_img_handle, true, 256); imagecolortransparent($head_img_handle, $transparentcolor); imagecopy($img_handle, $head_img_handle, 17, 16, 0, 0, imagesx($head_img_handle), imagesy($head_img_handle)); // Set up and show the head $hair_img_handle = imageCreateFromPNG("$hairimage"); imagetruecolortopalette($hair_img_handle, true, 256); imagecolortransparent($hair_img_handle, $transparentcolor); imagecopy($img_handle, $hair_img_handle, 17, 16, 0, 0, imagesx($hair_img_handle), imagesy($hair_img_handle)); // Set up and show the weapon $weapon_img_handle = imageCreateFromPNG("$weaponimage"); imagetruecolortopalette($weapon_img_handle, true, 256); imagecolortransparent($weapon_img_handle, $transparentcolor); imagecopy($img_handle, $weapon_img_handle, 25, 35, 0, 0, imagesx($weapon_img_handle), imagesy($weapon_img_handle)); </php>

To understand what all that code means, here is a breakdown:

$wing_img_handle = imageCreateFromPNG("$wingimage"); - Chooses the wing image
imagetruecolortopalette($wing_img_handle, true, 256); - makes the image true color (so we can make it transparent)
imagecolortransparent($wing_img_handle, $transparentcolor); - makes the image transparent

and the last line is a little more complex
imagecopy($img_handle, $wing_img_handle, 25, 35, 0, 0, imagesx($wing_img_handle), imagesy($wing_img_handle));
This line says put the wings at 25 pixels from the left and 35 pixels from the top in it's original size (represented by imagesx and imagesy). This is why when we cropped the images down we included the WHOLE single frame...all items will then line up correctly without any further formatting or editing, because they are all the same size and are placed exactly the same. Pretty clever, huh? ;-)

  • They have to be in that order to be placed in layers correctly (wings first, then body, head, hair and finally weapon). Otherwise you could end up with improper layering
  • You will have to manually line up all of the images depending on where you want to place them, but with the code above they all line up correctly like they do in game. This is what that code will create (that is an exact character on the left of the image):

Final paperdoll sig.png

  • You could easily use these same theories and have the background change depending on what map the player is currently on (ie: floorboards for shop, sand for a beach, etc) - the possibilities are endless!

Getting charname from URL

Since the charname is hardcoded in the script you would have to make a new script for every char. You can avoid this by getting the charname from the URL. Thats quite easy to do with PHP. Just replace <php> $username = 'Playersname'; </php> with <php> if (isset($_GET['user'])) { $username = $_GET['user']; } else { die("no charname given"); } </php> If you named your scipt xxx.png like said above renname it to anything.php. Then change your .htaccess file so it looks like this <php> RewriteRule ^/([a-z]+)\.png$ /anything.php?user=$1 </php> You can now open anything, like Spodi.png or ilovehamsters.png and it will display the dynamic signture for this char.

Note that however, this input may leave you open to SQL injection, and a malicious user could, if he wanted, edit his stats, give himself GM, or even wipe your database.

Sanitizing the input should stop this from occuring. See: http://uk3.php.net/mysql_real_escape_string

I used this function (Found on google):

<php>function sql_sanitize( $sCode ) {

       if ( function_exists( "mysql_real_escape_string" ) ) { // If PHP version > 4.3.0
               $sCode = mysql_real_escape_string( $sCode ); // Escape the MySQL string.
       } else { // If PHP version < 4.3.0
               $sCode = addslashes( $sCode ); // Precede sensitive characters with a slash \
       }
       return $sCode; // Return the sanitized code

}</php>

And changed

<php>$username = $_GET['user'];</php>

to

<php>$username = sql_sanitize($_GET['user']);</php>

Which should fix it.

Notes

  • There are infinate amounts of possibilites you can do with this script, mess around with it and try new things =)
  • You can have ANY size signature you want, just be sure you have the bandwidth for it

PHP, GD Library and .htaccess

  • Most free hosts won't include GD Library (and some don't even include php)
  • Just because you have PHP doesn't mean that you are able to use GD Library
  • Some web hosters will allow .htaccess file editing, and some won't

As always, the best way to find out if you have all three of these, is to search your hoster's site, forum or just email them and ask them. Respectable sites will email you back with the information you have requested =)

Other links

http://www.boutell.com/gd/ - For more information about GD Library

http://www.crimsoneditor.com/ - For info about crimson editor

Personal tools