Aug 13, 2022Kuina-chan


This is the tutorial 2 to learn the basic features of Kuin Programming Language for exe execution environment. This time, let's make a program that rolls dice.

1Creating A Window

First, let's display the window. Start Kuin (or create a new source code), and click "main And An Empty Window" from (1) in Figure 1-1 to insert the code.
Snippet
Figure 1-1: Snippet
The code in Figure 1-2 should now be inserted.
  1. var wndMain: wnd@Wnd
  2.  
  3. func main()
  4.   do @wndMain :: wnd@makeWnd(null, %normal, 800, 450, "Title")
  5.  
  6.   while(wnd@act())
  7.   end while
  8. end func
Figure 1-2: Program To Display An Empty Window
This program is designed to simply display a window, and if you write each character without clicking on (1) earlier, you will get the same result.
The previous (1) is a feature that allows you to quickly insert a program that you often write, which is called a snippet. You can register your own favorite program as a snippet, so use it conveniently.
If you do "Compile & Run" on this program in window mode, it will look like Figure 1-3.
Show Window
Figure 1-3: Show Window
Now, I will explain the contents of the program. In Kuin, the lines sandwiched between "func main()" and "end func" will be executed in order from the top (Figure 1-4).
  1. var wndMain: wnd@Wnd
  2.  
  3. func main()
  4.   do @wndMain :: wnd@makeWnd(null, %normal, 800, 450, "Title")
  5.  
  6.   while(wnd@act())
  7.   end while
  8. end func
Figure 1-4: Program To Display An Empty Window (2)
In other words, lines 4-7 will be executed and this program will be terminated.
The 4th line, "wnd@makeWnd(...)", is a command to create a window. The parentheses are separated by commas and contain, respectively, parent window, behavior when resized, width, height, and text to display in title. If there is no parent window, write null like this.
The created window is assigned to a variable named @wndMain by writing "do @wndMain ::". A variable is like a box, you can put values in it and read the values it contains. The "::" is an assignment operator, which means it assigns the value on the right side of the "::" to the variable on the left.
Variables must be created in advance before use. In this @wndMain, a variable is created on the first line. By writing "var Variable Name: Type Name", a variable with that name and type will be created.
A type indicates what kind of values can be stored in the variable. For example, an integer type can only contain an integer, and a character type can only contain a character. The wnd@Wnd type in this program is the type that a window is contained in.
Now, all that remains is the 6th or 7th line of the program (Figure 1-5).
  1. var wndMain: wnd@Wnd
  2.  
  3. func main()
  4.   do @wndMain :: wnd@makeWnd(null, %normal, 800, 450, "Title")
  5.  
  6.   while(wnd@act())
  7.   end while
  8. end func
Figure 1-5: Program To Display An Empty Window (3)
Lines 6-7 are the process to prevent this program from exiting until the window is closed.
wnd@act() is a command that performs processing when a window is moved, resized, or closed. This command returns a true or false value, true until the window is closed, false when it is closed.
"while(...)" is a command that repeatedly executes the line between "end while" as long as the value in parentheses is true. In other words, the 6th and 7th lines of the code are designed to keep waiting until the window is closed and "wnd@act()" returns a false value.

2Add A Button

Now that we know the basic structure of the program, let's add a button to the window. Add the program shown in Figure 2-1.
  1. var wndMain: wnd@Wnd
  2. var btnDice: wnd@Btn
  3.  
  4. func main()
  5.   do @wndMain :: wnd@makeWnd(null, %normal, 800, 450, "Title")
  6.   do @btnDice :: wnd@makeBtn(@wndMain, 12, 12, 185, 23, %fix, %fix, "Throw The Dice")
  7.  
  8.   while(wnd@act())
  9.   end while
  10. end func
Figure 2-1: Add A Button
Creating a button is basically the same as creating a window, and is done using "wnd@makeBtn(...)". The contents of the parentheses are, in order, parent window, left coordinate, top coordinate, width, height, behavior when changing the width of the parent window, behavior when changing the height of the parent window, and text to display.
When run, it will look like Figure 2-2.
Screen For Adding A Button
Figure 2-2: Screen For Adding A Button
When you press the button, nothing happens. That's because you haven't written a program. Let's add the program shown in Figure 2-3.
  1. var wndMain: wnd@Wnd
  2. var btnDice: wnd@Btn
  3.  
  4. func main()
  5.   do @wndMain :: wnd@makeWnd(null, %normal, 800, 450, "Title")
  6.   do @btnDice :: wnd@makeBtn(@wndMain, 12, 12, 185, 23, %fix, %fix, "Throw The Dice")
  7.   do @btnDice.onPush :: @btnDiceOnPush
  8.  
  9.   while(wnd@act())
  10.   end while
  11. end func
  12.  
  13. func btnDiceOnPush(sender: wnd@WndBase)
  14.   do wnd@msgBox(@wndMain, lib@rnd(1, 6).toStr(), "Dice Results", %info, %ok)
  15. end func
