Page 1 of 1

Re: Dynamic Avatar

Posted: Wed Feb 01, 2012 7:13 am
by Jackolantern
I would assume it is probably done with some CSS techniques since it is probably not HTML5 Canvas. I particularly believe that considering that the avatar creation interface they show in the images is quite old looking, with buttons to move the clothing articles around rather than using drag-and-drop.

You may be able to find some tutorials online by looking up things like "web paperdoll", as that is basically what this is. You could also potentially build whatever avatar-building application you want as an HTML5 Canvas app, and then use the code I posted on how to turn the canvas state into a bitmap and send it back to the server to store as a file, which could then be used from the server-side on subsequent page views. Of course, to make the avatars editable, you would also have to store the state of the canvas, although that would not be too bad. But using canvas for the avatar app in the first place would probably simplify things since you can really do anything graphical you want in canvas without having to resort to strange CSS tricks.

Re: Dynamic Avatar

Posted: Wed Feb 01, 2012 2:03 pm
by Chris
PNG is a bitmap image, PNG would be better if you require transparency. You might also want to look into SVG (Scalable Vector Graphics). http://www.w3schools.com/svg/default.asp

Re: Dynamic Avatar

Posted: Thu Feb 02, 2012 5:04 am
by Jackolantern
I admit that HTML5 canvas is rather primitive and quite hard to work with out of the box. However, there are some great libraries out there that can make it much more like Flash, or like working with the DOM, thus making graphical application work like this much easier. If you do think Canvas is the way to go with this, I highly suggest checking out EaselJS. It basically turns canvas (which is more like writing graphical code on 80's desktops) into something like Flash (something that is intuitive and easy to work with).