Sprite Engine and Code Jams

A couple of friends were talking about doing a small “game jam.” I’ve always wanted to do one. We decided to make a 2D platforming style of game and one weekend, sometime in the near future, we’ll all get together and jam for 24-48 hours and see what we can pump out by the end.

One issue came to light as we talked: what would we use as the sprite engine? I certainly don’t want to spend the entire game jam working on the sprite engine and come away at the end of the weekend with nothing to show for it. That’s a huge task to make the thing that runs the game and then the game itself on top. I wanted to use XNA and I’m sure there are tons of hobbyist programmers out there that have programmed their own full-fledged sprite authoring and rendering engines.

But I’m an engineer. I know I shouldn’t re-invent the wheel, and we could certainly shop around the Internet and find someone’s sprite engine to use, but I want to know how the wheel works, and I think there’s a mentality amongst the guys interested to do the game jam where we want to brew our own. Plus, there’s the added advantage of getting tech support within our little group. We don’t have to plow through someone else’s undocumented, bullshit, and badly written code. We can plow through our own.

I would certainly love to have the tech homegrown just so I can use it for my own purposes. So this weekend, I sat down and did my own little “code jam.” I wanted to code for 24 hours straight, but I got maybe 18 over the course of the two days — I’m writing this post at the tail end of this journey. Twelve hours on Saturday and another 6 today. What do I have to show for it?

A rudimentary and crude sprite engine.

spriteeditor Sprite Engine and Code Jams Code Jamming

