Tag: phaser

Hey what’s up!

We’re continuing working on the bet placing functionality. Looking at our four-step process, we’re now on step two, setting up the bet chip buttons:

• Setup the hand buttons
• Setup the bet chip buttons
• Setup the bet button
• Setup the clear button

We recently finished the hand buttons. You can view part 1 and part 2 of this function.

The bet chip buttons work like this: When a bet chip is pressed, it applies its bet value to all the selected hands.

For example, say we:

1. Select hand #2
2. Press the 10 bet chip. This will add 10 credits onto hand #2
3. Select hand #1 (both hands #1 and #2 are now selected)
4. Press the 50 bet chip. This will add 50 credits onto hand #1, and hand #2. The total credits of hand #2 is now 10 + 50 = 60.

Building the bet chip buttons and functionality put into four parts, explained below.

First, let’s add the chip buttons to the canvas.

1. Right-click on the canvas, then select Add…, then Button.
2. From the Add Sprite dialog, select the image you want to use as the main button sprite, then press OK.
3. This will add a button to your canvas. You can drag it to position it where you want.
   In the button’s properties, set the field property to true . This will create a reference to the button in the code that the canvas compiler generates, allowing you to reference it as well (which we’ll do later).
4. Set a name for the bet chip button. I decided to use the name that matches the color of the bet chip.
5. Set the callback to this._onBetChipButtonPressed, and set the callbackContext to this.
6. Set the four “Frame” properties to the appropriate sprite images, so that the button appears responsive when the it is moused over, pressed, and released.
7. Follow these steps for the other bet chip buttons.

Second, once you have all the bet chip buttons made, we’ll turn them into a single prefab. You can select all the chip buttons, convert them to a group, then create a group prefab from the group. When creating my prefab, I named it bet_chips_prefab. The editor then created bet_chips_prefab.canvas, and the bet_chips_prefab.js source file. My bet chips prefab canvas looks like this:

Once you have the prefab added to your main canvas, set a varName for the prefab (I used bet_chips), and set the field property to true. In the main canvas, the canvas compiler will create a reference to this prefab as this.fBet_chips (which we’ll use later).

Third, we need to add some custom code to the bet_chips_prefab JS class file. We want to be able to fire a notification each time a chip button is pressed. A Phaser signal will be added as a property of this class to be referenced from other functions. The following code is added under the -- user code here -- comment:

bet_chips_prefab.prototype.init = function(buttonClickCallback, context) {
  this.buttonClickSignal = new Phaser.Signal();
  this.buttonClickSignal.add(buttonClickCallback, context);
};

This code is meant to be called once from the outside – from the code that sets up the UI. Supply the callback function that is called each time the signal fires, and the context in which that callback is used.

bet_chips_prefab.prototype._onBetChipButtonPressed = function(button) {
  this.buttonClickSignal.dispatch(button.name);
};

This function is the callback function we assigned to each button as their callback property in the editor. Each time a bet chip button is pressed, this function is called. It then dispatches the signal, which in turn, fires the buttonClickCallback function that was passed into the init function.

We need to identify which button was pressed. So, the buttonClickCallback function accepts one parameter of type string, which is the name of the button. This is the same as the name property used when creating each button.

This finishes the setup of the bet chip buttons. The fourth and final step is initializing the bet_chips_prefab and handling what happens when a bet chip button is pressed.

When setting up your main canvas, you can initialize the bet chips prefab class. In the user code (under the -- user code here -- comment), add this:

this.fBet_chips.init(this.onBetChipPressed, this);

This is the init function we created earlier on the bet_chips_prefab class earlier. The onBetChipPressed function, which we’ll create next, will be called by the bet_chips_prefab signal each time a bet chip button is pressed.

function onBetChipPressed(s_betKey) {
  var selectedPlayerIds = this.handButtons.getSelectedHands();
  for (var s_playerId in selectedPlayerIds) {
    this.addToPlayerBet(s_playerId, s_betKey);
  }
}

The s_betKey is the name of the bet chip button that was pressed. This is the parameter we pass onto the buttonClickSignal of the bet_chips_prefab._onBetChipButtonPressed when the signal is dispatched.

There is a new function on the handButtons object called getSelectedHands. From this previous article, we defined a HandButtons class that manages the three hand buttons for selecting which player hands that we want to apply bets to.

The getSelectedHands function will return an array of string IDs of all the player hand buttons that have been selected. Let’s add the getSelectedHands to the HandButtons class, which looks like this:

HandButtons.prototype.getSelectedHands = function() {
  var ids = [ ];
  
  for (var s_id in this._handButtonsById) {
    var button = this._handButtonsById[s_id];
    if (button.getIsOn()) {
      ids.push(s_id);
    }
  }
  
  return(ids);
};

