Use ugui to develop custom toggle slider controls

I. Preface

After writing unity4.6 new UI system, I usedUguiAndNguiI made a toggleslider for demonstration only. I think this small control can reflect the development process of the custom control. Because there is no Mac version on hand and no real machine test is available for the moment, the effect on the PC is as follows:

Ii. Production Process

The complete project is hosted on GitHub and is divided into two projects: ugui and ngui. Considering copyright issues, ngui is not included in the project. Students need to import ngui into the project on their own. Ngui requires unity 4.5 and ugui requires unity 4.6. Iii. Functions

• You can drag the slider from one side to the other to change the control value.
• When you stop the operation, if the slider is centered, it automatically slides to the nearest side.
• Click the slider or the entire control. The control value is changed and the slider automatically slides to the other side.
• When the control value is modified by another script, the slider automatically slides to the other side.
• When the slider moves, if the value changes, the slider slides back from the current position.

The following uses ugui as an example to briefly describe the production method. The ngui method is similar. For the differences between the two, see [comparison with ngui] below. Iv. Hierarchy

It is a hierarchical structure created with ugui. Where,

• Canvas is responsible for rendering the UI.
  • Padding is useless. It just draws a border.
    • Toggle SliderIs the parent object of the control.
      • BackgroundandmaskUseImagemaskThe widget serves as the symboloff mask and simultaneously renders the basemap.
        • SymboloffIt's a gray Twitter Bird, with coordinates under animation control.
      • Background_onUseImageThe component renders the blue highlighted basemap. color. Alpha is subject to animation control.
      • BackgroundmaskonlyUseImagemaskThe component is used as the symbolon mask and is not rendered.
        • SymbolonIt's a blue Twitter Bird, with coordinates under animation control. (Background_on is not used as a mask because the edge of the blue basemap is translucent .)
      • HandleIs a square slider, coordinateOnlyControlled by animation.
    • Current value is the following optional box for testing toggle slider.
• For more information about EventSystem, see the previous article.

5. Toggle slider go

The toggle slider component contained in the toggle slider object is the only script directly related to the control. The code can be viewed on GitHub, which is easy to compile. Vi. Animation

All effects are implemented using the animation component, and all animations are used to be lazy. After all, the effects can be achieved. Here we will only demonstrate them. The animation contains four curves to control the movement of two Twitter birds, the transparency of the blue background, and the left and right sides of the slider. Here are a few key points.

• AnimatedReverse playbackYou only need to set animationstate. Speed to-1.
• When you drag the slider, the animation is paused.Frame by frameSet the animation time and then sample the animation. Resume the animation when the drag and drop operation stops.
• When the transparency of an animation changes, the image component is not automatically updated. You need to add a colorwatcher component to trigger the setter of image. Color by yourself.
• The animation is set to clampforever because once cannot be retained in the animation state.

VII. Event

The event uses twoEvent triggerComponent. A toggle slider object is responsible for responding to onpointerup and calling toggleslider. Toggle () when a control is clicked (). The other is in the handle object (), which is responsible for responding to the drag event and calling toggleslider. ondrag () when dragging ().

Here I encountered an egg problem, the event trigger'sDropThe event is invalid here, and there is no separateDragendTherefore, you have to add the onpointerup event on the handle to listen on whether the drag ends. In this way, the handle onpointerup will intercept the onpointerup event of the Upper-layer control ...... I hope unity can provide similarBubbleIn this way, I can add a script on handle to respond only to the drag and drop operation. If the event is clicked, it will bubble to the upper-Layer Control for processing.

In the end, my practice is that the onpointerup event of handle is also responded by toggleslider. onpointerup (), and The onpointerup internally uses the dragging flag to determine whether to drag the end or click. VIII. Deficiency

• Event trigger does not have a bubble mechanism. If the child control does not process the event, it cannot be thrown to the parent Control for processing.
• Imagemask failed to select Alpha threshold.

9. Existing bugs

During this period, the test encountered several problems:

• Always warn "material ugui/stencel mask doesn't have stencel... sendwillrendercanvases ()". Sometimes the image cannot be displayed. It will only be normal after a Sprite change.
• Select drawimage for the two hierarchy level and adjacent imagemask. The above one will block the following one. You need to insert a go containing canvasrenderer in the two centers. Go can be deactivated.
• When I made the ngui version, I copied it from the ugui for modification. Half done, I found that hierarchy has an additional copy without sub-objects. When I select the control, the copy will be selected at the same time. So I restarted the unity and found that the unity had a deadlock and could not be closed. After the force was completed, the project was damaged. As soon as it was opened, crash was restored and scene was manually deleted. It is estimated that I have mixed ngui/ugui in the inheritance tree, or the ugui has not been removed from the clean list. I have already reported to the official website.

10. Comparison with ngui

As a comparison, I also used the ngui test version (3.6.4b) to do the same demo, which took a lot of time. Ugui event problems are also encountered in ngui, or even more serious, and there are other problems.

• Ngui padding settings are cumbersome., Ugui only needs to rect transform point down stretch, left/top/right/bottom all write 20.

  When adding padding, I tried to create a uiwidget, set anchors to unified, and set left/top/right/bottom to target's left/top/right/bottom in sequence, enter 20/-20/20/-20 as the value.

• Adding toggle to ngui is complicated.Ugui only needs to create one in hierarchy to complete.

  When creating the current value for debugging, The ngui toggle component cannot be found, and the ngui toggle component is not found until the name is entered. Later I thought that the toggle prefab can be used in examples. After dragging it into scene, I found that the ngui implementation method is more complicated than that of ugui, and it is difficult to create it manually. It seems that ngui databases must be prepared in the project.

• Ngui failed to set anchor.

  After the toggle prefab is instantiated into scene, the toggle cannot be automatically centered for a long time.If the toggle size is dynamic, the ngui cannot be automatically centered?Maybe I don't know much about ngui. In the end, I can only calculate the coordinate offset based on the toggle width.

• Ngui does not have Image Mask

  Therefore, the two Twitter logos cannot be added to this version. This does not blame ngui, because the free version of Unity does not provide the function to access stencel buffer, so the Third-Party UI plug-in cannot implement a better clipping mechanism.

• Ngui's uieventtrigger cannot obtain event parameters

  The uieventtrigger is similar to the eventtrigger of ugui, which can trigger remote methods. However, ngui cannot pass in dynamic event parameters. Although the current event can be obtained using uieventtrigger. Current, the uieventtrigger object does not actually define any parameters. To obtain parameters, you can only write one component with ondrag and append it to gameobject. Alternatively, you can use uieventlistener to dynamically bind events with code.

• Ngui's uieventlistener cannot respond to the stop drag event.

  To solve the previous problem, I used uieventlistener to obtain the drag parameter. However, when I want to respond to the stop drag event, I find that I still need to return the uieventtrigger. If you do not want to mix the two scripts, you can only write one script by yourself.

XI. Summary

Ugui functions and user experience are both good. I have seen the UI system closest to the unity style. There are minor issues with stability, but I can understand it as a test version and it has already exceeded my expectation (I thought it would be a bunch of bugs like the mecanim just launched in 4.0 ).

PerformanceI have implemented the same packedbenchmark scenario for both projects, each of which contains 30 toggleslider. To ensure the fairness of the ugui version, all imagemask is removed, and the actual drawcall on both sides is consistent. SlaveFrame RateThe ngui performance in the editor is about 20% better than that in ugui! It is estimated that ngui has improved the batching mechanism in recent versions, while ugui has not adoptedPrevious ArticleThe "better" batch algorithm is called, but the batching is handed over to the graphics card driver. If pro is available, use profiler to check the CPU/GPU usage on both sides.

This article is Jare @ Mengjia Network

This article Reprinted from https://github.com/jaredoc/unity-ugui/tree/master/toggle_demo

Use ugui to develop custom toggle slider controls