Fate of Io: Brunette Enna

Brunette Enna

Download: [png]

2002/12/17 12:34:13 PST by jcore [0/6]
Edited at 2002/12/17 12:38:12 PST
Awards: 2 from Dev

I think Nataku's original picture was great, but if you guys want to see a brunette Enna with green eyes, here you go...

Note that this is a scalable vector graphics file. You'll probably either need a very new browser or a plugin to view it. I'll submit a png also, but you won't be able to zoom in and do all that other cool stuff (plus there's a little glitch when exporting to png on her right hand).

This is my first attempt at vector graphics, but it was relatively easy with Nataku's original as a guide. The problem with using mathematic figures instead of freehand painting is that I can't get the same "look" in her eye. I guess that's where the art comes in...maybe someday when I'm an artist...

...

Ok, I guess you're getting the PNG because I'm getting ambiguous error codes while trying to upload the SVG file.

2002/12/17 12:37:39 PST by jcore [0/6]

Ok, I'll host the SVG off of my server until someone %cough%Temporal%cough% can fix his code:

http://www.geekmeet.org/tempa/bildoj/enna_brunette.svg

2002/12/17 14:40:33 PST by Temporal [manager]

Quote from Illustration Section:

Allowed formats: jpeg, jpg, gif, png, zip

Sorry, but if we let people upload anything, Alex would upload a jsp and hijack the server. (just kidding, Alex)

2002/12/17 20:18:21 PST by mystik3eb [0/43]

*ahem*:

http://www.fateofio.org/v4/v4.jsp?node=fateofio.story.chars.pc.enna&task=1859&view

2002/12/18 01:54:38 PST by Temporal [manager]

On closer inspection I'd have to say that this is actually really impressive... at first I thought you just re-colored the original image, and for some odd reason wanted to use some wacky format I'd never heard of... but now I realize that you must have had to redraw the whole image in an SVG editor to do this. I'm not really sure how it benifits us in this case, but the technology certainly is interesting... and the resulting image does seem slightly sharper and cleaner than the original...

How long did it take to do this?

2002/12/18 05:03:35 PST by jcore [0/6]

Ah, I realized that it wasn't allowing me to upload the svg because of the file format after trying to submit it a few times. It didn't occur to me because all I was getting was a generic error message (hence the reason I was getting on your case).

Well, this doesn't benefit FoI much. I've been thinking about getting into vector graphics for a while now since they have a lot of potential, and Nataku's image inspired me to try my hand at learning through imitation (I obviously traced overtop of the image using a bunch of transparent components).

The image took about 16 hours to make, but that was more due to my inexperience than anything else. I think now that I have some more knowledge of bezier curves I could do it again in 8 hours. With the help of some automatic tracing and a little bit more experience I'm sure the time could be cut down to 4 hours, and if I weren't going for near the same level of detail, maybe even 2.

Doing this has led me to think about doing a game in 2D, but with vector graphics. The game would have to use 3D acceleration in order to be fast enough, but there'd be a number of benefits. The only problem of course is finding vector graphics artists.

I didn't fully appreciate Nataku's image of Enna until I got intimate with it. There's so much detail there! It must have taken him quite a while to draw and paint it, even with computer tools.

I went ahead and took a few screenshots of the process if anyone's curious:

I started from the top and worked down. This is the beginning when I really didn't know what the hell I was doing.
By the time I got to her shoes I was a little bit more comfortable with things and started to use gradients.
Finally, I finished and I pulled the image out from behind in order to compare.

2002/12/18 14:49:08 PST by mystik3eb [0/43]
Edited at 2002/12/18 14:51:22 PST

The svg doesn't have her left green eye totally...green. Real nice work, though! However, I WILL remind all to put this Enna stuff in the specific thread I linked to, since that's the point of that thread. =)

Also, could you maybe make an svg of the other official pics too? I never knew what svgs were until this, and I LOVE them now =). Awesome work jcore!

2002/12/18 16:49:26 PST by nataku [0/19]

wow that looks nice...though i have no idea what you guys are talking about (that SVG thingie...). i like how the lines are cleaner, but one thing is that when i draw (and this is just me) i like to keep lines thick and thin, so its not to repetitive (line-wise...).

2002/12/19 01:39:55 PST by Temporal [manager]

