TUTORIAL - How to make GamerTags using PHP/MYSQL

thatjoshguy · 09-24-2008, 07:28 PM

Wow, I've been asked this a ton today!

I hope its alright to share a little bit, if this is in the wrong place I apologize!

If you're familiar with XboxLive or my awsome arcade www.iron-wookie.com, then you're probably familair with gamertags. They're like business cards for gamers, showing off their rank and stats. Here's one from my site:

As you can see, this is a static JPEG image... or is it? Yes and no...

The important (and cool) thing about a gamertag is that it stays up-to-date. That way, no matter where gamers embed their tag, they dont' have to re-upload it every time they get a new high score. While the above image IS a JPEG, it is generated on-the-fly, inserting the necessary data pulled from the user database!

Why is this good for your arcade? Well, besides being a neat little gimmic, it's also free advertising! If your users post their tags on their MySpace page, blog, whatever, you're getting exposure. Exposure is good.

WHAT YOU NEED:
First off, I've only tested this with PHP 5. It may work with PHP4, but I have no idea. The server your arcade resides on will also need to have the GD library installed. It also helps to know how to set up url rewrite rules. The reason is explained later.

HOW IT WORKS:
While the link to any of the gamertags on my site are formatted as http://www.iron-wookie.com/gamertag/(username).jpg, the file it accesses is not a true JPEG. By utilizing Apache's RewriteRules, what is actually being called is a php script that generates the corresponding gamertag to the username passed using GET. For instance, for my gamertag, the true url is http://www.iron-wookie.com/gamertag....me=thatjoshguy

When this script is called, it first runs a query in the SQL database that grabs all the user information for the user specified after "?name=". We get the avatar, username, EXP, rank, and a total of the high scores the user currently has, and save them to variables to be called later.

Code:

$user = $_GET['name']; //sets the name specified after name= as variable '$user'
 
$q = "SELECT user_name, exp, rank, scores, avatar FROM user_table WHERE user_name='$user' LIMIT 1"; //this will need modified to fit your setup
 
$r = @mysqli_query($dbc,$q); //this will need modified to fit your setup
$row = mysqli_fetch_assoc($r);
 
$name = $row['user_name'];
$exp = $row['exp'];
$rank = $row['rank'];
$avatar = $row['avatar']';

Now the magic happens.

Using the GD Library, we first load the main graphic. This acts as the background for the gamertag. Here's what i'm using:

Loading this image is done with a single line of code:

Code:

$rImg = ImageCreateFromJPEG('tag_blank.jpg');

Next, we'll define some colors to use later, as well as our font:

Code:

$white = imagecolorallocate($rImg, 255, 255, 255);
$grey = imagecolorallocate($rImg, 128, 128, 128);
$black = imagecolorallocate($rImg, 0, 0, 0);
$font = 'impact.ttf';

Make sure you upload the font file you want to use to your server, and specify where you put it in the above code!

Now that all that is done, let's start putting it all together.

My avatar images are 200x200, which is way to big! So, before adding it to the base graphic I want to resize it. Before I can do that however, I need to load it as a graphic as well!

Code:

$src = ImageCreateFromJPEG($avatar); //loads avatar image to be edited (from the variable)
 
imagecopyresized($rImg, $src, 4, 4, 0, 0, 90, 90, 200, 200);

Wait, wait, what are all those numbers? Dont' panic, it's simple.

imagecopyresized is the function. the name says it all, it copies the image and resizes it.
$rImg - this is my base graphic variable
$src - this is my avatar graphic variable
4, 4 - these are the x & y coordinates where the graphic will be inserted into the base graphic (upper left hand corner)
0, 0 - these are the x & y coordinates of where to start copying in the avatar graphic
90, 90 - these are the new avatar width/height measurements I want
200,200 - these are the original avatar width/height measurements

See? that wasn't so bad! Those two lines of code will take the base image, and then resize and insert the user's avatar. Sweet!

