Thread Tools Display Modes
08-26-10, 07:00 AM   #1
v6o
An Onyxian Warder
AddOn Author - Click to view addons
Join Date: Mar 2009
Posts: 399
Cutting up an frames image components

So I'm trying to create a frame out of this image and I was thinking of cutting the image like this. Are there any other suggestions or recommendations, or would you do it differently? Would it be better to make it less parts and less scalable?

Image #2 shows the different image cuts which will then be saved as separate files.
Attached Thumbnails
Click image for larger version

Name:	thewindow.jpg
Views:	974
Size:	10.4 KB
ID:	4729  Click image for larger version

Name:	bringingitingame.jpg
Views:	1040
Size:	42.0 KB
ID:	4730  
__________________
I stopped playing back World of Warcraft in 2010 and I have no plans on returning.
This is a dead account and if you want to continue any of my addons or make a fork then feel free to do so.
This is your permission slip.

If you need to contact me, do so on Twitter @v6ooo

Best regards, v6.

Last edited by v6o : 08-26-10 at 07:02 AM.
  Reply With Quote
08-26-10, 08:57 AM   #2
xConStruct
A Chromatic Dragonspawn
 
xConStruct's Avatar
AddOn Author - Click to view addons
Join Date: May 2008
Posts: 199
It won't make a difference, apart from file size (which should be neglectable).

I would make the stretched/tiled ones smaller, because they are repeated anyways.

You could also remove two of the corner pictures (leaving only topleft and bottomleft) and then mirror the textures in WoW:
texture:SetTexCoord(1, 0, 0, 1) would mirror it horizontally. I often use that because I'm too lazy to mirror and save them in my image application.

But that's just the web designer speaking in me - where file size matters
__________________
« Website | GitHub »

Oh hai!
  Reply With Quote
08-26-10, 09:05 AM   #3
sacrife
An Onyxian Warder
 
sacrife's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2009
Posts: 384
Yeah as a webdesigner, the top and left ones only need to be 1 pixel height/width as they can be replicated/stretched as you see fit.

Also the corners can be mirrored and the center color can just be produced manually with WHITE8x8 and a color for it.
__________________

  Reply With Quote
08-26-10, 09:30 AM   #4
Fodaro
A Cyclonian
 
Fodaro's Avatar
AddOn Author - Click to view addons
Join Date: Dec 2008
Posts: 42
The way I would approach this is to try and turn it into a backdrop border. The attached image is the border for a chat bubble. In this case, the edgeSize property of the backdrop would be set to 32, so the image is divided up into 8 32x32 pixel squares (as marked). You will need bigger squares, looking at the sizes involved. From left to right the squares are for: left border, right border, top border, bottom border (these two appear to be rotated), top left corner, top right corner, bottom left corner, and bottom right corner.

