Character Creation System

Kibeth

I've recently started on an Character Generation-type script, and hoping to develop this much further, because at the current state that it's in, you have to manually edit the $_GET superglobals, but I was wondering if someone would be able to discuss some possible solutions to this, so that users can create, edit, and remove things from their character, and then have it save in a database. Also, how should I do the applying, at the moment, I created a function called mergeImage, and it uses the imagecopymerge to merge the hair and eyes seperately onto the head, saving the output as another file, and then printing the final image to the browser. But say I added a piercing, and then I wanted to remove it, would I have to somewhere store all the things that they have on their character, like the hair, eyes, etc, and then just re-apply all of those, leaving out the excluded object? How much stress would this put on the server, having to do this? I checked an IRC channel dealing with PHP, and someone said something about MD5? Could you please explain this, and what he could have possibly meant to do with it. I'm not asking anyone for piece of code that does all this, but rather just some guidelines that will help me to get an efficient way of editing, and producing the characters. Anyways, if anyone actually took the time to read all this, and actually reply, your help is greatly appreciated. A demo of what I have so far can be seen at:
Click Here
But yeah, you have to manually change the hair and eyes, and I only have 2 of each, since they're only temporary graphics until I get deeper into this.

thorpe

What are you talking about?

Kibeth

I'm just wondering if someone would be able to explain the best way to go about making this.

thorpe

Making what? A character in php is defined as...

$char = 'C';

There.... the character C.

Now... what is your question?

Kibeth

O.o I wasn't talking about that kind of character, rather, character as in a person. If you checked the example, and read most of the description I posted, I thought it'd be a little more obvious.

Kibeth

Since it seems the first post wasn't clear. I'm trying to make a script that will allow the user to create an image of a character. I'm looking to have multiple layers, though I'll have to figure out the order in which they're layered.

I was wondering what would be the most efficient way to save and retrieve the information so that if the user wanted to remove a certain piece from the image, say a piercing, then it would only remove that layer. I'm not sure if this would involve re-merging all of the images together, excluding the image that was removed. If so, how much stress would it put on the server?

Is there a simple way of doing all of this, and I just don't know about it? [I've been messing with PHP for about a couple days.] I have the basic function for overlapping the images already completed, and here's the example, this may help you get a better picture of what I'm after. These aren't the graphics I plan to use, but I just made them as a quick way to demonstrate my purpose.

Demo

There are only 2 hair styles, and 2 sets of eyes, haven't set it to handle any arguments higher or lower than those values. The current output is for the thing to load the eyes, merge them with the head, save it in the images directory, then retrieve the head picture from the images directory, [eyes merged on it], and then merge the hair on top of that, and resave over the previous image, then show that to the browser.

tekky

I would go about this by assigning each choice for each image type a number, and then store a compiled set of #'s like 1, 2, 5, 8, 10, 12, 3, 5, 6 and then split that into an array when pulled from the database and each array position would correspond to a item location

$ar[0] would be like body...
$ar[1] head
$ar[2] left eye //this would allow for 1 blue/1 green eye...
$ar[3] right eye //this would allow for 1 blue/1 green eye...

and then the value of each of those position would just point to the index of the image in the table... like my_faces id = 1 would be tall_body.jpg so $ar[0] would be 1....

make sense?

Kibeth

And if I try to remove something, or change one thing, I'll have to re-merge all the items.

tekky

You just remove it from the saved string of ID's and recompile it... or... if you dont want to completely redraw it... restack the image below it, and everything on top of it, but at that point you may as well recompile the whole image... this isnt a big deal I wouldnt think though....

Kibeth

Alright, thanks a lot. 😃

Kibeth

I managed to get all of the applying and what not to be done by calling 1 function, but now, I was wondering what I would to do setup an interface that would allow be to click like next and change the selection to the next one in line. I haven't gotten around to putting them in the database yet, because I need to do some reading up on the MySQL stuff.

tekky

Are you learning PHP and don't know anything about HTML? You shouldn't have to ask how to setup an interface for something this simple... and if you do, then I would say go learn HTML first....

Kibeth