Features:

  • Basic sprite rendering using SpriteBatches in XNA
  • Use of 2^n x 2^n sprites (in this case 64 x 64 pixel tiles)
  • Ability to save/load tile set and sprite map XML data files.
  • A sprite map editor using windows forms.
  • Ability to add new tiles to the current map in the editor
  • Ability to interactively put down new tiles into the sprite map

    This won’t play a game. There’s no collision detection, no player character, no enemies, nothing. Not yet. Those are all things that need to be coded in another session. Some other nice to have features would be sprite layers so we could do backgrounds at different sprite sizes rather than a tiled sprite set. Animated sprites would be fun to do as well. All of the data is saved and loaded in XML and the document format is custom and would need to be extended as things get integrated in.

    I’m not even sure if I want to use SpriteBatches for rendering, but I’ll go with it for now. I consider everything I did in the last 18 hours to be molded yet again into something even more robust.

    I would say this weekend’s code session was a success. I’ll have to post about my previous weekend code jam which was focused on implementing and learning Perlin noise and using it in a height map. I’m rekindling my love of all things procedural. I do have ideas for this sprite engine in terms of procedural algorithms…mainly, I’d love to see if I could use an L-system to generate platforming levels. That would be fun. Imagine turning on a game and just having new levels made for you on the fly. An artist would still be needed to make the tiles and then they would work on generating the L-system grammar to work with their tileset, but levels would just come together on the fly. I’m sure that’s harder than what I said, but you know what they say, “easier said then done.”

    So you want to make DS software…

    homebrew style. How cool is DS homebrew?

    girlonds So you want to make DS software... visual studio setup instructions homebrew ds

    It’s this cool!!! I drew that using a DS homebrew program called Colors. I didn’t think a DS had pressure sensitivity, but the homebrew proves me wrong. It’s time to start bringing my DS with me to drawing meats so I can at least claim that I’m drawing…on my DS!

    My friend Ricko is helping me get setup and I figured I’d throw the instructions up on my blarg, mainly for my benefit, but for yours too! Here they are…

    How to install devkitpro:

    1. Go to Devkitpro.org and download the latest version of the software (download link is on the left hand column), devkitProUpdater-1.4.4.exe is the one I got from the site

    2. Follow the instructions in the installer. It will download a bunch of stuff to your machine and then extract and install them. Don’t really need devkitPPC or devkitPSP (unless doing NGC or PSP homebrew). Don’t really need Programmer’s Notebook either (IDE)

    3. Let the installer download and install everything, and then you’re done with this part of the process

    Visual Studio .NET 2003 Setup

    I use Visual Studio .NET 2003 at home. If you don’t…well…have fun. icon smile So you want to make DS software... visual studio setup instructions homebrew ds

    1. Open up a new solution, make a new project, and create a new “Makefile Project”

    2. Name it something like “MyFirstDSProj” or whatever…

    3. Before you leave this dialog, go to “Location” and browse to your c:/devkitpro folder, make a new folder so you can store all of your individual DS projects in there — not necessary to do this, but recommended to keep all your homebrewin’ in the same place. NOTE: Do not put any spaces in this new directory you’re making or you’ll run into build time issues later on.

    4. Click okay and go to the next dialog apart of the wizard setup. Go to application settings. Set up your settings like this:

    Build CommandLine: make -r 2>&1 | sed -e ‘s/(.[a-zA-Z]+):([0-9]+):/1(2):/’

    Output: DSTest.nds (NOTE: it’s not EXE, NDS is the executable extension)

    Clean Commands: make clean

    Rebuild command line: make -r 2>&1 | sed -e ‘s/(.[a-zA-Z]+):([0-9]+):/1(2):/’

    -r is a redirect from make

    “2>&1″ Unix thing to redirect something to stdout.

    “| sed -e” – takes stdout and pipes it to stderr. -e is for expression.

    What this all does is takes the output from gcc and puts it into stderr and passes it to Visual Studio so you can see your errors and be able to click on them and view the errors along with your code.

    That’s a make command with a regular expression.

    5. Finish up with the application wizard and you will get into the empty project solution.

    6. Now you want to set up your debugger to output to a DS emulator. I’m using one called desmume-0.7.2. There’s a link to it below. IN VS 2003 goto Projects->Properties. For “Configuration Properties” goto “Debugging.” Under the Action subsection goto “Command” and redirect the ($TargetPath) to the desmume executable. I’ve put the Desmume emulator in my c:/devkitpro/emulator path (I made the emulator folder) and linked to it from there.

    Change Command Arguments to “$(TargetPath)” (without the commas).

    7. Close that dialog and goto Tools->Options. Under the Projects sub menu goto “VC++ Directories,” make sure “Show Directories for” drop down is set to “Executable files” and add this directory: C:\devkitPro\msys\bin. Just go and browse to that directory. This allows you to build from within Visual Studio. Why? The DS homebrew uses a unix shell to build your code and this line gives it access.

    Change “Show Directories for” to “Include files” and add this line: C:\devkitPro\libnds\include

    Change “Show Directories for” to “Source files” and add this line: C:\devkitPro\libnds\include

    Change “Show Directories for” to “Library files” and add this line: C:\devkitPro\libnds\include

    Press OK and you’re done with that setup. You should be able to build an NDS project.

    Setup a DS Build

    If you want to just get up and running goto your c:/devkitPro/examples/nds and you’ll find all the examples you can compile and run. The one I ran is in ../Graphics/3D/nehe/Lesson10/.

    Here’s how you run it:

    1. Go to the project directory where you created your Visual Studio 2003 work folder (c:/devkitpro/DSProjects for example). and copy and paste the contents of ../Graphics/3D/nehe/Lesson10/ in there.

    2. Back in your VS 2003 workspace build the solution. If everything worked out right you’ll get two folders in your DSProject folder called arm7 and arm9, and you’ll have a ton more files in there. The one you want is called an .nds file. This is the executable that you will run in the emulator software or on the R4. Copy it to your R4 and enjoy your work!

    Hardware

    R4 — this is an NDS card that take a micro-SD card. You don’t get a MicroSD card with the R4. The R4 itself has a bunch of circuitry and software onboard the chip to bootup and run your homebrew games, mp3s, and some other stuff. I’ve seen it running a 3D nehe demo converted for use on NDS. Feel the potential (to your face).

    You can get an R4 here: http://www.volumerate.com/details.vr/sku.1202~r.DX

    It costs about 33 bucks and will take somewhere around 2 weeks to get to your house. I haven’t gotten mine yet, but I did order it.

    Some useful NDS bookmarks:

    These first 3 links are the big ones that give you tutorials for working with the NDS

    http://www.dev-scene.com/NDS/Tutorials

    http://www.double.co.nz/nintendo_ds/

    http://www.drunkencoders.com/

    These are useful engineering links to Unix shell commands and working with make files which you’ll need.

    http://www.eng.hawaii.edu/Tutor/Make/

    http://www.geocities.com/TheTropics/1945/index14.htm

    http://www.grymoire.com/Unix/Sed.html

    http://www.grymoire.com/Unix/Regular.html

    http://www.coderjoe.net/

    NDS Emulator link (good for testing on your PC, but the emulators aren’t that fully functional, my friend says he had the best results with this — but these are a temporary solution until you can get an R4):

    desmume-0.7.2-win.zip

    You can find it at this link: http://sourceforge.net/project/showfiles.php?group_id=164579

    So this is the super-quick primer on how to get started. I was installing and setting up while I was writing this down so I made sure to include all of the little nuances and such that I had to go through. If you have any issues, feel free to leave a comment and I can try and help you out or find out more.

    That’s not a moon…

    texturedraytrace Thats not a moon... raytracer Programming

    …it’s a partially reflective UV texture mapped sphere with the image of the moon textured on it. And that one behind it is the place the Battlestar Galactica is going next season. And there’s a big fucking crate, because what wouldn’t a “Hello World” raytraced image be without a big fucking crate. icon smile Thats not a moon... raytracer Programming Before that I had a nice ranchy image of Ino from Guilty Gear XX, but I figured, who would want to see that when you could be looking at a crate?

    So what does this image prove?

    a. I’m a big nerd and have too much free time — and I do, cause I’m on vacation (or “vacation?”) which means I get to do whatever the hell I want, and yes, I choose to work on my raytracer, because I enjoy it. Put that in your pipe and smoke it;

    b. I got rudimentary UV texture maps working for spheres and triangle meshes;

    c. I can load arbitrary triangle meshes, so obviously I would load a cube because there’s nothing more interesting than a cube;

    d. The moon is actually partially reflective and would in reality reflect a red and blue infinite checkerboard plane that stretches far and wide across the universe;

    e. All of the above.

    My raytracer’s actually come to the point where it takes a couple of minutes to raytrace a triangle mesh. Such as this image:

    donut Thats not a moon... raytracer Programming

    So what’s next on the agenda? Well…I fixed some of the horkiness of the raytracer, but it’s still horked in other ways. There are still issues with the reflection, refraction doesn’t work and so on and so forth…a lot of little quibbles with the mathematics that I need to iron out. It’ll get there. If you’re curious how long it took to add texture mapping and mesh loading, on my part not too long… a couple of hours each. For mesh loading, I had an OBJ loader cooked up for our old game engine Bushido. The tricky part was to understand how to find ray-triangle intersections — and to find a good one at that. If you’re looking for a good resource for barycentric ray-triangle intersection testing then google search for “Fast, Minimum Storage Ray/Triangle Intersection” by Tomas Moeller and Ben Trumbore. They also wrote a book called Real-Time Rendering which I need to get my hands on. As one senior engineer where I work told me, it’s the new bible for computer graphics.

    For texture mapping. I had also done a TGA loader for Bushido, so I imported that and made it much more portable. There are also great UV coordinate finding algorithms online for spheres. The 3D mesh UV coordinate algorithm is just based off of the barycentric intersection test. Nice and easy and it gives me much more flexibility in what I can load into my raytracer.

    For even further down the road I’m looking at implementing a kd-tree to speed up my raytracing especially with all these triangle meshes. I also need to consider anti-aliasing. I should also think about a transformation pipeline — that’s right, I got away without one for as long as I could! Multiple lights might be fun. Soft shadows. I’d really like to get into the procedural texturing.

    Above all…having a GUI interface to set up a raytracer scene would really help. One of my goals is to keep my raytracer code portable, so it’s not dependent on OGL or DirectX. That way I can implement a GUI in the future so I can get a wireframe view of everything before I hit the big ole render button.

    More to come…but dinner beckons, and then Rapture.

    Horked but Working!

    Here’s an image from the current state of my raytracer. The big win from all of this is that my raytracer is now recursive so I can cast reflection and refraction rays from my incident ray. It’s still buggy as hell and not showing correct results.

    raytrace3 Horked but Working! raytracer Programming

    I believe the issue I’m facing here is a z-depth one. I’m noticing that a lot of my calculations are the inverse of what I expect. I don’t believe I’m supposed to see the shadow like that, and definitely I should not be seeing the reflection of those two smaller spheres. Now that I have a fairly decent raytracer working it’s time to go back and correct all the little details.

    Raytracing II

    After another day of work here’s the result:

    raytrace2 Raytracing II raytracer Programming

    With the help of Foley, et al. I fixed my illumination code. The specular highlight you see here works more correctly then in the previous image. I’m not so hot about the washed out look of the sphere, but that’s mainly due to the white ambient light I’m using. I also have shadows. I’m not 100% sure if the shadows are correct, but it’s a start.

    Three spheres, one checkerboard infinite plane…I have a very simple scene list now and I can add spheres and planes at will. Maybe oneday even arbitrary 3D models. How could would that be?

    I’m excited.

    There’s so much I can do now. The next major refactoring/addition will be to create a recursive raytracing algorithm which will provide me with refraction and reflection. Chrome spheres here I comes!