Tag Archives: Sprite Lamp

Multiple sprite sheets, Sprite Lamp, and Unity

So I mentioned yesterday that I’ve been working on a small tech demo in Unity, to help make sure I notice all the difficulties that can come up with Sprite Lamp, and the first one that has presented itself is the issue of animating with multiple (sets of) sprite sheets. A few people asked me about this already but I didn’t quite have my head in the game enough to give good answers. Hopefully now that I’ve played with it a bit more directly, I can do better.

Here’s the script referenced in this post.

Oh and before I go on, a quick annoying reminder that Sprite Lamp is at 30% off on Steam as I write this!

Animations with a single sprite sheet

The simple situation for frame animation in Unity is one big sprite sheet. This is, I suspect, reasonably common – especially with people working with pixel art, and textures going up to 4096×4096. Someone in this situation who wants to use Sprite Lamp is in a pretty easy situation in terms of programming – essentially, everything just works easily. You’ll want to make a sprite sheet of the diffuse channel, cut it up with Unity’s sprite editor, create animations, and apply them to a game object with an animation controller. So far, everything is normal. Then, you’ll want to create a corresponding normal map sprite sheet with Sprite Lamp (either using whatever texture packer tool you want, though be wary of rotating normal maps, or by drawing the lighting profiles in sprite sheet positions then processing them all at once). You don’t need to cut this up into sprites in Unity after you’ve imported it. Then, apply a Sprite Lamp (or other) material to your game object, drag the normal map sprite sheet into the NormalDepth slot, and everything should be fine.

The reason this works smoothly is because if you have one big sprite sheet, all the animation system is changing is the UVs on the sprite, and because the Sprite Lamp shader doesn’t do anything fancy with UVs, it’ll just look up into each sheet in the same spot.

Multiple sprite sheets

This is where things get tricky. The issue is that Unity’s animation controller automatically switches textures as necessary, but it only provides for switching the main texture, because usually you only have one texture when you’re doing this kind of animation. By way of example, say you have a character who can walk or run. If you’re making a normal 2D game without lighting, you might have two textures: WalkSheet, and RunSheet. Ordinarily, when your character is walking around, Unity will be switching between sprites in one sheet, and thus changing the UVs – but when your character switches to running, Unity has to switch to the RunSheet texture, which it does automatically.

Suppose instead though, you are using Sprite Lamp, so you have six textures. WalkSheet, WalkSheet_Normal, WalkSheet_Emissive, RunSheet, RunSheet_Normal, and RunSheet_Emissive. Your character starts walking around fine, with WalkSheet, WalkSheet_Normal, and WalkSheet_Emissive applied – all is well. Then they break into a run though, and we’re screwed. The animation system switches the diffuse texture to RunSheet, but the normal and emissive channels keep the Walk versions. This will look somewhere between pretty broken and horribly broken, depending on whether or not the walk and run sheets have similar layouts.

How to get around this? Well, essentially, I’ve written this script. It’s still not tested all that much, so I haven’t added it to the official Unity pack yet, but it has worked in my use case and will hopefully work in yours (if not, let me know). The script works by creating a dictionary at load time, which uses a texture as its key, to look up the corresponding textures. Then in the update, it will check the object it’s attached to to see if the texture it’s using has changed – if it has, it automatically sets all the other textures.

To use it, the first thing to do is attach it to your character (or whatever). Second, you have to populate some lists – this is currently done manually, but I’m looking into nicer ways to handle this.  The lists are ‘primaryTextures’ and ‘otherTextures’. Into ‘primaryTextures’, drag all the sprite sheets that your AnimationController knows about – so in our above example, that would be WalkSheet and RunSheet. In the ‘otherTextures’ list, you’ll want to drag all the auxiliary stuff Sprite Lamp uses – here, that would be ‘WalkSheet_Normal’, ‘WalkSheet_Emissive’, ‘RunSheet_Normal’, and ‘RunSheet_Emissive’. For each element of ‘primaryTextures’, the script will search for any textures in ‘otherTextures’ that are suitably named, and associate them so that they get set at runtime.

That should be just about it! As always with Unity things, if I’ve missed some obvious smarter way to do this, please let me know. Also, I’ll be along soon with a more concrete example of this method that you can download, in case my description here doesn’t make things clear.

Coming up next…

The other problem I rapidly ran into here is the problem of ‘light sources’ that exist in the emissive texture map. They tend to move around within the sprite, and you’ll likely want an actual light source to move with it, but the engine doesn’t know how to move it appropriately. I’m working on a script that will automatically parse an emissive map and approximate clusters of bright pixels by creating a light of the appropriate intensity/colour/position. It’s at proof-of-concept-ish stage now and isn’t ready to distribute just yet, but so far it looks pretty cool, particularly by matching the light’s movement to the animation’s framerate.

Sprite Lamp sale, and the eating of dogfood

Hi folks!

First thing’s first, Sprite Lamp is on sale on Steam this week, for thirty percent off.  A couple of people asked me when that was going to happen, so here we go. I turned thirty a couple of days ago so I thought that was as good an excuse as any. I’ll note that this sale includes the upgrade from the hobbyist version to the pro version. So yeah, here are the links to the Steam pages if you want to get in on that.


Mac holdup

