Monday 4 February 2013

# Tutorial (Show Us The Good Series) - Jungle Game Menu


You have completed your awesome game (2D/3D or anything else) in LibGDX in your way. Now its time to polish it with interactive stuff like a charming game menu. Lets see how can we do that in only 1 day.




















FIRST THINGS FIRST

You should know about Mtx  which is built over LibGDX Scene2D (please complete the free tutorial series 1,2,3,4), because I will not talk about every detail or Mtx related-classes, I will explain the general idea.


ACTORS BECOMES BUTTONS

What I love about LibGDX Scene2D is the actors, they can be anything you can image. In my case I took my SmartModel (which extends AbstractActor) and make it button, "JungleGameButton" class is my button  model.


ALL INTERACTIVNESS IN SAME SCREEN

I have only one screen in this tutorial which is responsible for splash/loading, game menu and instructions. I did not create screens for each one of them.

This way, it is much more impressive, animations, effects, transitions, movements and the composition is much better.

The life-cycle is like:
  1. First show splash/loading screen and start background effects like green balloons at the same time
  2. Send menu elements in
  3. Swipe for instructions and send menu elements away, and get instructions
  4. Swipe for menu and send instructions away, and get menu












































SCREEN STRUCTURE

All elements (buttons, flowers, gamename, etc) are in the Screen class, so the screen is like little fields container/database and main manager.































Screen is the main manager, it is the king who controls other managers, so the real workers are


JungleMainMenuScreenButtons jungleMainMenuScreenButtons;
Set up menu buttons, send them in and away with animations and effects 

JungleMainMenuScreenEnvironment jungleMainMenuScreenEnvironment;
 Set up menu background and name (balloons, gamename, flower), and send them in and away

JungleMainMenuScreenInstructions jungleMainMenuScreenInstructions;

Set up instructions and send them in and away 







MANAGEMENT

Screen will manage all the things it will check if splash is completed or not (I made a fake splash, normally you may use assetmanager of LibGDX)























When the splash is completed, screen will command to "jungleMainMenuScreenButtons" to send main menu buttons, social buttons and swipe buttons. Screen will also command to "jungleMainMenuScreenEnvironment" to send the game name in

Screen is also manages the swipes if you swipe UP and DOWN, Screen will command to "jungleMainMenuScreenButtons" and "jungleMainMenuScreenEnvironment" for sending all the necessary stuff in or away. Please check the "setUpSwipeListener()" method for more detail on this.

So, I beileve you understood the fundementals of interactive menus/screen. One manager manages all other small manager, command them to do things necesssary.





OUR LITTLE MANAGERS (REAL WORKERS)

JungleMainMenuScreenButtons jungleMainMenuScreenButtons;
Set up menu buttons, send them in and away with animations and effects 

JungleMainMenuScreenEnvironment jungleMainMenuScreenEnvironment;
 Set up menu background and name (balloons, gamename, flower), and send them in and away

JungleMainMenuScreenInstructions jungleMainMenuScreenInstructions;

Set up instructions and send them in and away



All methods in this classes have parameter for the screen, so they can easily reach the element in screen class such as buttons, flowers and etc...

Method structure
  • setUp.....(Screen screen) - set up something, construct it, set position and hide if necessary while waiting splash, set origin, add to stage and etc... This also where to specifiy buttons to do something by using ActorGestureListeners (touchUp/touchDown)
  • sendIn.....(Screen screen) - send something in to screen, it may also scale things or fade in things by using animations or screen, so this is the place does all that cool transitions, animations
  • sendAway.....(Screen screen) - exact opposite of sendIn.....()


I wont explain what are in the methods, it is very easy and upto your imagination/composition. By using Effect Creator, I made some cool animations, transitions, in some places I used Actions directly instead of EffectCreator.

With this tutorial and the source code, now you can easily do many things for your game. You can use the code anyway you want and also graphics I made for this tutorial are free to use.