What I would do, (although I've never done this before), is turn your image into a border like this one. You'd probably want 128x128 pixel squares, and you might have to tweak some distances slightly, but then you could make your frame any size you like, and have the border still work fine. It looks like your background is solid color, so you might not even need an image for that.

Finally, you could use it like any other backdrop, for example:
lua Code:
  1. frame:SetBackdrop({
  2.     bgFile   = [[Interface\AddOns\MyStarTrekAddOn\frameBg]],
  3.     edgeFile = [[Interface\AddOns\MyStarTrekAddOn\frameBorder]],
  4.     edgeSize = 128,
  5.     insets   = { left = 128, right = 128, top = 128, bottom = 128 }
  6. }
  7. frame:SetBackdropColor(1, 1, 1, 1)
  8. frame:SetBackdropBorderColor(1, 1, 1, 1) -- if you like, you could even make the image monochrome, then tint it how you like.

As I say, never done this before, so might need a bit of tweaking. If you get it working, please post to say how you did it .

Hope this helps,
Attached Thumbnails
Click image for larger version

Name:	ChatBubble-Backdrop.png
Views:	947
Size:	2.3 KB
ID:	4732  
__________________
Fodaro
(Main: Fodaro-Bronzebeard (EU))
Author of CharNote and Consolid8
  Reply With Quote
08-26-10, 07:42 PM   #5
v6o
An Onyxian Warder
AddOn Author - Click to view addons
Join Date: Mar 2009
Posts: 399
I actually ran into trouble years back where tiling a smaller image was more demanding on the computer than tiling an slightly larger one. That's why still do it like that. Probably rarest you've ever heard but it happened to me, don't remember more details than that.

This interface does not have all detail into it yet and some parts will change depending on which window/frame that is open. I'm not sure when I'll put in all the details but I don't want to restrict myself early on and having to redo it later.

Fodaro, if WoW accept images larger than 512px then I could do like that but otherwise it's gonna be hard fitting some parts into the backdrop.

Here's an example of the ingame map in Borderlands. I know it's slimmer and has more details and that's what I'm aiming towards but I copied the main game menu which was bigger in size and was good enough just to test it ingame.
Attached Thumbnails
Click image for larger version

Name:	799px-Hallows_End_map.jpg
Views:	961
Size:	26.7 KB
ID:	4736  Click image for larger version

Name:	Untitled-2.jpg
Views:	992
Size:	34.1 KB
ID:	4737  
__________________
I stopped playing back World of Warcraft in 2010 and I have no plans on returning.
This is a dead account and if you want to continue any of my addons or make a fork then feel free to do so.
This is your permission slip.

If you need to contact me, do so on Twitter @v6ooo

Best regards, v6.
  Reply With Quote
08-27-10, 03:27 AM   #6
Fodaro
A Cyclonian
 
Fodaro's Avatar
AddOn Author - Click to view addons
Join Date: Dec 2008
Posts: 42
Originally Posted by v6o View Post
Fodaro, if WoW accept images larger than 512px then I could do like that but otherwise it's gonna be hard fitting some parts into the backdrop.
Ah, good point, but is it that WoW won't accept image files bigger than 512x512, or textures bigger than 512x512?

I'm not sure which, but if it is the files after all, then everything will fit into 64x64 squares apart from the bottom corners. So, you can either change the size of the corners, or, since you don't appear to be using transparency, manually position two textures in the right place (shown by the red squares on the attachment) and use a border for the rest (shown by white squares).
Attached Thumbnails
Click image for larger version

Name:	thewindow.jpg
Views:	959
Size:	27.3 KB
ID:	4738  
__________________
Fodaro
(Main: Fodaro-Bronzebeard (EU))
Author of CharNote and Consolid8
  Reply With Quote
08-27-10, 06:19 AM   #7
ravagernl
Proceritate Corporis
Premium Member
AddOn Author - Click to view addons
Join Date: Feb 2006
Posts: 1,176
Originally Posted by v6o View Post
I actually ran into trouble years back where tiling a smaller image was more demanding on the computer than tiling an slightly larger one. That's why still do it like that. Probably rarest you've ever heard but it happened to me, don't remember more details than that.
Iirc that happened with IE5 and 5.5, right?

You could also use Phanx's way of doing this (She creates 8 textures and anchors/colors them with functions, see oUF_Phanx).
  Reply With Quote
09-03-10, 06:09 AM   #8
zork
A Pyroguard Emberseer
 
zork's Avatar
AddOn Author - Click to view addons
Join Date: Jul 2008
Posts: 1,740
Minimum size of texture is 8 !!! A width/height of 1 will not show you anything.
The texture when done must be a multiplier of 8. So 8/16/32/64/128/256/512/1024/2048

2048x2048 is max in WotLK and 8x8 is min.
__________________
| Simple is beautiful.
| WoWI AddOns | GitHub | Zork (WoW)

"I wonder what the non-pathetic people are doing tonight?" - Rajesh Koothrappali (The Big Bang Theory)
  Reply With Quote

WoWInterface » Developer Discussions » Graphics Help » Cutting up an frames image components

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