Swing JLabel drehen für Kartenspiel

[guitarflow]

Hallo liebe Community,

möchte gerne ein Mau-Mau programmieren, um neben dem Studium noch ein bisschen Java zu üben.
Dachte auch an eine eventuelle p2p-Architektur und andere Features ... bin aber jetz erstmal beim Entwurf meiner GUI auf ein Problem gestossen und hoffe ihr könnt mir helfen.

Ich dachte mir, dass jeder Spieler eine "Hand" hat, in der die Karten so aufgefächert werden, wie man sie beim normalen Spielen auch auf der Hand hält. Also z.B. in einem festen Winkel von 120°.

Nun möchte ich meine JLabels, die die Karten repräsentieren, dementsprechend um einen festen Punkt so drehen, dass sie insgesamt diesen 120°-Winkel erreichen.

Also bei 3 Karten : 1. Karte = 40°, 2.Karte = 80°, 3. Karte =120°
bei 4 Karten : 1.Karte = 30°, 2.Karte = 60° ....

Natürlich sollte die Karte dann auch klickbar sein, damit der Spieler auswählen kann, welche Karte er als nächstes spielen will.


Habe festgestellt, dass das mit dem Drehen gar nicht so einfach ist. Was ich bis jetz gesehen habe, müsste ich mit BufferedImages und AffineTransform arbeiten, allerdings glaub ich nicht, dass das dann noch klickbar wäre, oder??

Hat jemand ne Idee, wie man das angehen könnte?

Danke schon mal vorab,


guitarflow

 

[Marco13]

Ja, ist nicht so einfach ... aber auch nicht so ungewöhnlich, dass nicht schonmal jemand was dazu gemacht hätte 😉 Kannst dir mal JXTransformer: The power of a real Swing ! | Java.net ansehen...

 

[guitarflow]

Hallo Marco,

super, danke für den Hinweis! Bin bei meiner Googlerei schon mal drüber gestolpert aber ich dachte aus irgendeinem Grund, dass das nicht das ist, was ich brauch 😳

Jetz hab ich ein bisschen mit rumgespielt, Kartendrehen funktioniert einwandfrei!
Allerdings werden die Karten ganz schön pixelig, aber ich denk da kann ich noch mit "renderingHints" arbeiten.

Das Problem ist, dass das gedrehte JLabel trotzdem sozusagen Platz für ihr komplett umgebenes Rechteck nach dem Drehen belegt und ich so keine gedrehten Karten unmittelbar nebeneinander setzen kann.
Anbei mal ein Screenie. Denk dass man sofort versteht, was ich meine!
Habe versucht, für die oberste Karte einen gelben Hintergrund reinzumachen, um zu sehen, ob das was da überlappt zum Label-Hintergrund gehört. Wie man am Screenshot sieht, is da nix Gelbes zu sehen.
Als Container dient übrigens ein JLayeredPane....

Hoffe ihr könnt mir nochmal helfen.

mfg,

guitarflow

 

[Marco13]

Screenshot seh' ich jetzt nicht...

 

[guitarflow]

uups, vergessen ....

aber jetz😳

mfg,

guitarflow

 

[Marco13]

Hm. Schwer zu sagen, es könnte natürlich auch sein, dass der JXTransformer da was falsch macht (KÖNNTE - das müßte man genauer prüfen). Spontan geraten: Du könntest mal schauen, ob ein
label.setOpaque(false);
auf allen Labels was hilft. Ansonsten noch der obligatirische Hinweis, dass es IMHO ein Krampf ist, für sowas JLabels zu verwenden. Man kann die Bilder auch einfach mit g.drawImage malen... Das Aklicken kann man dann zwar nicht mehr mit einem MouseListener machen, aber sooo viel schwieriger wäre das auch nicht...

 

[guitarflow]

setOpaque hat nix geholfen.

Naja, ich dachte mir dass es mit den JLabels am einfachsten is, die einzelnen Karten zu handhaben.

Wie würdest dus denn mit Graphics machen??
Kann ich mir jetz gar nicht vorstellen. Bzw. hab ich da ein kleines Verständnisproblem ....

Vielleicht kannst du mir mal ein Beispiel nennen?

Danke schonmal,

mfg,
guitarflow

 

[Marco13]

Joa, kommt halt drauf an... Vielleicht habe ich auch die Tendenz, sowas zu weit unten anzupacken.. 😳 Aber bevor man da mit JLayeredPane anfängt und eine externe Library einbindet, um so ein gedrehtes Bildchen zu malen... ich würde mir da halt eine Klasse erstellen, die das macht.

