PDA

View Full Version : Editing User Interface and Buttons



Gamerkd16
August 20th, 2007, 11:17 PM
I'm messing around with a UI map again, and I'm trying to create my own buttons. Using Zeph's tutorial:


- Open a new canvas that is 256x64 pixels in size.
- For simplicity, fill it with black.
- Put the the text onto the black.
>>>Note<<< The text can literally be whatever you want. It could even be a picture of a penguin if you want it to be. For the simple purposes of this tutorial, I suggest making it be something like multiplayer, quit, or settings... >>>/Note<<<
- Select all and copy.
- Add one pixel to the width on the right side and fill it with pure blue.
- Add 256 more pixels to the right side of the canvas and paste what is now the left side.
- Select the text on the right side and brighten it.
- Increase canvas size by one pixel on all four sides and fill with pure blue.In the end this makes an image 516x66. This doesn't agree with the power of two rules, so how can I follow this? Also is it correct that when you have the un-hover image on the left and hover image on the right and it will work work properly ingame?

Timo
August 20th, 2007, 11:28 PM
The power of two rule can be ignored if in the .bitmap tag you change the type to 'interface bitmaps'. That tutorial does run by the power of two rule, the pure blue border isn't counted, so the dimensions of the box inside the blue border is looked at when compiling.

And yes, you have the unselected image on the left, and the selected one on the right.

Limited
August 20th, 2007, 11:32 PM
Theres a tutorial on it? Can you give me a link to it? :)

Gamerkd16
August 20th, 2007, 11:34 PM
Sure:
Zeph's Tutorial (http://hce.halomaps.org/index.cfm?pg=3&fid=1667)

What exactly is pure blue? The RGB values...

Limited
August 20th, 2007, 11:57 PM
Sure:
Zeph's Tutorial (http://hce.halomaps.org/index.cfm?pg=3&fid=1667)

What exactly is pure blue? The RGB values...
Firstly, by working out numbers, I got.

514 x 65

(256 + 1) + 256 + 1 = 514

64 + 1 = 65 :)

Secondly, pure blue means go to the RGB layers, go to blue layer and fill the 1 pixel strip with pure with on this layer, then go back to RGB layer and it will be pure blue :)

Timo
August 21st, 2007, 12:00 AM
You'd need to have 515x66 to split the two images in the middle, and to have a blue border around the whole bitmap (top, bottom, left and right).

Gamerkd16
August 21st, 2007, 12:31 AM
Yea I realize my math mistake. Anyway I got it working correctly but now I get this error in tool:

### ERROR interface/linear bitmap cannot be DXT-compressed

lol, months later, Timo is helping me again...

Timo
August 21st, 2007, 01:50 AM
Try changing the format to explicit alpha. If that doesn't work, use 32-bit colour.

Gamerkd16
August 21st, 2007, 07:05 PM
Try changing the format to explicit alpha. If that doesn't work, use 32-bit colour.
Using 32 bit color gives me this error is compilation:

==> !!WARNING!! failed to open TIFF: unsupported bits per sample (32) or sample count (4) <==


EDIT:
Problem solved. I just used an 8-bit color in photoshop, then in the bitmap tag set the format as 32-bit color.

Gamerkd16
August 22nd, 2007, 09:23 PM
Ok, I got the buttons ingame, but I'm noticing that they are stretched in height and don't look like they do in Photoshop size-wise. Is there some option enabled somewhere that could be causing this deformation?

Timo
August 22nd, 2007, 11:35 PM
You need to change the bounds values, located here in the widget tag:
http://xs218.xs.to/xs218/07344/ijhkjhlkhkljh.gif (http://xs.to)
Change them to the width and height of one of the buttons in the bitmap
(so to the pixel height and width of your unselected bitmap, for instance)

Gamerkd16
August 23rd, 2007, 01:38 AM
Actually, those are switched. And this crops the image, it doesn't shrink it.

Ingame:
http://img524.imageshack.us/img524/3108/inagemig9.jpg

Photoshop Version:
http://img519.imageshack.us/img519/212/photfc4.jpg