I’m not enjoying giving bad news for the mac port, but unfortunately there has been a hold up – we’ve recently been having a pretty major show-stopping bug with some not-yet-understood combination of mono, graphics drivers, and OSX versions. Rob has more resources than I do for this, and he’s currently messing about rolling things back to get it to the point it’s usable. Once we get it to some working state, the plan is to release an alpha to kickstarter backers, to get a feel for reliability, and hopefully that will give us the data we need to move on to a proper release.

Linux alpha incoming

Progress is much more forthcoming on the Linux build, fortunately, and I’m hoping to get an alpha to backers soon. I’m still struggling with the Steam libraries on Linux, but other than that things seem to be coming together pretty okay.

Eating our own dogfood

Developers might recognise this rather gross-sounding phrase. ‘Eating your own dogfood‘ refers to the practice of using your own products internally. Technically, I think this would mean Snake Hill Games was making a new game, and it was using Sprite Lamp, but this isn’t the case (yet). Rather, I’ve noticed that too often, I don’t have a great answer to questions people ask about using Sprite Lamp with Unity, because while I have developed the shaders and put them in a toy environment, I haven’t actually used them for real. Unity is big and complex, and try as I might, I frequently overlook application details that are tripping people up. In an attempt to head that off at the pass, Halley and I have decided to make a small tech demo using Sprite Lamp and Unity. Hopefully the following things will result:

  • I’ll encounter problems with using Sprite Lamp and Unity, and fix them.
  • I’ll encounter workflow issues with Sprite Lamp now that we’re using it for real, and fix them.
  • Halley will create a bunch of art, and write some blog posts on workflow and artistic best practices, that will perhaps be of some use to people.
  • We’ll perhaps end up with some generic assets that people might find use of in their games.
  • We’ll be able to give more concrete answers to questions like “How long will it take to make assets for use with Sprite Lamp?”, as well as point people to a live example of what games that use Sprite Lamp can look like.

This won’t take a great deal of my time (it will be more artwork than codework) but it has already borne some fruit. Tomorrow, I’ll be posting an update about using multiple sprite sheets with Unity’s animation system, and adding a script to the official Unity integration package that automates the process of switching out different sprite sheets.

Anyway, I’m not going to say much about this little tech demo just yet – it’s in very early stages, and there’s nothing really worth showing off yet – but I’ll post a bit more about it soon.

Scattershot update

Quite a few things to put out there today.

Mac and Linux progress

This has been my main focus recently, and though I’m aware that this part of the project is well overdue (more on that in the ‘lessons learned’ section later on), we’re down to the last handful of bugs before the alpha releases on MacOS. Rob reports that he’s been having more trouble than expected with various parts of the project – it was a bit of an unknown working with C# and MacOS in the first place, but there have been more unknown unknowns than either of us saw coming. At this point it’s essentially all UI fixes, but unfortunately they’re not the kind of thing that can be handwaved, even for an alpha. It’s been frustrating at our end, since Halley is a Mac user and has been keen on getting this version sorted for a long time, but the end is very much in sight. I apologise for how long this is taking, though – I don’t mean to gloss over the fact that it’s much longer than expected.

As for Linux, because the MacOS version is mostly in Rob’s hands now, I’ve been looking at the Linux build. This isn’t as big a deal as the Mac version (in terms of work, I mean) because it doesn’t involve an entire UI rewrite, but there are lots of problems that have previously been in the too-hard basket because previous releases haven’t been in any way final, which I’m now having to face head on. A big part of all this is packaging and general unfamiliarity with deployment conventions at this point.

A few engine things

Unreal 4

This is an odd one. Lots of people have been asking me about integration between Sprite Lamp and Unreal 4. I feel a little bit like the winds of change are blowing in the indie gaming word – it seems like everywhere I turn, people are talking about their new project using Unreal 4, or the various advantages the engine offers. I don’t know whether Unreal 4 is going to replace Unity in the near future, but it was enough to convince me that it’d be irresponsible to not look into Sprite Lamp and Unreal 4 playing together.

I’ve spent some time recently learning the engine a bit, and… well, beyond normal maps, it’s not clear there’s much I can do with Unreal 4. As usual, it’s a modern engine and can therefore handle dynamic lighting and normal maps just fine. However, because it uses deferred rendering in a very fundamental way, it’s no longer possible to just write your own custom lighting model with Unreal 4 as far as I can see (and the fancier features of Sprite Lamp’s shaders fall into that category). I’ll add two caveats to that – first is, obviously people are capable of achieving amazing things with Unreal 4’s lighting, and that includes nonphotorealistic results, so very likely things like cel shading are still possible. It just means that I won’t be writing the exact shader from the preview window of Sprite Lamp into Unreal 4, because that appears to not be possible. The other thing is that since Unreal 4 has its full source code available, technically it’s not really true to say that anything can’t be done – almost anything is possible. However, I think that trying to maintain a source-modified version of the engine (that would survive integration when Epic updates and so on) is probably more trouble than it’s worth for everyone involved.

Godot

Another engine that seems to be picking up steam a bit is Godot. Since it’s completely free and open source, Godot’s appeal isn’t hard to understand. I don’t know a great deal about it yet, but I’ve been following along and it seems that 2D lighting is a priority for them in the near future, which is obviously very relevant to my interests, and perhaps yours. That said, unlike Unreal, I haven’t particularly gotten the impression that lots of people using Godot are also using Sprite Lamp – if you’re a Godot fan and would like me to look closer at its use with Sprite Lamp, let me know.

Real life issues

As you’re probably aware, Sprite Lamp has been out on Steam and Humble for a couple of months now, and though it’s doing okay for itself, taken in combination with the above issues about the Mac port taking way longer than expected, it would be financially risky for me to just assume that I can live indefinitely on Sprite Lamp. This has necessitating me getting myself a ‘real job’. It’s a job that doesn’t consume all my time, and don’t plan on completely returning to the normal full time employment world for a little while yet (not while Sprite Lamp is ongoing, certainly).

Lessons learned

One day, I’ll do a proper Sprite Lamp post-mortem, but there are two important things I’d like to put out there in case anyone might learn from them.

First off, it’s clear to me now that the biggest technical misjudgement on my part for this project was underestimating the difficulty of working with unfamiliar platforms. I’ve only ever been a Windows developer, so (I thought) I had a suitably healthy fear for working with other platforms – that’s why I went and made proof-of-concept stuff for MacOS and Linux before promising those versions on the Kickstarter campaign. Still, I was unprepared for how much work gets bogged down (for me, at least) by not knowing the operating system. As a simple example, I recently spent an embarrassingly long time tracking down some issue with apt-get on my Linux install that was stopping me from progressing, which ultimately culminated in having to install a newer version of Linux (which, to its credit, went very smoothly). That stuff adds up, and it’s not psychologically great when it feels like you spend as much time fighting with problems of unfamiliarity as you do writing code. I’m hoping future projects of mine can be cross platform, but I’m definitely going to be less gung-ho in my assumptions. Certainly I cringe internally to recall my intention to do a simultaneous cross-platform release.

Second off, and a little personally, I didn’t foresee how much being a (very very mildly) public figure would be a source of stress, and how crap I would be at maintaining stuff like this blog, a social media presence, etc. I’m actually not a terribly shy person in real life (although admittedly with game development to some extent you’re grading against a curve there), but apparently I am in the internet world, which seems to be the reverse of how most people feel. This mostly makes me respect community managers a lot more, but also gives me some reason to pause in the goal of being an indie developer, since it kind of comes with the territory. Not sure how I’ll feel about that going forward, but if anyone has actually read this far and has any advice on the same kind of thing, please let me know.

 

Anyway, that’s it for now, and I’m back to figuring out Linuxy things. To anyone who read this far, I hope you celebrated whatever they’re inclined to to the best of their ability, and that 2015 is as good or better than 2014.

Steam release, new website, and forums

So! The big news, I suppose, is that Sprite Lamp is out there! In the wild. What’s unusual is how late I am to post about this, but main point is, Sprite Lamp for Windows is on Steam right at this very moment.

The reason I haven’t posted about this yet, despite the Steam release being last Thursday, is that I was hoping to get Sprite Lamp out in its DRM-free form at the same time. I’ll be doing this via the Humble Widget, and I suspect rather strongly that a lot of people would rather own a tool like Sprite Lamp in a more traditional way, rather than having to boot up Steam in order to use it. For that reason, I’ve been holding off on talking much about the release. In other words, I don’t consider it really released until the DRM-free version is out there. The issue is that because I want it to be possible to upgrade from the Hobbyist to the Pro versions of Sprite Lamp, the good people at Humble tell me it takes a bit longer to set up the widget, and that I’ll have it early this week. Big announcement when that happens, of course.

Regarding the new website, this is for a couple of reasons. The old website made use of wordpress.com, largely because I set it up way back before I knew where Snake Hill Games was going, and wanted something easy to deal with. Gradually, there have been more and more things that I wanted to be able to do that I couldn’t via wordpress.com, but it has come to a head by learning that I couldn’t use iframes and thus couldn’t embed the Humble Widget. This isn’t the first thing I’ve been wanting but unable to do with the website, but it’s the first that is an unambiguous show-stopper, so the switch had to be made.

This has a few benefits. For instance, Snake Hill Games now has a forum! This has been a long time coming (shout out to my friends at Graphite Lab who helped me out with some initial forum attempts earlier – it was only because of my foot-dragging that that didn’t happen), but you can now come to the forums (link near the top of the sidebar on the left) and say hello. I’m not overly familiar with the running of forums, and I’m not expecting them to explode into a huge bustling community or anything, but if you have problems or suggestions or want to show off your artwork, head on over – I apologise in advance if I screw up the administrative side of things.

Sprite Lamp for Windows launching really soon

Hi folks!

So I guess I’ve kind of given away the main bit of this in the title. There’s a bit of a story behind it, but the TL;DR is that Sprite Lamp for Windows will be launching on Steam on the 25th of this month! Yes, that’s in a few days – this Thursday in fact. I’ve got an application pending for a Humble Widget too, so while I can’t 100% confirm it, I’m hoping that it will be available via Humble Widget (at www.spritelamp.com) on the same day, or at least soon after.

There’s a bit of a story leading up to this which I’m going to tell now – not because it’s particularly interesting, but just for the benefit of people who like to stay informed about adventures in development.

Recent events