Auch auf die Gefahr hin, dass du das, was ich jetzt in ein paar Minuten schnell zusammengeschustert habe, 1:1 und unverstanden übernimmst, und ich mir dann Vorwürfe anhören darf, wenn damit irgendwas nicht geht, was du gerne machen würdest (aber bisher noch nicht erwähnt hast) hier mal ein Beispiel, wie man ein Bild machen könnte, das man gedreht und verschoben zeichnen und anklicken kann...

import javax.swing.*;
import java.awt.*;
import java.awt.geom.*;
import java.awt.image.*;
import java.awt.event.*;
import javax.imageio.*;
import java.io.*;

class ImagePaint extends JPanel implements MouseListener
{
    public static void main(String arg[])
    {
        SwingUtilities.invokeLater(new Runnable()
        {
            public void run()
            {
                JFrame f = new JFrame();
                f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

                ImagePaint imagePaint = new ImagePaint();
                f.getContentPane().add(imagePaint);

                f.setSize(800,600);
                f.setVisible(true);

            }
        });
    }

    private static class RotatedImage
    {
        private Point position = new Point(0,0);
        private BufferedImage image;
        private float angle = 0;

        private Point pickPoint = new Point(0,0);

        public RotatedImage(String fileName)
        {
            try
            {
                image = ImageIO.read(new File(fileName));
                System.out.println("image "+image);
            }
            catch (Exception e)
            {
                e.printStackTrace();
            }
        }
        public void setPosition(int x, int y)
        {
            this.position = new Point(x,y);
        }
        public void setAngle(float angle)
        {
            this.angle = angle;
        }

        private AffineTransform computeTransform()
        {
            AffineTransform at = new AffineTransform();
            int w = image.getWidth();
            int h = image.getHeight();
            at.translate(position.x, position.y);
            at.rotate(angle);
            at.translate(-w/2,-h/2);
            return at;
        }

        public boolean isHit(Point p)
        {
            AffineTransform at = computeTransform();
            AffineTransform ati = at;
            try
            {
                ati = at.createInverse();
            }
            catch (NoninvertibleTransformException e)
            {
                e.printStackTrace();
            }
            Point2D dst = ati.transform(new Point2D.Float(p.x, p.y), null);
            System.out.println("dst "+dst);
            pickPoint = new Point((int)dst.getX(),(int)dst.getY());
            return
                dst.getX() >= 0 && dst.getX() < image.getWidth() &&
                dst.getY() >= 0 && dst.getY() < image.getHeight();
        }

        public void paintOn(Graphics gr)
        {
            Graphics2D g = (Graphics2D)gr;
            AffineTransform oldAT = g.getTransform();
            g.transform(computeTransform());
            g.drawImage(image,0,0,null);
            g.setTransform(oldAT);

            g.setColor(Color.RED);
            g.fillOval(pickPoint.x-2, pickPoint.y-2,4,4);
        }
    }

    private RotatedImage rotatedImage;

    public ImagePaint()
    {
        addMouseListener(this);
        rotatedImage = new RotatedImage("SplineTest01.gif");

        rotatedImage.setPosition(350, 250);

        Thread t = new Thread(new Runnable()
        {
            public void run()
            {
                float a = 0;
                while (true)
                {
                    rotatedImage.setAngle(a);
                    a += 0.05f;
                    repaint();
                    try
                    {
                        Thread.sleep(50);
                    }
                    catch (Exception e)
                    {
                        e.printStackTrace();
                    }
                }

            }
        });
        t.start();
    }

    public void paintComponent(Graphics g)
    {
        super.paintComponent(g);
        rotatedImage.paintOn(g);
    }

    public void mouseClicked(MouseEvent e)
    {
        boolean hit = rotatedImage.isHit(e.getPoint());
        System.out.println("Image hit? "+hit);
        repaint();
    }

    public void mousePressed(MouseEvent e) {}
    public void mouseEntered(MouseEvent e) {}
    public void mouseExited(MouseEvent e) {}
    public void mouseReleased(MouseEvent e) {}
}

 

[guitarflow]

Boa, vielen herzlichen Dank für deinen Code!!! :toll:

Wie du schon geschrieben hast, is der jetz vielleicht für mich nicht so ganz leicht zu verstehen.

Hätt noch ein paar Fragen zum Code. Vielleicht kannst mir nochmal weiter helfen?
Also ich hab jetz mal der Einfachheit halber deine Animation rausgebaut.
Hab mich bis jetz auch noch nicht wirklich mit Threads beschäftigt. Deswegen lass ich das jetz erst mal aussen vor.

