Taggame development

How to create a Game’s About

When creating a game, the About screen is probably the part of the game that is given the least effort. It does not give much benefit to the gamer and usually consists out of information such as credits, licenses and privacy information. However, it is still part of your game and should therefore be a nice part of your software with a pleasant user experience and a design fitting the rest of your product. With our Game Tumble Panda, wie again went with an iterative approach and tried three different types of About screens, which I want to show you and discuss the good and the bad sides of. But before, let’s take a look at what you need to think about before building your own about screen.

1. Content

The content of your About screen determines its design and placement. Hence, you should think about it a lot. Should it show only credits or also your privacy policy and EULA? How about license texts? And what about Links to social networks? Some apps just show a three lines of names of names while others show a rather long list, licenses or even settings. In our case, we wanted it all: Credits, our privacy policy, licenses, social media, a way to contact us, access to signing in and out of google play games services (which is a requirement) and even the possibility to enter promo codes. Also, we wanted to list all the software we used to create our game.

2. Placement

Depending on how much stuff you want to put in your about, you might want to chose its placement. Angry Birds for example uses a little info-button in the settings drop-up-menu in their starting screen, an approach that many seem to like. For us, we decided to make the about accessible via a button on the main menu, which is not hidden but smaller than all the other buttons (see this article to see the size of our “About”-menu-button).

3. Design

Once you know about your content and the navigation path to enter your about, it is time to select a design. For Tumble Panda, we tried three different types of designs, of which the first two are the most common ones.

 3.1 Scrollable Credits

This one is pretty obvious and suitable most of the time. In the beginning of the Star Wars movies, and in the end of most other movies. In popular games such as Angry Birds, it is used in combination with buttons that scroll up and down and when you finish reading the credits, you can even find a bonus in the form of a golden egg. This works pretty well for most basic stuff and if you want to do it quick and unspectacular, it is probably the way to go. Since we didn’t want to spend too much time on the about this also was our first approach which looked like this in an early version:

Scrollable credits

Our approach to scrollable credits

However, we found this didn’t quite fulfill what we wanted. It didn’t really suit the rest of the game and it would make using functionality like entering a promo code a hassle since one would have to wait for the right button to appear on the screen in first. And since promo codes are usually given to people you want to review your game, making this process as easy as possible is what one should be striving for. So we decided to try something different.

3.2 Buttons & Dialogs

Our next attempt was to create a buttons-and-dialogs version, which can also be seen in many games. Especially if you don’t want to have a complete screen for your about, a little popup dialog can do the job. For us, we need a bit more than one entry point. We came up with three main buttons which would each open a dialog which would then provide more details. In addition to this we had two social media buttons and, of course, an access to sign in and out of google play games. Our approach looked like this:

Dialog credit buttons

Each of the buttons leads to different dialogs

Six buttons (phew, that’s a lot!)! The “Credits”-button would lead to a dialog containing credits, licenses and so forth as a scrollable view. “Support” would bring you to a dialog which included buttons such as “Contact” and “Privacy”, and “Promo” was just responsible for showing a dialog for entering a promo code. Way too complicated!

3.3 Combination

Now that we had tried this two solutions, we decided we had to do both, an approach which I haven’t seen yet:

Our approach on combining a dialog and a scroll style about screen

Our approach on combining a dialog and a scroll style about screen

The screen was now divided in three parts. On the left are scrollable credits, in the center all important buttons. On the right are social media buttons and a mandatory google play games button, plus some empty space. “Contact” would fire an intent with some pre-defined text to our contact e-mail address. “Privacy” and “License” would open a web page and “Promo” would show a dialog.

We decided to stick to this concept since we had the impression that this would easily let the user realize what every column is about. The center buttons make it clear they are clickable and the credits are recognizable as such, since they are scrolling all the time. The signs for Facebook, Google+ and google play games are easily recognizable since they are all well known brands.

3.4 One more iteration

After we decided for the concept we wanted to take, we did one more iteration on the design side. The separators in the scrollable credits where replaced by margins and handdrawn highlighters for the different sections. We also changed the background scenery from the cherry blossom towards two Panda-kun and Panda-chan enjoying the full moon together.

The functionality stayed the same, the design changed

The functionality stayed the same, the design changed

