How do I make a light source with night overlay in an isometric game?

Post reply
0 favourites
  • 11 posts
From the Asset Store
Light Quiz Music Pack
$19.90 USD
Immerse your quiz games with our 6 unique music loops, ranging from acoustic chill guitar to cute and upbeat style.
wowsoundsg's avatar
wowsoundsg

  • I'm using a blue overlay layer with Multiply effect to create day-night cycle. I also have light sources like candles or torches that should illuminate a small area. I put a white circle on the overlay layer and it creates a nice light spot.

    The problem is that the game is isometric and the light source may be partially behind a tree or some other object. How do I erase part of the light spot which is behind that object? Ideally I want to get something like this:

    Here is a demo project:

    dropbox.com/s/qco6vlzisxru9uk/NightLight.c3p

    I guess one option is to put a blue silhouette of the tree on top of the light spot onto the overlay layer. But this will be a lot of work.. Hopefully there is an easier solution, something with a drawing canvas maybe?

    Tagged:

  • Blend modes come to mind as a possible idea.

    Could you draw the light to a canvas, then draw all the trees in front of the light to the canvas, but have the trees have the destination out blend?

    It would work with paster in c2 but I’m unsure of there could be more nuance in c3’s canvas.

  • R0J0hound You can set drawing blend mode in DrawingCanvas, but it doesn't work for pasting objects. It's still possible - I can use the tree as a mask with Destination In to "cut" its shape in a blue rectangle sprite, and then paste both sprites onto the canvas.

    Thanks, this may be a solution. Still there will probably be some issues, because the tree needs to be moved to a separate layer with "Force own texture=yes" settings, this will break z-ordering. And pasting doesn't happen instantly, so the tree will be invisible for a tick or two..

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Ah. That’s a shame pasting doesn’t work with blend modes. That would’ve been more straightforward.

    The other blend mode approach sounds plausible too.

    Waiting a tick for something to happen always was a bit bothersome to me.

    Anyways, if you just had duplicates of the sprites on layer 1, but with solid colors, you could just zorder the light with solid blue trees and get the same effect, without canvas or blend modes. Probably what your first idea was. Hmm.

  • duplicates of the sprites on layer 1, but with solid colors, you could just zorder the light with solid blue trees and get the same effect, without canvas or blend modes. Probably what your first idea was.

    Yes, but there will be lots of objects like trees, maybe even animated. So duplicating them is not feasible.

  • Would you ever have "foreground" objects affected by light?

    My idea would be to have all foreground objects on an upper layer. A darkness mask object on top of that layer with multiply effect on the object, and source in, with force own texture on the layer.

    This will color all foreground objects with darkness, without affecting any layers below. This layer will not be affected by the light.

    The middle layer below that will contain the white light objects. Set layer to non transparent, the background to the same color as the darkness mask, and apply multiply effect to the layer.

    The bottom layer is your floor. Anything on this layer will be affected by the light layer.

    Edit: Example - dropbox.com/s/8pplu6nkogp6yfc/lightlayersexample.c3p

    You can always use an object for the middle layer too instead of the layer itself being the color.

    Your Z-ordering should all happen on the uppermost layer, so that should be fine, assuming you never z-order below your floor.

    The problem happens when you want something to be lit, but on top of a foreground object that you want not to be lit. If that's a thing that is possible...

    Edit 2:

    I guess never mind, there are tons of issues with this. It won't work if you want your light z-ordered along with the rest of your objects. It will also still look weird even if it is z-ordered along with everything else - for example if the light origin was above/behind the base of the tree, but extended past/below the tree, you would need a shadowed area.

    Night mode is hard ><

  • A mask sounds feasible.

    Something like this:https://www.construct.net/en/make-games/addons/334/godrays

  • oosyrag Don't think this will work. There are 3 layers for objects and z-ordering is quite important. Light source may be in front or behind one or multiple objects.

    newt I forgot about this plugin, it may be useful. Although seems like it requires a very special mask..

  • Hope you don't mind if I leave this here for my own reference if I ever decide to revisit this gamasutra.com/blogs/SvyatoslavCherkasov/20181023/329151/Graveyard_Keeper_How_the_graphics_effects_are_made.php

    Edit: At the very least, the first step is to have any given object affected by light, or not affected by light. This can be done with 2 layers with z-order preserved, as the light can be isolated by layer, and objects can be moved from layer to layer preserving their z-order by comparying y-position with the light. Unfortunately, each light would need to have it's own layer for a comprehensive solution.

    The next level would be to control how much each object is affected by any given light. This would prevent jarring cutoffs for moving lights, although it is less of an issue for static lights. Might be able to design around the light per layer solution with static lights as well, as long as you don't have overlapping lights at different y positions with objects between them.

    Bump mapping and shadows after that.

  • Tried brainstorming another idea. It would be nice if construct made compositing layers together more powerful, but anyways.

    Put a canvas on the shadow layer.

    Every tick clear the canvas and draw any objects in front of the light to it. Give the canvas object the colorize effect to make its color the same as the layer.

  • R0J0hound Thanks, I though about using a large canvas. Just not sure how well it will work if trees are pasted on it on every tick. Will have to test this.

Post reply
  • 11 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)