Hast ganz oben im Code mal die Zeilen :

 SwingUtilities.invokeLater(new Runnable(){
           public void run()
           {

Habs schon öfter gesehen, dass Eclipse oder NetBeans das per default so reinschreibt in die Main. Habs bei meinem eigenen Code eigentlich immer weggelassen. Was machen diese Zeilen denn??
Bzw. welchen Nachteil hats, wenn ichs nicht hinschreib??

Hab versucht, deine "isHit"-Funktion zu verstehen, allerdings will mir das nicht ganz einleuchten:

public boolean isHit(Point p){

        AffineTransform at = computeTransform();
        AffineTransform ati = at;

        try{
            ati = at.createInverse();

        }catch (NoninvertibleTransformException e){
            e.printStackTrace();
        }

        Point2D dst = ati.transform(new Point2D.Float(p.x, p.y), null);

        System.out.println("dst "+dst);
        pickPoint = new Point((int)dst.getX(),(int)dst.getY());

        return
               dst.getX() >= 0 && dst.getX() < image.getWidth() &&
               dst.getY() >= 0 && dst.getY() < image.getHeight();
    }

Is das at.createInverse() wie ein Spiegeln zu verstehen??
Und was ist der Unterschied zwischen nem Point und nem Point2D?
Hab diese Java Image API noch nicht so ganz durchschaut ....

Hoffe du kannst mir nochmal helfen. Hab auch schon alles an "Danke" verballert was geht 😀


mfg,

guitarflow

 

[Marco13]

 SwingUtilities.invokeLater(new Runnable(){
           public void run()
           {

Habs schon öfter gesehen, dass Eclipse oder NetBeans das per default so reinschreibt in die Main. Habs bei meinem eigenen Code eigentlich immer weggelassen. Was machen diese Zeilen denn??
Bzw. welchen Nachteil hats, wenn ichs nicht hinschreib??

ALLE Veränderungen an Swing-Components (und auch das Erstellen von Swing-Components) müssen vom Event-Dispatch-Thread gemacht werden. Mit den SwingUtilities legt man so eine Aufgabe in die Event-Warteschlange, die dann vom EDT abgearbeitet wird. Siehe auch Threads and Swing

Und was ist der Unterschied zwischen nem Point und nem Point2D?

Point hat zwei public ints x und y, die die Position des Punktes darstellen. Der ist praktisch geeignet um einen Punkt auf dem Bildschirm zu beschreiben. Point2D (bzw. Point2D.Float und Point2D.Double) sind für Punkte, bei denen die Koordinaten als float- oder double gepsiechert sind. Diese Punkte können einen "beliebigen" Punkt repräsentieren (also z.B. auch den Punkt (0.5, 1) der mit int's nicht darstellbar wäre).
Wenn man zufällig einen MouseEvent-Punkt hat, ist das ein "Point", den muss man, damit man vernünftig damit rechnen kann, in einen Point2D umwandeln. (Die AffinetTransform transformiert Punkte sinnvollerweise mit float- oder double-Koordinaten...)

Is das at.createInverse() wie ein Spiegeln zu verstehen??

Nein, das ist die... Inverse 😀 Wenn man eine AffineTransform hat, die z.B. eine Drehung um 10 Grad nach rechts und eine Verschiebung um 10 Pixel nach oben beschreibt, dann ist die Inverse dazu eben eine AffineTransform, die eine Verschiebung um 10 Pixel nach unten und eine Drehung um 10 Grad nach links beschreibt. Sozusagen "das Gegenteil". In diesem Fall wird das verwendet, um einen beliebigen Punkt "auf die Karte zurück zu rechnen". Wenn man eine Karte mit einer AffineTransform verändert, dann landet z.B. der obere linke Eckpunkt der Karte bei der Position (123, -45). Wenn man diesen Punkt mit der Inversen AffineTransform multipliziert, dann kommt da der Punkt (0,0) raus (eben gerade der obere, linke Punkt). In diesem Beispiel wird also "irgendein" Punkt (nämlich der, wo man hingeklickt hat) mit dieser Inversen transformiert. Wenn der Punkt, der dabei rauskommt, in dem Bereich (0,0)-(kartenBreite,kartenHöhe) liegt, dann hat man mit dem Klick die (gedrehte und verschobene) Karte getroffen. Die Mathematik dahinter ist ad hoc erstmal nicht so zugänglich, d.h. man verliert sich vielleicht wenn man planlos bei Koordinatentransformation ? Wikipedia lossurft, aber an sich ist es gar nicht sooo kompliziert, wenn man die AffineTransforms erstmal ansatzweise verstanden hat.