My initial plan was to launch a bit earlier, on the sixteenth. I just had a couple of things to do, and one of them was to ask the fine folks at Valve how to tag it as ‘early access’. This would have been on something like the ninth of this month. What I learned when they replied is that Steam’s Early Access feature is for games, not software in general, and as such Sprite Lamp can’t make use of it. Sprite Lamp is in a pretty good state now I think, but there were definitely some bugs still there and I was also hoping for some wider feedback on the UI and general usability issues, so this was bit of a rude shock (NB This was my fault, not Valve’s). I briefly considered delaying, but on further reflection I concluded that:

  1. The serious bugs that remained were probably fixable in a week or so of furious coding.
  2. Though the software will continue to improve in the future, it’s at a point now that people will find it useful for their development, and by delaying it I’d just be keeping it out of people’s hands unnecessarily.
  3. I’m inclined to be pretty nervous about launching products and that’s probably making me cringe away from this situation a bit, but I should correct for that personal bias of mine and just get on with it.

So, steeling myself to a week of reasonably full-on bug fixing and polishing, I got into it! At least, I wish that’s what had happened. What actually happened was that my computer died. Totally random, by all appearances, but not ideal timing. No data loss, but certain set things back a bit. I was back up and running in a few days, delayed the launch by a small amount, and got to work. Fortunately, I was right about being able to get through the bugs on my list in a few days, and that brings us to where we are now. Despite a slightly hair-raising last couple of weeks, Sprite Lamp on Windows/Steam is ready to go!

MacOS and Linux versions

So, I mentioned in my last post that I was going to stagger the launch, because it’s a small team and I’m not familiar enough with MacOS and Linux development, and in general, it’s scary enough launching a product on Steam without throwing in multiple OSes at the same time. However, I’m pleased to announce that the MacOS build is making really good progress. I’ve had my head in Steam stuff for a little while now, but the MacOS port has made enough progress in my absence that it’s time for me to get back into that side of things (that is, it’s reached a point where my knowledge of Sprite Lamp’s codebase will speed things up greatly). Though I’m reluctant to make solid announcements, I’m pretty confident that we’ll have at least something beta-ish in a few weeks, and I’m hoping for the proper launch within a month of the Windows launch.

The Linux build of Sprite Lamp has historically been way ahead of the MacOS build, but I’m afraid that will change at this point. However, it’s definitely going to be following the MacOS build pretty shortly.

Depth editing and imminent update

Hi folks. Just another Sprite Lamp progress report. Before I go into that, I want to give a shout out to two projects that are on Kickstarter right now that are making use of Sprite Lamp. First off, Hive Jump – a 2D shooter with local co-op, and with plenty of dynamic lighting to show off. Secondly, Elysian Shadows, an RPG with some next-gen lighting techniques – they’re not as far along with their Sprite Lamp usage but I’ve been in touch with them about it and they’ve got some sweet stuff planned. Both projects seem to be kicking some arse already funding-wise but you should still go and check them out.

Next Sprite Lamp release

So, I said in my last update that it would be the last time I do an update via the moderately dodgy dropbox link method, as I’d be moving to Steam. I was hoping to make good on that plan, but getting up on Steam is taking me a little longer than expected, and I’m currently sitting on some features that I want to put into backers’ hands sooner rather than later. As such, there’s going to be one last pre-Steam release, and it will be some time over the next few days. This also means one more release with a dodgy not-so-useful Mac version, unfortunately, but see below for some more encouraging news on that front. I’ve been hard at it on the features though, so this next update should be a good one. For everyone, it will contain the Spine integration that I mentioned a couple of posts ago, which is already pretty cool. For pro users, it will also contain the long-promised depth editing system, which I’m about to talk about. There are also a couple of other small improvements and tweaks to things I noticed needed fixing along the way.

Depth editing tools

As mentioned, this is a pro-only feature. Just wanted to get that in early to avoid any disappointment. One of the major things I’ve been working on is a system for editing and fine-tuning depth maps after Sprite Lamp has created them. As you might know, Sprite Lamp is primarily for creating normal maps, but can also create depth maps from them. However, there isn’t enough information in a normal map to create perfectly accurate depth maps, and in some cases the results could use some tweaking (particularly for elaborate character art or other complex objects). Drawing depth maps from scratch is a pain, though, so I wanted to add tools to build on what Sprite Lamp has created so you can get good results without loads of work. Sprite Lamp’s workflow for tweaking depth maps is roughly as follows:

1. Select edges between pixels where there is a depth discontinuity.

2. Select pixels in the depth map – a process which is aided by the edges from step 1 – that are at the wrong depth (say, the pixels of an arm that need to be brought forward).

3. Move the selected pixels forward or back until they’re in the right place.

4. Repeat until things are as you want them to be.

The depth editing interface looks like this:

DepthEditor

In the preview window you can see the place where you actually interact with the image. The red lines are the edges between the pixels. The cyan lines are contours (their display can be toggled) which helps you see problems with the depth map. Edges can be detected based on various things (such as sharp changes in the normal map or the diffuse colour), or painted directly with the mouse. Selection is also painted with the mouse, although factors such as softness can be controlled, as well as only selected pixels of similar depth to where you started (important for selecting creases and the like). Selection is necessarily soft, because if you have a hard-edged selection and pull bits of it forward and back, you’ll get a big step in the depth function, which isn’t usually what you want.

You’ll also notice that there’s an undo and redo button, which kind of goes without saying with tools like this, but I still wanted to mention it because it was such a pain to implement.

