(0.0.0) Creating a UI element - JujuAdams/Bento GitHub Wiki

Bento uses simple script calls to create basic UI elements and then allows you to customise the UI element by modifying values. This is similar to create an instance of an object and then setting its image_blend or sprite_index.

///Create Event
//Create a new box that stretches across most of the room
box = bento_box_region(20, 20, room_width-20, room_height-20);


///Draw Event
//Draw the box!
bento_draw(box);

This'll draw a plain white rectangle which isn't very exciting. Let's customise the appearance of what we've made.

///Create Event
box = bento_box_region(20, 20, room_width-20, room_height-20);
box.style.color = c_red;
box.style.alpha = 0.7;

This'll draw our box at 70% alpha and red. We can also instead draw the box with a tiled sprite:

///Create Event
box = bento_box_region(20, 20, room_width-20, room_height-20);
box.style.sprite.index = sprTexture;

There's a myriad of visual options available, see the Styles page.

When modifying an element, constantly using long dot notation chains can be annoying. Instead, we can use with():

///Create Event
box = bento_box_region(20, 20, room_width-20, room_height-20);
with(box.style.sprite)
{
    index = sprTexture;
    image = 2;
    color = c_fuchsia;
    alpha = 0.5;
}

Bento comes with a number of pre-existing UI element templates to use and customise, see the Functions & Methods page for a list of elements that can be created. Custom UI elements can be created as well by extending bento_element_class() and we cover that in a later example.