Saturday, 22 September 2012

#1.5 Tutorial (LibGDX & MTX) Test3_Buttons

Buttons can be troublesome, so when I was developing my games, I asked myself "what is necessary ?". Then, I have created game-specific buttons which has rich features. (ButtonGame, ButtonToggle, ButtonLevel)

General features of all buttons:
  • Set down and up textures
  • Set lock condition and texture
  • Set text with any font
  • Set external texture for different purposes
  • Each button type also has special features

TEST SCREEN

I again used previous tutorials screen, I removed one of the bats, and centered the other bat, I created new method setUpButtons() to show the buttons and their abilities. I have also created a table to add all the buttons in it.




























MENU CREATOR

This is very simple buttons and table creator for faster and less code writing.



BUTTONGAME

First two buttons are the general game buttons. These can be used, skiils, shoot, grap or any other game specific purposes. First button was set to lock so it cannot detect hits the other button is active and has a text on it with a font I have chosen, text was set to desired position. Each time of click this buttons, sets a momentary animation (Coming on next tutorial) to bat, so each time you click the bat cycles. I also made a counter to decrease to number, when it is 0 it locks the button and makes it unusable.

  // #3.1 TEST
  // Button locked
  // ####################################################
  ButtonGame btnTest1 = MenuCreator.createCustomGameButton(Assets.btnBatCircle, Assets.btnBatCirclePressed);
  btnTest1.setTextureLocked(Assets.btnBatLocked, true);
  tableButtons.add(btnTest1).pad(5);
  
  // #3.2 TEST
  // General  Game Button (Button + Text)
  // ####################################################
  final ButtonGame btnTest2 = MenuCreator.createCustomGameButton(Assets.btnBatCircle, Assets.btnBatCirclePressed);
  btnTest2.setText(Assets.font2, "" + batCircleCounter, true);
  btnTest2.setTextPosXY(50, 35);
  btnTest2.addListener(new ActorGestureListener() {
   @Override
   public void touchUp(InputEvent event, float x, float y, int pointer, int button) {
    super.touchUp(event, x, y, pointer, button);
    
    // Set the momentary animation of abstractactor
    // It is like a blink eye animation then goes back to regular animation
    bat2.setAnimationMomentary(Assets.animBatCircleRight, true, null, true, false);
    
    // Decrease counter
    if(batCircleCounter > 1){
     btnTest2.setTextChange("" + --batCircleCounter);
    } else{
     btnTest2.setTextureLocked(Assets.btnBatLocked, true);
    }
   }});
  tableButtons.add(btnTest2).pad(5);




BUTTONTOGGLE

Third button is a type of button toggle (This is not fully finished, but it works). As the name sounds, its duty is toggling. So if you press this button it bat will constantly cycle, if you press again bat will fly normal.

 // #3.3 TEST
  // Toggle Button
  // ####################################################
  final ButtonToggle btnTest3 = MenuCreator.createCustomToggleButton(Assets.btnBatCirclePressed, Assets.btnBatCircle, false);
  btnTest3.addListener(new ActorGestureListener() {
   @Override
   public void touchUp(InputEvent event, float x, float y, int pointer, int button) {
    super.touchUp(event, x, y, pointer, button);
    
    // Toggle the button, and change animation of abstract actor
    btnTest3.setToggleSwitch();
    if(btnTest3.isToggleActive()){
     bat2.setAnimation(Assets.animBatCircleRight, true, true);

    } else{
     bat2.setAnimation(Assets.animBatFlyRight, true, true);
    }

   }});
  tableButtons.add(btnTest3).pad(5);



BUTTONLEVEL

The forth button is the type of level button. This is probably the most game specific button I have created :). Pretty easy to use and implement. You can set level number or text, also you can set achivement objects (I named as star) on it. For example, you can set 2 starts, it means on that level 2 stars achieved.