In case you were wondering, the dialogs, which are plain Android dialog fragments, were designed to fit the game and look like this:

A Dialog for promo codes

A Dialog for promo codes

Conclusion

The take away from this article is: Every part of your game matters. Of course something as infrequently visited as the about should not need as much time as your main or level select menu. However, building an about screen in a totally loveless and/or unfitting way (e.g. using plain Android dialogs like Temple Run does when asking the users for rating) really disrupts the user’s experience of a game. Probably the scrollable credits or dialog version will suit your game. If not, it’s time to experiment.

I would be really glad to hear your feedback and thoughts. Please feel invited to share them in the comments.

Getting started with the Universal Tween Engine

This is a guest post by Alexander Fröhlich. Alexander is a freelance developer and is supporting ANDLABS at its libgdx-based development. 

If you are not familiar with libgdx yet, please check out the first part of this series, the Getting started with libgdx-guide.

 

1 Tweening?

“Tweening” in games is the process of creating intermediate states and thus frames between two or more given states.

Example (Sprite Translation):
The most simple example would be moving a sprite or image from one x1, y1 position to another x2, y2 position on the screen.

Yet, as you might already suspect, this “Universal Tween Engine” is capable of manipulating not only x, y coordinates for sprite objects…. no, this cross-platform-engine written entirely in java language lets you tween every property of any object given that it has its getter/setter methods attached.

In this tutorial I will show you how this comes in handy for game developers when building ingame hints or tutorials for their game.

The following sample code illustrates basic use and setup of the universal tween engine in a libgdx code project.

2 Ingame Tutorial Tweening

First of all, declare your tweenManager instance. The tweenManager lets you keep track and manage all your tweens (i.e. tweening, tween actions and so on)

public class MyGame implements ApplicationListener {

    // Only one manager is needed, like a 
    // libgdx Spritebatch (MyGame.java)

    private static TweenManager tweenManager;

}

Instantiate the manager inside create() of your libgdx lifecycle:

Register an accessor class, which is the key binding between the manager and the object to be tweened. Here this will be the TutorMessage class. (see below).
So after calling registerAccessor every single object of class TutorMessage we create can be tweened by the TweenManager.

@Override
public void create() {
    setTweenManager(new TweenManager());
    Tween.setCombinedAttributesLimit(4);// default is 3, yet
                                        // for rgba color setting          
                                        //we need to raise to 4! 
    Tween.registerAccessor(TutorMessage.class, new 
                             TutorMessageAccessor()); 

}

The TutorMessage’s are the internal game objects for this sample which hold the position, scale and color message attributes.

public class TutorMessage {

    private String message; // string objects can not be tweened
    private float x;
    private float y;
    private Color color;
    private float scale;

}

To tween these message properties and make them accessible by the manager we have to declare how getting and setting every single attribute works.

Getter/Setter
So we define 3 sections (POS_XY, SCALE, COLOR) that process the current float[] values, handled over by the manager during runtime when tweening is active.

Of course same applies for the setters.

public class TutorMessageAccessor implements TweenAccessor<TutorMessage> {

    public static final int POS_XY = 1;
    public static final int SCALE = 2
    public static final int COLOR = 3;

    @Override
    public int getValues(TutorMessage target, int tweenType, 
                           float[] returnValues) {
        switch (tweenType) {
            case POS_XY:
                returnValues[0] = target.getX();
                returnValues[1] = target.getY();
                return 2;

            case SCALE:
                returnValues[0] = target.getScale();
                return 1;

            case COLOR:
                returnValues[0] = target.getColor().r;
                returnValues[1] = target.getColor().g;
                returnValues[2] = target.getColor().b;
                returnValues[3] = target.getColor().a;
                return 4;

            default: 
                assert false; 
                return -1;
        }
    }

    @Override
    public void setValues(TutorMessage target, int tweenType, 
                            float[] newValues) {
        switch (tweenType) {
            case POS_XY: 
                target.setPosition(newValues[0], newValues[1]); 
                break;

            case SCALE: 
                target.setScale(newValues[0]); 
                break;

            case COLOR:
                Color c = target.getColor();
                c.set(newValues[0], newValues[1], newValues[2], 
                        newValues[3]);
                target.setColor(c);
                break;

            default: 
                assert false;
        }
    }
}

