It is currently March 28th, 2024, 4:01 pm

Help with game start icons

Get help with creating, editing & fixing problems with skins
Post Reply
dutiz
Posts: 2
Joined: June 19th, 2017, 1:00 pm

Help with game start icons

Post by dutiz »

Hello can someone help me i'm trying to make buttons that could run games, i made them simple atm but i want to edit them a bit atm its just image and that's it.

Code:
--------------------------------------------------------------------------------------------------------------------

-------------------------------------------Rainmeter info comes here-------------------------------------
[Rainmeter]
Update = -1

-------------------Button meter--------------------

[Img]
Meter=Image
ImageName = leagueoflegends.png { image is in same forlder as code.}
x = 0
y = 0
w = 300
h = 65

AntiAlias = 1
LeftMouseUpAction = !Execute ["X:\League of Legends\lol.launcher.admin.exe"]



-----------------------------------------------------------------------------------------------------------------------------


and i would like to add that then its not hovered over with mouse it would show Small diffrient icon, and then you hover on it, it would slide out and become banner like it is now, and then you click it it would open a game to witch its set to(they are placed on right side of screen) so it would be nice if its posible to do that it would slide to the left side.

it tried looking at other but what they do is make a full screen image over i only want that it would slide in same place replacing the small button witch it is then its not hoverd over.


Thanks for help, and im going to look up a but online if i can find my slef.
Attachments
Screenshot_2.png
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Help with game start icons

Post by balala »

dutiz wrote:Hello can someone help me i'm trying to make buttons that could run games, i made them simple atm but i want to edit them a bit atm its just image and that's it.
Unless I didn't misunderstand your question, you just have to edit the LeftMouseUpAction option of the [Img] meter. Replace the path with the needed one.
And remove the !Execute bang, because it is deprecated.
dutiz wrote:and i would like to add that then its not hovered over with mouse it would show Small diffrient icon, and then you hover on it, it would slide out and become banner like it is now, and then you click it it would open a game to witch its set to(they are placed on right side of screen) so it would be nice if its posible to do that it would slide to the left side.

it tried looking at other but what they do is make a full screen image over i only want that it would slide in same place replacing the small button witch it is then its not hoverd over.
First I'd recommend to try replacing the above image meter with a button meter, to see how it works, then if you'll still want, we'll help you to create the sliding effect, using the ActionTimer plugin. The button meters have a lot of advantages in such cases, but they also have a disadvantage: you have to create the image of the button. Here you have a very good description how to do it. Try to follow it and if you don't succed creating it, feel free to come back with questions.
On the other hand, what image would you would like to use for the sliding effect?
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Help with game start icons

Post by jsmorley »

I think you will want to start with something like this:
Slidenostic_1.0.rmskin
(34.99 KiB) Downloaded 22 times

Code: Select all

[Rainmeter]
Update=1000
SkinWidth=170
SkinHeight=64
BackgroundMode=2
SolidColor=255,0,0,90
AccurateText=1

[Variables]
XIcon=0
XBanner=0

[MeasureDirection]
Measure=Calc
IfCondition=#CURRENTCONFIGX# > #SCREENAREAWIDTH# / 2
IfTrueAction=[!SetVariable XIcon "106"][!UpdateMeter *][!Redraw]
IfFalseAction=[!SetVariable XIcon "0"][!UpdateMeter *][!Redraw]
DynamicVariables=1

[MeterFallout4]
Meter=Image
X=#XIcon#
ImagePath=#@#Images\
ImageName=Fallout4Icon.png
MouseOverAction=[!SetOption MeterFallout4 X "#XBanner#"][!SetOption MeterFallout4 ImageName "Fallout4Banner.jpg"][!UpdateMeter *][!Redraw]
MouseLeaveAction=[!SetOption MeterFallout4 X "#XIcon#"][!SetOption MeterFallout4 ImageName "Fallout4Icon.png"][!UpdateMeter *][!Redraw]
DynamicVariables=1
Using these two images as an example:
Fallout4icon.png
Fallout4Banner.jpg
When the skin is position on the screen at greater than half the width of the screen, tested with #CURRENTCONFIGX# > #SCREENAREAWIDTH# / 2, then the "icon" will be positioned at 106 pixels, which is the width of the "banner" 170, minus the width of the icon, 64.

That positions the icon to ensure the skin is large enough to hold the banner when we replace it. Don't forget, a skin can NEVER "grow" up or to the left, only down and to the right. So we need to make the skin big enough to start with so the banner can slide "left" when replacing the icon.

When the skin is positioned at less than half the width if the screen, we can just set the icon to an X of 0, as the banner will slide out to the right.

Then a simple MouseOverAction replaces the icon with the banner. Start with this. It shows a lot of the fundamentals you are going to need.

Left part of screen:
left.gif
Right part of screen:
right.gif
I will work on the ActionTimer measure(s) needed to "slide" the banner out to the left or to the right. Stay tuned... That will take a little thought.

Note, I have the "background" of the skin set to a semi-transparent red, so I can see what is going on. That would be removed in the final design of course.
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Help with game start icons

Post by jsmorley »

So here is a shot at doing it with some "sliding" using the ActionTimer pluing:
Slidenostic_2.0.rmskin
(35.22 KiB) Downloaded 25 times

Code: Select all

[Rainmeter]
Update=1000
SkinWidth=170
AccurateText=1

[Variables]
Fallout4XIcon=0
Fallout4XBanner=-170
Fallout4Slider=MeasureFallout4SliderLeftToRight
W=2
U=[!UpdateMeasure *][!UpdateMeter *][!Redraw]

