Thread Tools Display Modes
12-17-16, 01:29 AM   #1
Heybarbaruiva
A Murloc Raider
 
Heybarbaruiva's Avatar
AddOn Author - Click to view addons
Join Date: Nov 2016
Posts: 9
[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!
  Reply With Quote
12-17-16, 08:18 AM   #2
jeffy162
A Pyroguard Emberseer
 
jeffy162's Avatar
AddOn Author - Click to view addons
Join Date: May 2009
Posts: 2,364
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?
__________________
Ahhhh, the vagueries of the aging mind. Wait.... What was I saying?


Carbonite <----- GitHub main module (Maps ONLY) download link. The other modules are also available on GitHub.
Carbonite-CLASSIC<----- GitHub link to Carbonite Classic. Thanks to ircdirk for this!
  Reply With Quote
12-17-16, 09:32 AM   #3
p3lim
A Pyroguard Emberseer
 
p3lim's Avatar
AddOn Author - Click to view addons
Join Date: Feb 2007
Posts: 1,710
See this documentation:
http://wowprogramming.com/docs/widge...re/SetTexCoord

* 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)

Last edited by p3lim : 12-17-16 at 09:38 AM.
  Reply With Quote
12-17-16, 09:47 AM   #4
Heybarbaruiva
A Murloc Raider
 
Heybarbaruiva's Avatar
AddOn Author - Click to view addons
Join Date: Nov 2016
Posts: 9
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.     },


Last edited by Heybarbaruiva : 12-17-16 at 10:37 AM.
  Reply With Quote
12-21-16, 11:49 PM   #5
syncrow
A Flamescale Wyrmkin
 
syncrow's Avatar
AddOn Author - Click to view addons
Join Date: Jul 2014
Posts: 149
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
__________________

Last edited by syncrow : 12-21-16 at 11:53 PM.
  Reply With Quote

WoWInterface » Developer Discussions » Lua/XML Help » [LUA]Need help making rectangular buttons on masque without stretching the icon

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off