Bbframework the way to get started "five" touch bindings

Body

Before we introduced how to create our own modules in the Bbframework project, we also added the sprite nodes to the scene, but when it comes to programming, we have to talk about events. Because we are doing mobile games, and now the mobile phone is generally a large screen of smart touch phone, so we play the most involved in the touch operation. Today we will briefly introduce the next bbframework touch, to help us realize the interactive operation of the game.

Then the last time, we placed two nodes above the layer, the code is as follows:

------------------------ Node Rendering ------------------------[[-- view rendering, handling view node loading, event binding and other related operations]]function M:o Nrender ()    m.super.onrender (self)    local nodeObj1      = d.img ("node.png"): P (480): to (self)      local NodeObj2= d.img ("node.png "):p:Scale (0.5

We open the simulator and see the following effects:

Two icons nodeObj1 and nodeObj2 overlap, and the larger one is nodeObj1. Then we want to say now click on the big picture, the large figure disappears, click the small picture, big again appear, this we how to achieve? Bbframework provides us with a ": Bindtouch ()" function to implement the touch binding of the node. Then rewrite the node's ": Ontouchbegan (x, y, touches)", ontouchmoved (x, y, touches) "and ontouchended (x, y, touches)" Three functions to handle the touch event. Ontouchbegan, ontouchmoved, and ontouchended are triggered when the node is clicked down, moved, and released, respectively. However, to trigger ontouchmoved and ontouchended to return "true" in the corresponding Ontouchbegan, do not return or return "false". Touch-ontouchmoved and ontouchended are not triggered. The first two parameters of these three functions X and y represent the horizontal ordinate of the current touch position (touch point). The last parameter, touches, is a table that holds the current touch information, and the first two members in the table are saved by Touch X and Y, and the third member is the current touch point index because the mouse is a single point on the computer, so that value equals "1".

------------------------Node Rendering------------------------[[--View rendering, handling view node loading, event binding, and more)] function M:onrender () M.super.onrender (self) local nodeObj1= D.img ("Node.png"):p (480, the): to (self) local nodeObj2= D.img ("Node.png"):p ( -, -): Scale (0.5): to (self) Nodeobj1:bindtouch () function Nodeobj1:ontouchbegan (x, y, touches) print ("ondeObj1 Ontouchbegan!!!")        return trueEnd Function nodeobj1:ontouchmoved (x, y, touches) print ("ondeObj1 ontouchmoved!!!") End Function nodeobj1:ontouchended (x, y, touches) print ("ondeObj1 ontouchended!!!") EndEnd

As above, we bind the big elf to touch, then refresh the emulator, click on the large sprite, and discover that the console prints the contents of the print () output of the corresponding function, which means that we have successfully bound the touch. We also bind NodeObj2 to the same touch.

------------------------Node Rendering------------------------[[--View rendering, handling view node loading, event binding, and more)] function M:onrender () M.super.onrender (self) local nodeObj1= D.img ("Node.png"):p (480, the): to (self) local nodeObj2= D.img ("Node.png"):p ( -, -): Scale (0.5): to (self) Nodeobj1:bindtouch () function Nodeobj1:ontouchbegan (x, y, touches) print ("ondeObj1 Ontouchbegan!!!")        return trueEnd Function nodeobj1:ontouchmoved (x, y, touches) print ("ondeObj1 ontouchmoved!!!") End Function nodeobj1:ontouchended (x, y, touches) print ("ondeObj1 ontouchended!!!") End Nodeobj2:bindtouch () function Nodeobj2:ontouchbegan (x, y, touches) print ("------------------nodeObj2 Ontouchbegan!!!")        return trueEnd Function nodeobj2:ontouchmoved (x, y, touches) print ("------------------nodeObj2 ontouchmoved!!!") End Function nodeobj2:ontouchended (x, y, touches) print ("------------------nodeObj2 ontouchended!!!") EndEnd

Refresh the emulator by clicking NodeObj1 and NodeObj2 respectively, you can see the following console printing:

But we found that when we clicked on the overlapping portions of nodeObj1 and NodeObj2, the simulator would only output nodeObj2 touch printing, which means we only triggered the NODEOBJ2 touch events, and NodeObj1 's touch events were swallowed by NODEOBJ2, Touch is not distributed to nodeObj1 at all. So how do we achieve the touch events of both sprites being triggered? The Bbframework framework provides some well-defined tags for us to use, as long as we return "sign_touch_began_no_swallows" within the Ontouchbegan function to achieve touch penetration and return "Sign_touch_ Began_swallows "Touch is swallowed by the current object, and other sprites cannot get touch response. So we modify NodeObj2 's Ontouchbegan code as follows:

    function Nodeobj2:ontouchbegan (x, y, touches)        print ("------------------nodeObj2 Ontouchbegan!!! " )        return  sign_touch_began_no_swallows     End

Then re-refresh the emulator and you'll find the touch penetrated.

　　

Modify the NodeObj2 's Ontouchbegan code as follows, and the touch begins to devour again.

    function Nodeobj2:ontouchbegan (x, y, touches)        print ("------------------nodeObj2 Ontouchbegan!!! " )        return  sign_touch_began_swallows     End

The ontouchmoved function of a node is only return true in function Ontouchbegan or sign_touch_began_no_swallows and Sign_touch_began_ Swallows and occurs when a move is triggered. At this time we will find that as long as we return in Ontouchbegan is not "false", then regardless of whether ontouchmoved is called, ontouchended will be called. This is because when we release the node, the touch-released event is definitely triggered. However, we sometimes appear that some elves are destroyed during the move, such as moving the Banana Peel Wizard to the trash to automatically remove the banana peel, this time touch is still held by the spirit of banana peel, when we release the Touch finger, the program will also call the ontouchended function, but found that the object does not exist , the ontouchended function to invoke is a null value. It is not called, and the console also outputs the error log. So this time we would like to move the banana peel to the bin position, and then delete the banana peel after the touch of the end, do not give me into the ontouchended, in fact, you can not enter, because there is no ha. This time we use another touch tag "sign_touch_moved_stop", we return this tag value in the ontouchmoved function, Touch will not enter the ontouchended.

    function nodeobj2:ontouchmoved (x, y, touches)        print ("------------------nodeObj2 Ontouchmoved!!! " )        self:p (x, y)        if              self:remove ()            return  sign_touch_moved_stop         end    End

Assuming that the screen is more than 700 horizontal position is the scope of the garbage bin, our nodeObj2 is the banana peel, so we modify the NodeObj2 ontouchmoved function, such as above, we refresh the simulator to the right to drag nodeObj2 to the horizontal axis greater than 700 position, We'll find out that nodeObj2 disappears, and then the console print ends up in ontouchmoved, even if we release the touch and we don't get into ontouchended.

Looking at the code above, we'll see that we've called the node's ": Remove ()" function to remove a node object, just like the one at the beginning of the above blog, we sometimes just want to hide a sprite, and then show it what to do, bbframework let us go through "show () and hide () two functions to implement the display and hide functions.

    function Nodeobj1:ontouchbegan (x, y, touches)        self:hide ()        returntrue      End    function nodeobj1:ontouchmoved (x, y, touches)    end    function nodeobj1:ontouchended (x, Y, touches )    End    Nodeobj2:bindtouch ()    function Nodeobj2:ontouchbegan (x, y, touches)        nodeobj1:show ()         return sign_touch_began_swallows     End    function nodeobj2:ontouchmoved (x, y, touches)    end    function nodeobj2:ontouchended (x, y, touches)            end

As above, we hide ourselves in the Ontouchbegan of NodeObj1 (that is, nodeObj1) and then show Ontouchbegan in the nodeObj1 of nodeObj2, so that we can see the example at the beginning of the blog.

After knowing how to bind the touch, let's see how the touch is distributed. First, as shown, let's say we have a mainlayer layer loaded in the scene, and a node named "Node" and an instance object of the Buttonlayer layer are placed above the layer. In node, there are two sub-nodes: Node1 and Node2,node1 have a child node called NODE11. Then Buttonlayer also placed the NodeA and NodeB two nodes. This makes up a tree as shown above.

When we click to Node11, Bbframework will start traversing the node tree from the root node, which is the instance object of Mainlayer. When the Mainlayer has a binding touch, the bbframework traverses all the child nodes below it. When it discovers that node has a binding touch, it iterates over node Node1, and so on. However, if node nodes are not bound to touch, there is no way to trigger a touch event, even if all of the child nodes and all descendant nodes are bound to touch. Because the touch is not distributed to the clicked node at all. Because the touch of the layer is handled separately, there is no layer that only manages the touch of the nodes under it, all when the touch is traversed to the Buttonlayer instance object, Touch controls the Buttonlayer and all of the descendant nodes under Buttonlayer to Buttonlayer to manage. When all descendant nodes of Mainlayer have a binding touch, all touch will start from Node11 as we click on the Node11 node. The sequence of nodes triggered by touch events is: Node11->mainlayer. If the Node2 and NODE11 locations overlap, and the node1 also overlaps the node11 position, and the NODE11 allows touch penetration, then the touch is passed to Node1 and Node2, and the order of the touch distribution is: node11->node1- >node2->node->mainlayer. This allows us to find that the touch of the layer on which the node resides, regardless of whether the touched node is allowed to pass through, is triggered because the touch event of the layer is distributed independently and differs from the node.

It is also noteworthy that the "Sign_touch_began_swallows" and "Sign_touch_began_no_swallows" and "sign_touch_moved_stop" we have described earlier These three tags are also only useful for nodes, and for layer, we generally return "true" or "false" only in the Ontouchbegan of the layers. So how does the layer achieve penetration and non-penetration? We typically add "Params.swallowstouches = False" before the superclass call to the layer's constructor, so that multiple layers within the same scene will have touch penetration, Otherwise, the Bbframework framework default touch will only be passed to the highest level of the layer that is bound to touch, and the lower layers are not able to receive touch even if they are bound to touch.

------------------------ Construction Method ------------------------[[-- construct method, define view instance initialization logic # # Parameters:-   Table ** params    * *-Object                  instance]]function m:ctor (params params. swallowstouchesfalse--[super class Call]                    params ) End

Note that our current layer is created by the function "Local M = Classlayertouch (" Layer name "), if it is through" classlayer ("Layer name") "or" Loadlayer (params) "in Uui.lua file. To create, we need to manually bind a touch event to the layer by calling the ": Bindtouch ()" Function of the layer, otherwise the node sprite above the layer will not be clickable.

We create a custom sprite node that typically creates a new file in the module's "Node" folder, which is basically the same as the layer, but instead calls Classlayer () and Classlayertouch () instead of calling "Classsprite ()" and " Classspritetouch () "These two functions. These two functions also receive a string type parameter as the class name of the sprite, but when creating the layer, such as "Mainlayer.lua", our class name is "Main", then the Bbframework framework will automatically add "layer" suffix, but the wizard differs from it , suppose we want to create a class named "Dog", we generally save the file as "Dog.lua", then the code inside the call also write the full class name "Local M = Classspritetouch (" Dog ").

and create a layer similar to the creation of our Elf class, and then we want to create this class inside the layer, then we just call the require () function to introduce the class, such as my Dog.lua file in the "Scripts/app/test/node" folder, So I can create a genie by writing the following code in the layer:

------------------------ Node Rendering ------------------------[[-- view rendering, handling view node loading, event binding and other related operations]]function M:o Nrender ()    m.super.onrender (self)    local Dog     = require ("app.test.node.Dog"  )    local dog     = dog.  New"node.png"

We first introduce the file through the Require () function, similar to the C # using or C + + include. The ". New ()" function is then invoked by the resulting class object, noting that the new () function here is through "." To invoke. It takes a table to act as a parameter, and finally this parameter is passed to the parameter on the other side of the dog class's constructor.

--[[!--related operation methods and logical implementation. ]]------------------------class----------------------Local M= Classspritetouch ("Dog")------------------------Public Parameters------------------------[constant]-- ..--[Action variables]-- ..------------------------Construction Method------------------------[[--construct method, define view instance initialization logic # # Parameters:-Table * *params**parameter Set # # # Return:-Objectobject Instance]] function M:ctor (params)    --[Super Class Call] M.super.ctor (self,params)     --gets the path of the mapped file passed in Self.imagefile=params. ImagePath End------------------------Node Rendering------------------------[[--View rendering, handling view node loading, event binding, and more)] function M:onrender () M.super.onrender (self)--Show Map Self:display (self.imagefile) End------------------------Knot-point destruction------------------------[[--View destructor, handle view node offload, event unbind, and more)] function M:ondestructor ()--[Super Class Call] M.super.ondestructor (self) End------------------------Touch Control----------------------function M:ontouchbegan (x, y, touches)returnsign_touch_began_swallows endfunction m:ontouchmoved (x, y, touches)--bodyendfunction m:ontouchended (x, y, touches)--Body EndreturnM

As shown above, this is the content of our Dog.lua file. Iget the value of the "ImagePath" parameter passed by the previous new () function in the constructor using the code "Self.imagefile = Params.imagepath". The map is then displayed in the renderer (onRender) function through the node's ":d isplay ()" function. The display () function accepts a string type parameter, which is the path to the picture resource file to be displayed. Similarly, since our dog class is a sprite node, its touch supports our touch tags, so I return "sign_touch_began_swallows" in the Ontouchbegan function of dogtodevour touch.

In the evening also wrote 2 hours, today is the end, if the touch is not very familiar with the comrades can go to SVN babybus-lua inside to find the framework 1.3 version of the touch video tutorial, it is AC recording, said should be more accurate.

And then the next time we say the next Bbframework action and animation How to achieve, then I will simply write two examples, explain the following action ": at ()" and the Node ": Runaction ()" The two functions, and then say how to stop the specified action and stop all actions, Finally enumerated the "Uaction.lua" inside the commonly used action, action even after the ha.

Footnote

Baby Bus-Happy childhood!

Bbframework the way to get started "five" touch bindings