Figure 2-3: Throw The Dice
The button you created is assigned to the @btnDice variable in line 6, and by writing "do @btnDice.onPush :: ..." for this @btnDice as shown in line 7, you can set the behavior when the @btnDice button is pressed.
This @btnDice.onPush is an element that @btnDice has, and can be treated like a variable. The process assigned to @btnDice.onPush will be called every time the button is pressed.
Here, @btnDiceOnPush is created on line 13, and it is assigned to @btnDice.onPush on line 7, so that the process on line 13 is performed every time the button is pressed.
Lines 13-15 describe what happens when the button is pressed. Line 14, "wnd@msgBox(...)" is a command to display a message on the screen. In parentheses are, in order, parent window, message to display, text to display in title, icon to display, and button to display.
Of the "lib@rnd(1, 6).toStr()" on line 14, "lib@rnd(1, 6)" is a command that randomly returns a number between 1 and 6. The text to be displayed by "wnd@msgBox(...)" must be of string type, and since "lib@rnd(...)" returns as integer type, it is converted from integer type to string type by ".toStr()".
Pressing the button will randomly display the numbers 1-6, as shown in Figure 2-4.
Screen For Throwing Dice
Figure 2-4: Screen For Throwing Dice
The part enclosed by "func function name (...)" and "end func" as shown in lines 13-15 is called a function, which can organize a series of processes. The process organized into a function can be called from multiple places in the program and executed, or assigned to a variable as in the previous example "@btnDice.onPush :: ...".
The "func main()" is also a kind of function. In other words, Kuin's program is a flow that terminates after executing a function named main.

3Throw 10 Dice

Now, let's try to throw 10 dice. Add the program shown in Figure 3-1.
  1. var wndMain: wnd@Wnd
  2. var btnDice: wnd@Btn
  3.  
  4. func main()
  5.   do @wndMain :: wnd@makeWnd(null, %normal, 800, 450, "Title")
  6.   do @btnDice :: wnd@makeBtn(@wndMain, 12, 12, 185, 23, %fix, %fix, "Throw The Dice")
  7.   do @btnDice.onPush :: @btnDiceOnPush
  8.  
  9.   while(wnd@act())
  10.   end while
  11. end func
  12.  
  13. func btnDiceOnPush(sender: wnd@WndBase)
  14.   var msg: []char :: ""
  15.   for(1, 10)
  16.     do msg :: msg ~ lib@rnd(1, 6).toStr() ~ "\n"
  17.   end for
  18.   do wnd@msgBox(@wndMain, msg, "Dice Results", %info, %ok)
  19. end func
Figure 3-1: Throw 10 Dice
Don't forget to rewrite the "msg" in line 18.
The process enclosed in "for ..." and "end for", as shown in lines 15-17, is repeated a certain number of times while being counted up. The way to write it is "for(value To start counting, value to end counting)". Since this program is written as "for(1, 10)", it will be repeated a total of 10 times, counting "1, 2, 3, ..., 10".
In line 14, a variable named msg is created. The type is []char, which is a type that can contain strings. A string is a series of letters, i.e. "ABCDE" or "Hello".
There is a '"' symbol here and there in the program. In Kuin, strings are enclosed in '"' and written as '"ABCDE"' or '"Hello"'. A zero-length string is called an empty string and is written as '""'. In line 14, the variable msg is created and at the same time an empty string is assigned by ':: ""'.
The "~" symbol appearing in line 16 is an operation to concatenate strings. For example, if you write '"ABC" ~ "DEF"', you will get '"ABCDEF"'.
Also, the "\n" in line 16 represents a newline character. Characters that are difficult to write as they are in a program like this are represented by a combination of the "\" symbol and a single character. If you want to write the character "\" itself, write "\\".
With the above mechanism, each time you execute 'do msg :: msg ~ lib@rnd(1, 6).toStr() ~ "\n"' on line 16, the string in the variable msg will be appended with the result of "lib@rnd(1, 6).toStr()" plus a newline character. Since the process is repeated a total of 10 times, the result of running this program is as shown in Figure 3-2.
Screen For Throwing 10 Dice
Figure 3-2: Screen For Throwing 10 Dice
The above is the tutorial A Program That Rolls Dice. Next time, I'll make a simple mini-game.
1660385777enf