(0.0.0) Styles - JujuAdams/Bento GitHub Wiki

Bento uses a struct to contain formatting instructions. This is the style struct, a member variable of a Bento element. The style struct, along with properties and functions, is added to a Bento element on creation within the bento_element() constructor.

The default style is defined by __bento_style_default(); it is recommended that you customise this script to meet the needs of your project.

---

An element's style struct can be accessed using dot notation, for example:

element = bento_text("Hello world!"); //Create a text element
element.style.text.font = fntVerdana20; //Set the text element's font
element.style.text.color = c_orange; //Set the text to orange

with() can also be used creatively to access structs in a convenient way:

var _element = bento_text("Hello world!");
with(_element.style.text)
{
    font = fntVerdana20;
    color = c_orange;
    alpha = 0.5;
    halign = fa_center;
    valign = fa_middle;
}

Style templates can also be used to more easily share formatting between multiple different elements; they are a globally scoped and can be defined once and used throughout the life of the application. Style template values are accessed in an identical way to an element's style:

with(bento_style_template("orange text")) //Create a new style template called "orange text"
{
    text.font = fntVerdana20; //Set the style template's font
    text.color = c_orange; //Set the style template to orange
}

//Create a text element and set its style to a copy of "orange text"
bento_text("Hello world!", "orange text");

 

Member	Typical Value	Purpose
General
clip	true	Controls whether to graphically clip this element. Set to true, an element will be clipped inside its parent's bounding box
clip_new_frame	false	When set to true, the element will reset the clipping frame to cover the entirety of its bounding box. Useful for pop-ups
interactive	true	Whether or not to treat this element as interactive. Set to false to allow the mouse to "pass through" the element to whatever's drawn behind it
layout	"none"	Chooses what layout paradigm to use. Can be "none", "flex", or "grid" - see Grid Layout and Flex Layout below
Primitive Fill
fill		Struct containing the following:
fill.color	c_white	Flat color of the primitive's fill. If texture.sprite is specified, this color is used for blending
fill.alpha	0.0	Alpha value for the primitive's fill
fill.texture.sprite	sprTexture	Sprite to use to texture the primitive
fill.texture.image	0	Image of the above sprite to draw
fill.texture.x_offset	0	x-offset for the texture
fill.texture.y_offset	0	y-offset for the texture
Primitive Outline
outline		Struct containing the following:
outline.color	c_white	Flat color of the primitive's outline
outline.alpha	0.0	Alpha of the primitive's outline
Text
text		Struct containing the following:
text.font	fntVerdana20	Font to use for drawing
text.color	c_white	Color to draw the text with
text.alpha	1.0	Alpha value for the text
text.halign	fa_left	Horizontal alignment for the text. Can be fa_left, fa_center, or fa_right
text.valign	fa_top	Vertical alignment for the text. Can be fa_top, fa_middle, or fa_bottom
Sprite
sprite		Struct containing the following:
sprite.index	sprTest	The sprite index to draw
sprite.image	0	Image of the sprite to draw
sprite.color	c_white	Blending color for the sprite
sprite.alpha	1.0	Alpha blend for the sprite
Nineslice
nineslice		Struct containing the following:
nineslice.index	sprTest	The sprite index to draw
nineslice.image	0	Image of the sprite to draw
nineslice.color	c_white	Blending color for the sprite
nineslice.alpha	1.0	Alpha blend for the sprite
nineslice.l	8	Left edge width, in pixels
nineslice.t	8	Top edge width, in pixels
nineslice.r	8	Right edge width, in pixels
nineslice.b	8	Bottom edge width, in pixels
Margin
margin		Either a real-value that indicates uniform spacing around the element, or a struct containing the following:
margin.l	0	Left offset for the element's margin
margin.t	0	Top offset for the element's margin
margin.r	0	Right offset for the element's margin
margin.b	0	Bottom offset for the element's margin
Padding
padding		Either a real-value that indicates uniform spacing around the element, or a struct containing the following:
padding.l	0	Left offset for the element's padding
padding.t	0	Top offset for the element's padding
padding.r	0	Right offset for the element's padding
padding.b	0	Bottom offset for the element's padding
Grid Layout
grid		Struct containing the following:
grid.direction	"rows"	Direction to flow elements to automatically populate the grid. Can be "rows" or "columns"
grid.columns	[30, 50]	An array of column widths
grid.rows	[20, 20]	An array of rows heights
grid.column_gap	0	The horizontal gap between columns
grid.row_gap	0	The vertical gap between rows
grid.content_justify	"start"	Where to place columns horizontally relative to this element's width. Can be "start", "center", "end", "stretch", "space around", "space between", or "space evenly"
grid.content_align	"start"	Where to place rows vertically relative to this element's height. Can be "start", "center", "end", "stretch", "space around", "space between", or "space evenly"
grid.line_align	"start"	Where to place children vertically in each grid cell. Can be "start", "center", "end", or "stretch"
grid.line_justify	"start"	Where to place children horizontally in each grid cell. Can be "start", "center", "end", or "stretch"
Flex Layout
flex		Struct containing the following:
flex.direction	"rows"	Direction to flow elements inside the element's content box. Can be "rows", or "columns"
flex.content_halign	"left"	Where to horizontally place the group of children inside this element. Can be "left", "center", "right", "stretch", "space around", "space between", or "space evenly"
flex.content_valign	"top"	Where to vertically place the group of children inside this element. Can be "top", "middle", "bottom", "stretch", "space around", "space between", or "space evenly"
flex.line_halign	"left"	Where to horizontally place children vertically on each line. Can be "left", "center", "right", "stretch", "space around", "space between", or "space evenly"
flex.line_valign	"top"	Where to vertically place children horizontally on each line. Can be "top", "middle", "bottom", "stretch", "space around", "space between", or "space evenly"