For achiements, you should set holders and stars textures (or other things). For example, In levels 5 stars is the maximum achievement, then user achieved 3 stars. Button will show 5 star holders but it will set 3 stars. Still with me ? :))). Its best to see in action in the code.

  1. I created the button
  2. I set the level star holder ( dull star holders  - Assets.imgStarHolder) and star ( yellow shiny -Assets.imgStar) textures, the maximum number of stars can be achived (3), the number of stars that earned (1). The number of stars earned normally comes from database of the game in actual games.
  3. Then the MTX auto centers all the stars, but you can set the ratio (size of it) 
  4. You can also move the stars upper or lower with  setLevelStarPosYStart()
  5. Then I set the level number with a font.

FOR TEST PURPOSES, I made button to increase the stars numbers on each click and it also resets the bat cycle button and activates again just for fun.

  // #3.4 TEST
  // Level Button
  // ####################################################
  final ButtonLevel btnTest4 = MenuCreator.createCustomLevelButton(Assets.btnLevel, Assets.btnLevelPressed);
  btnTest4.setLevelStars(Assets.imgStarHolder, Assets.imgStar, 3, 1);
  btnTest4.setLevelStarSizeRatio(3);
  btnTest4.setLevelStarPosYStart(2);
  
  btnTest4.setLevelNumber(1, Assets.font2);
  btnTest4.addListener(new ActorGestureListener() {
   @Override
   public void touchUp(InputEvent event, float x, float y, int pointer, int button) {
    super.touchUp(event, x, y, pointer, button);
    
    // Reset circle counter, update button 2
    batCircleCounter = 9;
    btnTest2.setTextChange("" + batCircleCounter);
    btnTest2.setLockActive(false);
    
    // if full reset (JUST FOR TEST)
    if(btnTest4.getNumberOfEarnedStars() == btnTest4.getNumberOfTotalStars()){
     btnTest4.setNumberOfEarnedStars(0);
    }
    
    // Increase the earned stars
    btnTest4.setNumberOfEarnedStars(btnTest4.getNumberOfEarnedStars() + 1);
   }});
  tableButtons.add(btnTest4).pad(5);




BUTTON WITH A EXTERNAL TEXTURE

The last and the long button is a button game. Why would you need a external texture, you wouldn't, but sometimes it may be handy to use. For example, like in my example.

I created the button, I gave text "Top apps", but it was do dull and boring, so I put a external texture on it with burning app icons, and it became sexy.

  // #3.5 TEST
  // General Game Button (Button + Text + ExternalImage)
  // ####################################################
  final ButtonGame btnTest5 = MenuCreator.createCustomGameButton(Assets.btnAllMenu, Assets.btnAllMenuPressed);
  btnTest5.setText(Assets.font2, "Top Apps", true);
  btnTest5.setTextPosXY(20, 50);
  btnTest5.setTextureExternal(Assets.imgTopApps, true);
  btnTest5.setTextureExternalSize(120, 120);
  btnTest5.setTextureExternalPosXY(144, -16);
  btnTest5.addListener(new ActorGestureListener() {
   @Override
   public void touchUp(InputEvent event, float x, float y, int pointer, int button) {
    super.touchUp(event, x, y, pointer, button);
    
    // Set the momentary animation of abstractactor
    // It is like a blink eye animation then goes back to regular animation
   }});
  tableButtons.add(btnTest5).pad(5);

6 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Hey! I'm trying to do a little game and I used your tutorial for my menu. It works really good but I have two problems.
    First: I can't load a picture like you (800x480). It say to me that I have to have a power of two!!
    Secondly: With my button I don't have the text. I have to put a label inside the button.
    So maybe you have an answer!! ^^.
    Thanks in advance.

    ReplyDelete
    Replies
    1. hi Sylvain you can stop the power of two error by add that code inside your Create method

      Texture.setEnforcePotImages(false);

      Delete
  3. This comment has been removed by the author.

    ReplyDelete