- Joined
- Dec 15, 2009
- Messages
- 1,386
- Reaction score
- 236
The Auto Trim Space and Displaying Character Name Script's.
What is this?
What is this?
Here's what I've done.
Auto trim out unused transparent pixels:
PHP:
public function trimImage()
{
$img = $this->image;
function vertical($img, $x, $y, $max)
{
for ($x; $x < $max; $x++)
{
$color = imagecolorsforindex($img, imagecolorat($img, $x, $y));
if ($color['alpha'] != 127) return false;
}
return true;
}
function horizontal($img, $x, $y, $max)
{
for( $y; $y < $max; $y++)
{
$col = imagecolorsforindex($img, imagecolorat($img, $x, $y));
if( $col['alpha'] != 127) return false;
}
return true;
}
$trim = array('top' => 0, 'bottom' => 0, 'left' => 0, 'right' => 0);
$size = array('x' => imagesx($img) - 1, 'y' => imagesy($img) - 1);
while( horizontal($img, $trim['left'] , 0, $size['y'])) $trim['left']++;
while( horizontal($img, $size['x']-$trim['right'] , 0, $size['y'])) $trim['right']++;
while( vertical($img, 0, $trim['top'], $size['x'])) $trim['top']++;
//while( vertical($img, 0, $size['y']-$trim['bottom'], $size['x'])) $trim['bottom']++;
$newWidth = $size['x'] - $trim['left'] - $trim['right'] + 1;
$newHeight = $size['y'] - $trim['top'] + 1;
$this->pushX = self::mainX - $trim['left'] - 15;
$this->image = imagecreatetruecolor($newWidth , $newHeight);
imagealphablending($this->image, false);
imagesavealpha($this->image, true);
imagecopyresampled($this->image, $img , 0, 0, $trim['left'], $trim['top'], $newWidth, $newHeight, $newWidth, $newHeight);
}Display individual character name's:
PHP:
public function displayName($name) {
$this->name = $name;
$font = 'arial.ttf';
$posY = self::neckY + 37; //text position
$M = 4; //margin
$boundary = imagettfbbox(9, 0, $font, $this->name);
$w = abs($boundary[4] - $boundary[0]);
$c = ($this->skinBodyW - $w) / 2;
$x = self::mainX + $this->stand - 9 + $c ;
$color = imagecolorallocate($this->image, 255, 255, 255); // character name color
$label = imagecolorallocatealpha($this->image, 0, 0, 0, 20); // label color & transparency supported
imagealphablending($this->image, false);
self::imagefilledrectangleRadius($x - $M, $posY - 10 - $M, $x + $w + $M, $posY + $M, 3, $label);
imagealphablending($this->image, true);
imagettftext($this->image, 9, 0, $x, $posY, $color, $font, $this->name);
}Instructions:
Bear in mind, I'l be using the scripts from MapleBit as reference.
1. Copy the scripts above into coordinates.php or Class file.
2. Download
You must be registered to see links
3. Download
You must be registered to see links
3. Place these files correctly.
4. Open up create.php or character.php or the main file.
5. Add $name into the Character class's as follows:
PHP:
$Image = new Character($name);6. Replace the original $oHash with:
PHP:
$oHash = mysqli_fetch_row($mysqli->query("SELECT `hash` FROM `gd_cache` WHERE `id` = '{$gotChar[0]}' LIMIT 1"));7. Add or replace the original one with:
Right after $Image->charType('create', $name);
PHP:
if($oHash[0]) {
$mysqli->query("UPDATE `gd_cache` SET `hash` = '".$nHash."', `x` = '".$Image->pushX."' WHERE `id` = '".$gotChar[0]."'");
} else {
$mysqli->query("INSERT INTO `gd_cache` VALUES ('".$gotChar[0]."','".$nHash."','".$Image->pushX."')");
}8. Create a new table and columns as follows:
I have my reason for not providing original SQL script. You'll see.
9. Now, in order to enable the scripts we've made earlier. We need to allocate them to our main file:
a) After $Image->createBody('body');
b) Add it after?
PHP:
$Image->displayName($name);b) Add it after?
PHP:
$Image->trimImage();12. Locate the Class file or coordinates.php and focus on __construct().
a) Before going further, do add $name into that function as follows:
PHP:
function __construct($name) {b) Add and replace into __construct:
PHP:
$width = 200;
$height = 187;
$this->cache = "Characters/".$name.".png";
$this->refreshInterval = 24 * 3600;
if(file_exists($this->cache) && (time() - $this->refreshInterval < filemtime($this->cache))) {
list($width, $height) = getimagesize($this->cache);
}
$this->image = ImageCreateTrueColor($width, $height);14. Turn into public function createBody($type) and add these:
PHP:
list($this->skinBodyW) = getimagesize("Skin/0000".$skin.".img/stand{$this->stand}.0.body.png");
list($this->skinHeadW) = getimagesize("Skin/0000".$skin.".img/front.head.png");15. Now, if you did everything right, you should be able to generate the images, again. This time, it will be smarter.
B O N U S
Now, if you wondered why I stored the variable x from trimImage(), of course I have my reason.
They are not aligned straightly, mainly because their width are individually different from each other.
To fix this, we need to create two new scripts or files. We'll need to implement an API and custom AJAX into our CMS. Once again, I'll clarify that I'm using MapleBit.
1. api.php
PHP:
<?php
require_once('../../config/database.php');
if (!empty($_GET['id'])) {
$id = $mysqli->real_escape_string($_GET['id']);
$array = mysqli_fetch_row($mysqli->query("SELECT * FROM gd_cache WHERE id = '".$id."'"));
echo json_encode($array);
}
?>2. Navigate to your ranking page and place these codes underneath the page before </body> *depends*
Code:
<script language="javascript" type="text/javascript" src="jquery.min.js"></script> <!-- CMS should have already included it. -->
<script type="text/javascript">
$("img").one("load", function() {
var charId = $(this).data('id');
$.ajax({
context: this,
url: "api.php",
data: { id: charId},
dataType: "json",
success: function(data) {
var id = data[0];
var hash = data[1];
var x = data[2];
$(this).css('margin-left',800-x);
$(this).parent().fadeIn();
}
});
}).each(function() {
if(this.complete) $(this).load();
});
</script>3. Let's attempt to test drive our api.php first.
You must be registered to see links
4. Congratulation! If it works. Otherwise, recheck your database.
5. Go back to the ranking page.
Add below codes into <img src="X.php" alt="X">
or
AND
or
PHP:
data-id=\"".$charId."\"
PHP:
data-id=".$charId."AND
PHP:
style=\"display: none\"
PHP:
style="display: none"Note: Make sure margin: 0 auto; or text-align: center; are all removed within the structure or <img> tag. *depends*
6. For those who are using MapleBits, you might need this. *You'll know very soon.*
Add style="width: 200px;\ into <td class="hidden-sm hidden-xs">
7. If everything is done correctly, they should now be aligned in a straight line.
D O W N L O A D
What does it includes?
- api.php
- arial.ttf
- coordinates.php
- create.php
- faek.png
- rankings.php
All based on MapleBit. I have made minor improvements to overall source. You might want to clean up unused scripts.
You must be registered to see links
E N D
I did a lot of research and dig into StackOverflow probably over 100+ times, due to the being an amateur at GD image and OOP, both.
For those who are curious, who did the trimImage() script, it was a guy from StackOverflow, can't remember his name though, but still i had to re-manage his script since he did not provide the entire script.
Thanks greenelfx for MapleBit, a million thanks to holthelper for his amazing contribution of his original script and MapleStory for being a great platform for me to grow. Appreciate OdinMs, MoopleDev, blah blah. so fourth and so on.
Right before I end this, I also did a very special variant which stands out the most, however it is extermely terrible due to fact that it was badly written. I've no choice unless I re-write it from scratch which I obviously won't.
*simulated image because I was too lazy to re-setup the script, the style changes on the fly based on the link.*
Good night!
Last edited:
