Dynamic lighting and depth in an RPG top down oblique environment

I’m working towards finishing/remaking an old Flash game of mine called Wasted Youth in OpenFl.

My biggest challenge (as you can see by screenshots of the original on Google Images or videos on YouTube) is design. I am not the greatest artist, I need all the help I can get to make my game look stylish and attractive.

The game has a night and day system, light levels change from room to room, there are interactive lights, and so on, so a dynamic lighting system of sorts would be a huge help.
A great way to add depth to my characters and environment would be to have some kind of lighting system, but I just can’t see any way of doing this with this sub-2.5D style.
If I normal mapped everything, from characters to objects, I still have the problem of this illusional z-depth.
Imagine in my environment, a box, put a light directly behind it. The light (as far as I can tell) has no way of knowing not to light the front of the box. A costly ray-casting method of directional lighting doesn’t work either, considering objects have varying height or can be non-cuboid shaped.
I can’t imagine any method of lighting (bar simplistically multiplying a radial gradient) is possible without making the environment fully 3D.

I’ve been preparing to start work on this project for months but I consider this task (as well as character design & animation) to be my greatest hurdle.
A part of me is entertaining the idea of rebuilding everything in 3D, despite having very little experience in the realm of 3D design, but this would require a huge amount of work, not fit for a 1 man team.

This digresses from the main problem at hand, but another problem I encountered in the original was that I could only show the front interior wall and the back exterior wall in a room. It made for quite a confusing experience for some players, sideways doorways were difficult to see due to the height of the wall obscuring the floor, and as a result I avoided using them, or any side facing objects. I had so many complaints from players I had to add visual markers. So there are certainly pros and cons on either side, but realistically i don’t think I have the time or ability to make this 3D.

I apologize for the vagueness of my question, but confronted with this task how would you tackle it?How do you add dynamic lighting and depth to a world like this without going 3D or possibly 2.5D isometric?

Wouldn’t the normal map handle that?

Let’s work it out. Imagine the light is at (0, 0) and the box is at (10, 0).

The normal of the right side of this box is (1, 0). When you go to render, look at this normal, plus the direction from the light to the box, which also happens to be (1, 0). Since these vectors are the same, you know that that side of the box will be entirely dark.

The actual formula involves the dot product of the two vectors. The higher this dot product, the less bright the surface should be. (A large dot product means the vectors are aimed in the same direction.)

//Sample Haxe code, even though you're probably using the GPU.
var dotProduct:Float = normal.x * direction.x + normal.y * direction.y;
var brightness:Float = (2 - dotProduct) / 2;
1 Like

I have a very hard time getting my head around this kind of thing, but I think I understand.
Unfortunately I’m still none the wiser how I would practically do this with a shader program.
I’ve done it before actually, but as you can see my understanding is so limited I only managed it by luck and multiple attempts.

Seeing your example triggered a memory, I remember seeing a demonstration video a few years ago of a really clever directional lighting system for a 2D shooter. It required having multiple normals though, I think they used 8 in total, 1 for each direction and in between.

So each object would require atleast 4 normal textures… I’m not sure how this would work with a game like mine, the amount of video memory required has just grown by at least 4 times.

Also, height has to play a part, ie, the height of an object, the height of a light. I’m sure there’s a solution to this but I’m not sure what. Some simple trig I’d imagine, but I’m useless at that too! :slight_smile:

Just checking: do your objects need to cast shadows?

If so, I’m pretty sure you’ll need to use raycasting and/or 3D models. Otherwise, you should be able to do this with just one normal map and no trig. (The one difference being, it’ll be a 3D map rather than a 2D map.)

All I’m trying to achieve is some sense of depth in this world. Shadows would be nice but I understand they wouldn’t be possible without 3d models.
Have you seen screenshots of the game incidentally? It needs a lot of improvement in the graphics department.

So if you’re suggesting a 3d normal map why aren’t you suggesting 3d models? why would I draw it in 2d and then model it in 3d?
This is what I was referring to with the multiple 2d normal maps: https://snakehillgames.files.wordpress.com/2013/10/zombie_horizontalpreview_grey2.gif

No, I’m just going by what you’ve said.

I assumed you had some plan to generate a normal map without them. If you’re just dealing with boxes, for instance, you’ll be able to fake it easily.

Because it’s easier to make good-looking 2D drawings than 3D models. The models would only be used to generate 3D normal maps. A 2D drawing plus a 3D map is enough for the rendering you want to do.

