Table of contents
First Steps
Let me show you the code first. After that come the explanations.
Here is a simple example. It opens only a window without function and content.
#import_plugin Nuklear as nk
// show all errors
SetErrorMode(2)
// set window properties
SetWindowTitle( "First Nuklear Window" )
SetWindowSize( 1280, 720, 0 )
SetWindowAllowResize( 1 ) // allow the user to resize the window
// set display properties
SetVirtualResolution( 1280, 720 ) // doesn't have to match the window
SetOrientationAllowed( 1, 1, 1, 1 ) // allow both portrait and landscape on mobile devices
SetSyncRate( 0, 0 ) // 30fps instead of 60 to save battery
SetScissor( 0,0,0,0 ) // use the maximum available screen space, no black borders
UseNewDefaultFonts( 1 ) // since version 2.0.22 we can use nicer default fonts
#insert "../Nuklear.agc"
// basic nuklear initialization
nkInit()
do
nk.HandleInput()
if nk.WindowBegin("My First Window", 320, 50, 320, 240, NK_WINDOW_BORDER||NK_WINDOW_MOVABLE||NK_WINDOW_TITLE)
endif
nk.WindowEnd()
nkSync()
loop
The first line includes the plugin. Just like any other. The following lines until '
UseNewDefaultFonts' is the AppGameKit default code. I will not explain it now.
With '
#insert "Nuklear.agc"' some important constants and functions written in AGK-Basic are included. So it is also important.
'
nkInit()' initializes the GUI-engine.
Now comes the main loop. In order for Nuklear to respond to the user's input, the input must be passed from AppGameKit to Nuklear. This can be done with the command '
nk.HandleInput()'.
Next we initialize our first window. For this '
nk.WindowBegin' is responsible with the parameters (from left to right)
window title,
position of the window (x,y)
width and
height of the window and the
window flags.
Why '
WindowBegin' is in an
if statement has the following reason: Nuclear remembers which status the window has. If it is minimized now, the content should not be shown anymore. So '
WindowBegin' returns
0 (
false) in this case.
Between '
if' and '
endif' there are all the controls that should appear in the window.
With '
nk.WindowEnd()' we finish the construction of the window.
In order for AppGameKit to display our window, '
nkSync' must be called. The AGK-Sync does not have to be called anymore. This is done by
nkSync.
Note that there are commands with and without a dot after nk (
nkSync and
nk.WindowEnd() ). The ones with the dot are pure plugin commands and the ones without are commands in AGK-Basic that were inserted via '
#insert "../Nuklear.agc"'.
Now we fill our window with some controls. First of all we have to specify which space our controls are allowed to occupy. We do this with '
nk.LayoutRowStatic' which waits for 3 parameters.
Height and
width of the controls and
how many controls are placed next to each other.
nk.LayoutRowStatic(30,120,2)
Continue with two buttons. Because we want to react to the buttons, we put them into an
if statement. We decide to use normal label buttons. Therefore you only need a string parameter as label for the button.
if nk.ButtonLabel("Say Hello") then hello_text$ = "Hello every body!"
if nk.ButtonLabel("Clear Greetings") then hello_text$ = ""
The buttons set or clears the variable 'hello_text$'.
Last but not least we want to bring our variable on the screen/window. For this we have '
nk.Label' which shows a string. The parameters are - the
text to display and a
flag how the text should be displayed.
nk.Label(hello_text$, NK_TEXT_CENTERED)
only says that it will be centered vertically and horizontally in the available space.
However, since we want to make the entire window width available to our text, we must first change the layout.
nk.LayoutRowDynamic(30,1)
nk.Label(hello_text$, NK_TEXT_CENTERED)
This time we took a dynamic layout. This gives the layout the full width of the window. Again with a
height of 30 pixels and the window width is divided into
one column.
With
NK_TEXT_CENTERED our text is finally displayed in the horizontal center of the window and in the vertical center of the row (30).
The code now looks like this.
#import_plugin Nuklear as nk
// show all errors
SetErrorMode(2)
// set window properties
SetWindowTitle( "First Nuklear Window" )
SetWindowSize( 1280, 720, 0 )
SetWindowAllowResize( 1 ) // allow the user to resize the window
// set display properties
SetVirtualResolution( 1280, 720 ) // doesn't have to match the window
SetOrientationAllowed( 1, 1, 1, 1 ) // allow both portrait and landscape on mobile devices
SetSyncRate( 0, 0 ) // 30fps instead of 60 to save battery
SetScissor( 0,0,0,0 ) // use the maximum available screen space, no black borders
UseNewDefaultFonts( 1 ) // since version 2.0.22 we can use nicer default fonts
#insert "../Nuklear.agc"
// basic nuklear initialization
nkInit()
do
nk.HandleInput()
if nk.WindowBegin("My First Window", 320, 50, 320, 240, NK_WINDOW_BORDER||NK_WINDOW_MOVABLE||NK_WINDOW_TITLE)
nk.LayoutRowStatic(30,120,2)
if nk.ButtonLabel("Say Hello") then hello_text$ = "Hello every body!"
if nk.ButtonLabel("Clear Greetings") then hello_text$ = ""
nk.LayoutRowDynamic(30,1)
nk.Label(hello_text$, NK_TEXT_CENTERED)
endif
nk.WindowEnd()
nkSync()
loop
I hope this is enough for a short introduction.
next About Window