The text is even easier. Each bit of information gets it's own line of code, and they're pretty much all the same.

Code:

// Add the username
imagettftext($rImg, 20, 0, 104, 30, $white, $font, $name);
// Add the EXP
imagettftext($rImg, 10, 0, 130, 51, $white, $font, $exp);
// Add the rank
imagettftext($rImg, 10, 0, 140, 71, $white, $font, $rank);
// Add the scores
imagettftext($rImg, 10, 0, 150, 90, $white, $font, $scores);

Here's a breakdown of the first line, as they're all identical in form:

imagegettftext - again, this is the function name
$rImg - our base graphic again
20 - font size
104 - x coordinate for text
30 - y coordinate for text
$white - one of the colors we defined earlier
$name - the variable that contains the text to be printed

So there you go. I have four bits of info text to print, so four lines of code do just that for me!

But wait!!!!

This step is VERY important. We have to convince the web browser that this is in fact a JPEG, and not a php file being accessed!!! Luckily, there's a function built just for that in PHP:

Code:

header('Content-type: image/jpeg');
imagejpeg($rImg);

What this does is sets the file header as an image/jpeg, so the browser is under the assumption that what it's about to recieve is an image. Then, using the imagejpeg function, we build the graphic and send it on it's way!

REWRITE RULES:
The script a this point will work 100% and produce your image. The problem is a lot of places (like forums using BBCode and whatnot) will not let you insert an image formatted as www.yourdomain.com/gamertag.php?name=yaddayadda. The quickest and easiest way to get around this (and the only way I know of at all really) is to make sure your server has the ability to rewrite URLs. On apache, you can add something similar to this in your .htaccess file:

Code:

RewriteRule ^gamertags/(.*).jpg?$  gamertag.php?name=$1 [NC,L]

changing file names and whatnot where needed of course!

That's all there is to it folks! A few lines of code can go a long way

If you decide to use any of this, I would greatly appreciate a link back to www.iron-wookie.com. Of course I can't enforce this, but when I see a ton of these pop up everywhere I will eventually find you !

Of course, the code above is not 100% complete. There are some things you'll need to figure out for yourself, as each arcade script is different. I do not own any of the major scripts, so I won't be much help in modding your arcade, but if you have any questions I'll do what I can!

FlashMan · 09-24-2008, 08:13 PM

Thanks for posting. I'm a little unsure as to where I put the code.I can create my own graphic (with the same cordinates and everything) and keep the same code right? Does some code go in the profile, and then some goes in the database. I don't really know. PM me if it's easier for you. Thanks.

.11 · 09-24-2008, 08:14 PM

Well since you posted a tutorial, I had this planned for my arcade back in July it was gonna make it unique from other arcades.

When I saw your thread, I basically said "crap, I gotta think of some other features now." lol

It's a great idea right? Now they have a reason to go back and sign up to your site. That was my plan for returning visitors.

But shouldn't you make it go to their profile? But good work, it's nice to see it live.

wildfxp · 09-25-2008, 02:01 AM

Thank you for this wonderful tutorial. I'm sure it will help A LOT of people

thatjoshguy · 09-25-2008, 07:08 AM

Gamingguy - I would put the code in it's own file, like "gamertag.php" or whatever you want to call it. It doesn't have to be added to any other file, as it's a self-contained function. Then, wherever you want to display the gamertag you just use standard html like:

Code:

<img src="http://www.yourdomain.com/gamertag.php?name=username />

or, if you're using the rewrite rules

Code:

<img src="http://www.yourdomain.com/gamertag/username.jpg" />

Yes, you can use the same coordinates as I did... or you could make your completely different

.11 - yeah, sorry about that

I was going to keep it to myself, but I've learned a lot and gotten a lot of good feedback from members here, and wanted to contribute something. I personally think it's a good idea, else I wouldn't have done it! Your average member may not be willing to put your banner somewhere, but give them something to brag about and they'll show it to everyone and their mom!
It should probably link to their profile, or at least the website. On my arcade, I have a section called "My Wookie" that is the users control panel. I've put code they can copy and paste into any html editor to use their gamertag, I suppose I should add the link in that code too!

