• Welcome to MX Bikes Official Forum. Please login or sign up.
 
June 05, 2020, 10:09:36 AM

News:

MX Bikes beta14d available! :)


UI creates border around bitmaps

Started by JNS47, May 11, 2020, 03:58:59 AM

Previous topic - Next topic

JNS47

I want to create a main menu UI, but somehow there is a border drawn around bitmaps (and sprites in buttons). Maybe you don't see it easily on the screenshot, so you might have to zoom.
20200511032501_1.jpg
borders of my images are #ffffff, so it can't be the image which causes it I guess.

tried to make borders transparent, the gray border goes away if I do this, but this makes it a lot harder to get a nice transition from the images to white as you can see here (the three colored images have a transparent border)
20200511033230_1.jpg

JNS47

seems like it's not just a visual thing.
My elements are like this:
item_button
{
  name id_testing
  button
  {
   rect 0.100000 0.250000 0.300000 0.750000
   sprite1 test_image.tga
   sprite2 test_image_hover.tga
   sprite3 test_image_hover.tga
   sample1 ui_button_over.wav
   sample2 ui_button_click.wav
  }
  textid Testing
  text
  {
   font main.fnt
   pos 0.006250 0.000000
   fontsize 0.044444
   align right
  }
  color1 255 240 240 240
  color2 255 240 240 240
  color3 255 240 240 240
}
item_button
{
  name ID_MULTIPLAYER
  button
  {
   rect 0.300000 0.250000 0.500000 0.750000
   sprite1 test_image.tga
   sprite2 test_image_hover.tga
   sprite3 test_image_hover.tga
   sample1 ui_button_over.wav
   sample2 ui_button_click.wav
  }
  textid Single_race
  text
  {
   font main.fnt
   pos 0.006250 0.000000
   fontsize 0.044444
   align right
  }
  color1 255 240 240 240
  color2 255 240 240 240
  color3 255 240 240 240
}
item_button
{
  name ID_BIKE
  button
  {
   rect 0.500000 0.250000 0.700000 0.750000
   sprite1 test_image.tga
   sprite2 test_image_hover.tga
   sprite3 test_image_hover.tga
   sample1 ui_button_over.wav
   sample2 ui_button_click.wav
  }
  textid bike_selection
  text
  {
   font main.fnt
   pos 0.006250 0.000000
   fontsize 0.044444
   align right
  }
  color1 255 240 240 240
  color2 255 240 240 240
  color3 255 240 240 240
}
as you can see, the first one ends on x=0.300000, the next one starts on x=0.300000 so there shouldn't be a gap. But there is one, and the gap is a gray pixel, even though my background is white. So there is a real border around buttons and bitmaps.

In the attachments you can see a test with the main2.tga and main3.tga which is used in the default UI and if I put my cursor right in the middle of those two elements none of those is considered hovered over.
Might not be a problem for the default UI, but it is one for what I'm trying to do.