[Tutorial]Making a dynamic signature for twilight
Hello everybody,
Update info Updated again with a link to XAMPP, a web server that can be installed locally and easier than installing Apache and PHP separately. You can now try your dynamic signatures on your own computer before uploading somewhere or giving them to someone who can host.I updated the tutorial to work with and to output PNG images, which is better quality than JPG, partly because PHP handles JPG badly, not outputting them at maximum quality (comparison included at the end of tutorial). Other minor updates includes the introduction of a 0rr if() case, another textcolor variable, to paint in red some status messages and renaming the prepared signature to "signature" instead of "signature0". Thread appearance slightly updated to be more readable on linux; smileys introduced. -- § -- I will try to explain how to do a dynamic signature for Twilight MU using php. WARNING: I AM A N00B. THE THINGS I WILL EXPLAIN WERE LEARNT FROM OTHERS' WORK AND BY COPY / PASTING AND MODIFYING. SO DON'T EXPECT ANY FLAWLESSNESS OR BRILLIANCE FROM ME. [0. Things you will need]
[1. Creating the folders] First of all let's make the directory structure on the server. Note: ! the "[ ]" brackets are NOT part of the folder name. ! the folder "public_html" is the root folder of your site, you do NOT need to create it (it's already there in fact). ! the tutorial is updated to use png but you still see "/sig.jpg/" in the structure and you may be confused. Don't be! sig.jpg is just a folder and it's irrelevant to the outcome of the filetype; I did not change the folder structure for convenience. If still in doubt use sig.png as foldername and get on with it. http://signature.elementfx.com/image...rstructure.png [2. Uploading the prepared signature] Verify that all is in order with the prepared signature... http://signature.elementfx.com/images/signature.png ... name it "signature.png" and upload it to the "./sig_example/sig.jpg/images/" folder. [3. Converting & Uploading the desired font] OPTIONAL I will use the "HaxrCorp 4088" font. Download it on your PC and copy it to the "C:\Windows\Fonts\" folder. Run "wftopf.exe" and select the settings as show in picture. Note: ! You do NOT need to have PHP installed on your PC in order to run and use this application. ! It is useful to delete what is written in the "Preview" box and put there numbers, the guild name, "YES" and "NO" to see if they look how you planned. For example, I tested the font in Photoshop to see how it would look if I use it on the signature, and then I used this program and modified the "Heigh" & "Width" settings until they looked like what I had in photoshop. ! It might be quite difficult to find the propper "Heigh" & "Width" settings. If the size of the planned font was declared as "14" in photoshop, it does NOT mean that if you put 14 at "Height" it will be the same. http://signature.elementfx.com/images/wftopf.png After you obtained the desired look, save the font as "font.gdf" and upload it to "./sig_example/sig.jpg/gd_fonts/" on the server. to be continued... |
[4. Writing the main script]
This is the principal and longest part of the tutorial. http://signature.elementfx.com/image...e-fighter1.png Create a file on your PC 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. Code:
<?php # imageantialias, imageSaveAlpha and imagealphablending are png related settings that I am unsure what they do http://signature.elementfx.com/images/smileys/silly.png ; they are necesary for they make the signature to have alpha transparency (for example my signatures have cut corners that are transparent, whereas were they jpg that corner would have been filled with a color). Code:
$site = file_get_contents("http://www.twilightmuonline.com/search.php?chara=zukih28s"); # 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:
preg_match_all("/<strong>(.*)<\/strong>/", $site, $results0); # sytax: (.*) = any "something". # $results0 array will look like this after the above code is executed: http://signature.elementfx.com/images/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 check the HTML code of the web page http://www.twilightmuonline.com/sear...chara=zukih28s 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); # 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://signature.elementfx.com/images/results1.png # level, reset and elite reset are contained in [1][0],[2][0] respectively [3][0]. 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); # 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: http://signature.elementfx.com/images/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:
$textcolor = imagecolorallocate($im, 48, 255, 0); # the 3 numbers after $im are the RGB values for the colors I chose (a shade of green complementary to pink, and red for second). They have the same value that any other program will show (e.g. here, Photoshop): http://signature.elementfx.com/images/RGB.png Code:
$font = imageloadfont("gd_fonts/font.gdf"); Code:
imagestring($im , $font , 38 , 5, $results1[1][0] , $textcolor ); # syntax: (<image we write on (here, $im)>, <font we will use; if you don't use another font, here you will write the size of the font (1 to 5)> , X coordinate , Y coordinate , <what to write; here, we just dump the variable's value> , <colour of font>) # the X and Y coordinates will say where to start writing from. They are equal to pixels. PHP calculates X & Y starting from top left corner of the image. http://signature.elementfx.com/images/graph.png You should change them until they get in the desired position. Code:
if ( $results1[2][0] == NULL ) { # if the character is 0rr we display 0 in red color Code:
imagestring ( $im , $font , 41 , 25, $results2[1][0] , $textcolor ); # you notice that we don't write elite reset and command, but they can be written if needed. For Command you just need to insert one more similar line of code and ajust it where to be written. For elite reset you can add it too but it's just a switch (0 or 1) so you would rather do a signature that writes already you are elite and just display the usual resets. In this case elite rr and command aren't needed on the signature. Code:
if ($results2[1][5]==NULL){ Code:
if ($results0[1][0]=="Online"){ Code:
header("Content-type: image/png"); # because the output will be in a browser we set the header type and then output the image. # syntax: (<image to be output> , <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, 0 ;maximum 9; remember png compression is lossless, it's just that I haven't tried the setting yet that I left it 0>, <filters>) After you finished writing, save and upload "generate.php" to "./sig_example/sig.jpg/includes/". Almost finished now, hang in there http://signature.elementfx.com/image...ys/soldier.png. |
[5. Writing the auxiliary script]
Don't be scared this one is very short. http://signature.elementfx.com/image...s/struggle.png Create a file named "index.php" on your PC 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/sig_example/sig.jpg/includes/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.jpg" 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). [6. Restricting access] Test your signature to see if it works by going to http://<the address of your server>/sig_example/sig.jpg/ . If everything is in order, then we might consider "locking" the folders that are in "sig.jpg/" 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://signature.elementfx.com/image...rstructure.png My result: http://signature.elementfx.com/sig_example/sig.jpg/ Here is a result using the old script that output jpg: http://signature.elementfx.com/sig_example_jpg/sig.jpg/ ---- § ---- Finished *phew* http://signature.elementfx.com/images/smileys/party.png 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 ^_^. |
Nice guide ^^
|
Phoenix approves !!!111 yey
|
Good.... u forgot to make dynamic part for Elite reset :)
|
Sry for spamming, Quest pls check ur mail in game, i got a Q for u about this script..
|
Quote:
Quote:
Quote:
Also thanks goes to Lizi for pointing out a mistake with one of the pictures. ("Thanks Lizi!"). |
w00t thanks Quest! All worked perfect.
Il reward you soon^^. Tnx for all the help bro. Sry to spam btw XD |
wow
i want 1 me too |
All times are GMT -5. The time now is 12:48 AM. |
Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
Copyright ©2006 - 2019 Twilight MU. All Rights Reserved