digitali16 · 09-25-2008, 01:47 PM

WOW Josh that was DA BOMB dude! thanks a lot for sharing this and this is the kind of stuff that I read the boards for and I hope more guys do more stuff like this. I sometimes make an attempt to do some meaty post from time to time as well.

thatjoshguy · 09-25-2008, 02:10 PM

my pleasure!

.11 · 09-27-2008, 05:18 PM

Yeah it true, gamers will brag about anything lol. When I am online the PS2 or Wii I see this, which is why I wanted to bring it to arcades. My only question is, why is your text low quality? Is that the effect of it?

I have been going be these gamertags for instruction and etc.

and they seem fine. One other thing does it use any traffic or something? If your site got, like 2000+ actual members online a day (not visitors). Would you host the gamertags on another server?

DarkStarRising · 09-27-2008, 05:48 PM

ThatJoshGuy,

That's a great idea. I hadn't even thought of it.

<--Goes to write some code up for it.

Thanks for sharing dude!

Chris

FlashMan · 09-27-2008, 06:50 PM

I'm starting to kinda get it. What do I upload to my mysql database?

09-24-2008, 07:28 PM	#1 (permalink)
thatjoshguy Contributing Member Join Date: Jun 2008 Posts: 29	TUTORIAL - How to make GamerTags using PHP/MYSQL Wow, I've been asked this a ton today! I hope its alright to share a little bit, if this is in the wrong place I apologize! If you're familiar with XboxLive or my awsome arcade www.iron-wookie.com, then you're probably familair with gamertags. They're like business cards for gamers, showing off their rank and stats. Here's one from my site: As you can see, this is a static JPEG image... or is it? Yes and no... The important (and cool) thing about a gamertag is that it stays up-to-date. That way, no matter where gamers embed their tag, they dont' have to re-upload it every time they get a new high score. While the above image IS a JPEG, it is generated on-the-fly, inserting the necessary data pulled from the user database! Why is this good for your arcade? Well, besides being a neat little gimmic, it's also free advertising! If your users post their tags on their MySpace page, blog, whatever, you're getting exposure. Exposure is good. WHAT YOU NEED: First off, I've only tested this with PHP 5. It may work with PHP4, but I have no idea. The server your arcade resides on will also need to have the GD library installed. It also helps to know how to set up url rewrite rules. The reason is explained later. HOW IT WORKS: While the link to any of the gamertags on my site are formatted as http://www.iron-wookie.com/gamertag/(username).jpg, the file it accesses is not a true JPEG. By utilizing Apache's RewriteRules, what is actually being called is a php script that generates the corresponding gamertag to the username passed using GET. For instance, for my gamertag, the true url is http://www.iron-wookie.com/gamertag....me=thatjoshguy When this script is called, it first runs a query in the SQL database that grabs all the user information for the user specified after "?name=". We get the avatar, username, EXP, rank, and a total of the high scores the user currently has, and save them to variables to be called later. Code: $user = $_GET['name']; //sets the name specified after name= as variable '$user' $q = "SELECT user_name, exp, rank, scores, avatar FROM user_table WHERE user_name='$user' LIMIT 1"; //this will need modified to fit your setup $r = @mysqli_query($dbc,$q); //this will need modified to fit your setup $row = mysqli_fetch_assoc($r); $name = $row['user_name']; $exp = $row['exp']; $rank = $row['rank']; $avatar = $row['avatar']'; Now the magic happens. Using the GD Library, we first load the main graphic. This acts as the background for the gamertag. Here's what i'm using: Loading this image is done with a single line of code: Code: $rImg = ImageCreateFromJPEG('tag_blank.jpg'); Next, we'll define some colors to use later, as well as our font: Code: $white = imagecolorallocate($rImg, 255, 255, 255); $grey = imagecolorallocate($rImg, 128, 128, 128); $black = imagecolorallocate($rImg, 0, 0, 0); $font = 'impact.ttf'; Make sure you upload the font file you want to use to your server, and specify where you put it in the above code! Now that all that is done, let's start putting it all together. My avatar images are 200x200, which is way to big! So, before adding it to the base graphic I want to resize it. Before I can do that however, I need to load it as a graphic as well! Code: $src = ImageCreateFromJPEG($avatar); //loads avatar image to be edited (from the variable) imagecopyresized($rImg, $src, 4, 4, 0, 0, 90, 90, 200, 200); Wait, wait, what are all those numbers? Dont' panic, it's simple. imagecopyresized is the function. the name says it all, it copies the image and resizes it. $rImg - this is my base graphic variable $src - this is my avatar graphic variable 4, 4 - these are the x & y coordinates where the graphic will be inserted into the base graphic (upper left hand corner) 0, 0 - these are the x & y coordinates of where to start copying in the avatar graphic 90, 90 - these are the new avatar width/height measurements I want 200,200 - these are the original avatar width/height measurements See? that wasn't so bad! Those two lines of code will take the base image, and then resize and insert the user's avatar. Sweet! The text is even easier. Each bit of information gets it's own line of code, and they're pretty much all the same. Code: // Add the username imagettftext($rImg, 20, 0, 104, 30, $white, $font, $name); // Add the EXP imagettftext($rImg, 10, 0, 130, 51, $white, $font, $exp); // Add the rank imagettftext($rImg, 10, 0, 140, 71, $white, $font, $rank); // Add the scores imagettftext($rImg, 10, 0, 150, 90, $white, $font, $scores); Here's a breakdown of the first line, as they're all identical in form: imagegettftext - again, this is the function name $rImg - our base graphic again 20 - font size 104 - x coordinate for text 30 - y coordinate for text $white - one of the colors we defined earlier $name - the variable that contains the text to be printed So there you go. I have four bits of info text to print, so four lines of code do just that for me! But wait!!!! This step is VERY important. We have to convince the web browser that this is in fact a JPEG, and not a php file being accessed!!! Luckily, there's a function built just for that in PHP: Code: header('Content-type: image/jpeg'); imagejpeg($rImg); What this does is sets the file header as an image/jpeg, so the browser is under the assumption that what it's about to recieve is an image. Then, using the imagejpeg function, we build the graphic and send it on it's way! REWRITE RULES: The script a this point will work 100% and produce your image. The problem is a lot of places (like forums using BBCode and whatnot) will not let you insert an image formatted as www.yourdomain.com/gamertag.php?name=yaddayadda. The quickest and easiest way to get around this (and the only way I know of at all really) is to make sure your server has the ability to rewrite URLs. On apache, you can add something similar to this in your .htaccess file: Code: RewriteRule ^gamertags/(.).jpg?$ gamertag.php?name=$1 [NC,L] changing file names and whatnot where needed of course! That's all there is to it folks! A few lines of code can go a long way If you decide to use any of this, I would greatly appreciate a link back to www.iron-wookie.com. Of course I can't enforce this, but when I see a ton of these pop up everywhere I will eventually find you ! Of course, the code above is not 100% complete. There are some things you'll need to figure out for yourself, as each arcade script is different. I do not own any of the major scripts, so I won't be much help in modding your arcade, but if you have any questions I'll do what I can! __________________ -ThatJoshGuy Iron-Wookie Arcade Last edited by thatjoshguy : 09-24-2008 at 07:36 PM. Reason: forgot something!*

