Notes from teacher chutianbo
One: UI production
The main structure:
They are the blood bar in the upper left corner, gold coins on the right, remote control bar on the left, attack on the right, etc.
Blood bar in the upper left corner:
1. Create a silder in the UI
According to the rendering order in the UI, from top to bottom should be Fill Area (black background), subclass (red blood bar), FrontFrame (outer frame of blood bar), UserLevel (left shield) and its subclass Text class display grade
Here you need to move the Slider to the upper left corner through the anchor point, and you can quickly move the box and the anchor point through shift and shift+alt
2.Gold
In summary
But the background of gold coins can be translucent by setting color 0, 0, 0, 135
3. Move left,
In fact, it is composed of a background circle and bright direction circles in four directions
We only do simulation here, so we don't consider the program problem, so after we finish the four directions, we can hide the direction of movement to highlight
4. Right skill key
The only key point is how to make the countdown and translucency on the UI
The countdown count is made by the last text
The translucency is made by the image of (0, 0, 0, 135), and the skill countdown here is controlled by Fill Amount on the way
Two: event system binding
1. Make the attack button:
1.1 Binding animation
Make Attack as a trigger for the jump state;
Note here that entering the attack state allows interruption, so the has exit time can be canceled. But after the attack state is played, you need to shake it back
2.2
The buttons in the UI in Unity are no different from the buttons in Android or front-end development. They are all controlled by click, and they can be controlled visually in Unity.
Of course we need to add the Attack function to the character controller
Animator m_Animator;
public void Attack()
{
m_Animator.SetTrigger("Attack");
}
2.3 About making a setting menu
Generally speaking, the setting menu is divided into three types
1. One-time menu, directly linked to the current scene
2. Use menus as prefabs and reuse them in multiple scenarios
3. Directly use the menu as an independent game scene, and jump when using it (commonly used)
The one made here is type 1, directly mounted
The controls required here are
1. Toggle in the UI (that is, the checkbox in the front end)
2.Slider (slide bar)
3. The current setting of the button realizes data saving
1. Since our game is enabled by default
So need Is On to open
Audio we can hook on the parent object of the character
The default is global playback, which can be ignored
If you need to play the source, you can adjust the 3d curve below
2. Slider
The only thing to pay attention to is to mount the data and select the volume
3.
But after we set up like this, in fact, every time we close the setting interface, all the data will return to our default data
So we need an application button in the game to store the data we need
Here we need two scripts, one to store the data we need for the C# base script
Store the volume of the float type separately
and bool type whether to turn on the volume
public class SettingData{
public float MusicVloume;
public float IsOn;
}Then we need a unity script: SaveSetting
Here we need to use the json data type to store data
private SettingsData m_settingsData;
//获取两个控件，并且序列化显示
[SerializeField] private Slider volumeSilder;
[SerializeField] private Toggle MusicToggle;
private void Awake()
{
string filePath=Application.streamingAssetsPath+"/settings.json";
if (!File.Exists(filePath))
{
return;
}
//读文件信息用的信息流
StreamReader sr=new StreamReader(filePath);
string json=sr.ReadToEnd();、
//判断字符串是否为空
if (json.Length > 0)
{
SettingsData settingsData = JsonUtility.FromJson<SettingsData>(json);
if (volumeSilder != null)
{
volumeSilder.value = settingsData.MusicVolume;
}
if (MusicToggle != null)
{
MusicToggle.isOn = settingsData.IsMusicOn;
}
}
}
//转换数据为json字符串
public void SaveSettingsToJson()
{
m_settingsData = new SettingsData();
m_settingsData.MusicVolume = volumeSilder.value;
m_settingsData.IsMusicOn = MusicToggle.isOn;
string settings=JsonUtility.ToJson(m_settingsData);
Debug.Log($"转换用户设置的菜单数据到Json格式为{settings}");
File.WriteAllText(Application.persistentDataPath+"/settings.json",settings);
Debug.Log("执行LoaddingSettings");
}
}Three: cursor production
Because it is placed in another Demo, the structure below is different
The effect is as follows, convert the mouse cursor to the following image
1. Make script CursorScreen:
disappear original mouse
Synchronize script position with mouse position
UI level:
Screen settings:
The overlay mode used, if you are not familiar with it, you can read the previous instructions, and change the layer rendering order to 200, which is the last rendering, the top layer
Because my demo material is 16 pixels, just set it yourself
：
Aspect: width and height adapter
The selected FItParent mode puts the UI into the Rect of the parent object according to the aspect ratio. The width and height cannot be set manually, but will be automatically set according to the aspect ratio. No matter how you modify the Ratio ratio, it will not exceed the frame of the parent object;
The values here are from 16/9
Cursor: It is actually an image, just add your own cursor here, if you don’t need ray detection, just turn it off.
That is, if you don’t need to click on the treasure chest or something, you can optimize the performance;
The last step Edit➡project Settings➡player
There is actually a default cursor setting here. I set one here myself. In order to avoid special circumstances, I set the original cursor to black.
The difference between the two can be seen in the figure below
Since the mouse cursor will disappear after taking a screenshot, it can be understood that the cursor will be at the position of the tilemap (1, -1, 0), and there is a certain error