Mystik: This discussion belongs here, not in the thread you linked to. This discussion is about this submission itself, not about the task. Furthermore, the thread you linked to is about re-stylizing Enna, which this submission certainly does not attempt to do. The main point of this submission (to me) is the conversion to vector graphics, not the changed colors.

Nataku: SVG, as I have come to understand it, is a format for vector graphics. Most image formats store a grid of square pixels, where each pixel has a color. Vector graphics, on the other hand, store information about lines and shapes, not pixels. This has a few advantages. First, with images that contain lots of large, solid areas (like this one, and any sort of cartoon-like image), vector graphics will take far less space (although SVG is an XML format, which bloats it right back up, but that's an implementation detail). Second, and much more importantly, you can resize the image as much as you want, and it will still look good! Try right-clicking on the SVG and choosing "zoom in". Do it as much as you want, and the image remains sharp and curvy. Nice, huh? The down side of vector graphics is that you can't convert other images to them, and there is no way to scan in an image as a vector graphic. They can be tedious to create. (Even with the image already drawn, it took jcore 16 hours to convert.) Also, rendering vector graphics takes a lot more CPU power than pixel graphics.

Flash uses vector graphics for everything (usually), which is why flash animations always look so pretty.

jcore: The server used to give an error message that made sense... I guess that must have broke.

2002/12/19 10:58:35 PST by jcore [0/6]

Nataku: I definitely like your picture more than the version that I did. The SVG can't capture the uneven lines and all of the other emotion that you put in the picture (your picture was pretty unique in that it didn't use standard 2-color cell shading techniques).

Mystik: Yeh, her eyes were the one part I wasn't really proud of. I started on her face and didn't really get the hang of things until I got to her shoes ;). At the moment, converting some of the other work into SVG would take me forever (I'm still suffering from "the claw" from my last effort, I really need to get a Wacom tablet). However, I think I'm going to work with the sodipodi authors to try and integrate some shortcuts into the program. I'm also going to see how well some of these automatic tracing programs work. If I can manage to get enough speed improvements from those two things, then I'd definitely see what I can do.

Regarding file size. Unfortunately I was rather wasteful with the number of paths I used in this. However, here is a comparison of file sizes:
enna_brunette.png 114695
enna_brunette.svg 137643
enna_brunette.svg.gz 26730

So even an unoptimized SVG is less than 1/4 the size of the PNG once compressed (and with 2-color cell shading and some skill I think it can be taken down to 1/6 or even smaller). However, that's not really the reason I like vector graphics.

I am not recommending the use of vector graphics for FoI as I think a little bit too much work would be involved and it's not really mature enough yet (the SVG spec is still at 1.0 although Adobe has recommendations for 1.1 and 1.2 in the process). But if a 2D game were to use them, here's the advantages that I could imagine:

The game could run at any resolution ( would also require the use of vector fonts, a.k.a. truetype).
If standard naming was used, in-game color changes would be possible (i.e. status effects like poison and berserk, along with certain lighting effects such as night, etc).
A little bit difficult, but not impossible, would be smooth animation effects using interpolation. This seems the most interesting and challenging to me. I can just picture a character getting a status ailment and then having all the animation become blurry.

2002/12/19 18:06:04 PST by Alex [0/0]

I am very interested in use of vector graphics in 2D games. More specifically, I'd someday like to work on a Web-based environment (i.e. online game) implemented in Flash and powered by L.A.M.P. on the server side. South Park -like animation rules, especially from the point of view of designer productivity.

If it were up to me, we'd [THE REST OF THIS MESSAGE HAS BEEN DELETED]

2002/12/19 21:15:24 PST by mystik3eb [0/43]

Ah...yea, I see your point, Temp. Ah well, my bad >_<. Just ignore me then *whistle*

jcore: Hmm...I dunno, I still really like what you did. I would like to see some of the other characters vectorized, since this is just really cool =). Good luck with that, and nice work! I could never sit there for hours trying to do something like that (never mind I don't know HOW...hehe)

nataku: Well, what can we say? Your pics are great, and this one really wins in my (and several others) book. Hope that I can see what she will look like after being fitted to look more like our OTHER official characters.

2003/05/04 04:16:52 PDT by CheF [0/1]

It's good, but a little cutesy, don't you think?