Having bind our TutorMessage class to the TweenManager we can now integrate it into the game.
Remember? We want to provide a kind of ingame tutorial system. So every time our user should see an animated on-screen help, we call the now defined method. The tweenHelpingHand method takes the parameter targetX, targetY that indicate the position where the helping hand (sprite) and its bound message (bitmapfont) should move to.

Then we say Tween
  .to (
      – TutorMessage currentTm ( the message to be moved )
      – int TutorMessageAccessor.POS_XY (constant to select which property should be tweened)
      – float 3f (total tweening duration)
  )
  .target (
    – targetX, targetY ( the final screen position of our tweened message )
  )
  .ease (
    – TweenEquations.easeOutCirc ( one possible interpolation pattern – i.e. moving pattern here)
  )
  .start (
    – MyGame.getTweenManager()  ( binds this tween to the manager )
  )

private void tweenHelpingHand(int targetX, int targetY) {

    // kill current tween - or pre-existing
    MyGame.getTweenManager().killTarget(currentTm);

    // move
    Tween.to(currentTm, TutorMessageAccessor.POS_XY, 3f)
         .target(targetX, targetY)
         .ease(TweenEquations.easeOutCirc)
         .start(MyGame.getTweenManager());

    // colorize
    Tween.to(currentTm, TutorMessageAccessor.COLOR, 3f)
         .target(1f, 1f, 1f, 1f)
         .ease(TweenEquations.easeOutCirc)
         .start(MyGame.getTweenManager());

}

Finally we have to call update inside the libgdx render() method to have the started Tween be updated constantly.

MyGame.getTweenManager().update(delta);

Here you go!
Enjoy this very powerful any easy to use tweening library.

Combining Scene2d animations and Tweening is also possible. You just have to write the ActorAccessor binding class and provide access (getter/setter) to its properties.
Like with Scene2d actions, the universal tween engine also allows sequencing of multiple tweens!

 

If you have any questions or suggestions, please leave a comment.

Getting started with libgdx

This is a guest post by Alexander Fröhlich. Alexander is a freelance developer and is supporting ANDLABS at its libgdx-based development. 

 

libgdx is an open source, Open GL based, cross platform game development framework. It’s supporting Web, Desktop, Android and iOS. This step by step introduction will teach you how to get started with the initial setup and your very first hello world in libgdx.


1 Prerequisites


2 Setup a new libgdx project

  • Choose “CREATE” in order to create a new project and enter the following setup screen
  • ConfigurationTab lets you set names for projekt/package/mainGameClass and the destination folder
  • Library Selection lets you download all required libraries (libgdx as the core libs are always required)
  • Overview gives you an outlook on which projects will be created
  • Generation checks for a valid setup (green colored) and when read you can open the generation screen (launch window coming up)
  • Launch displays the log output while creating the project. Here just click “Launch” to finalize your setup and create all chosen libgdx projects

3 Import libgdx projects into eclipse

Now we need to import these project into eclipse (other IDE provide similar options -> wiki)
NOTE: iOS projects have to be imported with XCode only (apple-mac) -> wiki

 

4 Project launch configurations

You now should see four projects… YourGameName, YourGameName-Android, YourGameName-Desktop and YourGameName-html within eclipse’s package explorer. The first one being the core source project holding all your game logic and the latter being launcher projects holding only one starter class.


DESKTOP
Go to your newly imported desktop project and launch its Main.java (run as java application)
This should bring up this demo screen. As you can see libgdx already provides you with a small hello world application.

 

ANDROID
Your eclipse android project should have been marked with a red x (eclipse way of telling you something is wrong with your setup).
Go to project properties (ALT-ENTER) and select your available Android-SDK-version..
NOTE: on versions prior to 4.0 you might have to remove the line

android:configChanges=”keyboard|keyboardHidden|orientation|screenSize”>

from your AndroidManifest.xml as this option being unsupported

After this, refresh both your core source project and your android project and rebuild both projects.
Now right-click on your Android project and choose “Run as Android Application”.

A dialogue will come up showing all connected devices and you may either want to push it on one of these or use the emulator (which will automatically start without any registered devices).
Make a choice and the game will be transfered on started on your device.

