2D vector graphics style

Shared Code
#1

Hi,

I’m trying to make an RPG, and since I’m not good at 3D graphics and there’s not much nice-looking 2D image/sprite resources around, I started trying out a simple 2D vector graphics style from a top-down perspective.

It just uses ellipses, polygons and some radial gradient fills. Here are some prototypes that I made using the vector graphics program Inkscape (www.inkscape.org):

http://www.fileden.com/files/2008/9/22/2110084/trees.png

http://www.fileden.com/files/2008/9/22/2110084/oasis.png

Here’s the inkscape svg file where the above screnshots come from:
http://www.fileden.com/files/2008/9/22/2110084/playerAndTrees.svg

After prototyping it in Inkscape, I then re-make the graphic in java 2D code using Ellipse2D’s etc in the java.awt.geom package. I’ve re-created the first graphic in my RPG game, and also animated it so that the tree’s leaves blow around, moving according to a sine wave. The man also swaggers (rotates back and forth) as he walks according to a sine wave, where the y-axis of the wave is his rotation angle and the x-axis is time.

I’m getting ok-ish performance, averaging nearly 60FPS on a 750x750 pixel window, but ranging from 25 - 130FPS. I’m using the pre-release Java 6 update 10 (or update N). Thankfully java 6 update 10’s D3D pipeline does a good job accelerating everything. Still, when I profile the game, most time is spent rendering (using -Xprof, 40% time is spent in the method sun.dc.pr.PathFiller.writeAlpha8 and 20% in sun.java2d.d3d.D3DRenderQueue.flushBuffer alone).

I wanted to put this up to see what you thought and to get ideas. I also wanted to see if anyone was interested in using such an art style in their own game - it would be great to share ideas for graphics. I can post up a webstart and source if anyone is interested.

Thanks!
Keith

#2

It’s a really nice style - I’ve always liked the idea but never managed to pull it off. There was a useful tool posted here a while ago:

http://code.google.com/p/polyanim/

That might help with this sort of thing.

Kev

#3

The vector-y style is definitely in right now, and as you’ve found it can be quite easy (or rather, easier) to make something that looks good.

However I don’t think java2d is the right tool to be using here. It’s not particularly hot with vector shapes, and I suspect you’d get much better results by converting the inkscape files into triangles and drawing them via LWJGL.

Personally I use Flash and ArtRage for my graphics, but export the flash drawings to regular sprite images to use in game. I find that works well because I like to mix vector art with pixel art, and I don’t really need to scale things (which is where a pure vector approach would really shine).

#4

I think using SVG based graphics can look very nice and has many advantages, especially if you are programmer and doing your own artwork. However using Java2D to render it is going to have substantial performance problems. What you want to do is pre-render on load, or deploy pre-rendered files. Figuring out which pixels need to be filled with which colour for a transformed anti-aliased radial gradient ellipse is not trivial and using them for leaves on trees is going to kill performance.

#5

Definitely don’t use Java2D for this. It’s incredibly pathetic at rendering when compared to the other options. If you’re making a simple puzzle game or something, it doesn’t matter, but otherwise Java2D is going to be your bottleneck.

#6

Thanks everyone for the advice and links. It’s really great how all of you have lent your help. 8)

