Celadon Qici-h5 mini Game Draw Machine 2 interface layout

Background image

First we need to create the root node of the UI under the current scenario, which determines the layout of the elements of our entire game, and adapts to the multi-resolution scaling layout problem, so all of our other elements are placed under the uiroot.

Considering that I want to be comfortable with my own tests under my PC, the layout of uiroot is fixed with the center aspect ratio, then the bottom manual Type is set to expand match width or height, so that the display area fills the display.

The resolution is set, so let's stick to the background map. The current background image is two, one is the normal background, used to display the playing interface. A background map is darker to show the effect of the fireworks after the lottery.

In Uiroot right-click, create two uiimage, celadon picture and uiimage and resource binding way, is to select this object, and then drag the elements in the resource interface to the Altas material bar, and unity3d very much like.

After configuration, adjust the coordinates and size, full screen display.

Game Lever

Our lottery machine has a lever, let's start with the layout, uiroot create a stick empty node.

Create two uiimage under an empty node to hold the ball and lever of the lever. The order in which it is displayed is more downward, and in fact it is well understood that the order of the drawing is the same.

Now let's go to the cloth, the ball in front of the lever. So it's underneath the lever.

Post-Award Fireworks

According to our idea, the tie-bar should ignite fireworks to celebrate after the prize is drawn.

This uses the particle effect, the default is not, you need to add particle effect in the plugin management.

Remember to refresh the scene after adding it, click Save and Refresh the page to refresh immediately.

At this point, you see an upward particle appear above the screen. We build an empty node, copy and place 5 places around us in the winning area.

Arranging position and affiliation.

Rolling Prizes

The scroll draw is actually a mask layer, which puts the action effect we want.

Create an empty node to use as a mask, so we'll resize it just to match the area where we have the prize and add a mask script.

Our scrolling is divided into two parts, one is a random blind roll, and the dynamic effect is fast to slow. One is to show the final prize.

So we created two picture elements underneath the mask layer we just created, one for fast and one for last.

This prize, we have just packed the sprite chart, in the Atlas material package, the compression of the winning words out, tied to our two images.

Sprite switch through the Frame property changes can be switched, so that in the programming time do not need to reload the picture, only need to switch the name.

Drag in and click Reset Size, eh? The ratio of resources is not satisfactory, we change the way to manually adjust, click the upper left corner of the interface, zoom, and then pull the node above the point to adjust the scale.

We can see that the effect of our mask layer is obvious, and the extra area is hidden.

The final effect. The edge is a bit ugly, we don't care, the last release open anti-aliasing, due to the editor's smooth consideration of the last release and then open. The effect is really nice when you turn on anti-aliasing.

The same method is configured for both pictures. (I'm not going to tell you to copy a couple of parameters.) This is all stupid, just get the object from the parameter set.

Sharing tips

The difficult already understood, the simple not yet? Create three uiimage located under share empty node, adjust coordinates manually.

Because of our game size fixed, scaling all rely on uiroot management, so do not be afraid of location problems, directly dragged to that can.

Celadon Qici-h5 mini Game Draw Machine 2 interface layout