웹마스터 팁
page_full_width">
PHP로 아바타를 구현해 봅시다.
2002.05.13 14:03
http://funmuhan.com/avatar/avatar_exam.php아바타를 그려주는 소스입니다.
서버에서 GD를 지원해야 하며 GD를 지원하지 않으면 사용하실 수 없습니다.
개인 서버라면 리눅스에서는 PHP 컴파일시 GD옵션을 주시고 윈도우즈에서는
보통 기본적으로 GD가 지원됩니다. (그렇죠?.. 아니면.. GD깔아주세요 -0-..)
아래 보여지는 소스는 제가 운영에 참가하고 있는 게임에서 사용자들이 입은 장비를
홈페이지에서 아바타로 적용시키기 위해 만든 소스 입니다.
그래서 바로 가져다 쓰실수는 없겠지만 조금만 수정하신다면 사용하실 수 있습니다.
또한 이 소스는 사용자 의상데이타가 파일로 저장된것을 사용합니다.
DB로 저장하시려면 아래 '사용자의상정보가 담긴 화일 로드' 부분을 손보시면 됩니다.
의상 이미지 화일은 66*150으로 셋팅되어 있습니다. 크기 변경시 해당 부분 수정하시면 됩니다.
의상 이미지는 투명이미지를 지원하는 png를 사용했습니다. gif은 GD에서 기본적으로는 지원하지
않기 때문입니다.gif을 사용하시려면 gif을 지원하는 GD를 까시면 됩니다.
아바타가 그려지는 기본원리에 대한 설명
GD함수는 이미지관련함수입니다.
우리가 아바타에서 사용하려는 GD함수는 imagecreatefromPNG,imagePNG,imagecopy,imagedestroy
입니다.
간단히 설명하자면
ImageCreateFromPNG함수는 해당 PNG화일을 불러오는 기능을 합니다.
ImagePNG함수는 GD처리된 이미지를 화일로 저장할때 사용합니다.
ImageCopy(arg1,arg2,,,,,width,height)함수는
이미지 처리 함수중 하나로서 arg1이미지에 arg2이미지를 width,height크기에 덮어씌우는 기능을 합니다.
ImageDestroy함수는 사용된 이미지를 제거하는데 사용합니다.(화일을 지우는 의미는 아닙니다.)
자세한 함수설명은 해당 서적이나 사이트를 참고하시기 바랍니다.
imageCreateFromPNG로 불려온 이미지는 ImageCopy함수에 의해 합쳐집니다.
합쳐진 이미지의 상태는 쉽게 설명하자면 본이미지가 아래층 layer에 있고
그 다음 합쳐지는 이미지가 그 위층 layer에 합쳐집니다.
그렇게 되면 아바타의 기본몸통에 의상이 그 위에 겹쳐져서 그려지게 됩니다.
GD함수는 이렇게 이미지처리만 해줍니다.그럼 처리된 이미지를 화일로 저장해야 하는데
그때 사용하는 함수가 ImagePNG입니다. GIF화일이라면 ImageGIF과 같이 사용합니다.
화면에 뿌려줄때는 html태그인 img태그를 쓰셔야 합니다.
<?
/*
소스파일 :draw_avatar.php
작성자 :zzony
작성일 :4월 26일
수정일 :4월 29일
용 도 :Drawing Avatar
*/
/************************************************************/
/* 기본세팅 로드 */
/***********************************************************/
include "db_config.inc";
$home_id=$loginuserid;
$avatar_path="avatar/images/";
/**********************************************************************/
/*게임아이디와 홈페이지아이디 매치 (홈에서만 사용할경우 구현필요없음 )*/
/**********************************************************************/
$quex = "select mudid from avatar_mud_id where homeid="" . $home_id . """;
$reselt = mysql_query($quex,$db_connectx);
$mud_id = mysql_fetch_array($reselt);
/*********************************************************
사용자의상정보가 담긴 화일 로드
ex)사용자의상정보가 담긴 화일. zzony.ava
{하미스릴} {흰갑옷}
(null)
{하벌쳐} {빨러쉬}
{파예랑}의 {빨빨간 몸빼바지}
(null)
(null)
(null)
(null)
(null)
(null)
(null)
(null)
(null)
(null)
(null)
(null)
(null)
(null)
{파쌍안경}
(null)
위 구성에서 입지 않은 몸 부분.. 은 null처리하며 구조 변경시 별도의 수정필요.
****************************************************************************/
$file_name="avatar/mud_link/" . $mud_id[0];
$file=fopen($file_name,"r");
$wear=fread($file,filesize($file_name));
fclose;
$datax=split("n",$wear);
/************************************************************
의상이름과 매치되는 이미지화일탐색 저장
// BODY 0
// ARMS 1
// LEGS 2
// NECK 3
// HANDS 5
// HEAD 6
// FEET 7
// FINGER 8
// FINGER1 8
// FINGER2 9
// HELD 16
// SHIELD 17
// FACE 18
// WIELD 19
DB구조
+-------+--------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+-------+--------------+------+-----+---------+----------------+
| uid | int(11) | | PRI | NULL | auto_increment |
| name | varchar(128) | | | | |
| image | varchar(128) | | | | |
+-------+--------------+------+-----+---------+----------------+
******************************************************************/
for ($i=0;$i<20;$i++) {
$sqlx = "select image from avatar_mud_table where name="" . $datax[$i] . """;
$resultx=mysql_query($sqlx,$db_connectx);
$db_image[$i]=mysql_fetch_array($resultx);
}
/***********************************************************/
/* 아바타 이미지 처리 부분 */
/***********************************************************/
/*기본세팅*/
$img_mom=ImageCreateFromPng("avatar/images/base_mom.png");
$img_head=ImageCreateFromPng("avatar/images/base_head.png");
imagecopy($img_mom,$img_head,0,0,0,0,66,150);
$image_id="avatar/character/".$home_id . ".png";
imagePng($img_mom,$image_id);
$vir_img=imagecreatefrompng($image_id);
imagedestroy($img_mom);
imagedestroy($img_head);
/*얼굴변경*/
if ($db_image[18][image]){
$faces=imagecreatefrompng($avatar_path.$db_image[18][image]);
imagecopy($vir_img,$faces,0,0,0,0,66,150);
imagePng($vir_img,$image_id);
imagedestroy($faces);
}
else {
$faces=imagecreatefrompng("avatar/images/base_head.png");
imagecopy($vir_img,$faces,0,0,0,0,66,150);
imagePng($vir_img,$image_id);
imagedestroy($faces);
}
/*머리변경*/
if ($db_image[6][image]){
$heads=imagecreatefrompng($avatar_path.$db_image[6][image]);
imagecopy($vir_img,$heads,0,0,0,0,66,150);
imagePng($vir_img,$image_id);
imagedestroy($heads);
}
else {
$heads=imagecreatefrompng("avatar/images/base_hair.png");
imagecopy($vir_img,$heads,0,0,0,0,66,150);
imagePng($vir_img,$image_id);
imagedestroy($heads);
}
/*하의변경*/
if ($db_image[2][image]){
$pants=imagecreatefrompng($avatar_path.$db_image[2][image]);
imagecopy($vir_img,$pants,0,0,0,0,66,150);
imagePng($vir_img,$image_id);
imagedestroy($pants);
}
else {
$pants=imagecreatefrompng("avatar/images/base_pants.png");
imagecopy($vir_img,$pants,0,0,0,0,66,150);
imagePng($vir_img,$image_id);
imagedestroy($pants);
}
/*상의변경*/
if ($db_image[0][image]){
$shirts=imagecreatefrompng($avatar_path.$db_image[0][image]);
imagecopy($vir_img,$shirts,0,0,0,0,66,150);
imagePng($vir_img,$image_id);
imagedestroy($shirts);
}
else {
$shirts=imagecreatefrompng("avatar/images/base_shirts.png");
imagecopy($vir_img,$shirts,0,0,0,0,66,150);
imagePng($vir_img,$image_id);
imagedestroy($shirts);
imagedestroy($vir_img);
}
/*아바타 이미지 표현 */
echo " <img src='avatar/character/" .$home_id . ".png' border=0 >";
mysql_close($db_connectx);
?>
여기까지가 소스입니다.
이 소스는 사용자가 아바타를 보게 될때마다 그려줍니다.속도면에서 안좋습니다만
이렇게 구성한 이유는 게임상에서 장비가 수시로 변하기 때문입니다.
여러분들이 홈페이지에서 사용하실때는 그럴 필요가 없으니 사용자가 의상선택후 저장할때만 처리해주면 되겠군요.
그리고 뿌려주실때는 ID.png화일만 불러주시면 되겠습니다.
그런 수정은 각자의 홈페이지 상황에 맞게 수정하시기 바랍니다.
그리고 제로보드에 적용하시려면 다음처럼 해주시면 됩니다.
예를 들어 코멘트작성한 사용자 아바타를 코멘트아이디옆에 표현할때 제가 사용한 방법입니다.
제로보드의 view.php에서
// 코멘트 출력;;
이란 곳이 있는데 이부분에다가 다음을 추가해주시면 됩니다.
if($c_data[ismember]>0){//회원이라면
if(!$connect) $connect=dbConn(); // DB 연결
$avatar_temp=mysql_fetch_row(mysql_query("select user_id from zetyx_member_table where no={$c_data[ismember]}"));
$avatar_id=$avatar_temp[0];
if(file_exists("../avatar/character/" . $avatar_id . ".png")){
$avatar_confirm_temp=mysql_fetch_row(mysql_query("select homeid from avatar_mud_id where homeid="".$avatar_id ."""));
$avatar_confirm=$avatar_confirm_temp[0];
if($avatar_id==$avatar_confirm){
$comment_name="<img src='../avatar/character/" . $avatar_id . ".png' width='33' height='75' border=0 align='absmiddle'>".$comment_name;
}
}
}
기타 아바타를 표현해주고 싶은곳이 있다면 위와같은 식으로 view파일에 추가해주시면 됩니다.
좀 더 쉽게 설명하려고 글을 썻다가 .. 너무 난잡해지는 경향이 있어서 간단히 설명을 붙였습니다.
궁금하신게 있으시거나 사용상에 문제가 있다면 코멘트 달아주세요.최대한 자세히 설명해드리겠습니다.
서버에서 GD를 지원해야 하며 GD를 지원하지 않으면 사용하실 수 없습니다.
개인 서버라면 리눅스에서는 PHP 컴파일시 GD옵션을 주시고 윈도우즈에서는
보통 기본적으로 GD가 지원됩니다. (그렇죠?.. 아니면.. GD깔아주세요 -0-..)
아래 보여지는 소스는 제가 운영에 참가하고 있는 게임에서 사용자들이 입은 장비를
홈페이지에서 아바타로 적용시키기 위해 만든 소스 입니다.
그래서 바로 가져다 쓰실수는 없겠지만 조금만 수정하신다면 사용하실 수 있습니다.
또한 이 소스는 사용자 의상데이타가 파일로 저장된것을 사용합니다.
DB로 저장하시려면 아래 '사용자의상정보가 담긴 화일 로드' 부분을 손보시면 됩니다.
의상 이미지 화일은 66*150으로 셋팅되어 있습니다. 크기 변경시 해당 부분 수정하시면 됩니다.
의상 이미지는 투명이미지를 지원하는 png를 사용했습니다. gif은 GD에서 기본적으로는 지원하지
않기 때문입니다.gif을 사용하시려면 gif을 지원하는 GD를 까시면 됩니다.
아바타가 그려지는 기본원리에 대한 설명
GD함수는 이미지관련함수입니다.
우리가 아바타에서 사용하려는 GD함수는 imagecreatefromPNG,imagePNG,imagecopy,imagedestroy
입니다.
간단히 설명하자면
ImageCreateFromPNG함수는 해당 PNG화일을 불러오는 기능을 합니다.
ImagePNG함수는 GD처리된 이미지를 화일로 저장할때 사용합니다.
ImageCopy(arg1,arg2,,,,,width,height)함수는
이미지 처리 함수중 하나로서 arg1이미지에 arg2이미지를 width,height크기에 덮어씌우는 기능을 합니다.
ImageDestroy함수는 사용된 이미지를 제거하는데 사용합니다.(화일을 지우는 의미는 아닙니다.)
자세한 함수설명은 해당 서적이나 사이트를 참고하시기 바랍니다.
imageCreateFromPNG로 불려온 이미지는 ImageCopy함수에 의해 합쳐집니다.
합쳐진 이미지의 상태는 쉽게 설명하자면 본이미지가 아래층 layer에 있고
그 다음 합쳐지는 이미지가 그 위층 layer에 합쳐집니다.
그렇게 되면 아바타의 기본몸통에 의상이 그 위에 겹쳐져서 그려지게 됩니다.
GD함수는 이렇게 이미지처리만 해줍니다.그럼 처리된 이미지를 화일로 저장해야 하는데
그때 사용하는 함수가 ImagePNG입니다. GIF화일이라면 ImageGIF과 같이 사용합니다.
화면에 뿌려줄때는 html태그인 img태그를 쓰셔야 합니다.
<?
/*
소스파일 :draw_avatar.php
작성자 :zzony
작성일 :4월 26일
수정일 :4월 29일
용 도 :Drawing Avatar
*/
/************************************************************/
/* 기본세팅 로드 */
/***********************************************************/
include "db_config.inc";
$home_id=$loginuserid;
$avatar_path="avatar/images/";
/**********************************************************************/
/*게임아이디와 홈페이지아이디 매치 (홈에서만 사용할경우 구현필요없음 )*/
/**********************************************************************/
$quex = "select mudid from avatar_mud_id where homeid="" . $home_id . """;
$reselt = mysql_query($quex,$db_connectx);
$mud_id = mysql_fetch_array($reselt);
/*********************************************************
사용자의상정보가 담긴 화일 로드
ex)사용자의상정보가 담긴 화일. zzony.ava
{하미스릴} {흰갑옷}
(null)
{하벌쳐} {빨러쉬}
{파예랑}의 {빨빨간 몸빼바지}
(null)
(null)
(null)
(null)
(null)
(null)
(null)
(null)
(null)
(null)
(null)
(null)
(null)
(null)
{파쌍안경}
(null)
위 구성에서 입지 않은 몸 부분.. 은 null처리하며 구조 변경시 별도의 수정필요.
****************************************************************************/
$file_name="avatar/mud_link/" . $mud_id[0];
$file=fopen($file_name,"r");
$wear=fread($file,filesize($file_name));
fclose;
$datax=split("n",$wear);
/************************************************************
의상이름과 매치되는 이미지화일탐색 저장
// BODY 0
// ARMS 1
// LEGS 2
// NECK 3
// HANDS 5
// HEAD 6
// FEET 7
// FINGER 8
// FINGER1 8
// FINGER2 9
// HELD 16
// SHIELD 17
// FACE 18
// WIELD 19
DB구조
+-------+--------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+-------+--------------+------+-----+---------+----------------+
| uid | int(11) | | PRI | NULL | auto_increment |
| name | varchar(128) | | | | |
| image | varchar(128) | | | | |
+-------+--------------+------+-----+---------+----------------+
******************************************************************/
for ($i=0;$i<20;$i++) {
$sqlx = "select image from avatar_mud_table where name="" . $datax[$i] . """;
$resultx=mysql_query($sqlx,$db_connectx);
$db_image[$i]=mysql_fetch_array($resultx);
}
/***********************************************************/
/* 아바타 이미지 처리 부분 */
/***********************************************************/
/*기본세팅*/
$img_mom=ImageCreateFromPng("avatar/images/base_mom.png");
$img_head=ImageCreateFromPng("avatar/images/base_head.png");
imagecopy($img_mom,$img_head,0,0,0,0,66,150);
$image_id="avatar/character/".$home_id . ".png";
imagePng($img_mom,$image_id);
$vir_img=imagecreatefrompng($image_id);
imagedestroy($img_mom);
imagedestroy($img_head);
/*얼굴변경*/
if ($db_image[18][image]){
$faces=imagecreatefrompng($avatar_path.$db_image[18][image]);
imagecopy($vir_img,$faces,0,0,0,0,66,150);
imagePng($vir_img,$image_id);
imagedestroy($faces);
}
else {
$faces=imagecreatefrompng("avatar/images/base_head.png");
imagecopy($vir_img,$faces,0,0,0,0,66,150);
imagePng($vir_img,$image_id);
imagedestroy($faces);
}
/*머리변경*/
if ($db_image[6][image]){
$heads=imagecreatefrompng($avatar_path.$db_image[6][image]);
imagecopy($vir_img,$heads,0,0,0,0,66,150);
imagePng($vir_img,$image_id);
imagedestroy($heads);
}
else {
$heads=imagecreatefrompng("avatar/images/base_hair.png");
imagecopy($vir_img,$heads,0,0,0,0,66,150);
imagePng($vir_img,$image_id);
imagedestroy($heads);
}
/*하의변경*/
if ($db_image[2][image]){
$pants=imagecreatefrompng($avatar_path.$db_image[2][image]);
imagecopy($vir_img,$pants,0,0,0,0,66,150);
imagePng($vir_img,$image_id);
imagedestroy($pants);
}
else {
$pants=imagecreatefrompng("avatar/images/base_pants.png");
imagecopy($vir_img,$pants,0,0,0,0,66,150);
imagePng($vir_img,$image_id);
imagedestroy($pants);
}
/*상의변경*/
if ($db_image[0][image]){
$shirts=imagecreatefrompng($avatar_path.$db_image[0][image]);
imagecopy($vir_img,$shirts,0,0,0,0,66,150);
imagePng($vir_img,$image_id);
imagedestroy($shirts);
}
else {
$shirts=imagecreatefrompng("avatar/images/base_shirts.png");
imagecopy($vir_img,$shirts,0,0,0,0,66,150);
imagePng($vir_img,$image_id);
imagedestroy($shirts);
imagedestroy($vir_img);
}
/*아바타 이미지 표현 */
echo " <img src='avatar/character/" .$home_id . ".png' border=0 >";
mysql_close($db_connectx);
?>
여기까지가 소스입니다.
이 소스는 사용자가 아바타를 보게 될때마다 그려줍니다.속도면에서 안좋습니다만
이렇게 구성한 이유는 게임상에서 장비가 수시로 변하기 때문입니다.
여러분들이 홈페이지에서 사용하실때는 그럴 필요가 없으니 사용자가 의상선택후 저장할때만 처리해주면 되겠군요.
그리고 뿌려주실때는 ID.png화일만 불러주시면 되겠습니다.
그런 수정은 각자의 홈페이지 상황에 맞게 수정하시기 바랍니다.
그리고 제로보드에 적용하시려면 다음처럼 해주시면 됩니다.
예를 들어 코멘트작성한 사용자 아바타를 코멘트아이디옆에 표현할때 제가 사용한 방법입니다.
제로보드의 view.php에서
// 코멘트 출력;;
이란 곳이 있는데 이부분에다가 다음을 추가해주시면 됩니다.
if($c_data[ismember]>0){//회원이라면
if(!$connect) $connect=dbConn(); // DB 연결
$avatar_temp=mysql_fetch_row(mysql_query("select user_id from zetyx_member_table where no={$c_data[ismember]}"));
$avatar_id=$avatar_temp[0];
if(file_exists("../avatar/character/" . $avatar_id . ".png")){
$avatar_confirm_temp=mysql_fetch_row(mysql_query("select homeid from avatar_mud_id where homeid="".$avatar_id ."""));
$avatar_confirm=$avatar_confirm_temp[0];
if($avatar_id==$avatar_confirm){
$comment_name="<img src='../avatar/character/" . $avatar_id . ".png' width='33' height='75' border=0 align='absmiddle'>".$comment_name;
}
}
}
기타 아바타를 표현해주고 싶은곳이 있다면 위와같은 식으로 view파일에 추가해주시면 됩니다.
좀 더 쉽게 설명하려고 글을 썻다가 .. 너무 난잡해지는 경향이 있어서 간단히 설명을 붙였습니다.
궁금하신게 있으시거나 사용상에 문제가 있다면 코멘트 달아주세요.최대한 자세히 설명해드리겠습니다.
댓글 18
-
★Zzony~
2002.05.13 14:13
냐암.. 아무리 봐도.. 설명이 제대로 안된것 같아 ㅜ.ㅜ -
★Zzony~
2002.05.13 14:17
이미지는 한게임아바타 이미지를 가져다 테스트 하시면 되겠죠?..^^..
저도 소스만든후에.. 한게임 이미지로 이것저것 테스트 해보다가 아무래도 이미지저작권땜에..
코드걷었습니다.. ㅡ,.ㅡ...디자인만 누가 해주면 .. 좋겠는데.. 전 소질이 없거덩여.. ㅎㅎ.. -
야호미
2002.05.13 14:32
^^;; 예제 페이지 라두 보여주세요;;; -
★Zzony~
2002.05.13 15:23
간단히 기본동작하는것만 보여드리기 위해서 예제페이지를 링크해놨습니다. -
야호미
2002.05.13 16:07
*.* 오 좋다;; 활용만 잘 하면 좋겠는데요;; -
VeryLife
2002.05.13 18:05
GD 라이브러리를 이용해서 이미지를 일정한 좌표에 복사하는 것 같군요... 맞나요?; -
★Zzony~
2002.05.13 21:08
맞습니다. -
pupstar
2002.05.14 00:38
php-gd의 경우 gif지원에 문제가 있습니다.
이미지 포맷은 png를 추천합니다만 일반적으로 쓰이지 않기때문에 GD보다는 레이어를 적당히 덥어서 쓰는건 어떨까요? -
★Zzony~
2002.05.14 08:52
아,gif지원에 문제가 있는것은 gif이 사용권을 지불해야하기 때문에 GD에서 제외 시켰습니다.
v1.4이하는 gif이 지원되지만 그 위에서는 지원이 안됩니다. 다른 수정그룹들에서 gif이 지원되는 GD를 배포 하고 있습니다만,gif포멧이 그리 좋은것은 아닙니다.png로도 충분히 gif만큼 표현할 수 있으며 위 소스에서도 png를 사용하고 있습니다.
Java Z-index등으로도 구현하실 수 있겠지만, 이 소스는 분명 PHP로 아바타를 만들어보자는 취지랍니다.Zindex로 아바타 구현해서 여기 올려주실분이 있다면 금상첨와겠지요?. 하지만 이 소스는 PHP 랍니다. 언어간에,스크립트간에 비교는 하지 맙시다. -
블루바
2002.05.14 12:24
레이어 덮어 쒸우는 것은 브라우저나 사용 OS에 따라서 다르게 보일 수 있죠..
상의가 얼굴을 가린다거나.. 바지가 왼쪽으로 밀린다던가 등등.. -
★Zzony~
2002.05.14 12:42
블루바님 의견이 맞습니다.
그렇지만 실제 상용아바타서비스 하는곳들은 레이어로 덮어씌우고 있답니다.
그리고 헤더를 받아서 사용 브라우저에 맞게 뿌려주더군요,게다가 밀리는 문제..즉 원하는 픽셀에 뿌려주지 못하는 문제는 iframe으로 해결하는것 같았습니다. -
pupstar
2002.05.14 12:45
에고..비교할려고 그런건 아니었는데.....
지금 별도의 아바타 프로그램을 만들고 있거든요...
저는 가능하면 GD를 안 쓰는 방향으로 프로그래밍 중입니다.
지원이 안되는 서버도 좀 있는것 같아서....
이미지를 클라이언트에 저장할때만 gd쓰도록...
프로그래밍끝나면 올릴께요...
원래 계획대로라면 지난주에 나왔어야되는데... 시험에 리포트에 정신이 없네요.. ㅜㅜ; -
★Zzony~
2002.05.14 12:47
아 그렇군요!.
멋진 아바타소스가 나오길 기대하겠습니다 ^^.. -
이형돈
2002.05.16 18:59
^^ 레이어로 덥허씌우는 아바타 플그렘 찾아보는참이였는데^^
pupstar님의 아바타 소스도 기데헤 보겠습니다^^ -
yoda
2002.05.20 17:56
-
사랑그후..
2002.06.03 21:25
으아!!!!!! 도대체 이게 무슨 소리야!~~
이사람들 자기만의 언어들 구사한다!!!
나같은 초보는....... ㅠㅠ -
Yoon
2002.06.25 00:46
저는 4leaf에있는 아바타로 아바타프로그래만드는중 -
Pe-i
2004.02.07 20:58
뭐야...
저 예제 누르니까...
왠 여자가... *-_-*