About Java2D, it’s meant to be as fast as JOGL/LWJGL when these two are in immediate mode. I read in this thread (http://www.java-gaming.org/index.php/topic,19203.0.html) that immediate mode is slow, and that VBO’s are the way to go. I know very little about how to use them unfortunately. I’m thinking of studying up on it. How much do you think the performance gain will be? In your experience, how much is gained when going from immediate mode to VBO’s? Because if i move to JOGL or LWJGL I’m sacrificing the trouble-free nature of Java2D, which always works, always runs on any computer, and can easily be made into an applet.

#7

LWJGL is pretty trouble free once you get the hang of it. I can send you over some drawing functions I made to emulate the built-in stuff for Java2D, if you want (glFillRect, glDrawRect, glDrawOval, etc.). Also, in literally every game I’ve ever switched over to LWJGL (I believe that amounts to 4, off the top of my head), I have seen a speed increase of, at the minimum, 600%. Sometimes the increase goes as high as 2000%, depending upon what and how much is being drawn. I’m referring to frame rate and time between loop updates, by the way. i.e. I’ve seen a frame rate of 10 go up to 200. Java2D seems to do okay in some situations, but literally any game I’ve made that is relatively complicated has needed to make the leap to LWJGL.

So I can give you some code to make the conversion painless, if you’d like, and there are also plenty of tutorials around you can check out.

#8

The new Java 2D pipeline does optimize stuff past the level of OpenGL immediate mode, performance can be perfectly good enough for action games. However, Java 2D provides a lot of extra functionality above and beyond what games normally need - this is generally where their bottlenecks hit (example: arbitary gradient fills).

I’m pretty sure CK has tried the other options and it’s absolutely true that using pure Java 2D gives you way better compatibility.

Like OpenGL you need to know how to use the tools to get best performance. Java 2D written carefully can run really well. Obviously this can be a bit time consuming but then thats the price of the extra compatibility.

Kev

PS. If you do end up wanting to go OpenGL, someone wrote a more complete SVG renderer for Slick (http://slick.javaunlimited.net/viewtopic.php?t=1268).

#9

That would be great Demonpants, thanks a lot. I would love to see how you do all of that kind of think in openGL, and such a speed boost would be spectacular. My email 's keithphw at hotmail.com. I use swing menus so if I end up using ogl it’ll be JOGL rather than LWJGL, but I hear that it’s a piece of cake to to convert between the two.

It’s a bit embarrasing but I’ve never made anything with openGL. I only tried it out properly 2 weeks ago. I tested JOGL to see how quickly it could paint a plain colour on the window. Turned out it was the same as Java2D - 300 FPS. Maybe I was doing something wrong since this was on a computer with an nVidia GS 8400M video card. Windows vista and dual core.

I checked the link, thanks Kev. It looks very handy. The link to the poster’s source is broken though, I’ll register in the forum and let him know.

Thanks for all the help 8)

#10

My rant on Java2D:
I think its a bit bloathed and it frustrates me that the pipeline has the tendancy to change quite often, making good practices not as good as they were before (I’ve seen quite some questions about sudden changes in performance after a new JRE release). Also you have no way of hooking into / overriding the way it works under the hood. For example I recall Java2D doing some strange things while rendering shapes (not primitives) on opengl/directx… using rasterized spans or something instead of triangulizing the shape, which sounds far less efficient.

On the other hand you’re sure your game will run everywhere; It offers a D3D an OGL and a software backend. Bruno and I have been working on a small 2d library (2dzzd) which also features an opengl and software rendering backend (for both vector and bitmap graphics), which will be more game oriented. Hope to post a demo next month or so…

#11

LWJGL has an AwtCanvas which you can use to embed a LWJGL display inside an AWT or Swing gui. I’d go with that as it tends to be more reliable than Jogl.

#12

Thanks for the tip. I’m also using AWT’s MouseEvent and KeyEvents for input. If LWJGL supports them as well then that’ll be the way to go.

Agreed, like BufferedImages used to be accelerated as good as VolatileImages but now not so. Also now it seems that BufferStrategy is better than VolatileImage because you can’t page-flip a VolatileImage.

Sounds interesting. Have you thought about how GUI’s will be done in this? Will it integrate with Swing or do you just have to build your own components, buttons,etc?

#13

No need to use AWTGLCanvas any more - you can just call Display.setParent(someComponent) to make any AWT component GL capable!

Cas :slight_smile:

#14

My thoughts about Swing are basically the same as on Java2D: bloathed :wink: (for gamedevelopment that is)
I have written a very small GUI around 2dzzd, which offers the most basic building blocks like components and containers which you can extend to make your own gui controls. It also contains some premade components like labels, textfields, buttons and dialogs. Logic for handling the events from these components must be provided by a callback interface.