I don’t see how this requires more than one 3D normal map.

I considered the possibility that it uses a height map, but on closer inspection, it doesn’t. (It would barely have made a difference anyway…)

Just for the sheer impracticality of it, I don’t want to use 2D drawings with 3D normal maps. I want the game to look good but that makes no sense to me.
I mentioned using 3D, but I should stress I consider it a last resort… I have very little experience in 3D, it would require a lot of learning and getting used to before I could even put it to use.

I’m a one man team, the project I’m planning is not some whim that I’ll give up on in a week or two, I plan to spend at least a year realistically, probably longer, building this game.
I’m seriously looking to create a professional looking game that I can market online which will please my fans and attract the attention of more hopefully.
Just so you know where I’m coming from.

I’m not looking to create something staggeringly beautiful, just something a little easier on the eye is all I’m after, some pizzazz!
The main setting is a fully explorable school. There aren’t a wide range of environments, it’s mostly classroom interiors, dorm rooms, offices, hallways, and an expansive outdoor area (playground, sports field, etc.)

I think I can safely say, 3D normal maps and a 2d environment don’t work for me, lets rule this out.
Most of the environment is static, so it might be more appropriate to bake the lighting into some objects. Like the exterior of a building isn’t going to be affected by much other than sunlight, and the odd light here and there, maybe the glow from windows during night time. (There’s a night and day system)

My main concern, above all else is adding depth and detail to characters. So originally I thought some subtle directional lighting was the answer.
Now I’m beginning to wonder if a depth/bump map would suffice.
Is it possible for a shader to interpret a bump map on the fly for some simple directional lighting I wonder?

If you checked out the Spritemap site link, you’ll see what I said was correct, the way they created that really neat 2d lighting system with the zombie is with 4 separate normals, one for each direction of light, and then combining them depending on the position and intensity of the light sources.
Ideally, that’s what I’d like, not quite as extreme as the zombie demo shows, as that kind of lighting just won’t make sense for most of the environments in my game.

The problem with characters unlike most other objects in the game is that body parts rotate and stretch with each frame when they’re animated. Unlike the zombie animation demoed in spritemap, they’re skeletons with bones and tweening, not frame-by-frame.
And each limb needs to stay a separate entity, so I can’t convert my product into a frame-by-frame spritesheet either. (Just consider there’s over 60 characters, each requiring a unique body part in 3 directions - front, back and side - of all shapes and sizes, with many different animations.)
Meaning each limb would require it’s own bumpmap/set of normals.

So, I guess what I’m suggesting is:
interpreting a bumpmap on the fly in 4 directions to create normals? So if the character was near 2 light sources in a dark setting, then it would light the character correctly just like the spritelamp demo.
pre-processing the bumpmap into multiple normals and exporting them instead, but while this would be easier on the GPU, would it not take up a lot more memory? I suppose I could make them half resolution.

No idea how I’d even do any of this or if it’s even possible, but I’d like to know if I’m barking up the wrong tree, is what I’ve outlined impractical, or whatever.
Also, is OpenFl the platform for me? Would Unity be better suited for this kind of overambitious, multi-platform project?

I was going to suggest that, but you mentioned needing dynamic lights. If you can get away with this, go for it.

Maybe I should have worded that differently. What I meant was, the map would be a 2D image, but each pixel would represent a 3D vector. This was in contrast to my original suggestion, which was a normal map representing 2D vectors.

I’ll call it a “3-channel” normal map from now on, if that helps. Or a “normal” normal map, but that’s cheesy.

You added that when I was almost done typing up my post, so I missed it. Oops.

It looks like Sprite Lamp will do this for you, so I agree, it’s probably the better option.

The normal map is the colorful image seen in the center here. That one map contains all the information the computer needs to do the fancy rendering in that gif. (And it’s a 3-channel map, for the record.)

If you were able to draw the colorful map yourself, there would be no need for the four lighting images. You could even skip using Sprite Lamp. However, “lighting profiles” are a lot more intuitive, and they make errors more obvious, so I say go ahead and use them.

Sprite Lamp generates a couple other maps:

You can safely skip the depth map. It wasn’t noticeable in the zombie example, and it’ll be even less noticeable when you zoom out. (Plus, depth maps have zero effect on flat surfaces, like desks, lockers, and floors.)

If you want to show a brick wall up close, you could use a depth map to add shadows between the bricks. But is that really worth it?