No, I know HTML, but is it possible to do with just links? O.o And wouldn't that involve refreshing the whole page? I'm just looking for something, possibly JavaScript or Flash? or if there is even something, so that I can change the items, and have it only re-output the changed image. And I haven't really tried, but can you can just break off the code where it is, do some conditional statements, and output the final information into where the code left off, and continue with say the link..?

tekky

Well w/o refreshing the page you are getting into Ajax and DHTML to force the image to be redrawn and to get the image to reload....

Kibeth

I guess I have some new stuff to look into. 😃

tekky

Kibeth wrote:
I guess I have some new stuff to look into. 😃

For Ajax and DHTML stuff I would recommened looking into Dojo its a relatively easy and extremely comprehensive X-browser Javascript toolkit thats extremely customizable for what you need... its lacking documentation at this point but the community is extremely helpful.

etully

Kibeth: There are lots of ways to do this and you have to ask yourself a bunch of questions before you start programming so that you end up with the product you're looking for.

One question is, what do you want to end up with? Do you want the final product to be a static image (like a GIF or a JPG) that will be displayed as someone's avatar? Or do you want to end up with data in a database so that the image will be constructed on the fly everytime it's called for? For example, let's say that part of the image was a smile or a frown based on your current mood. A static graphic wouldn't be much good because you'd have to throw away the image and redraw it everytime it was rendered based on current variables.

Another question you have to ask is, once the character has been defined, whether you want this to be rendered server side so that the client side gets a fixed (uneditable) image or do you want the client side to have the ability to receive a bunch of parts that it assembles itself. For example, if you use DHTML to assemble these parts on the client side, then when they view a character, the character can change based on events that happen within the recipient's browser. Imagine that you define a character "Joe" and some user surfs to the "Contact Us" page of your web site and "Joe" appears in the top right corner. The user starts to fill in the form but they enter their age is 200 years old. You want Joe's smile to turn to a frown or for his eyes to go wide like saucers. You could do this with DHTML (or better yet, Flash). But the real question is, Is your goal to have the character dynamic on the client side?

If you are not aiming for dynamic client side behavior, then this could be done on the server side with something like GD (though I prefer ImageMagick). The result of this would be a static uneditable image.

Once you have your goal in mind, then you can begin to choose implementation.

Client side rendering always brings in browser compatibility issues. (Server side construction of a GIF or JPG is a no-brainer because everyone can see image files). AJAX is a technique that makes it appear to be client side (it's faster) but it's server side rendering which is more compatible.

phpshift

Through this whole thing, nobody has even mentioned imagecopymerge(). If you want to, you can see my simple character maker here:

http://phpshift.fireproductions.co.uk/merge.php

It uses images of the same size with transparent backgrounds and it layers them together using the imagecopymerge() function ad it saves it to a new file. To find more on imagecopymerge(), go here:

http://us2.php.net/imagecopymerge

Kibeth

etully: I'm going to try and make it so that the user can control the initial creation of the character, by like clicking on Hair, and then next or previous until they get their desired look. Then, it stores all those variables that have been set into a database, and creates a static image, which will be loaded where it is appropriate. For editing, I plan to create a system where you can select items, and apply them, and it'll just re-write the location's value to the database, and then re-merge all of the variables into the final image again, just overwriting it.

phpshift: I've already created a function with imagecopymerge that will apply all the locations and output the final image.

The real trouble I'm having has to deal with the database, and the interface that allows them to initially create their character. I'm haven't watched any of the MySQL videos I have really, and I'm just wondering how to structure it. Right now, I have a database, and then a table in it called avatar, then I have char_id, ava_eyes, ava_hair, ava_emotion, and it stores a number in each one. The number is then used to place into the filename of the hair, eyes, or emotion so it uses the write one, then merges them all down to get the final image. Would this case a problem if I wanted to store information about each thing, say once I got into adding articles of clothing, and wanted to have names and descriptions about each one? There's an example of it here. This isn't the current version I'm using. This one is where I took tekky's advice and stored the information in an array, and then it saves the image based on the ID you enter, and it will overwrite the old image with that ID.

Demo

To make sure it's actually doing the saving and what not, I added:

Show ID

tekky

phpshift wrote:
Through this whole thing, nobody has even mentioned imagecopymerge().....

That was never really the problem he was looking for help with....