Multitouch Table FH Ingolstadt

Software

Software:

What would be good hardware without just as good software?

For the realization of our programs we used MT4j Multitouch for Java - an open source Java framework, created for rapid development of visually rich applications. MT4j is designed to support different kinds of input devices with a special focus on multi-touch support. Since it would be boring just to use the examples provided like the cool ping pong application, we decided that each team member should program his own app. In the following sections, the applications will be briefly introduced by their developers. I start with the game, I developed and inform you about my approach to programming and describe my problems here. Here we go!

Hatgame

Since games are always good for demonstration purposes, I thought it would be fun to develop one by myself. I chose a simple shell game / hat game ("Hütchenspiel") . The goal of the game is quite simple. The player must guess under which hat is the ball. The program tells him then whether he was right or not. I choose this kind of program, because it shows the usage of simple animations and the right placing of your components in the canvas of your scene. These kind of programs are very good for learning purpose ;D have fun and don't expect to much.

Let's take a look at the interface first

(bild1 einfuegen)

To realize this game several classes are needed, the following picture gives a quick overview

(bild2 einfuegen)

Every application in MT4j is called a scene and all components like my HatGameComponent, which represents the playing field must be added to the canvas of this scene or be added to components which are then added to the canvas of the scene. I think the diagram explains itself.The HatGameComponent consists of three HatComponents and one BallComponent. Each of these components provide methods for animation purposes, e.g. the lift of the hat when the ball is hidden underneath. In MT4j animation is done by using listeners similiar to swing. There are several listeners to process different kinds of events, like tapping. Let's demonstrate the whole thing by using the lift animation example.

public void animateLift(AnimationDoneHandler callback, int delay) {       
       IAnimation lift;

       //1
       Vector3D trg = this.getPosition(TransformSpace.GLOBAL);  
       //2
       lift = this.tweenTranslateTo(trg.x,trg.y - 125, 0, 750, AniAnimation.QUAD_IN, delay);  

       //3
       lift.addAnimationListener(new LiftAnimationListener(callback, this));

       lift.start();
}

The first step in animation is to get the current position of your component, in our case the HatComponent, which is to be lifted (1). Afterward we use the method tweenTranslateTo to perform a tween translating. Inbetweening†or†tweening†is the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image(2). Finally we must add an Animation Listener. In our case, it looks like the following:

class LiftAnimationListener implements IAnimationListener{
        private HatComponent c;
        private AnimationDoneHandler callback;
        public LiftAnimationListener(AnimationDoneHandler callback, HatComponent c) {
           this.callback = callback;
           this.c = c;
        } 
 
        @Override
        public void processAnimationEvent(AnimationEvent ae) {
           if (ae.getId() == AnimationEvent.ANIMATION_ENDED){
               c.setSelected(true);
               locator.getController().showBall();
               
              
               animateLiftDown(callback, 1000);
               return;
               
           }
       } 
}

But that was until now only the half of the animation. With the code snippets above you only reach a lift up of your compont, in order to hide the ball under the hat you had to do another animation, that lift it down. The code for this problem can be found in my project. The animations was the only tricky thing when writting the program. The tutorials on the MT4j site ([1]) are pretty good, so it would be weak sense to present all contents in this place. I recommend that if you start with the MT4j framework really read the entire tutorial. We are now at the end. You can find my code in our download section. Thanks for reading, if you have further questions and need help with more difficult animations, don't hesitate to write me an email: HideForever@web.de.

In the following sections, the other members of our team will demonstrate their applications and show other aspects of using MT4j as framework.

das vom huebi

gabs noch was?