WoWInterface

WoWInterface (https://www.wowinterface.com/forums/index.php)
-   Lua/XML Help (https://www.wowinterface.com/forums/forumdisplay.php?f=16)
-   -   [LUA]Need help making rectangular buttons on masque without stretching the icon (https://www.wowinterface.com/forums/showthread.php?t=54933)

Heybarbaruiva 12-17-16 01:29 AM
[LUA]Need help making rectangular buttons on masque without stretching the icon
 
As the title says, I'm trying to create a skin for Masque that makes my action buttons rectangular without having to resort to simply distorting the icon.

This is what I'd like to achieve:


I tried used SetTextCoord to try and crop the top and bottom of the button but the texture gets all messed up. See image bellow:


This is the part of the code I modified. The rest is from Masque's Zoomed skin:

Code:
        Icon = {
                Width = 36,
                Height = 27,
                TexCoords = {0,0,0.75,0.75},
        },
Lua Code:
  1. local _, Core = ...
  2.  
  3. Core:AddSkin("Zoomed", {
  4.     Author = "JJSheets, StormFX",
  5.     Version = "7.1.0",
  6.     Masque_Version = 60201,
  7.     Shape = "Square",
  8.     Backdrop = {
  9.         Hide = true,
  10.     },
  11.     Icon = {
  12.         Width = 36,
  13.         Height = 27,
  14.         TexCoords = {0,0,0.75,0.75},
  15.     },
  16.     Flash = {
  17.         Width = 36,
  18.         Height = 36,
  19.         Texture = [[Interface\Buttons\UI-QuickslotRed]],
  20.     },
  21.     Cooldown = {
  22.         Width = 36,
  23.         Height = 36,
  24.     },
  25.     ChargeCooldown = {
  26.         Width = 36,
  27.         Height = 36,
  28.     },
  29.     Pushed = {
  30.         Width = 36,
  31.         Height = 36,
  32.         Texture = [[Interface\Buttons\UI-Quickslot-Depress]],
  33.     },
  34.     Normal = {
  35.         Hide = true,
  36.     },
  37.     Disabled = {
  38.         Hide = true,
  39.     },
  40.     Checked = {
  41.         Width = 38,
  42.         Height = 38,
  43.         BlendMode = "ADD",
  44.         Texture = [[Interface\Buttons\CheckButtonHilight]],
  45.     },
  46.     Border = {
  47.         Width = 66,
  48.         Height = 66,
  49.         OffsetX = 0.5,
  50.         OffsetY = 0.5,
  51.         BlendMode = "ADD",
  52.         Texture = [[Interface\Buttons\UI-ActionButton-Border]],
  53.     },
  54.     Gloss = {
  55.         Hide = true,
  56.     },
  57.     AutoCastable = {
  58.         Width = 66,
  59.         Height = 66,
  60.         OffsetX = 0.5,
  61.         OffsetY = -0.5,
  62.         Texture = [[Interface\Buttons\UI-AutoCastableOverlay]],
  63.     },
  64.     Highlight = {
  65.         Width = 36,
  66.         Height = 36,
  67.         BlendMode = "ADD",
  68.         Texture = [[Interface\Buttons\ButtonHilight-Square]],
  69.     },
  70.     Name = {
  71.         Width = 36,
  72.         Height = 10,
  73.         OffsetY = 3,
  74.     },
  75.     Count = {
  76.         Width = 36,
  77.         Height = 10,
  78.         OffsetX = -2,
  79.         OffsetY = 4,
  80.     },
  81.     HotKey = {
  82.         Width = 36,
  83.         Height = 10,
  84.         OffsetX = -2,
  85.         OffsetY = -4,
  86.     },
  87.     Duration = {
  88.         Width = 36,
  89.         Height = 10,
  90.         OffsetY = -3,
  91.     },
  92.     Shine = {
  93.         Width = 34,
  94.         Height = 34,
  95.         OffsetX = 0.5,
  96.         OffsetY = -0.5
  97.     },
  98. })

PS. I know about Masque Ractangle, but as I said, the process it's author used to make the action buttons rectangular was by stretching the icon. I'd rather just crop the top and/or bottom and not distort it.

Any ideas how I might accomplish this? I appreciate any help you can give me!

jeffy162 12-17-16 08:18 AM
Let me preface this by saying that I can no longer play World of Warcraft (all I have is an old Acer Iconia A100 tablet) but it seems to me that if you make your icon rectangular, why would you make your Masque skin square?

p3lim 12-17-16 09:32 AM
See this documentation:
http://wowprogramming.com/docs/widge...re/SetTexCoord

Quote:
* top - Top (or minY) edge of the scaled/cropped image, as a fraction of the image's height from the top (number)
* bottom - Bottom (or maxY) edge of the scaled/cropped image, as a fraction of the image's height from the top (number)
The reason it's black is because you've cropped it to show everything between 0.75 and 0.75 (which is nothing).
Try: 0, 0, 0.25, 0.75 (which will show everything between 0.25 and 0.75, which is half the image)

Heybarbaruiva 12-17-16 09:47 AM
It worked, p3lim. It's still a bit distorted but I can mess around with values till I get to where I want. Tyvm!
Edit: For those interested, here's the important part of the code and how it looks:

Lua Code:
  1. Icon = {
  2.         Width = 40,
  3.         Height = 28,
  4.         TexCoords = {0.07,0.93,0.2,0.7},
  5.     },

syncrow 12-21-16 11:49 PM
You use a height of 28px which is 70% of 40px

so you can easily change the Top/Bottom part for TexCoords

Exact middle would be <left, right, 0.15, 0.85>


Example Outputs:
--->-----------------<--- = 0.15, 0.85
->-----------------<----- = 0.05, 0,75
------>-----------------< = 0.30, 1.00


All times are GMT -6. The time now is 10:11 PM.

vBulletin © 2024, Jelsoft Enterprises Ltd
© 2004 - 2022 MMOUI