13 comments:

  1. Awesome stuff, thank you for making MTX and all those tutorials! :)

    btw, I can't seem to get this to run on a Mac unless I change startTime from float to long in AbstractScreen.java
    Maybe you should switch to something like http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/utils/TimeUtils.html

    cheers, keep up the good work!

    ReplyDelete
    Replies
    1. Thanks for the nice comments.

      I never tried on Mac, I generally target the Android Devices. But I will do update on timer, if Macs have problem with it. Thanks for noticing the error.

      And, I love open source stuff, I always use them, then I said, "Why not to do some open source projects that people may use".

      Regards

      Delete
  2. I love yours tutorials; You rock!!

    ReplyDelete
  3. Thanks for all of this tutorials!!! all are very very very good!!! as fast as I finish all my graphics I will make all of your tutorials.

    ReplyDelete
  4. I do not see multiple screens with screen transitions, or tween animations in your tutorials. I hope you get a chance to cover some of the missing items. Good work so far, keep it going. Looking forward to the Box-2D stuff.

    Thanks bro!

    ReplyDelete
    Replies
    1. Thanks for the comment.

      I dont do screen transitions, I directly move to second screen at the moment. Also Scene2D actions quite enough at the moment for many things, this is why I do not touch tween stuff yet.

      Delete
    2. I am undecided on the utilization of Tweens over Actions. After reading about the ease of coding single line Tweens, it is attractive from a productivity standpoint. My understanding is that Tweens are basically Actions with all of the benefits of built-in easily sequenced, timeline based, interpolated object attributes without all the code that actions require. For example, I learned that skewing a sprite's vertices is easily accomplished with a Tween creating a fantastic effect with very little coding and zero allocation worries from the Tween engine.

      Regarding screen transitions, I like the idea of incorporating effect based screen transitions for a more polished presentation to the user when developing multiscreen solutions. Your slide-in menus, tables, buttons, etc. offers a very slick interface. I really like your button work and effect creator. Basically, it would be cool to apply the effect creator to an entire screen. For example, fade out the outgoing screen and fade in the entering screen.

      Many thanks to you, I enjoy your use of the LibGDX library and focus on speed to market by optimizing your development efforts.

      Delete
    3. Tween engine is undoubtedly better than simple actions. Of course there could be much more improvements to MTX (I did alot for Mtx v2.1, coming soon), but this is a one man show :D, and I work on MTX on my free time only.

      People ask me about Box2D and Tween Engine on email many times. Simple answer is that I do not have enough time, becuse I need to learn Box2D and Tweens deeply before integrating into LibGDX Scene2D and all this take time.

      Regards

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

    ReplyDelete
  6. Hii moribito,

    I am deciding to make a simple tile based game using MTX framework. But I am unable to render my Tiled Map using so. I am confused with what renderer to use. Please suggest some idea for implementaion...

    ReplyDelete
  7. I'm trying to make the Play Button show the instruction scree but i have no success, Would you mind for helping me out?

    I Create new Action for change scene:

    Action changeSceneAction = new Action() {

    @Override
    public boolean act(float delta) {
    jungleMainMenuScreen.setMenuSceneUp();
    return true;
    }
    };
    EffectCreator.create_SC_SHK_BTN_ACT(jungleMainMenuScreen.btnPlay,
    1.3f, 1.3f, 5f, 0, 0.05f, null, false, changeSceneAction);

    Using the create_SC_SHK_BTN_ACT method to add the change scene Action to the end of action sequence from your method create_SC_SHK_BTN

    public static void create_SC_SHK_BTN_ACT(Actor actor, float scaleRatioX,
    float scaleRatioY, float shakeAngle, float originalAngle,
    float duration, final Stage stage, final boolean isRemoveActor, Action customAction) {
    if (actor != null) {
    actor.addAction(Actions.sequence(
    Actions.scaleTo(scaleRatioX, scaleRatioY, duration),
    Actions.rotateTo(shakeAngle, duration),
    Actions.rotateTo(-shakeAngle, duration),
    Actions.rotateTo(originalAngle, duration),
    Actions.scaleTo(1, 1, duration), new Action() {
    @Override
    public boolean act(float delta) {
    if (isRemoveActor) {
    removeActor(stage, actor);
    return false;
    } else {

    return true;
    }
    }
    },
    customAction ));

    }
    }

    Finally, the setMenuSceneUp to show the instruction (from your code in setUpSwipeListener() method)

    public void setMenuSceneUp() {
    if (isMenuActive & isSplashCompleted) {
    if (inputIntent.isTouchDragInterval()) {
    //
    // Reset all actor actions
    resetMenuElementsActions();
    //
    jungleMainMenuScreenEnvironment
    .sendAwayGameName(JungleMainMenuScreen.this);
    jungleMainMenuScreenButtons
    .sendAwaySocialButtons(JungleMainMenuScreen.this);
    jungleMainMenuScreenButtons
    .sendAwayMainMenuButtons(JungleMainMenuScreen.this);
    jungleMainMenuScreenButtons
    .sendInSwipeForMenu(JungleMainMenuScreen.this);
    jungleMainMenuScreenButtons
    .sendAwaySwipeForInstructions(JungleMainMenuScreen.this);
    jungleMainMenuScreenInstructions
    .sendInInstructions(JungleMainMenuScreen.this);
    //
    isMenuActive = false;
    }
    }
    }

    ReplyDelete
  8. Wonderful tutorials !! Can anyone help me on how to use the facebook & twitter... I tried to find.. but could find no way on how to provide a link using these buttons. Any help would be appreciated...thanks

    ReplyDelete
  9. there is no code for download, i wanted to try the jungle menu but i dont find it anyware ,rapidshare link is not working and github doesn t contain the tutorials code.

    ReplyDelete