HTML5
A red cross over your project might mean that you have to install GWT.
After having GWT set up correctly, right-click on your HTML5-project and choose “Run as Web Application”.
Double click on the provided link ( e.g. http://127.0.0.1:8888/index.html?gwt.codesvr=127.0.0.1:9997)
A browser window will show up maybe requiring to install a GWT Developer Plugin
(Development Mode requires the Google Web Toolkit Developer Plugin).
If so, do restart the browser and you should see the libgdx logo screen.

Now you are up and ready to start building your own libgdx-based game. If you have any questions, please post them in the comments.
 

Update [2013-09-13], important links:

Starter Tutorial:
http://bitowl.de/day1/

Libgdx Wiki
https://code.google.com/p/libgdx-users/wiki/AAATopPaaage

Forum: (most problems have been solved already.. just learn to query it wisely like the web :-)
http://www.badlogicgames.com/forum/

Introduction to AndEngine – Getting the code

In this series I will tell you how to use one of my favorite Android 2D Game Engines, AndEngine. We will go step by step through the processes, starting at simply getting the code, continuing with drawing sprites, using cameras, physics and so on.

AndEngine was started by Nicolas Gramlich as part of his Bachelor’s thesis in the beginning of 2010. It is an engine that provides lots of powerful features while hiding more advanced things like Open GL calls from the developer. It provides lots of extensions like a  Robotium extension, a Box2D extension, which is mostly written and maintained by badlogicgames‘ Mario Zechner for his libGDX-project, a SVG extension or a TMX tiled maps extension.

It has been used in various featured games like Greedy Spiders, Noogra Nuts or Zynga’s Dream Zoo.

Let’s get started.

 

Getting the code

At the very beginning you’ll need to download the most recent version of AndEngine. To do that, open your console, go to the directory of your choice and do a git clone of the engine by typing

git clone git://github.com/nicolasgramlich/AndEngine.git

That’s all. You now have a powerful game engine, ready to be used on your computer or mobile device.

Now here’s a story: When AndEngine was written, the author had to make a choice: did he want to write lots of useful code or lots of useful documentation? He chose the more fun part and that’s why AndEngine provides little to no documentation, which is one of its most frequent points of criticism. However, the source is all open, you can read it, change it, do whatever you like with it. There are the AndEngine forums and Nicolas tries to write the code in a way that it’s documenting itself.

In order to provide the developers an idea of what AndEngine can do, the AndEngine samples were created. You can get them by also cloning the git repository:

git clone git://github.com/nicolasgramlich/AndEngineExamples.git

As you can now see there are a lot of dependencies to the different extensions. Go ahead and clone them:

git clone git://github.com/nicolasgramlich/AndEngineAugmentedRealityExtension.git
git clone git://github.com/nicolasgramlich/AndEngineLiveWallpaperExtension.git
git clone git://github.com/nicolasgramlich/AndEngineMODPlayerExtension.git
git clone https://github.com/nicolasgramlich/AndEngineMultiplayerExtension
git clone https://github.com/nicolasgramlich/AndEnginePhysicsBox2DExtension
git clone https://github.com/nicolasgramlich/AndEngineSVGTextureRegionExtension
git clone https://github.com/nicolasgramlich/AndEngineTexturePackerExtension
git clone https://github.com/nicolasgramlich/AndEngineTMXTiledMapExtension

Now you have a lot of code. Import them into your IDE of choice. Your workspace should now look something like this:

Let’s start a look at the examples. Connect your device or start an emulator with GPU emulation and run the AndEngineExamples on it.

AndEngine physics example

AndEngine physics example

What you will find is an overview over AndEngine’s many features.

There are two important branches of AndEngine: The GLES2-branch and the GLES2-AnchorCenter branch. Since the latter will become the main branch soon, it is recommended to pull its code too. To do so, just go into each of your AndEngine-projects using your shell and execute

git pull origin GLES2-AnchorCenter

You might want to switch to this branch now by executing

git checkout -b GLES2-AnchorCenter origin/GLES2-AnchorCenter

Now take your time to play, take a look into the code and look forward to the next part of this series in which we will go through the basic parts of the engine.

 

If you are having problems compiling any of AndEngine’s code or issues cloning the repositories, please post a comment.

© 2017 Droid-Blog

Theme by Anders NorenUp ↑