I need help with an avatar system

[hacker9801]

I was thinking about making an avatar system (like Gaia Online; I've tried befor but it's hard).

Can anybody help me with one? I'm gonna make an open source site like Gaia... I can't do it by myself, though.

[martin5211]

Wow, but it needs a lot of art. You could use inner divs and ajax to update the avatar directly without reloading the page. You will need custom CSS classes for each character to situate correctly the elements. The rest it's very simple.

[hacker9801]

If you could make the actual PHP class/script that generates the avatar from art (item placements, etc.) then I could do the rest.

[jmvazq]

I am also looking for something like this, but don't know where to start. So if you could help me a bit, I would appreciate it. You don't have to give me code or anything, but at least having an idea of what I need to do (in some detail) should be enough for me to try.

Thank you. :)

[WhiteLeo]

Gaia uses a PHP based system. Basically they have thousands of images of items, and when you click the "items" it will add the particular image to your avatar, and when you save it outputs it as a PNG image.

I'd first suggest reading up and learning about PHP + GD.

Baby steps, a system like Gaia's is immensly complex. Don't forget that you'll also have to draw all items in all poses seperately. You can't just take them offline.

Are you sure you want to go to all that trouble?

[jmvazq]

I know about PHP and GD, but isn't something else needed? Like somebody mentioned, Ajax? Or Javascript? I don't know neither Ajax nor Javascript, and that is why I ask. I sort of imagined it would be with GD, but I am not sure of how it is done, exactly. Yes, I am going through all that trouble. ^_^ I do pixel art of this type. Avatars and clothing. It's like paperdoll.

Thank you. :)

[martin5211]

Ajax would be mandatory because you will don't like to reload the whole page at the hair changing or changing a specific attribute of the avatar. With Javascript you could remove specific DOM elements, like a layer and create another set.
In Code Snippets there is a good example using Ajax and in w3schools.com you will find reference of the following Javascript methods: getElementById(), createElement(), setAttribute(), appendChild() and removeChild()
The first stage is create an avatar and try to change only one attribute, then you could create a complete options menu and a complete avatar.

[martin5211]

You could try to replace a element div with another, replace an image wih another, using a link and onclick event, calling a function with the methods mentioned above.
Then you could learn to use ajax to replace a complete avatar set.

[hacker9801]

I can do the AJAX & JS, but the PHP... well, it'd be hard to specify each position for each pose for every item....

[WhiteLeo]

Ajax isn't essential if your're using a PHP + GD system to actually generate images. That's how Gaia does it anyway.

Basically they have 1 file called avatar.php, and when you click an item, javascript modifies that image URL adding item information in the url, eg: avatar.php?item[]=42&item[]=24 etc...

Whatever way you do it will take a heck of a lot of work, and I wish you luck.

[jmvazq]

Thank you very much. :) I know it can be hard, but I will still give it a try.

[HazardTW]

This might give you some ideas.

[jmvazq]

This might give you some ideas.

It does help a lot. Thank you. Gives me some more ideas. :)

[Designer_101]

Definately alot of work. Keep daniweb updated with how you going and if you need any help.

Oh and the above comment is true however by using the URL for this amount of elements it will become very large very quickly. I would recomend using AJAX, if you dont know how to go about it just post a topic on here, someone will be able to help.

Good luck

[jmvazq]

Thank you very much. :)

I'm still getting the hang of Javascript and Ajax, but I definitely want to consider it a possibility. It can be very convenient.

The URL's for the images would probably be smaller, as for now, my plan is (if I can afford the space and bandwidth for it) to save each user's avatar, and just overwrite its contents each time they update. The file names for the images could be the users' unique ID's. Not sure about this yet, but it seems like a plan. I only need to make sure that I'm ready for something like that. :P

What do you think?

[Designer_101]

Sounds good to me, though like I said. Alot of work :)

[jmvazq]

Sounds good to me, though like I said. Alot of work :)

Thank you. ;) I am aware that it's a lot of work. Don't worry. This is what I like to do, so I wouldn't mind. :)

I've been practicing with the GD library, and it's not as hard as I thought it'd be. :D