I’ve since gone back to some of the Sprite Lamp test artwork that caused problems for the depth generation algorithm and done some work with the depth editing tools, and so far it has taken me very little time (usually five to ten minutes of messing about) to get things to a good state. I admit I’m not all that sure how many of Sprite Lamp’s userbase will be making extensive use of this feature but I think those that want it will be pleased with the results.

Progress on the Mac port

One of the reasons I haven’t been super talkative about features recently is that I’ve been working on some major refactoring. For the non-programmers reading this, ‘refactoring’ is another word for ‘working really hard and producing no visible results’ – in other words, I’ve been reorganising the guts of Sprite Lamp rather than adding features. This is to make things as quick and painless for the Mac port, which I’m pleased to say is now underway. I mentioned it was underway last time I think, which it was in the sense that I’d confirmed with Rob that he wanted to work on the project and he was looking over the code. Now it’s underway in the sense of code is being written and the MacOS UI is being built. This is pretty exciting for us over here, since Halley (who you may remember as the artist who has done pretty much all of Sprite Lamp’s sample art from the Kickstarter and these blog posts) is a Mac user and is very much looking forward to getting a real copy of Sprite Lamp up and running on her machine. I know there have been some people hanging out for the native Mac version, so I hope the news is good for them too.

Remaining features

The list of tasks remaining on Sprite Lamp isn’t empty, but it is getting pretty short (note that I’m not talking about engine integration stuff for the moment – there’s certainly plenty of work left to do there). I’ve still go a few things I still want to add, though, and I wanted to give people some idea of stuff that is still coming. Two major-ish features that remain on the list, both pro features, are the ability to load custom shaders for the preview window, and the ability to export a mesh based on the depth map you’ve created. Another feature that I really want in is the ability for all the map generation functions to be interruptible – currently they just block Sprite Lamp, which is fine for pixel art because they take a fraction of a second, but it’s a bit awkward having Sprite Lamp basically hang for ten seconds or so while a higher resolution image processes – I’d much rather there was a progress bar and a cancel button. That one’s a substantial task, but I think it would seriously improve the user experience and the usefulness of Sprite Lamp, especially when you’re experimenting with different settings. I also have a few features that aren’t accessible to the command line interface yet that I need to add, namely anisotropy map and palette creation. Finally, if people want it, I’m still up for making a native-looking UI for the Linux build. I feel less urgency on this one, because the Linux implementation of Winforms is actually really stable and responsive as it turns out, but unless people overwhelmingly don’t care, I’ll get to it.

At this point, though, I think that as far as 90% of users are going to care, Sprite Lamp is feature complete, and for the other 10% of users, Sprite Lamp is very close to feature complete. For that reason, I’m going to focus on getting everything aligned for the Steam release and the mac port, and then dive into the more complete engine integration – the features I’ve just mentioned will come after that. I just wanted to mention them in case anyone was worried I’d forgotten about them.

Sprite Lamp and Spine

As I’ve mentioned recently, I’ve been playing with Spine and Sprite Lamp. It’s time to talk a bit about how that’s going and what it means.

Spine files in Sprite Lamp

The main thing I’ve been working on lately is loading up Spine files in Sprite Lamp, so you can view them, animated and dynamically lit, in Sprite Lamp’s preview window. And, it’s working! It looks something like this:

Sprite Lamp with an example Spineboy animation loaded
Spineboy artwork and animation is from Esoteric Software, with our own lighting profiles/normal maps applied.

As you can sort of see from the screenshot, the interface is not terribly complex – you load up a .json file and you have your character. You’ll also need to (draw and) load up lighting profiles in atlas form (if the files are named properly Sprite Lamp will automatically grab them), and then off you go. You can select any animation in the Spine file and also select different skins. You can also control the speed and direction of the animation playing.

The walk is a bit slower than I’d like, perhaps, but here’s an illuminated Spineboy, with a static light to make it easier to see what’s happening:

Spineboy walking with dynamic lightingThere’s a certain amount of dodginess regarding the bending of the knees, though for artwork that was made without dynamic lighting in mind, I think he came out pretty well. The fact that this is truly dynamically lit, rather than just faked, is most evident on the parts that are rotating the most, particularly the right hand.

The intricacies of rotating normals

It might be helpful, particularly for programmers, to have a bit of a grip on the maths behind this kind of thing. If that’s not your bag, you might want to skip this section.

It’s tempting to think that all you need to render a normal-mapped Spine character is the ability to render a normal mapped sprite combined with the ability to render a conventional Spine character. Unfortunately, the rendering side is slightly more complex than that (NB: I’m just talking about the shader maths here – these complications are not the artist’s problem).

Naturally, rendering a Spine character involves moving and rotating various images about. This is nothing special – rotating a textured quad is something computers have been able to do happily for decades, after all. You paint your character’s leg image or whatever, then you rotate it, and you’re all good. However, when normal maps become involved, things get slightly more complex. If a normal map has a pixel that encodes a vector that faces to the right, and you rotate the whole image 90 degrees clockwise, that pixel should now be facing down. But, its colour hasn’t changed – it still encodes ‘faces to the right’. If you rotate it another 90 degrees, so it should be facing to the left, it still appears to be ‘facing to the right’. This problem gets worse the more the character rotates. Some Spine enthusiasts reading might remember ages ago when Sprite Lamp was in its Kickstarter phase, we had a few shots at Spineboy walking around with dynamic lighting. If I recall correctly, this problem was present in those demos. It was very subtle, because no part of Spine Boy rotates a huge amount during his walk cycle, but it was there. Fortunately, the solution is not terribly complex – you simply have to tell the shader how much each body part has rotated from its default position, and rotate the normal by that amount in the pixel shader Done!

