Sprite Opacity "Glow"

Started by Jaiden, November 04, 2017, 05:48:35 pm

Previous topic - Next topic

Jaiden

I am having a hard time understanding how to properly use the sprite class. Long story short, I am using sprites on the title screen instead of a command window to display selections. I'd like to have a custom cursor that fades in and out (like the window cursor), but using a custom bitmap instead of a rectangle.

How would I make a sprite fade in and out? I understand this would use the "update" method, I considered using a for loop like so:
#Assuming @com is the sprite bitmap for the "selection" sprite...
for i in 1...17
if @com.opacity > 0
@com.opacity = 255 - i * 15
elsif @com.opacity < 255
@com.opacity = 0 + i * 15
end
end


But I assumed this is just...bad logic. Thoughts?

Blizzard

You're thinking in the right direction, but it's still not complete. You have to think of the code being executed once every frame rather than being it's own piece. You can add something like this in an update method.


# making sure the @com_opacity_direction variable exists and changes direction of opacity change
if @com.opacity == 255
  @com_opacity_direction = -1
elsif @com.opacity == 0 || @com_opacity_direction == nil
  @com_opacity_direction = 1
end
# actual change of opacity
@com.opacity += @com_opacity_direction * 15


What this does is change the opacity by 15 every frame. Over the course of 15 frames, it will do one full fade-out or fade-in. Over the course of 30 frames it will do one whole cycle.
Check out Daygames and our games:

King of Booze 2      King of Booze: Never Ever
Drinking Game for Android      Never have I ever for Android
Drinking Game for iOS      Never have I ever for iOS


Quote from: winkioI do not speak to bricks, either as individuals or in wall form.

Quote from: Barney StinsonWhen I get sad, I stop being sad and be awesome instead. True story.

Heretic86

I think you can actually do this without any scripts, and just by using a Windowskin.

In the title screen of my "collection" demo, I used a "glow" windowskin so that a glow would appear behind the Menu Items of New Game, Continue, and Shut Down.  Once you start your game, you can change the Windowskin to whatever you want to appear during gameplay.

The Windowskin is still rectangular in shape, but due to the way the Opacity is set in the image file, it doesnt appear to have a solid border.
Current Scripts:
Heretic's Moving Platforms

Current Demos:
Collection of Art and 100% Compatible Scripts

(Script Demos are all still available in the Collection link above.  I lost some individual demos due to a server crash.)

Jaiden

Quote from: Heretic86 on November 05, 2017, 05:21:18 pm
I think you can actually do this without any scripts, and just by using a Windowskin.

In the title screen of my "collection" demo, I used a "glow" windowskin so that a glow would appear behind the Menu Items of New Game, Continue, and Shut Down.  Once you start your game, you can change the Windowskin to whatever you want to appear during gameplay.

The Windowskin is still rectangular in shape, but due to the way the Opacity is set in the image file, it doesnt appear to have a solid border.

Oh man, really? I'm actually using that script and didn't realize that! I noticed you had a handling to slowly fade the menu in and out, I didn't even think of using it like that. :facepalm:

I might end up doing it differently, though, because I wanted to have a different color "glow" for each menu item.

Blizzard

You could just use different window skins for every window. I do that in CP.
Check out Daygames and our games:

King of Booze 2      King of Booze: Never Ever
Drinking Game for Android      Never have I ever for Android
Drinking Game for iOS      Never have I ever for iOS


Quote from: winkioI do not speak to bricks, either as individuals or in wall form.

Quote from: Barney StinsonWhen I get sad, I stop being sad and be awesome instead. True story.

Jaiden

Ah, but it's not a window. They're sprites. I go through each sprite to get each menu selection, kind of like this:







(New version looks much nicer) But the goal would be to have the "selection" be just a standard font and then an additional sprite with the "glow" fade in and out.

LiTTleDRAgo

November 07, 2017, 12:52:47 pm #6 Last Edit: November 07, 2017, 01:05:27 pm by LiTTleDRAgo
I did attempt to do that with scripting and it ended up horribly.
Using photoshop is much easier and time saving.

Try this, maybe it didn't do what you've hoped for but at least it's an alternative.

- Clone the bitmap and plant it in new sprite.
- Slightly zoom the cloned sprite and place it in the original position.
- Blend the cloned sprite (either blend_type = 1 or blend_type = 2)
- Change the cloned sprite opacity to below 180.

Jaiden

I'm not sure I understand. Those three images I posted would be the "glowing" ones. I'd have three more under them that would be just regular text with no glow effect, and I'd just fade the "glowing" one's opacity in and out. It should create the illusion of the text glowing, even though I technically am fading out the opacity of another picture entirely. 

I think Blizzard's concept will end up working the best. If I have those main menu selections, and then an additional image for each with a "glow" and just fade the glow's opacity in and out via a script, it should work okay. I like the idea of a windowskins, but I think I'll have more flexibility with pictures since I can handle photoshop pretty well.

