Créer un avatar interactif

Créer un avatar interactif

azmimik
Hors ligne

Poussin

Messages : 8
Sujets : 1
Inscription : Aug 2008

#22

13-08-2008, 11:22 PM (Modification du message : 13-08-2008, 11:47 PM par azmimik.)

C'est pas mal ton truc Harparine

Sinon j'ai essayer avec GD-Ajax. C'est pas trop dur, mais le probleme c'est qu'a chaque fois que je change un partie du visage, toute l'image se recharge.
Evidemment ce n'est pas optimisé, mais je vais mettre mon code pour ceux que sa peut interresser

Voici le lien si vous voulez essayer : www.mazikim.com/DEV/creertete/

Mes images sont dans le dossier images.
tete1.jpg, tete2.jpg, oueil_droit1.jpg ...

La bdd est constitué comme suit
ID | tete | oueil_droit | oueil_gauche |
Tous les champs sont en int.
Dans les champs j'enregistre le nombre qui correspond a l'image. Par exemple pour tete1.jpg j'enregistre 1 dans la table pour le champs tete.

J'ai 4 fichiers :
config.php : juste pour les infos sur la bdd, ainsi que la connection a la bdd

Code PHP :
<?

/* Configuration de la connection a la base de donnée */

$config_bdd_host="localhost";

$config_bdd_user="root";

$config_bdd_password="";

$config_bdd_bdd="test";

mysql_connect($config_bdd_host,$config_bdd_user,$config_bdd_password);

mysql_select_db($config_bdd_bdd);

?>

image.php : c'est l'image que j'ai créée. Je passe les paramètre en GET (le numero de la tete, des yeux ...)

Code PHP :
<?

header ("Content-type: image/jpg");

// PAGE DE CREATION DU PERSONNAGE

//Allez on créer l'image

$visage = imagecreatefromjpeg("images/tete".$_GET["tete"].".jpg");

$oeuil_droit = imagecreatefromjpeg("images/oueil_droit".$_GET["oueil_droit"].".jpg");

$oeuil_gauche = imagecreatefromjpeg("images/oueil_gauche".$_GET["oueil_gauche"].".jpg");

//On ajoute les yeux au visage ;)

imagecopymerge($visage,$oeuil_droit, 90, 70, 0, 0, 50,30,100);

imagecopymerge($visage,$oeuil_gauche, 20, 70, 0, 0, 50,30,100);

//On affiche l'image

imagejpeg($visage);

imagedestroy($visage, $oueil_droit, $oeuil_gauche);

?>

index.php : page principal. Sur cette page on peut créer une nouvelle tete, et modifier sa tête

Code PHP :
<?

// on inclue config.php

include "config.php"; // il contient entre autre la connection mysql

/* PARTIE JAVASCRIPT DU CODE? C'EST DE L'AJAX */

?>

<script language="javascript">

function request(url,cadre) {

    var XHR = null;

    if(window.XMLHttpRequest)

        XHR = new XMLHttpRequest();

    else if(window.ActiveXObject)

        XHR = new ActiveXObject("Microsoft.XMLHTTP");

    else {

        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");

        return;

    }

    XHR.open("GET",url, true);

    XHR.onreadystatechange = function attente() {

    if(XHR.readyState == 4)

    {

        document.getElementById(cadre).innerHTML = XHR.responseText;

    }

    }

    XHR.send(null);

    return;

}

</script>

<div id="image"></div>   <!-- Div ou sera afficher l'image -->

Creation de tete ! :<br />

<a href="" onclick="request('ajax.php?action=nouveau','image');return(false)">Nouvelle tete</a> <br /><br />

<?

if(!empty($_GET["id"])&& strlen($_GET["id"])) // je vérifie que le visiteur modifie une image