But, you might justifiably be wondering: what of soft skinning? After all, the fine folks at Esoteric Software have been hard at work following their recent Kickstarter adding soft skinning and free form deformation (FFD) to Spine. It’s not obvious what it means to refer to ‘rotation’ when the rotation of a point is going to vary throughout a mesh. And, indeed, this does get a bit more complicated. For Sprite Lamp, I’ve decided to go with a fragment-shader solution to this problem. It involves using the derivative functions in GLSL to compare the the world position and UV coordinate of a fragment with its neighbouring fragments, which enables you to calculate a thing called a TBN matrix (tangent, bitangent, normal). When this release comes along, I’ll talk a bit more about how this is done in the shader. The takeaway is that in the next release, Sprite Lamp should smoothly handle all the different types of animation Spine can throw at it – textured quads, but also soft skinning and FFD. As a demonstration/stress test, Halley has cooked up a slithering snake animation. She wanted me to make it clear that this is not her best work and she’s not very experienced with Spine animation. As far as a clear demonstration of variable rotation on a soft-skinned mesh, though, this does nicely:

Snake slithering to the leftYou can see here that with the light source on the left, the coils of the snake are picking up the lighting correctly as they wave. It’s not obvious for all animations when the normals aren’t being computed correctly, but in the case of this snake it’s something of a stress test.

Spine and Sprite Lamp in your game engine

So, so far the work has been on getting Spine animations displaying in Sprite Lamp. You might be wondering when you can actually put this in your game.

Unfortunately, the answer to that depends on a bunch of factors. I’m only one programmer, and the crossover between Spine and Sprite Lamp is only one of the many parts of Sprite Lamp. Once Sprite Lamp is out (like, out out, not in alpha like it is now) I’ll be able to give a much more thorough look into engine integration. My policy with Spine will be similar to my policy with the rest of Sprite Lamp’s engine integration: I’ll do as many as I reasonably can myself. Since there are a lot of engines in the world, and I can only cover a few of them, I’ll also do my best to document everything you need to know as a programmer to get things working yourself, be it in an existing game engine that I haven’t been able to cover, or in your own hand-coded system.

That all being said, somewhat predictably, my priorities towards the most widely-used engines will remain, meaning Unity will be first on the list. I’ll be posting more of that as I know it.

Sprite Lamp’s palette system

Yesterday I released the latest update to Sprite Lamp, and with it, a properly implemented and documented palette system. Still pending are shaders for various engines to make it usable in your games, but in the mean time, I’m going to give a quick rundown of what it is, how it works, and how the (really pretty simple) shader works.

Why palettes?

This is something that came up due to repeated requests from artists. As a graphics programmer, my first thought was to calculate the light based on the angles of the light and the surface normal using standard Lambertian and basically call it a day. However, as several artists pointed out to me, this means that when a part of an image gets darker it approaches black, and artists very rarely use real black in their paintings. Shadows are more likely to have some blue to them, and highlights are likely to be slightly yellow rather than white. There are various ways to get around this – tweaking the ambient and direct light colour, for instance – and while those options remain, I thought it would be good to give artists more direct control. Hence the palette system.

This works by taking the diffuse map (that the artist creates), taking all the unique colours from it, and creating a sort of template palette image. This palette is then saved out and modified by the artist to get the effects they want. A palette image has a vertical column of pixels for every unique colour in the depth map. The vertical position in this column represents the colours that those pixels will be at different lighting levels. The midpoint of each column is the colour when that pixel is lit with full diffuse lighting but no specular lighting. Below that it fades as the diffuse lighting drops away to nothing, and above that it represents the colour when an increasingly strong specular highlight is added. Sprite Lamp can be used to generate either an ’empty’ palette that will create flat lighting (the columns are the same colour all the way up), or a palette that will produce simple calculated lighting, fading to black at the bottom and white at the top.

As an example, here is the diffuse channel of the Sprite Lamp zombie:

Diffuse image of a zombie

And here are the autogenerated palettes for said zombie (with and without default lighting built in):

EmptyAndDefaultPalettes

From here, you save one of these images out (whichever would work best for you as a guide) and then change the colours as you see fit. The only really important thing is that you generate the index map (more on that later) and then make sure you keep the horizontal positions of the pixel columns in the same place/order in the palette.

Here are some examples of effects that are possible using this system, with the zombie’s palette image visible on the inset.

ZombiePalette2
This is a simple case of adding some blue to the shadows and some yellow to the highlights to add some depth to the result.
ZombiePalette3
In this image, we’ve done something like a traditional palette swap, to make a different colour scheme entirely.
ZombiePalette4
This one makes use of the Dawnbringer palette – it uses fewer colours and gives a more retro look.

The Shader

So, as promised, I’m going to give a quick outline of how the shader works. It’s actually not very complicated, but it hinges around something that Sprite Lamp will generate for you, called an index map. You’ll need a normal map, as usual, and then a diffuse map, and from the diffuse map Sprite Lamp will generate the palette map template (which you then modify) and the index map (which you don’t). The index map for the zombie looks like this:

zombie_Index_Bigger

The grey values in this image are actually a value from 0-1, representing the horizontal position in the palette map where that column of colours resides. Black represents the leftmost column of the palette map, then the second darkest grey (the hair) will be the second column across, and so forth. This is why it’s important to keep the columns of the palette map in the same place.

As the shader programmer, all you need to do is calculate some lighting value between zero and one (the way Sprite Lamp’s palette shader does this is by averaging the diffuse and specular components and then clamping to the correct range). Then, a look up into the index map will get you a luminosity value between zero and one. From there, you do a look up into the palette map, using the value read from the index map as your U coordinate, and the calculated level of illumination from your lighting algorithm of choice for the V coordinate, and you have your final colour. Because the whole point of the palette system is to give the artist precise control over the colours that end up on the screen, nothing more is done – the colour is outputted onto the screen. The pseudocode for the shader might look something like this:

float colourLevel = (diffuseLevel + specularLevel) * 0.5;
float indexPosition = tex2D(indexMap, textureCoords.uv).r;
//Note that we use 1.0 - colourLevel because usually positive V
//goes down the texture map.
vec3 finalColour = 
         tex2D(paletteMap, vec2(indexPosition, 1.0 - colourLevel);

The generation of the index map

For the most part this isn’t something you’ll be worried about, but there are certain circumstances where it’s important to know the details. Sprite Lamp generates a palette map from the diffuse map to use as a template, but then it generates the index map from the diffuse and the palette maps. It does this by going through every pixel of the diffuse map, and then searching for that pixel’s colour in the middle row of the palette map (that is, it looks through the row of pixels half way down the palette map). When it finds the colour it’s looking for, it will use the horizontal position of that to determine the greyness of that pixel in the index map.

This probably isn’t terribly relevant to most use cases, but it’s possible that you will want to use a palette map for more than one piece of art in your game (to render a whole scene coherently, for instance). In that case, you’ll want to make your own palette map from scratch, making sure the important colours are present all the way along the centre. Having done that, paint all your diffuse maps using only colours from that centre row of pixels. Then, load up a given diffuse map, and rather than generating a palette from it, open up the palette you made into the palette map, then click the ‘generate index’ button. If the diffuse colours are all present in the palette’s central row, Sprite Lamp should generate a fully functional index map without issue – it doesn’t matter that there are colours in the palette not present in the diffuse.

Conclusion

I would imagine that this problem has been tackled by other developers at various points through gaming history – this approach is just what came to mind to answer artists’ complains about black shadows. Given that, this explanation is straight from my brain to the page, as it were. Please, let me know if there’s anything I’ve been unclear on, so I can fix my explanation.

More importantly, if you do anything cool and unexpected with this system, I’d be keen to see your work. I’ve already been surprised/impressed with Halley’s implementation of the Drawbringer palette from above, and I’m confident that various cel shading and other techniques are possible using this system too.

Engine integration so far

Hi folks! I’ve been spending some time lately investigating a few of the most commonly requested engines for Sprite Lamp integration – namely Unity, Game Maker, and Construct2. The results so far have been pretty positive – I’m hoping to get at least some support for these three engines made public before I head to GDC. With this article, hopefully people who have been wondering about these three engines will come away with a better idea of what will be possible.

Unity

So, Unity takes the lead as most commonly requested (even though I think mostly people assume it goes without saying). Fortunately, despite it being used for 2D games very often, it is a 3D engine, and that means it has a lighting engine, which means this will be both a smooth integration and a feature-complete one.

As some may have seen, this article by Steve Karolewics of Indreams Studios details an initial attempt at getting Sprite Lamp lighting working in Unity. Steve (along with everyone else who has ever used Unity for anything) knows more about Unity than I do, and I’ve taken his work as a base for the full shader (currently a work in progress). So far, I’ve been working on the hardest part – self-shadowing. Here’s progress so far (hint: it’s working).

The light on the left is closer to the stone wall than the one on the right, which affects shadow length and attenuation.
The light on the left is closer to the stone wall than the one on the right, which affects shadow length and attenuation.

The big part that remains to be done here is that the Sprite Lamp shader has to know the resolution of the textures (for per-texel lighting and for shadowing). At present (for the above screenshot) it’s just hardcoded, but obviously that’s not a long term solution – I’m going to write a little script that runs at load time that sets up the relevant shader variables automatically, so the user doesn’t have to worry about it.

The important thing to note with the Unity integration is that, as mentioned, it already has a lighting system. Light entities already exist in the game, and they will work with Sprite Lamp as you’d expect. Multiple lights work as expected, and Unity will automatically handle stuff like calculating which lights affect a given object. You can also place lights in 3D space (that is, vary their depth position) and have everything work as expected, because as mentioned, Unity is at its heart a 3D engine.

Basically, everything that can be done in the Sprite Lamp preview window is going to be achievable in Unity. Other features that I will most likely add at some point will be support for tessellation (making use of the depth map) which might be cool for the sake of parallax or 3D, and (pending further investigation) support for the deferred rendering pipeline.

Game Maker

I often say that I don’t have a clue about Unity, and that’s pretty much true, but I have at least used it before. That is not the case with Game Maker – I literally opened it for the first time the other day to investigate stuff. It’s therefore possible that I’m missing obvious things – if so, please let me know!

That said, the results of this investigation have been positive. The short answer is, lighting is go:
GameMakerSL

This might not look like much, and it’s not as far along as the Unity integration, but the important thing is that I can load my own custom shader – from here on in, being able to get cel shading and self shadowing working is kind of just details.

At present, there’s some boilerplate scripts that go along with this too – one that you’ll attach to the Create event of your dynamically lit objects and one that goes with the Draw event – which sets appropriate shader variables and that kind of stuff. My understanding is that Game Maker is actually usable without any custom scripts at all, so for the benefit of users who aren’t scripters, I’ll keep the interface with that script as small as possible and document thoroughly any interactions you have to do with it. They’ll almost certainly be very simple – stuff like setting light levels, etc.

That brings me to the next part of this. Unlike Unity, Game Maker doesn’t have a lighting engine built in – this means that there aren’t, for instance, native entity types for stuff like light sources. At this point, I don’t understand the engine well enough to know what the best solution to this is, but it should at least be possible to have a dummy object that acts as a light source, and then tell the scripts on the lit objects to update their shader variables based on the position of the dummy object.

Slightly more complicated is the question of multiple light sources. At the very least, it is simple to have an hemispheric ambient light and a single point light at any given time. I can also add a few more lights by just making the shader more complex (basically, have multiple shader variables for multiple light positions, and add the results together in the shader). However, having an arbitrary number of light sources becomes more complicated – this will involve building a system that automatically tracks lights and what objects they’re close enough to have an effect on. For the moment, my first release of the integration with Game Maker will be the shader and code snippets necessary to get basic lighting going. I’d rather get a basic implementation going for multiple engines, then return to more in depth work like that later if it’s in high demand.

Construct2

This is the least advanced and most recent investigation I’ve done, but I know a few important things so far, and I wanted to pass them on. I’ve also been in touch with one of the developers of the engine, which helped a lot.

Basically, the way Construct2 works doesn’t naturally lend itself to this kind of thing, because of course a 2D engine designed for ease of use isn’t designed with 3D lighting in mind. But, it can be done, with a few caveats.

The rendering engine of Construct2 works, simply enough, by drawing sprites. In addition to regular sprites, you can draw effect sprites – these have shaders attached to them, and are often used for things like colour shifts and distortion effects. They also have a texture attached to them, and can sample the colour of what they’re drawn over. We can leverage this to make some lighting effects.

My first attempt is based on a shader by a developer named Pode. Here goes:
ConstructLighting

So far so good. The folks from Scirra tell me there’s a built in bump map shader that would be a good basis for me to work from too, which works in a slightly different way (the above example multiplies the effect result with the underlying colour, but you can also directly sample the underlying colour and render the result over the top).

From here, given access to the shader, I can get a lot of Sprite Lamp’s lighting effects going. The things I said in the last two paragraphs on Game Maker apply to Construct2 as well, regarding multiple lights and dummy objects and whatnot.

However, there’s another issue with Construct2 that is a limiting factor – namely, an effect sprite can only have one texture attached to it. Now, the Sprite Lamp shader makes use of a lot of textures, some more necessary than others. The diffuse texture is taken care of – the diffuse channel will be contained in the layer underneath, rendered before the effect sprite. Obviously normal maps are required. If shadows are required, the depth map can probably be squished into the alpha channel of the normal map, except insofar as you will also need that alpha channel for opacity (since it’s a separate sprite) – possibly this can be worked around, however. Emissive maps can simply be rendered as another additive layer for objects that have them – you won’t even need a special shader for that. However, ambient occlusion and specularity/gloss maps might have to be sacrificed.

There is a possible workaround here that involves putting multiple textures into one (that is, literally just the diffuse and normal maps next to each other in one image, for instance) and then extracting them with uv maths in the shader. If this turns out to be worthwhile, I’ll add an option to Sprite Lamp to automate exporting maps in this form. However, I foresee visual issues if this is used on tiling textures if your game has a camera that zooms in and out (bilinear filtering and mipmaps will not be kind in this situation).

The other possible issue is performance. Shader complexity not withstanding, this system requires you to draw at least two sprites for every game entity that needs dynamic lighting. I don’t have much of a feel for how performance gets limited in Construct2, but as an educated guess, if your game already has (or almost has) performance issues relating to the number of sprites on screen at a time, they will probably get worse if you add dynamic lighting to them all – my guess is that this will be a load on the CPU and the GPU.

One last thing to note about Construct2 that the devs warned me about is the renderer. Everything I’ve said here is completely dependent on shader effects, which require a WebGL renderer. Unfortunately, this means that environments that use canvas2d instead won’t have access to any dynamic lighting effects (notably, Internet Explorer and Safari, apparently). Sorry about that – that’s out of my (and Scirra’s) hands.

Other engines

If you’re reading all this wondering when I’ll get to your engine – don’t worry, this isn’t a complete list. It just made the most sense to approach the most commonly requested engines first, but a minimal implementation doesn’t take a terribly long time (assuming it’s possible) for a given engine. Even if it’s an obscure engine that I’m not going to do an official engine for, I’m entirely happy to help you out with getting it up and running yourself. Feel free to give a shout regarding the engine you want looked at (besides these three) in the comments.