Celadon Qici-h5 mini-game Lottery Machine 4 run script writing

Hello, little friends, let's go ahead and write the relevant program.

In the first few chapters we have basically done with the interface and so on, and now we are going to write the script to unify the whole process.

Look what we have now. An interface and his hierarchy.

Celadon Interface Binding Ui.js creation

The graph is as follows, let's adjust it, because the background should be a layer above, as a public background, let this background to control whether to display the highlight or dark

After the adjustment, let's divide the logic that we need to write, the top control of the entire program is Uiroot we create a script for him. Each of the following scripts controls an effect.

OK, let's write the program. You can see that our current directory structure is as follows, and what is in the script. To get a little bit less code, we create a JS script in the interface that comes with some of the UI association parameters we need to generate.

After creation, Qici Editor will automatically generate JS suffix for our JS file, as well as for our files to create ID files, that is, the Js.meta interface is through this meta file, so version management remember to add.

In order to see the convenience, there is a pull bar below the resource directory, you can adjust the scale, in order to see the full name, the general tune to the minimum list form.

The files are all built, add versioning. We can ignore the build folder, theoretically the Temp folder can also be ignored, but to avoid sometimes forget to save, or add temp is better, when we edit temp will temporarily save our work scene. The resource file generates two files, the bin, and the Bin.meta system helps us preprocess.

-----------------------------------------------------------------

Celadon script set UI Node Association

Create scripts to set which child elements the script needs to manage

Uiroot the script settings. Set its name to manage 5 node elements.

BG script settings, name management two uinode nodes

Fireworks node script, set name Management 5 Fireworks node. A better solution is to set the array length and content externally, rather than each setting, into a node array.

Award-winning node script, set name management two nodes, respectively, is the Fast drop bonus node, and the final display of the prize node

Finally, we have our tie rod node, which manages the subordinate ball node and the Stick node.

Write the cut back editor, in the non-running mode, the next load modified JS, turn around, wait a moment.

In the editor run mode to cut back to edit mode, but also wait a while, and so on the background automatically loaded changes, into the turn interface.

Celadon UI Element Binding script

Uiroot node, we take the drag-and-drop way, the Rootui.js file from the Project Resource window, under the Script folder, to the node. Click on the Uiroot node and in the properties you will see the script that is already bound.

We drag and drop the several node nodes that our script needs to manage to link to the Uiroot script, and the end result is as follows.

The second step is to bind the script corresponding to the child element,

We click on the background node, add the script at the bottom of the property, and select the corresponding script step-by-step.

Bind an element after a successful selection

Below are the levers, fireworks and prizes, and the sharing interface.

How to quickly debug Celadon in the editor

Now that you've started writing scripts, debugging must be very frequent. How to debug more quickly?

In the editor, without changing the UI, go into run mode. After modifying the code, point menu project, refresh scene,

A new JS script can be loaded immediately. The editor adds a time suffix to our new code. If you want to set a breakpoint, go to the new file.

Celadon script calls foreground resources, other subordinate scripts, effects

First add two operations to our background management script to show and disappear the Diablo background.

This is a good choice for the various callbacks and methods inside the function to invoke the element in the self directly.

In addition, the interface-bound node object operation in the script needs to be Self.gameobject acquired.

In the second step, we write the call script to the fireworks.

We lined up the fireworks in advance not to let it burn together, so in the function of the external designated by the number of fireworks, the designated fireworks randomly intercepted, added delay to discharge.

Fireworks are elements of the particle system, and there is an excuse for reset/start/delay. So the code is set up as follows.

For quick debugging, we add an OnClick method to this element. With the edit window running, click Refresh Scene to load the code we just wrote.

Click on the node where we loaded the code just now, firework. Activates the capture of the Click event in his properties.

Come, witness the moment of miracles.

Celadon nodes array element incoming binding

Before our fireworks binding is a corresponding, in fact, we in the internal or as an array processing, if the direct incoming is an array that is not more cool?

Let's move the operation. Yes, we wrote it.
Fireworks_0_node:qc. Serializer.node,

Converted into.

Fireworksnode:qc. serializer.nodes,//Fireworks Object Array

Then rebind it on the interface. Ah ~ the world is clean

Celadon tweenposition for rolling effect

We've already made the mask part of the front. Forgot to go back to the previous post (╯‵-′) ╯︵┻━┻

Laugh

Come on, let's sit down and talk.

Now the interface display is Jiangzi, in fact, it covers two images.

In our definition script, we first set the range of values, because our prize settings are related to the sprite graph, so we can directly switch the frame name to get the corresponding graph.

Let's do it now. The frame name is written down so that it can be retrieved from the array and the object.

When you wake up, load the drop script and note how you get the object script later in this article.

Called when the script instance is being loaded.
RewardUI.prototype.awake = function () {
var = this;

if (Self.fastimagenode) {
Self.fastposition = Self.fastImageNode.getScript ("QC. Tweenposition ");
Self.fastfiltergroup = Self.fastImageNode.getScript ("QC. Filtergroup ");
Self.fastblurx = Self.fastfiltergroup.filters[0];
Self.fastImageNode.visible = false;
};

if (Self.lastimagenode) {
Self.lastposition = Self.lastImageNode.getScript ("QC. Tweenposition ");
Self.fastImageNode.frame = Self.default;
Self.lastImageNode.visible = true;
};
};

We make the effect of the motion, the external incoming callback function, call the callback function when execution completes.

Outside the initial blur and velocity, we decay ourselves internally.

The interior is a recursive function that recursively follows an external number of times.

In the end, we wrap the two effects together externally.

For debugging convenience, we add a click event to call your own show. Quick Commissioning

It's time to witness the miracle.

The celadon implements the lever effect by Tweenposition/tweenscale

The drop effect has been done, the same operation, the node corresponding to the script loaded into memory.

It then operates on him and binds the callback function externally, perceiving that the action is complete.

Note here to add a control flag to avoid interruption during the action. It only works if flag is completed.

To witness the miracle again.

Celadon UI node invocation of child UI node script

Write the previous logic, to the end of the association is not a difficult thing, we have the UI associated with the node's script to get a bit

Binding the action effect in the load before and after the relationship, at the end of the content should not be displayed hidden.

The ability to accept external clicks on the stick is checked.

The fireworks were originally placed under the lottery prize, we adjusted the display order.

OK, now ...

Come and see the goods again. Gee, why do I say again.

Celadon Qici-h5 mini-game Lottery Machine 4 run script writing