09-24-2008, 08:13 PM	#2 (permalink)
FlashMan Senior Member Join Date: Sep 2008 Posts: 354	Thanks. Thanks for posting. I'm a little unsure as to where I put the code.I can create my own graphic (with the same cordinates and everything) and keep the same code right? Does some code go in the profile, and then some goes in the database. I don't really know. PM me if it's easier for you. Thanks.

09-24-2008, 08:14 PM	#3 (permalink)
.11 Preferred Member Join Date: Mar 2008 Posts: 193	Well since you posted a tutorial, I had this planned for my arcade back in July it was gonna make it unique from other arcades. When I saw your thread, I basically said "crap, I gotta think of some other features now." lol It's a great idea right? Now they have a reason to go back and sign up to your site. That was my plan for returning visitors. But shouldn't you make it go to their profile? But good work, it's nice to see it live. __________________ John McCain, Why So Serious?

09-25-2008, 02:01 AM	#4 (permalink)
wildfxp Senior Member Join Date: Aug 2008 Posts: 653	Thank you for this wonderful tutorial. I'm sure it will help A LOT of people __________________ ADD MY NEW FACEBOOK APPLICATION! SUPPORT ME Buy one of my shares!! Founder of http://www.bloggin-ads.com Free online games and you Play Games Win Prizes Fun Online Games http://www.flashfort.com - under heavy construction http://www.neverwink.com - working on (I own myself)