[MeasureDirection]
Measure=Calc
IfCondition=#CURRENTCONFIGX# > #SCREENAREAWIDTH# / 2
IfTrueAction=[!SetVariable Fallout4Slider "MeasureFallout4SliderRightToLeft"][!SetVariable Fallout4XIcon "106"][!SetVariable Fallout4XBanner "170"][!UpdateMeter *][!Redraw]
IfFalseAction=[!SetVariable Fallout4Slider "MeasureFallout4SliderLeftToRight"][!SetVariable Fallout4XIcon "0"][!SetVariable Fallout4XBanner "-170"][!UpdateMeter *][!Redraw]
DynamicVariables=1

[MeterFallout4Icon]
Meter=Image
X=#Fallout4XIcon#
ImagePath=#@#Images\
ImageName=Fallout4Icon.png
MouseOverAction=[!CommandMeasure #Fallout4Slider# "Stop 2"][!CommandMeasure #Fallout4Slider# "Execute 1"]
DynamicVariables=1

[MeterFallout4Banner]
Meter=Image
X=#Fallout4XBanner#
ImagePath=#@#Images\
ImageName=Fallout4Banner.jpg
MouseLeaveAction=[!CommandMeasure #Fallout4Slider# "Stop 1"][!CommandMeasure #Fallout4Slider# "Execute 2"]
DynamicVariables=1

[MeasureFallout4SliderLeftToRight]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat SlideIn,#W#,35
SlideIn=[!SetVariable Fallout4XBanner "(Clamp(#Fallout4XBanner#+5,-170,0))"]#U#
ActionList2=Repeat SlideOut,#W#,35
SlideOut=[!SetVariable Fallout4XBanner "(Clamp(#Fallout4XBanner#-5,-170,0))"]#U#
DynamicVariables=1
UpdateDivider=-1
IgnoreWarnings=1

[MeasureFallout4SliderRightToLeft]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat SlideIn,#W#,35
SlideIn=[!SetVariable Fallout4XBanner "(Clamp(#Fallout4XBanner#-5,0,170))"]#U#
ActionList2=Repeat SlideOut,#W#,35
SlideOut=[!SetVariable Fallout4XBanner "(Clamp(#Fallout4XBanner#+5,0,170))"]#U#
DynamicVariables=1
UpdateDivider=-1
IgnoreWarnings=1
Left part of the screen:
left.gif
Right part of the screen:
right.gif
https://docs.rainmeter.net/manual-beta/plugins/actiontimer/

Just add whatever LeftMouseUpAction you like to [MeterFallout4Banner].

Note that SkinWidth=170 is the key to this working right when you are sliding "right to left", as you need the banner image to start "off the skin" so it is truncated, but if you don't force the skin width, it will just expand to contain the image while it is in its "off the skin" starting position. Forcing the width to be 170 (in this case) will truncate anything that runs outside of that width. Then it becomes visible as we slide it into the skin from right to left.

As you can see, adding the slide effect while allowing it to be "agnostic" about the slide direction creates some complexity, but this should be a good start. Please let me know if you have questions or concerns about what / how I am doing this.
dutiz
Posts: 2
Joined: June 19th, 2017, 1:00 pm

Re: Help with game start icons

Post by dutiz »

Thanks for help jsmorley

i understand without silde one. And going too look up with silde tomorrow got to go to sleep now. if i get some problems im going to write cheers for help
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Help with game start icons

Post by jsmorley »

The principle is pretty simple. One way to look at what I am doing is creating a "stage" that is 170 pixels wide. I do that with SkinWidth=170 in the Rainmeter section. This number is entirely based on the fact that the banner image is 170 pixels wide. A different image might need a different number.

Then I create that "banner" image, but position it "off the stage" to the left or the right. Anything positioned at less than an X of 0 in the skin will be "offstage" and anything positioned greater than an X of 170 will also be "offstage".

So when I am sliding left to right, I start the banner image at a position of -170, or entirely off the skin to the left. When I'm sliding right to left, I start the banner image at a position of 170, again off the skin or "stage" as defined by SkinWidth, this time to the right.

If I remove the SkinWidth=170 and add a red background, you can see what is really going on.
1.png
That is how it looks when I have things set up to slide right to left. The banner image is in fact there, but it is hidden off the stage, in the wings, behind the curtain. Ok, so I'm pushing this metaphor...



When I use the ActionTimer to increase (left to right) or decrease (right to left) the X position of the banner image, it "slides" into the skin, onto the "stage" 5 pixels at a time with a delay of 2 milliseconds between each movement.
gif.gif
The reason I use Clamp() in the formula is so I don't have to figure out exactly how many pixels to move it each time, and exactly how many times to move it, to achieve my goal of sliding the banner image exactly 170 pixels to move it fully "on" or "off" the skin. Since Rainmeter doesn't understand "half a pixel", it would be far more trouble than it is worth to get this exactly right. The Clamp() function allows me to just get in the ballpark, while being careful that the amounts are "at least" enough to achieve the result, and the Clamp() will make sure I don't overrun things. It's a very handy function, that you will use almost every time you use ActionTimer.

The speed and smoothness of the transition is just a balancing act between the number of pixels you move each time, which is in that Clamp() formula, the number of times you "repeat" the action in the ActionList(N) option, and the amount of time you "wait" between each action, controlled by the #W# variable. There is no good formula for this, you just have to play with these values to get the effect you like. Just keep in mind that #W#, the amount of "wait" time between each "repeat" action, must be at least 1. Using no wait time, setting this to 0, will give ActionTimer problems.
Post Reply