[Tutorial] Making a dynamic signature for Twilight :: v2.0
Download version 3.2 of the script. Tutorial is still for version 2. Following this tutorial you won't get a working signature, however you will have a grasp of the principles and be able to modify v.3 easily. There is no update planned for the tutorial.
{Dynamic Signatures, Tutorial v.2} Hello everybody, So here comes a new version of my tutorial. This one has several major changes and I decided not to modify the previous tutorial as people can still learn and use the method decribed in it. And maybe I like to leave it as a mark from where I started. Changes This section is dedicated to those that are already familiar with dynamic signatures and/or my previous tutorial and want to have a quick look at what's new. The rest can skip this and known that the tutorial is still written for people who are beginners. Changes:
[1. Introduction] This tutorial explains how to create dynamic signatures for Twilight MU using PHP. It's an easy tutorial and although I said it's for beginners I do expect you to know what a webserver is, what Apache & PHP are (at least vaguely), and to be generally knowledgeable with computers (e.g. no help needed for creating folders). Some things that I will mention if they don't immediately make sense, or are not explained, it means you'll get it when you make it to that part while creating your signature. Again I am warning you that I am a n00b and that the things that make up this tutorial were learnt, copied, modified from others and sought with google. I can hardly take credit for 100% of this. Oh, and if your computer explodes while following it then you know why. [2. Things you will need]
[2. Installing XAMPP]OPTIONAL XAMPP is a webserver package including Apache, PHP, MySQL and others. We'll use it in this tutorial to create our signature and visualize it before uploading to our host. Also, using XAMPP is faster than working with a webserver because the changes to the script are faster visualized compared to communicating with the host and waiting for the host to communicate with twilightmuonline.com. First let's download the installer from http://www.apachefriends.org/en/xampp-windows.html . http://anime-quotes.info/dynamic_sig...ppdownload.png After downloading it double click for installing it. Leave everything as it is during instalation and wait for it to complete. After finishing it you should have a new icon on your desktop named "XAMPP Control Panel". Opening it shows: http://signature.elementfx.com/image...ntrolpanel.png From here we can Start/Stop Apache, the only thing we need. !Make sure you allow XAMPP when/if your firewall asks anything about it. Also, as far as I know, localhost communications don't need firewall ports opening, but if it doesn't work, then you might need to punch a whole for port 80 through your firewall. Press Start for Apache and minimize that window. http://anime-quotes.info/dynamic_sig...cherunning.png [3. Creating the folder structure] We are going to make a directory structure for our signature. This step refers to creating the directories for XAMPP (offline, on your PC); those who want to use hosting directly just create the folders on your server. The root folder of our XAMPP local server is located in C:\xampp\htdocs\ http://anime-quotes.info/dynamic_sig...ebsiteroot.png You can see we already have alot of stuff in there but it doesn't interest us. Just create the following folder structure: http://anime-quotes.info/dynamic_sig...rstructure.png We can access our signature by browsing the http://127.0.0.1/signature_example/sig.png/ address. At the moment nothing is there but keep the address handy as you'll view it again and again. [4. Copying the images] Verify that all is in order with the prepared signatures... http://anime-quotes.info/dynamic_sig.../signature.png http://anime-quotes.info/dynamic_sig...re_offline.png Name the one for when online signature.png and the other one signature_offline.png and copy them both to the C:\xampp\htdocs\signature_example\sig.png\images folder. [5. Copying the font] I will use the Smudger LET Plain:1.0 (TrueType) font. Download it on your PC and copy it to the C:\xampp\htdocs\signature_example\sig.png\font folder. For the old clients: observe that we can now use TTF (and OTF too) fonts. The gain is enourmous. We don't need to convert fonts anymore and even by the converting we did before we couldn't use fancy fonts because they all needed to be "pixelized" for php use. With the new script fonts look as they really do letting the creator to make more beautiful signatures. Also it's easier now that conversion is eliminated and fonts can be used in their original file format. As reference here's how the font would have had to look if we were using the old script: http://anime-quotes.info/dynamic_sig...conversion.png |
[6. Writing the main script]
This is the principal and longest part of the tutorial. Create a file in C:\xampp\htdocs\signature_example\sig.png\include\ named "generate.php". Open it (e.g. with notepad) and prepare for editing. I will explain the code as we write in the file. Just copy / paste the code sections into the file. I'll also use comments in the code itself, maybe it helps learning faster. Code:
<?php # the character name we send to the search function does NOT require to be cAsE SeNsItIvE (unlike in-game) so don't worry about it. # it's good practice to test the link between " " and make sure it works before continuing. # file_get_contents() gives us the HTML page (with the results of the search on it) which gets stored in the $site variable. Code:
//making matches # sytax: (.*) = any "something"(a wildcard). # $results0 array content will look like this after the above code is executed: http://anime-quotes.info/dynamic_sig...l/results0.png # as you see, what this code line did was to search in the HTML code (of the $site) for anything matching "<strong>ANYTHING </strong>". Here, the findings (two matches were found) were put in a matrix (or two-dimensional array), in the [0] it was put with the searched criteria included, and in [1] it was put without the search criteria. # note that [1][0] has the value of the on-line status. # if you get "Offline" at [1][0] don't be scared, it just means the character is offline, while at the moment I took that screenshot, it was online. # if you check the HTML code of the web page http://www.twilightmuonline.com/sear...hara=scyonnoou you will see that it contains. Code:
<td bgcolor=black width=30> # if you are wondering why we put "/<strong>(.*)<\/strong>/" instead of "<strong>(.*)</strong>" it's because, besides that the arguments must be contained between "/ /", some characters need to be escaped. "\" is used for escaping characters. If those characters aren't escaped the php compiler misinterprets what we are trying to do and will give errors. Code:
preg_match_all("/<td bgcolor=black width=30><font face=Arial size=2 font color=white>(.*)\((.*)\)\[(.*)\]<\/b><\/font><\/td>/", $site, $results1); //level, reset, elite switch # I am NOT sure if it's necessary to have such a long match, it might be possible to get the same readings with a smaller search criteria. I just wanted to be sure of what I get. # what the matrix $results1 contains after the code is executed: http://anime-quotes.info/dynamic_sig...l/results1.png # level, reset and the elite switch are contained in [1][0],[2][0] respectively [3][0]. # again don't get scared if values differ, the character might have gained additional levels/resets. Code:
preg_match_all("/<td bgcolor=black width=30><font face=Arial size=2 font color=white>([A-Za-z0-9]{1}|[A-Za-z0-9]{2}|[A-Za-z0-9]{3}|[A-Za-z0-9]{4}|[A-Za-z0-9]{5}|[A-Za-z0-9]{6}|[A-Za-z0-9]{7}|[A-Za-z0-9]{8})<\/b><\/font><\/td>/", $site, $results2); //strength, agility, vitality, energy, guild # syntax: [A-Za-z0-9] = any letter from A to Z that is upper-case + any letter from a to z that is lower-case + any number from 0-9; {4} = that occurs 4 times (e.g. this will detect a string like "n00b"); | = or; ( ) = marks the search criteria. # content of $results2 after execution of the line: http://anime-quotes.info/dynamic_sig...l/results2.png Now we finished with reading the site, we collected all the required data. Let's list the variables that hold the relevant values:
Code:
//Online status # imagesavealpha(), imagealphablending() are all PNG related functions, one saving the image's alpha channels, the other setting the blending mode. # creating a variable $imthat holds the image of the signature. # setting the color of the text we will use, using imagecolorallocate(); the 3 numbers after $im are the RGB values of the color; they have the same value that any other program will show (e.g. here, MSPaint): http://anime-quotes.info/dynamic_sig...torial/rgb.png # for the old clients: you notice I don't use imageantialias() anymore; it's because I discovered it's useful only when using php to draw lines, arcs, circles or w/e; also didn't notice any difference in quality between using and not using it. # for the old clients: you notice imagealphablending() gets the value "true" now; that's because "false" doesn't work with the fonts, makes them appear as blocks. Code:
//defining font Let's write the "easy" values first, leaving the if() ones for the end. Code:
//level # syntax: (<image we write on> , <font size; it isn't always the same with the value from Photoshop, but neither too far from it> , <angle; we can write at angles with this new function; 0 = 90degrees, normal standing text> , <X coordinate>, <Y coordinate> , <color for the text> , <font face> , <writing; here, we just dump the variable's value> ) # the X and Y coordinates will tell where to start writing from. They are equal to pixels. PHP calculates X & Y starting from top left corner of the image. http://anime-quotes.info/dynamic_sig...dimensions.png You should change them until they get in the desired position. Code:
//guild Code:
//reset # syntax: . (the dot) is used for concatenation of the two strings (resets and " Elite"). # for the old customers: you notice I don't use the 0rr if() case anymore; that's because I found out it works like this and the bug I thought I had wasn't real ... me n00b ^_^. Code:
//outputting image # because the output will be in a browser we set the header type and then output the image. # syntax: (<image to be output> [COLOR="Lucida Console"],[/COLOR] <file to output to; here, we put NULL because we don't want to save the file, we just want to show it directly> , <png compression; here, 9 ;maximum 9, minimum 0; remember, png compression is lossless> , <filters>) # I discovered imagedestroy() should always be used so the memory used by php for the image to be freed; I don't know if it's any use here as the script ends when the work with the image is done, but it's at least good practice. After you finished writing, save. Always save. Almost finished now, hang in there. |
[7. Writing the auxiliary script]
Don't be scared this one is very short. Create a file named index.php in C:\xampp\htdocs\signature_example\sig.png\and open it for editing. Copy / paste the following code in it. Code:
<?php I'll explain why we need this file (the "secret" of dynamic signatures): Our signature is dynamic and to actually see it we need to run the "generate.php" script. But if we want to use the signature on a forum, we can't use "http://server_address.com/signature_example/sig.png/include/generate.php" because the forum will only allow (and understand) something ending in an image extension. So we use a trick, we use our sig.png folder as a file. The forum will think of it as a image file, but when it accesses it from our server, the server knows it's a folder and (by default) the server runs any file .html or .php with the name "index". But index.php that we have will call the image-generating script throught the include() function. The script will generate an image and send response to index.php as a png. And behold, our signature is on forum (or wherever for that matter). [8. Restricting access]OPTIONAL Test your signature to see if it works by going to http://127.0.0.1/signature_example/sig.png/ . http://anime-quotes.info/dynamic_sig...tlocalhost.png If everything is in order, then we might consider "locking" the folders that are in sig.png/ so that anyone trying to access anything else except index.php (a.k.a our signature), to receive an HTTP Error 403 - Forbidden. Create a file named .htaccess on your PC and open it for editing. Add the folowing code. Code:
<Limit GET POST HEAD PUT DELETE>
http://anime-quotes.info/dynamic_sig...whereswhat.png My result: http://anime-quotes.info/dynamic_sig...nnoou/sig.png/ As I don't know whether he'll be online or not when you read this post here's static images of how the signatures look when online respectively offline: http://anime-quotes.info/dynamic_sig...oou_online.png http://anime-quotes.info/dynamic_sig...ou_offline.png [9. Uploading to your webserver]OPTIONAL This is piece of cake. Just archive (zip or w/e format) the signature_example folder, upload it to the webserver and extract it there. Will be accessible under http://server_address.com/signature_example/sig.png/ . You can put it in deeper folders too, it still works. ---- § ---- Finished *phew* Please email/pm me any questions you have, any discrepancies you find, any suggestions you have. I will modify posts if problems are found. Oh yah, and press here if you like all this nonsense ^_^. |
Thanks alooootttt man!!! very well explained (well i didnt read it all lol) but i will :D
|
omg perfect"
|
oh Wow... it looks really really really complicated o_O.
|
tried this for an hour...than i gave up :P
|
I get this
Parse error: parse error in C:\xampp\htdocs\signature_example\sig.png\include\ generate.php on line 6 Thers NOTHING wrong in that line!! Cry. T_T |
Paste that line here (between [ CODE ] [ /CODE ] tags :P ).
|
Quote:
Code:
<td bgcolor=black width=30> |
All times are GMT -5. The time now is 03:33 AM. |
Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
Copyright ©2006 - 2019 Twilight MU. All Rights Reserved