[SOLVED] Need assistance creating a graphical effect

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
jdoolin
Prole
Posts: 15
Joined: Sat Nov 18, 2017 7:40 pm

[SOLVED] Need assistance creating a graphical effect

Post by jdoolin » Sat Mar 17, 2018 9:48 pm

I'm building a tactical strategy RPG along the lines of Shining Force. In the Shining Force game, the movement range of characters and the range of attacks and spells are indicated by each tile in the range cycling its brightness between -n% to +n%. It basically gives the tiles a glowing/shining effect. I've attached a few screenshots to show what I mean, one from the Genesis version and one from the GBA remake.

What would be the most effective way to achieve this in love2D? I've thus far been unable to find a way to simply draw a transparent rectangle, though it's possible I just don't yet understand shape drawing and colors well enough. I also considered it may be worth using a special graphic that gets drawn with various alpha levels.

What do the more experienced developers out there suggest?
shining-force.png
shining-force.png (24.4 KiB) Viewed 384 times
sforcegba.jpg
sforcegba.jpg (131.37 KiB) Viewed 384 times
Last edited by jdoolin on Mon Mar 19, 2018 1:05 am, edited 1 time in total.

User avatar
Jeeper
Party member
Posts: 523
Joined: Tue Mar 12, 2013 7:11 pm

Re: Need assistance creating a graphical effect

Post by Jeeper » Sat Mar 17, 2018 10:22 pm

jdoolin wrote:
Sat Mar 17, 2018 9:48 pm
I've thus far been unable to find a way to simply draw a transparent rectangle, though it's possible I just don't yet understand shape drawing and colors well enough.

Code: Select all

love.graphics.setColor(255, 255, 255, alpha)
love.graphics.rectangle("fill", x, y, width, height)
Set the alpha variable to something between 0 (not visible) and 255 (fully visible)

jdoolin
Prole
Posts: 15
Joined: Sat Nov 18, 2017 7:40 pm

Re: Need assistance creating a graphical effect

Post by jdoolin » Sat Mar 17, 2018 11:00 pm

Jeeper wrote:
Sat Mar 17, 2018 10:22 pm

Code: Select all

love.graphics.setColor(255, 255, 255, alpha)
love.graphics.rectangle("fill", x, y, width, height)
Set the alpha variable to something between 0 (not visible) and 255 (fully visible)
Thanks. I tried this before but everything that was drawn afterward had the same alpha value. Then I had a lightbulb moment and tried setting the color back to 255 alpha and it worked. However, I've still got a problem. The square is blending with the character I try to draw on top of it. I'd like the square to blend with the map tile but not with the character. Here's my code and a screenshot.

Code: Select all

love.graphics.setColor(255, 255, 255, 32)
love.graphics.rectangle("fill", 10*16, 7*16, 16, 16, 3, 3)
love.graphics.setColor(255,255,255,255)
character.draw()
square.png
square.png (44.6 KiB) Viewed 367 times

User avatar
zorg
Party member
Posts: 2202
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

Re: Need assistance creating a graphical effect

Post by zorg » Sat Mar 17, 2018 11:03 pm

Your draw order may be wrong then; if you only want the "sheen"/"light effect" lighten the background, and not the character, you need to draw the background first, then the effect, and finally the character on top; that was it won't be affected by the glow.

That said, the code snippet you posted above is already like that, from a first glance, so i don't really know what else may be going on there; as far as i can tell, you reset the drawing color to 255,255,255,255 (i am assuming you are using löve version 0.10.2) so it should work.
Me and my stuff :3True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.

jdoolin
Prole
Posts: 15
Joined: Sat Nov 18, 2017 7:40 pm

Re: Need assistance creating a graphical effect

Post by jdoolin » Sat Mar 17, 2018 11:20 pm

zorg wrote:
Sat Mar 17, 2018 11:03 pm
Your draw order may be wrong then; if you only want the "sheen"/"light effect" lighten the background, and not the character, you need to draw the background first, then the effect, and finally the character on top; that was it won't be affected by the glow.

That said, the code snippet you posted above is already like that, from a first glance, so i don't really know what else may be going on there; as far as i can tell, you reset the drawing color to 255,255,255,255 (i am assuming you are using löve version 0.10.2) so it should work.
Correct. I am using 0.10.2, and my draw order *should* be ok. However, I'm using STI and this is happening inside a custom layer for the character sprites. The ground layer they are standing on is the first to be drawn. The character sprite layer is the third. So I'm basically doing this to try to make it all happen.

Code: Select all

-- create the custom layer for sprites
local layer = this.tilemap:addCustomLayer("Sprites" .. i, i * 4 - 1)
-- maintain a character list for this layer
layer.charList = {}
layer.draw = function(self)
   -- draw the square first
   love.graphics.setColor(255, 255, 255, 32)
   love.graphics.rectangle("fill", 10*16, 7*16, 16, 16, 3, 3)
   love.graphics.setColor(255,255,255,255)
   -- now draw all characters
   table.sort(self.charList, function(a, b) return a.entity.y < b.entity.y end)
   for _, c in pairs(self.charList) do
     c:draw()
   end
end

User avatar
Jeeper
Party member
Posts: 523
Joined: Tue Mar 12, 2013 7:11 pm

Re: Need assistance creating a graphical effect

Post by Jeeper » Sun Mar 18, 2018 2:33 pm

I think it would help if we got a .love file tbh. Or you add me on Discord and I will try to help you directly. Jeeper #9352

jdoolin
Prole
Posts: 15
Joined: Sat Nov 18, 2017 7:40 pm

Re: Need assistance creating a graphical effect

Post by jdoolin » Sun Mar 18, 2018 6:50 pm

Jeeper wrote:
Sun Mar 18, 2018 2:33 pm
I think it would help if we got a .love file tbh. Or you add me on Discord and I will try to help you directly. Jeeper #9352
Thanks for the assistance, and we did find the problem.

Going with the suggestion from Dan Schuller's "How to Make an RPG", each of my map's logical layers is composed of 3 Tiled layers, like so:

[Logical Layer 2]
---Collision Layer
---Decoration Layer
---Base Layer
[Logical Layer 1]
---Collision Layer
---Decoration Layer
---Base Layer

I'm using STI for map rendering, and the documentation suggested adding a Custom layer for Sprites. So now each logical layer has a Sprite layer as well. Turns out I was drawing the rectangle in EVERY Sprite layer, even though the sprites themselves are only in the bottom one. So that's why it was appearing to be drawn on top of the character. Because it was. So I just need a flag for which layer is active for the current character and only render range indicators on that layer.

Post Reply

Who is online

Users browsing this forum: No registered users and 6 guests