I'm gunna try it out when I get a chance and I'll update you guys on it!


Jaiden

November 13, 2017, 07:49:50 pm #8 Last Edit: November 13, 2017, 07:52:22 pm by BoisterousHero
WEW okay, I finally got to this.

My first question is, it seems like drawing two sprites on top of each other is a disaster. Even though the second sprite has transparency, it "erases" the sprite behind it. I assume I'm simply doing this incorrectly. I have a different Z order set for both of them, but no avail.

Is there more to drawing multiple layers of sprites than just:
sprite1 = Sprite.new
sprite2 = Sprite.new
sprite1.bitmap = [file1]
sprite2.bitmap = [file2]


Because this is what I currently have, in essence. I'm not sure if this is the problem, or changing the bitmap every frame in the update method is the problem, which is what I am currently doing to deal with having a different bitmap for each menu selection.

KK20

Why not share the code that you have? Because I cannot understand what is the issue from what essentially looks like sound logic.

Other Projects
RPG Maker XP Ace  Upgrade RMXP to RMVXA performance!
XPA Tilemap  Tilemap rewrite with many features, including custom resolution!

Nintendo Switch Friend Code: 8310-1917-5318
Discord: KK20 Tyler#8901

Join the CP Discord Server!

Jaiden

November 13, 2017, 08:42:05 pm #10 Last Edit: November 13, 2017, 08:47:15 pm by BoisterousHero
"Sound logic" is a good hint that there's probably something conflicting. I'm using Heretic's map title as a base, the full script is here: https://pastebin.com/nVPVRSrj

Weird, it's working now. The sprites overlay properly. I deleted everything I did and started over. Now the "fade" effect isn't working. Heck.

I'm guessing it may be because I'm changing the bitmap every selection, which is automatically setting the opacity to 255? I'm not sure how to properly implement it.

I have this in the update method for my menu:
    # Draw the title pictures
    case @command_window.index
    when 0 #Draw "new game"
       @com.bitmap = RPG::Cache.title("Com_01")
   @com_glow.bitmap = RPG::Cache.title("Com_01_G")
   #Call glowing method
   glowing_selection
    when 1 #Draw "continue"
    # Check if continue is disabled
   unless @continue_enabled
#Draw faded out
@com.bitmap = RPG::Cache.title("Com_02_Disable")
   else
# Draw regular
@com.bitmap = RPG::Cache.title("Com_02")
@com_glow.bitmap = RPG::Cache.title("Com_02_G")
#Call glowing method
glowing_selection
   end
    when 2 #Draw "end"
       @com.bitmap = RPG::Cache.title("Com_03")
       @com_glow.bitmap = RPG::Cache.title("Com_03_G")
   #Call glowing method
   glowing_selection
when 3 #Draw "credits"
   @com.bitmap = RPG::Cache.title("Com_04")
   @com_glow.bitmap = RPG::Cache.title("Com_04_G")
   #Call glowing method
   glowing_selection
    end


With a special method that makes the "glowing" portion of the sprite glow:
  #Method for glowing selection
  def glowing_selection
#Fade it in and out
#Check the direction variable exists
if @com_glow.opacity == 255
com_opacity_direction = -1
elsif @com_glow.opacity == 0 || com_opacity_direction == nil
com_opacity_direction = 1
end
#Fade the sprite in and out
@com_glow.opacity += (com_opacity_direction * 15)
  end



KK20

I can point out that glowing_selection has a logical error in it.

com_opacity_direction is lost every time the method is called since it's a local variable. Assuming the sprite's opacity is 255 to begin with:

Frame 1: com_opacity_direction = -1 (since sprite is 255 opacity), sprite opacity = 240
Frame 2: com_opacity_direction = 1 (since com_opacity_direction is nil), sprite opacity = 255
Frame 3: com_opacity_direction = -1, sprite opacity = 240
Frame 4: com_opacity_direction = 1, sprite opacity = 255

It might be moving so fast that you actually can't see it changing. Make com_opacity_direction an instance variable instead and see how that works out.

Other Projects
RPG Maker XP Ace  Upgrade RMXP to RMVXA performance!
XPA Tilemap  Tilemap rewrite with many features, including custom resolution!

Nintendo Switch Friend Code: 8310-1917-5318
Discord: KK20 Tyler#8901

Join the CP Discord Server!

Jaiden

Oh, man, that was 100% it! I knew there was something that was being ignored, the instance variable solved it. Something so simple, too.

It looks killer. I did have to reduce the opacity step a bit to change the speed, but it works.

Jaiden

November 13, 2017, 11:26:28 pm #13 Last Edit: November 13, 2017, 11:28:06 pm by BoisterousHero
A gif of the beauty:
https://i.imgur.com/GrdOZ6A.gifv
You guys rock. Thanks for all the help.