Design-time UI creator for osu!framework based on a markup language.
- Refer to osu!framework's
How to use
osu!design is not ready for any real project due to the lack of features and mostly untested code. There are no releases either.
Once the application is running, you can browse to the
osuML directory and mess around with the example markups provided. They have the extension
osuML is an XML-based markup language that is used to compose a
Drawable. It stands for osu! Markup Language. It is not XAML and does not intend to be one.
Every element in
osuML represents a
Drawable node, and their attributes correspond to a field or property.
<Container xmlns="osufx://osu.Framework/*" Name="MyDrawable" Size="400,300"> <Box Name="Background" RelativeSizeAxes="Both" Colour="rgba(250,150,100,200)"/> <Container Name="MyContainer" Padding="60,40,60,40" RelativeSizeAxes="Both"> <Box RelativeSizeAxes="Both" Colour="#00ff00, #ff00ff, #00ffff, #ff0000"/> </Container> <SpriteText Text="My SpriteText is awesome" TextSize="20" Margin="10,20,10,20"/> </Container>
Breaking down the above markup:
- The root node is a
Container. When the designer generates a class from this markup, it will be derived from
xmlnsattribute specifies the default namespace from which
Drawabletypes are imported. The URI must have the
osufx://scheme, followed by the name of the assembly without
.dllextension, then a glob pattern to filter the types. In this example,
Drawabletypes from the assembly
osu.Framework.dll, which match the glob pattern
Nameattribute specifies the given name of the
Drawable. This is required for the root node but optional for all of its descendants. Refer to the ECMA C# spec for what is considered a valid class name. TLDR: your usual alphanumeric identifier with underscores and no spaces. In this example, the
Nameof the root node is
MyDrawableand therefore the generated class will be named
Sizeattribute specifies the size of the
Drawable, in this case, in absolute measurement. (Add
RelativeSizeAxes="Both"to make it measure relatively.)
<Box Name="Background" RelativeSizeAxes="Both" Colour="rgba(250,150,100,200)"/>
- The root node has a child element
Background, relatively sized in both axes.
Colourattribute specifies the colour of the
Box. You can specify the colour as an RGB function (
rgba(r,g,b,a)) or a hexadecimal (
#012345). A single colour can be specified for all four vertices of the
Drawable, or a comma-separated list of colours for each individual vertex in the order of top-left, top-right, bottom-right, bottom-left.
<Container Name="MyContainer" Padding="60,40,60,40" RelativeSizeAxes="Both"> <Box RelativeSizeAxes="Both" Colour="#00ff00, #ff00ff, #00ffff, #ff0000"/> </Container>
- The root node has a child element
MyContainer, relatively sized in both axes. It has a padding of
40for the top, right, bottom and left respectively.
MyContainerhas one unnamed child element
Box, relatively sized in both axes and has the colours
#ff0000for its four vertices.
<SpriteText Text="My SpriteText is awesome" TextSize="20" Margin="10,20,10,20"/>
- Lastly, the root node has an unnamed child element
SpriteText. It has the text
My SpriteText is awesome, is sized at
20pixels and has a margin of
20for the top, right, bottom and left respectively.
More examples can be found in the osuML folder.
At the moment, osu!design is lacking in some of the most important and useful features of osu!framework such as:
- Resource management
- Texture resource binding for
- Config-backed binding of properties
- Local-scope bidirectional binding between properties
- Asynchronous loading of children
- XML-based transform sequence generation
This project is licensed under the MIT licence. Please see the licence file for more information. tl;dr you can do whatever you want as long as you include the original copyright and license notice in any copy of the software/source.
The BASS audio library (a dependency of osu!framework) is a commercial product. While it is free for non-commercial use, please ensure to obtain a valid licence if you plan on distributing any application using it commercially.