09-25-2008, 07:08 AM	#5 (permalink)
thatjoshguy Contributing Member Join Date: Jun 2008 Posts: 29	Gamingguy - I would put the code in it's own file, like "gamertag.php" or whatever you want to call it. It doesn't have to be added to any other file, as it's a self-contained function. Then, wherever you want to display the gamertag you just use standard html like: Code: <img src="http://www.yourdomain.com/gamertag.php?name=username /> or, if you're using the rewrite rules Code: <img src="http://www.yourdomain.com/gamertag/username.jpg" /> Yes, you can use the same coordinates as I did... or you could make your completely different .11 - yeah, sorry about that I was going to keep it to myself, but I've learned a lot and gotten a lot of good feedback from members here, and wanted to contribute something. I personally think it's a good idea, else I wouldn't have done it! Your average member may not be willing to put your banner somewhere, but give them something to brag about and they'll show it to everyone and their mom! It should probably link to their profile, or at least the website. On my arcade, I have a section called "My Wookie" that is the users control panel. I've put code they can copy and paste into any html editor to use their gamertag, I suppose I should add the link in that code too! __________________ -ThatJoshGuy Iron-Wookie Arcade

09-25-2008, 01:47 PM	#6 (permalink)
digitali16 Senior Member Join Date: Oct 2007 Posts: 499	WOW Josh that was DA BOMB dude! thanks a lot for sharing this and this is the kind of stuff that I read the boards for and I hope more guys do more stuff like this. I sometimes make an attempt to do some meaty post from time to time as well. __________________ Fun Online Games \| Sonic and Mario Games \| Trade arcade traffic 1:1 Our New Arcade script is coming to the market soon!

09-25-2008, 02:10 PM	#7 (permalink)
thatjoshguy Contributing Member Join Date: Jun 2008 Posts: 29	my pleasure! __________________ -ThatJoshGuy Iron-Wookie Arcade

09-27-2008, 05:18 PM	#8 (permalink)
.11 Preferred Member Join Date: Mar 2008 Posts: 193	Yeah it true, gamers will brag about anything lol. When I am online the PS2 or Wii I see this, which is why I wanted to bring it to arcades. My only question is, why is your text low quality? Is that the effect of it? I have been going be these gamertags for instruction and etc. and they seem fine. One other thing does it use any traffic or something? If your site got, like 2000+ actual members online a day (not visitors). Would you host the gamertags on another server? __________________ John McCain, Why So Serious?

09-27-2008, 05:48 PM	#9 (permalink)
DarkStarRising Member Join Date: May 2008 Posts: 15	ThatJoshGuy, That's a great idea. I hadn't even thought of it. <--Goes to write some code up for it. Thanks for sharing dude! Chris

09-27-2008, 06:50 PM	#10 (permalink)
FlashMan Senior Member Join Date: Sep 2008 Posts: 354	I'm starting to kinda get it. What do I upload to my mysql database?

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode