Match3 Update
Posted on June 30th, 2017 by foxcode
The Match3 Editor has been updated with an events section. Now you can write custom handlers for various events such as making a match to create more interesting functionality.

Updated Match3

With Wade 3.7 comes an updated Match3 Editor. The single page had a bit too much data on, so we have split it up into tabs. We’ve also added the brand new events tab, which allows you to execute code on events that the updated match3 behavior now throws.

There are many possible things you can add using events. The onMatch event receives an object which contains a list of blocks that are involved in the match. This data could be used to update scores, counters or bars for specific block types. The handler also allows you to block execution of the next step, which in this case would be removing the involved blocks. To do this, simply return true from the event handler.

Make a static block

Here we will use the new event handlers to make a block which the user cannot manually swap, creating a static block if you will. The block can still move if blocks below it get matched allowing it to fall, but otherwise will remain immobile.

There are multiple ways to do this, but to keep things simple, I'm going to make all green blocks static using the onSwap event.

First we get the scene objects for the two items from the data object. All match3 events receive a "data" object that contains useful information about the event. We need to get the behaviors for "Match3Item" for each item involved in the swap, that is what the first two lines in the image above do.

    var item1 = data.square1.getBehavior("Match3Item");
    var item2 = data.square2.getBehavior("Match3Item");

In this example, I've decided I want the green items to be static. The "isGreen" function will return true if the tile is green. Using indexOf on the type which includes the "match3_sample_assets" path is a bit questionable. It would be better to check if type equals "match3_sample_assets/green.png" but I didn't want to confuse the example by checking the full name.

    var isGreen = function(item)
        return item.type.indexOf("green") != -1;

Finally we call our "isGreen" function for both of our items. If either of them is green, the onSwap handler will return true. In Wade, when you return true inside an event handler, the event will stop propagating. For our match3 behavior, in most cases it is a signal that you want to stop something happening. Returning true from an "onSwap" event handler, will prevent the swap from happening, thus creating our static object.

    return isGreen(item1) || isGreen(item2);

I should note that we don't have to make all green tiles static. We could instead make only green tiles that are on odd x co-ordinates immobile, or maybe only tiles around the edges. This is just an example of what you can do with one of the event handlers.

More Events

We have seen how an event handler can be used to change the overall behavior, but there are more. The following events have been added and can all be found in the events tab in the match3 editor.

All of these events receive a data object describing the event.

Public Functions

In addition to the new events, there are three new public functions in the Match3 Behavior.

Post a Comment
Add Attachment
Submit Comment
Please Login to Post a Comment