Back to the onBetChipPressed function, we now know which player hands have been selected at the time the bet chip button was pressed. We can now add the bet value of the selected bet chip to these selected hands with this function:

GamePlay.prototype.addToPlayerBet = function(s_playerId, s_betKey) {
  var i_betValue = BetChipValues[s_betKey];
  this.playerData.addBet(s_playerId, i_betValue);
  this.updateTotalBet();
};

There is a BetChipValues object which we’ll define as a key/values pairs, where we’ll map the bet chip ID (which we’ll define as the name of the bet chip) to its bet value:

BetChipValues = {
  green: 10,
  purple: 50,
  red: 250,
  blue: 1000
};

The PlayerData class

There is also this.playerData.addBet method. This function adds the value of the bet to each selected hand. The playerData is an object that we’ll create from a PlayerData prototype:

PlayerData = function() {
  //key: string (player id)
  //data: PlayerHandData
  this._hands = this._initPlayerHands(); 
};

PlayerData.prototype._initPlayerHand = function (playerHands, s_handId) {
  playerHands[s_handId] = new PlayerHandData(s_handId);
};

PlayerData.prototype._initPlayerHands = function () {
  var playerHands = {};
  
  this._initPlayerHand(playerHands, PlayerHandIds.LOWER_RIGHT);
  this._initPlayerHand(playerHands, PlayerHandIds.LOWER_MIDDLE);
  this._initPlayerHand(playerHands, PlayerHandIds.LOWER_LEFT);
  this._initPlayerHand(playerHands, PlayerHandIds.UPPER_RIGHT);
  this._initPlayerHand(playerHands, PlayerHandIds.UPPER_MIDDLE);
  this._initPlayerHand(playerHands, PlayerHandIds.UPPER_LEFT);
  
  return(playerHands);
};

