Unity Ugui Canvas using slider to make a character blood bar

Recent Course training elective unity, explaining the unity of the official case--spaceshoot, training boring, and then think about the role of the game to make a blood bar, in order to increase the game's playability.

Unity version: 5.4.1

Case Template: Space shooter

The original tomato pavilion and so on

Original link: http://www.cnblogs.com/vmoor2016/p/6044941.html

It takes three steps to put an elephant in the freezer: ① the refrigerator door, ② the elephant in the fridge, ③ closes the refrigerator door.

So how much does it take to make a character's blood bar? Here also divided into three steps: ① make blood bar, ② placed Blood bar, ③ operation Blood Bar.

Here is to share the next blood bar production steps.

The first step: making blood strips

• Select the Game object, create a sub-object under the Game object Canvas, step: Select Game Object-Right-click-ui Select Create

Canvas;

• Create a blood bar, step: Select Create a good canvas, then, right--ui select Create slider;

In the game scene view, you can see a white box, canvas canvas, and a blood bar prototype slider.

Expand the slider (like the second one) to discover the three components that make up the slider:

Background, background color, fill area, fill color, Handle sliderarea: Slide handle.

　　

To make it easier to see the effects, now modify the slider property, select the slider, and the components in the Inspector panel

Slider (Script) to modify min Value=0,max value=10,value=10. Start making blood strips now:

• Remove handle (slide handle): Select Handle Sliderarea, press DELETE (and of course

You can uncheck the object in the Inspector panel), and you can see that the round slide handle disappears.

• To modify the background and fill color: Select Fill under Fillarea, and locate the image (Script) component under the Inspector panel.

In which you can modify the slider's fill color, and also select background to modify the background color.

• Adjust fill area (fill region): Found after previous execution, although the current value of slider is equal to max value

, but the blood strips were not filled. Now select Fill area to modify the properties in the Rect transform in the Inspector panel,

Set the left and right values to 0 (see) so that a simple blood bar is finished.

　　　　

Step two: Put the blood strips

So far, the blood bar has not appeared in the Camera view field, this is due to the canvas (artboard) property setting reason, in

View Canvas Rendering properties under the Inspector Panel (render mode).

　　　　

There are three ways of rendering, the default is screen Space-overlay. After this step, you will be presented with a brief description of the first two rendering

mode, the render mode is now changed to World Space (global).

When modified, you will see that the Rect transform component in the Inspector panel can be modified.

　　　　

This means that we can put the blood bar in the right place by rotating and dragging. Here are the steps to be placed:

• Modify the location of the canvas to set Pos X,pos y to 0;
• Rotate canvas: Because the canvas is the equivalent of a polygon, the camera will not see the artboard if it is shot from a vertical angle

On anything, rotate the canvas so that it is on the main camera (I am here camera on the Y axis perpendicular to the shot,

So the canvas around the x-axis rotation of 90 degrees, then the big blood Bar will appear in the game scene.

　　　　

• To modify the slider size: Needless to say, such a large blood bar must be modified to the next size, it is recommended to use scale

(zoom tool) for size modification. Of course you can also change the width of the high to achieve, but the control is not good wide

The proportions will have unintended effects (try it yourself).

　　

• Modify Canvas Size: This small piece of blood does not use that large canvas artboard, so the size of the canvas

Modified to be comparable with the blood bar, it is recommended to directly modify the width of height,. The work on the blood bar has been completed.

, you can choose the Move tool to demonstrate, and you can see that the blood bar follows the character as expected.

　　

Below is a supplemental content, not interested can be skipped.

　　Supplement :

　　The three rendering modes of canvas are mentioned above, and the first two types are briefly explained here:

1.Screen Space-overlay: The default rendering mode, this mode canvas position size is not changed, but can be

　　Move Parent Object to change indirectly, The starting position of the canvas is the location of the parent object, the size and the display screen size of the setting

related (e.g. 1 , I this The display size of the , and the size of the canvas will also occur

change. This mode does not require a UI camera, andthecontent on the canvas is displayed before all the game objects.

　　　　　

2.Screen Space-camera: This mode canvas position size is immutable, you need to specify a UI camera (you can send

More than one render camera, the default is not to specify the camera), canvas canvas size According to the camera view

Camera, you can attach the main camera to the above view, and the contents of the canvas will be displayed

Displayed in front of all game objects.

　　　　

Step three: Manipulate the blood strips

　　The operation of the blood bar will be used to control the foot. The operation is simple, so the script is simple and interesting to look at.

1 usingUnityengine;2 usingSystem.Collections;3 usingUnityengine.ui;//add a UI namespace4 5  Public classPlayercollide:collide {6     7      PublicSlider Hpstrip;//add a reference to a blood bar slider8      Public intHP;9     voidStart () {TenHpstrip.value = Hpstrip.maxvalue = HP;//Initializing blood strips One     } A      Public voidOnhit (intdamage) { -HP-=damage; -HPSTRIP.VALUE=HP;//perform operation on the blood bar when appropriate the     } -}

View Code

This is the end of the blood-bar making process, so if you like it, just top it.

　This article's Blood bar production process is the author of the original, the shortcomings of the welcome comments to testify, respect for the original, reproduced please indicate the source.

Unity Ugui Canvas using slider to make a character blood bar