Unity3d arpg game development-Gui backpack system implementation

Zookeeper

Yesterday, a role attack... Gui floating prompt bar. Now, it's time to continue with the GUI interface like the item bar that was cruelly interrupted the day before yesterday!

First, put the "attributes", "items", "skills", and "system settings" buttons.

I designed it like this:

In terms of art, it is indeed not an outstanding strength, and the resources are also included in the daikongui.

Create a new panel to hold the buttons. set anchor to right and bottom.

Name the panel "mybottombar", create four buttons in the panel, and put the corresponding icons. For better viewing, you can also set the display of havor status, and I will set the color of havor status. Their anchor values are set to right and verticle.

The names are named respectively bag, attibutewindow, skill, and system based on their respective roles.

Here, you can also enter the corresponding prompt statement in the corresponding tooltip:

Then, let's make the item column first.

Select an appropriate blank area on the screen, click Create a new panel, set the background to the image most like the window in fantasy Atlas, and then add a drag handle to the Panel, create a new label in drag handle with the content "item ".

Because this is a window, you can also add a resize handle for it so that it can be dragged to change the size.

Then add a scrollpanel in the middle as the main form for displaying items. Add a buttom at the bottom, select an appropriate image, and write the word "close:

Next, add a scrollbar to the right of the item window in the middle, and set anchor to left and verticle. In this scrollbar, create two sliced images, named track and thumb, and drag these two images to the scrollbar to complete the establishment of the scrollbar.

Finally, drag the scrollbar to the verticle scroll bar of the scrollpanel in the middle. Here, I also set some layout windows:

The window is generally created. The next step is to add functions and some animations for opening and closing the window.

Animation events are added to the main window. First, add vector2 In the Tween to change its size. You only need to click "Assign current value" in endvalue.

Then there is an animation that changes the position. Add vector3 in a tween, select "relativeposition", click "Assign current value" in endvalue, move the window to the upper right corner, and then click "Assign..." In startvalue .....", In this way, the animation is recorded. Good game programming network www.cgzhw.com contains a lot of good tutorials to learn.

Finally, because there is only one package button, you can add a "tween group" here for convenience ". Add two items to the group. Drag the two previously added tween animations into this group,

Then, it is about the package button. Click the previously prepared package button to add an eventbinding event. The data source is clicked for itself, and the target event is the play in the previous tweengroup script:

When running the game, click the package icon and you will see the item window flying out of the screen.

Then there is a flying animation. Just get a position change animation. Add a vector3 animation in the tween animation to the main window, name it flyout, record the current position in the screen in startvalue, drag the window far to the invisible position on the left, and record endvalue.

Then add an eventbinding for the close button in the window. The event is to click the button, and the target is to play the flyout animation in tweenvector3 in the window.

Run the game, click the package, the window will fly in from the top right, click the close button, the window will fly out from the left. The interface factors of this window are almost the same.

Then, it's time for script again!

The package GUI finally solved the data synchronization problem! But it's not a bit late now. The specific situation should be recorded tomorrow.