Inside the user code of the game play canvas (in this project, we’re using  GamePlay, you can add playerData as a property of that prefab class like this:
this._playerData = new PlayerData();

We are using values from the PlayerHandIds object we set up earlier, as well as the PlayerHandData, which stores data about each individual hand.

With the this.playerData.addBet(s_playerId, i_betValue); function, we want to first retrieve the PlayerHandData that matches the player ID, then add the specified bet amount to its betValue property.

You can eventually go on to update the UI with bet chips. This is what the updateTotalBet() function is reserved for. Your bet interface can include elements, such as:

• the player’s credits
• the player’s total bet value
• the bet amount for each hand

I’ll leave that as an exercise to you, but if there is enough demand for it, I’ll post an article on it.

The final result here does include the updated UI. In the next update, we’ll set up the bet and clear buttons.

Thanks for reading, and stay tuned!

– C. out.

In the last article, we discussed the first part of step one of allowing the player to place bets. We broke the process into four steps, which I’ll reiterate here:

• Setup the hand buttons (we are finishing up this one in this article)
• Setup the bet chip buttons
• Setup the bet button
• Setup the clear button

We left off with being able to toggle the hand button 1 on and off. So that it does this:

Next, we’ll create toggle buttons to represent hand buttons 2 and 3.

For hand button 2, first in the Project Explorer of Phaser Editor, copy and paste the file hand_button_1_prefab.canvas, renaming it to hand_button_2_prefab.canvas. Then copy and paste hand_button_1_prefab.js, renaming it to hand_button_2_prefab.js.

Next, open the hand_button_2_prefab.canvas file in the editor. Click on the Configuration tab at the bottom. Under the Source section, look for a className property. Change it’s value to hand_button_2_prefab, then Save the file.

What this does is allow the proper class name (which is hand_button_2_prefab) in the corresponding hand_button_2_prefab.js file to be to be written when the canvas compiler automatically generates the code.

Next, click the Generate Code icon in the top toolbar of the editor. It looks like a gear. When you are changing configurations and update the canvas file, it may not automatically update the corresponding JavaScript file. Clicking this button forces it to do so.

Remember, however, our user code is not touched by the canvas compiler, so we’ll need to update part manually. If you look inside hand_button_2_prefab.js, it has updated generated code to use hand_button_2_prefab, but hand_button_1_prefab in our _onButtonPressed user code. So, you’ll want to update all occurrences of hand_button_1_prefab with hand_button_2_prefab in your user code. Then save the JavaScript file.

hand_button_2_prefab.prototype._onButtonPressed = function() {
  if (this.clickCallback !== null) {
    this.clickCallback.dispatch(this);
  }
};

For hand button 3, follow the same steps for hand button 2 above, except you’d use the class name, hand_button_2_prefab.

Once you have all three hand button toggle button prefabs set up, you can add them to your game’s main canvas. Here are two quick ways to add a prefab to your canvas.

The first is:

1. Right-click on the canvas
2. Mouse over Prefab from the context menu
3. Choose Add… from the secondary menu
4. Select one of the hand button prefabs from the list, and click OK.

Alternatively, you can use a very similar method:

1. Right-click on the canvas
2. Mouse over Add… from the context menu
3. Choose Prefab from the secondary menu
4. Select one of the hand button prefabs from the list, and click OK.

Once you’ve done that, the prefab should appear on your canvas. You can then drag it to position it wherever you like.

Managing the Hand Buttons

Now that we have all the hand buttons created, we need a way to manage them.

As mentioned in the last article, we place a bet by selecting one or more hands, then pressing a bet chip button to place bets on those hands. But what happens if none of the hand buttons are selected when you press one of the bet chip buttons?

Well, we could provide some kind of “error” feedback, or simply not place the bet. But this might create a slight frustration for your end users. In my opinion, it would be better to prevent all three buttons from being turned off. So this implies two things:

1. One of the buttons must always be on by default (it can be any button you want, but for our purpose, let’s have hand button 2 on by default; or
   
2. If only one hand button is on, disable that button, so that it cannot be turned off. If another button is then turned on, that button can then be re-enabled.

Yes, this is little more work on our part, but it creates a smoother user experience, in my opinion, of course.

Having a “manager” class that works with all the hand buttons would be very helpful here, so let’s create that class:

HandButtons = function(gameCanvas) {
  //this is the game canvas that you pass in when you construct your `HandButtons` object
  this.gameCanvas = gameCanvas;
  
  //here's another key-value object that references all three hand buttons by their id
  //key: string (button id)
  //data: HandButton
  this._handButtonsById = { };
  
  this._init();
};

There is an _init function that sets up all three hand buttons, and it looks like this:

HandButtons.prototype._init = function() {
  //setup the three hand buttons
  this._initHandButton(Thunderjack.PlayerHandIds.LOWER_LEFT, this.gameCanvas.fHand_button_1);
  this._initHandButton(Thunderjack.PlayerHandIds.LOWER_MIDDLE, this.gameCanvas.fHand_button_2, true);
  this._initHandButton(Thunderjack.PlayerHandIds.LOWER_RIGHT, this.gameCanvas.fHand_button_3);
  
  //enable/disable buttons as necessary
  this._updateButtons();
};

Each hand button is setup in an _initHandButton function, as in:

HandButtons.prototype._initHandButton = function(s_playerHandId, handButtonPrefab, b_isOn) {
  var handButton = new HandButton(s_playerHandId, handButtonPrefab);
  handButton.setIsOn(b_isOn === true);
  handButton.callbackSignal.add(this._onHandButtonPressed, this);
  
  this._handButtonsById[s_playerHandId] = handButton; 
};

We’re creating a HandButton object from the class we created here. The toggle button will will be turned on if b_isOn is true.

The click callback, which is a Phaser Signal, is assigned the method, this._onHandButtonPressed, which we’ll look at later in this article. Finally, the button is added to the collection of buttons, indexed by the player hand ID.

There’s another function being called in the _init function, and that’s _updateButtons:

HandButtons.prototype._updateButtons = function() {
  var button = this._getLoneOnButton();
  if (button !== null) {
    button.setEnabled(false);
  } else {
    this._enableAllButtons();
  }
};

Earlier in this article, we discussed disabling a button if it’s the only one on. After the buttons are first set up, and every time the state of the buttons changes, we want to call _updateButtons. In this function, there is  a_getLoneOnButton function. I won’t go into details on it, but returns a button if that button is the only one selected. Otherwise, it function returns null.

Finally, from this setup of the buttons, there is the click callback function, _onHandButtonPressed:

HandButtons.prototype._onHandButtonPressed = function(s_id) {
  this._updateButtons();
};

You’ll see that _onHandButtonPressed accepts a single parameter, a string ID. This is the button ID, the same as the property that is being dispatched in the HandButton.prototype._onButtonCallback function we defined in the earlier article. Each time a toggle button is pressed (either turned on or off), we want to update all the buttons. If only one button is left on, that button will be disabled. This prevents the player from turning off all the buttons, which would create a problem when we set up the bet chip buttons in a later article.

That completes adding the functionality of the hand buttons. We can now select which hand (or hands) on which we want to place bets. Also, we made sure that at least one of these hand buttons is on at all times.

In the next article, we’ll set up the bet chip buttons, so we can place bets on our selected hands. Thanks, and talk to you soon.

– C. out.