An ambient occlusion map would add a tiny bit of detail to your scene, but you can do that from your image editor, so I say skip it.

Ohhh right! I knew I was wrong on something… So a single normal map would suffice, ofcourse…
Still, to create these normals will require a lot of work… so is it not possible to interpret a normal with a depthmap? I know it wouldn’t be the best way, but the idea of drawing 4 sets of shading for each object I wish to light properly fills me with dread.

In my last post I mentioned characters with many limbs that tween in a completely dynamic way, and spritesheeting each frame of each animation as explained above is impossible.
It mustn’t be a problem like I previously imagined as I had a misconception on normal textures, but what happens when you rotate a normal? (the 3 channel kind)
I don’t understand why this wouldn’t change the way it’s lit, this is probably an easy thing to research so I will do so after posting this.

Okay, I’d like to move onto the practicality of all this… Tilesheets, textures, memory consumption and whatnot.
In the original game, each room/environment was split into its own screen. I’d like to make it a seamless environment, but I’m not sure if it would be worth the headache.
Lets say it was seamless for arguments sake.
For good detail I’d like a static standing character (kid-sized, adults would be larger) at full resolution to measure about 200px by 350px, arms legs, the lot, all joined together. They’re not pixelated like seems to be the done thing nowadays. I’m not going for the retro look.
I know it’s difficult to estimate, but with all the bodyparts (front, back, side), along with customizable clothes for the player and other characters, I suppose there will be a limited number of body types, so maybe it’s not as bad as I’m thinking… but how many 2048x2048 tilesheets would this result in? Probably between 5 and 10 is my estimate, just for characters alone. Would I want to make these tilesheets smaller? Problem is that most characters, with all body parts would probably be just over 512x512, which would result in over 60 1024x1024 tilesheets.

With all this considered, let’s imagine a 1920x1080 scene rendering at 60fps, I have 10 characters all moving around on the screen, a building, some trees, lights, grass, normals, and several shader programs at work.
Assuming it’s rendered in good economical fashion, there’s no avoiding the fact that this game will require a lot of memory (for a 2D game)… or am I fretting over nothing particularly difficult?
I know GPUs come in all shapes and sizes and it’s near impossible to make a game that won’t have problems on some hardware, but what can I expect here? This is a vanilla scene, it would be unacceptable if this could result in lag.

Not a problem? I don’t know myself, but lets carry on…

Let’s push it to the limit - same scene, but now there’s 60 characters on screen all at once, all breathing, animating very slightly, redrawn at 60fps.
Is this something I can expect to do with OpenFl?
I know the answer, it will be various shades of ‘yes - BUT…’, but I’m just curious what kind of problems I can expect in trying to accomplish something like this.
It’s a faintly ridiculous question I know, but consider I’m a just an idiot Flash developer, I had to work within the boundaries of some very limiting software, and despite knowing all the tips and tricks for optimization, I could never seem to conquer lag in all my projects, lag has plagued me all my life as a developer.

Sorry this has nothing to do with the topic header, maybe I should probably post a new thread.

Also, you didn’t answer my last question in the previous post, taking everything I’ve said into account from previous posts and this one…
OpenFl VS Unity.
Which one would be better suited for this project?
All I care about is getting it working on as many platforms as possible without rewriting all my code.
My main targets are Windows, Mac and Linux, but I’m not ruling out WiiU, PS4 or XBone.
Again, practicality is the key here.

So many questions…

I really appreciate all your help so far player_03. Sorry for my lack of concision.

Looks like the answer is yes.

It will change the way it’s lit, but it’ll be the correct change.

Let’s go back to that zombie, but for simplicity, imagine the light is directly above its head.

The normals on the zombie’s hair point upwards, and the normals on its face point left. Since the light is directly above, the zombie’s hair would light up, but not its face. (No surprise there.)

What if the zombie tilts its head 90° clockwise, so it’s looking straight into the light? Its face should light up, and its hair should go dark. To do this, you have to rotate the normals by 90°.

If you rotate the body parts, the lighting should change.

That seems excessive, but then I was surprised at how much space my own spritesheets take up. For the record, I have nine different 1024x1024 textures, which load fine on average devices.

I also have 1024x2048 textures for high-end devices, and 512x512 textures for low-end devices. You may want to do the same thing.

A high-end device probably wouldn’t have trouble with it. I don’t know about average devices, but low-end devices would almost certainly lag. (Also, some low-end devices can’t load any texture bigger than 512x512.)

