Aug 13, 2022Kuina-chan
This is the tutorial 5 to learn the basic features of Kuin Programming Language for exe execution environment. This time, let's create a menu screen and a save function, which are modest but important in game creation.
A game usually consists of a number of scenes, such as the title screen and menu screen, in addition to the main content. How these scenes are switched is called the sequence. Before writing a program, let's first consider the sequence.
I decided to use the sequence shown in Figure 1-1 for the menu screen I will create.
First of all, I will write a program for the sequence "fade-in, cursor selection, fade-out" which is the general flow. As before, select main And A draw Control from the snippet, and then add the code shown in Figure 1-2.
The enumeration type and variables of the sequence are created in lines 1 to 7, initialized in line 16, and in lines 19 to 23 during the main loop, the switch block is used to branch to process the sequence accordingly.
Since there is no content in the sequence, nothing will happen when I run it, but for now I have a rough idea of the flow.
I'll implement what's in fade in and fade out.
I could implement the fade effect on my own, but since the wipe library already provides a simple mechanism for fading, I will use it (Figure 1-3).
The wipe@set function on lines 17 and 28 sets the start of the fade. The arguments in parentheses are, in order: type of wipe, fade in if true and fade out if false, number of frames to complete, and color.
Initially, the %fadeIn sequence in lines 23 to 25 will be executed, and the wipe@draw function in line 23 will draw the fade effect. When the fade is complete, the wipe@draw function returns true, so the sequence is switched to the next, %menu, at line 24.
In the %menu sequence in lines 27 and 28, the sequence is immediately changed to the next sequence %fadeOut in line 27, and the fadeout is started in line 28. The %fadeOut sequence in lines 30 to 32 ends with ret in line 31 as soon as the fadeout is finished.
Since the effect of the fade cannot be seen if the background is black, the background color is set to white using the draw@clearColor function in line 18. When you run the program, you can see that it fades in, exits the menu operation momentarily, and then fades out to exit (Figure 1-4).
Now I will create the menu screen from here. This time I will use Kuin's visual placement feature. The procedure is shown in Figure 2-1.
The procedure is to create a menu screen visually, and the Kuin program will be generated automatically.
To use this feature, click on "Add" in the lower right corner of the Kuin editor and add a new .kn file (Figure 2-2).
From the dialog that comes up when you press (1) in the figure, select "2D Draw" in (2), enter the file name "menu" in (3), and press the "Add" button in (4) to add the .kn file.
(1) allows you to switch the .kn file. (2) allows you to configure the screen settings.
For this program, the screen size is 1600 x 900, so set the Position in (2) to "0 x 0 - 1600 x 900". If you press the "-" button for Zoom in (2) and set it to 0.5, the display on the Kuin editor will be reduced, which is an easy setting to create for this program.
Now let&apot;s place the background (Figure 2-4).
Select "Img" in (1) and drag (2) to place it, then set the Position in (3) to "0 x 0 - 1600 x 900" with the placed object selected. Then the object will be the right size to fit on the black screen. To select the object, click on it directly in (2) or select it from (4).
Next, save the data up to this point in a file of your choice, and then press Ctrl+Shift+R. In the res folder that appears, copy and place samples/free_resources/dot_back_side.png as before.
Let's set the placed image to the Img object. Select img1 from (4), and in the dialog box that comes up by pressing "Edit Properties..." in (3), set the properties as shown in Table 2-1, and press the OK button. If the image appears, you have succeeded.
|Property||Value To Be Entered|
Let's create a menu screen using the same procedure (Figure 2-5).
Place four Text objects, two Rect objects, and one Circle object, and set their positions as shown in Table 2-2.
|text1||150 × 100 - 200 × 100|
|text2||150 × 200 - 200 × 100|
|text3||150 × 300 - 200 × 100|
|text4||150 × 400 - 200 × 100|
|rect1||400 × 100 - 1000 × 50|
|rect2||405 × 105 - 990 × 40|
|circle1||70 × 100 - 50 × 50|
For each object, select it and press "Edit Properties..." at the bottom to set its properties as shown in Table 2-3.
|Object Name||Property||Value To Be Entered|
The arrangement of the menu screen is now complete. Let's check out the automatically generated program. Click the "Show Code" button at the top of the Kuin editor to view the program (Figure 2-6).
Press (1) to display the automatically generated program, and press again to return to the placement screen. If you look at the automatically generated program, you will see that the functions init, fin, and draw have been generated.
These can be called from the main program to draw the screen you have placed. Select "\main" from (2) to display the main program and add the program shown in Figure 2-7.
When executed, the menu screen you created will be displayed instead of the white background (Figure 2-8).
Since the cursor does not move as it is, let's add a process to move the cursor.
You can implement it on your own, but since the cursor movement process is used in many situations, it is already available in the cursor library. Let's use it this time (Figure 2-9).
An instance of the cursor@Cursor class is created in line 22 and initialized in line 23. The arguments in parentheses of the set method are, in order, the number of items to be selected by the cursor, the initial value of the cursor, false to move the cursor with the up and down keys and true to move it with the left and right keys, and whether the first and last items can be moved back and forth.
By calling the update method as shown in line 33, the cursor movement caused by key input will be handled automatically. By calling the get method as shown in line 34, the cursor position is returned as an integer starting from 0. The process here moves the Y coordinate of the circle accordingly.
In lines 35 to 41, when the Z key (A button) is pressed, if the cursor is in the third position, the program is terminated. The third is the Exit position.
When you run it, you will see that you can move the cursor with the up and down keys, select Exit and press the Z key to exit.
The next step is to add the volume gauge increase/decrease and decision process. While we're at it, let's also add the process of playing background music to check the volume. Press Ctrl+Shift+R, then copy and place samples/free_resources/bgm_sample.ogg in the res folder.
Once you have it in place, add the program Figure 2-10.
Lines 25 to 26 and 40 to 41 are the same as before for the cursor. The value is between 0 and 10, and can be increased or decreased using the left and right keys.
Line 27, bgm@play is used to play background music. The bgm library is a library that wraps the snd library and allows for convenient background music playback. It can only handle one music file at a time, but can play it without creating an instance, and can also do crossfade playback.
The arguments in parentheses for bgm@play are, in order, file name and playback start position (seconds). To play an ogg format audio file, you need to call ogg@init once, as shown in line 13.
In lines 39-40, the length of the volume gauge is adjusted according to the left and right keys, and the actual volume of the background music is changed in line 41 according to these values.
Run it and press the left and right keys with Volume selected, you will see the volume gauge and the background music increase or decrease in loudness (Figure 2-11).
Finally, let's add the feature to save the volume value (Figure 3-1).
This time, this program will only save the volume, but the actual game programs will save various values such as lives, money, etc. So I prepared a class that summarizes the values for the saved data as shown in lines 12 to 14.
In lines 33 to 38 I defined the key to be used for encryption and the file path for the saved data. "0xnumberb8" means a hexadecimal value of bit8. bit8 is a type that handles 8-bit values. The key is like a password, so when you actually create the game, you should be able to set it to whatever you want and no one will know about it.
When "Save" is pressed, in lines 55 through 64, the program puts the volume value into the class I created, encrypts it, and saves it. The cipher@encrypt function is used for encryption. The arguments in parentheses are data to be encrypted and key in that order. The data must be specified in bit8 type, and by writing "$>bit8", you can convert the whole class to bit8 type. Encrypted data is saved using the file library.
The same procedure applies to loading saved data. In lines 65 to 72, the file is loaded in the file library and the cipher@decrypt function is used to decrypt the data. Since the combined data is of type bit8, I convert it to the type of the original class by writing "$<Type of data" in line 71. For more details on how to use the file library, see Reading And Writing Text And Binary File.
Run it, change the Volume and press the Z key on Save, then exit, start it again and press the Z key on Load. The volume value you just set will be restored.
The menu screen is now complete. Next time, I will make a calculator application.