{

    ?>

    Forme tête : <br />

    <a href="" onclick="request('ajax.php?action=tete&valeur=1&id=<? echo $_GET["id"]; ?>','image');return(false)"><img src="images/tete1.jpg" /></a>

    <a href="" onclick="request('ajax.php?action=tete&valeur=2&id=<? echo $_GET["id"]; ?>','image');return(false)"><img src="images/tete2.jpg" /></a>

    <a href="" onclick="request('ajax.php?action=tete&valeur=3&id=<? echo $_GET["id"]; ?>','image');return(false)"><img src="images/tete3.jpg" /></a><br /><br />

    Oueil gauche : <br />

    <a href="" onclick="request('ajax.php?action=oueil_gauche&valeur=1&id=<? echo $_GET["id"]; ?>','image');return(false)"><img src="images/oueil_gauche1.jpg" /></a>

    <a href="" onclick="request('ajax.php?action=oueil_gauche&valeur=2&id=<? echo $_GET["id"]; ?>','image');return(false)"><img src="images/oueil_gauche2.jpg" /></a><br /><br />

    Oueil doit : <br />

    <a href="" onclick="request('ajax.php?action=oueil_droit&valeur=1&id=<? echo $_GET["id"]; ?>','image');return(false)"><img src="images/oueil_droit1.jpg" /></a>

    <a href="" onclick="request('ajax.php?action=oueil_droit&valeur=2&id=<? echo $_GET["id"]; ?>','image');return(false)"><img src="images/oueil_droit2.jpg" /></a><br /><br />

    <?

}

?>

et enfin ajax.php : fichier appeler par index.php grace a ajax

Code PHP :
<?

//Fonction qui affiche l'image

function image()

{

    /* On va chercher dans la bdd tout le necessaire pour faire l'image */

    $req=mysql_query("SELECT * FROM tete WHERE ID =".$_GET["id"]."");

    while($rep=mysql_fetch_array($req))

    {

        echo "<img src=\"image.php?id=".$_GET["id"]."&tete=".$rep["tete"]."&oueil_droit=".$rep["oueil_droit"]."&oueil_gauche=".$rep["oueil_gauche"]."\" />";

    }

}

//Ajout d'une tete

if($_GET["action"]=="nouveau")

{

    mysql_query("INSERT INTO tete VALUES('','1','1','1'");

    $req=mysql_query("SELECT * FROM tete ORDER BY ID DESC LIMIT 0,1");

    while($rep=mysql_fetch_array($req))

    {

        echo "Pour modifier votre image cliquez <a href=\"index.php?id=".$rep["ID"]."\">ici</a>";

    }

}

//  choix de la tete

elseif($_GET["action"]=="tete")

{

    mysql_query("UPDATE tete SET tete='".$_GET["valeur"]."' WHERE ID='".$_GET["id"]."'");

    image();

}

//Choix des Yeux

elseif($_GET["action"]=="oueil_droit")

{

    mysql_query("UPDATE tete SET oueil_droit='".$_GET["valeur"]."' WHERE ID='".$_GET["id"]."'");

    image();

}

elseif($_GET["action"]=="oueil_gauche")

{

    mysql_query("UPDATE tete SET oueil_gauche='".$_GET["valeur"]."' WHERE ID='".$_GET["id"]."'");

    image();

}

?>

Si quelqu'un a une idée pour que l'affichage de l'image soit intantanée je suis preneur !

En espérant que ça guidera certaines personnes

Mon Blog : http://www.mazikim.com

« Sujet précédent | Sujet suivant »

Utilisateur(s) parcourant ce sujet : 2 visiteur(s)

Messages dans ce sujet

Créer un avatar interactif - par Zack - 31-07-2008, 02:27 PM

Sujets apparemment similaires…
Sujet		Auteur	Réponses	Affichages	Dernier message
	Guide interactif pour les nouveaux joueurs	Etienne	4	3 245	31-03-2013, 10:41 AM Dernier message: Senathor

JeuWeb Créez votre jeu par navigateur !