Fortunately, low-end devices come with low-resolution screens, so players won’t notice if you use smaller textures. The extra detail wouldn’t have shown up anyway.

This should be possible as long as you’re using the GPU. Look at Starling’s benchmark if you’re not convinced. It can render over a thousand bunnies, including rotation and color filters, without any drop in framerate.

Using 3D models would simplify a lot of the problems you’re having. They wouldn’t require as much memory, they’d be equally easy to animate, and lighting would just work. The downside is, it’s hard to make a good-looking 3D model.

Assuming you’re going to stick with 2D, I don’t know if Unity is the right choice. It comes with a shader that handles normal maps, but I doubt that shader supports rendering 2D objects with 3D lighting. I think you’ll have to write your own shader either way.

Right so it should look fine then with a single normal texture?

OK. Now I need to do some experimentation, but I’ve still got a lot to think about.
For now I’m planning to set up a workflow whereby I do most of the graphics in flash, with JSFL automating the export of textures, probably as single file pngs, as well as height-map/specular/ambient occlusion template files.
I’m probably forgetting something…
Maybe I can make a custom flash panel for setting options on each texture movieclip?
Then with Photoshop I can fill in the non-diffuse textures.
Then maybe with some NodeJS libraries, write a script to convert height-maps to normals, group the textures into tilesheets with the help of file name prefixes?
I’m also looking to use the standalone version of DragonBones to animate the characters.

Not sure how I’m going to build the environments though…

Also, still none the wiser how I take all the textures, animations, shaders, etc. and build a game out of them with OpenFl!
What libraries and methods would you recommend?

Also, GUI? I’m crap with GUIs. I tend to take an inordinate amount of time making them with Flash, any tips?

Don’t reinvent the wheel. This already exists, and is completely open source.

DragonBones does that for you. Again, don’t reinvent the wheel if you don’t have to.

Starling is supposed to be able to read DragonBones’ exported files, so I’d start there.

It also supports custom shaders. The implementation isn’t as efficient as it could be, but hopefully it’s good enough. Here is a normal map shader someone wrote, which doesn’t quite do what you’re hoping for but would be a decent for testing performance.

I don’t have time right now to walk you through writing your shader, so for now, just try to get the basics working.

Your game is great. Shading doesn’t add anything. Don’t bother.

I’m really starting to wonder if OpenFl is the right platform for this project…
Something else that’s caught my eye recently is LuxeEngine.
It’s got similar compatibility and a lot of it looks pretty simple and intiuitive.
It appears to have everything OpenFl has and more. And when you consider I’m not looking to export to Flash, I consider it a plus that it’s not a supported platform.

Thanks! I know this seems a bit unnecessary if the graphics don’t bother you, but it was the most noticable complaint I got 5 years ago when I released the original, and it’s something I really want to improve upon.

People who complain already like your game. Gameplay is king. You’re not going to beat ‘Bully’ anyway :slight_smile:

Up to you, but keep in mind that Haxling requires OpenFL. Some other libraries require OpenFL too, but most are agnostic.

If you’re willing to render the DragonBones animation on your own, then maybe you don’t need Haxling, or any other OpenFL-dependent libraries. In that case, it looks like Luxe has you covered in terms of shaders.

Except for mood (via lighting), skeletal animation, portals, reflections, efficient vertex animations, the illusion of more vertices than you’re actually rendering…

“Don’t bother trying to learn new things.”

“If someone likes your game, there’s no need to address their complaints.”

“Gameplay is king, so nothing else is worth spending time on.”

"As a single developer, you can’t compete with a AAA title. Therefore, making your game better is a waste of time :slight_smile: "

I often quote Greg McClanahan’s blog posts on game design. I think Greg knows what he’s talking about, and I pretty much agree with everything in them.

So why am I making fun of you, if I agree when Greg says almost the same thing?

It’s because Greg was getting at something else. This is his next paragraph:

(If William and Sly had been out when he wrote the post, Greg might have referenced that instead. I think it’s a better example.)

Both Sonny and W.a.S. are ambitious in their art, but within reason. Neither game is Halo, but players still compliment their aesthetics.

tl;dr: Greg would tell Tom to set realistic goals. You’re telling him to give up.

1 Like

Knock yourself out. I’m just saying you won’t get 1 extra player because of shading.

Right, obviously it’ll be more than one. I’d ballpark it at a 10-50% increase in players, depending on how viral the game already was. (10% for a less-viral game, 50% for a highly-viral game.)