Puzzle - Control Docking

  • Hallo liebe Community,

    Ich habe mir überlegt, das ich gerne mal ein Puzzle - Spiel basteln würde, allerdings fehlt mir eine Idee,
    wie ich das aneinanderdocken der verschiedenen Teile realisieren kann.

    Hat jemand etwas ähnliches schonmal programmiert oder hätte einen Ansatz für mich?

    Gibt es einen Style o.Ä, den ich übersehen habe?

    Ich würde es gerne ähnlich dem Koda GUI realisieren, also quasi Links eine Leiste mit den ganzen Teilen und rechts ein Feld, auf die man die verschiedenen Teile ziehen kann, und sollte das andere Teil richtig sitzen, die beiden Teile zu einer Einheit verbinden.

    Würde mich über eine Idee freuen :)

  • An deiner Stelle würde ich das mit Hilfe von GDI+ lösen - der Rest ist dann reine Mathematik. Stell die Puzzelteile näherungsweise als Rechteck dar und wenn auf eines geklickt wird kann man es festhalten und herumziehen. Falls es sich einem anderen Rechteck/Puzzleteil zu nahe kommt kannst du es automatisch "andocken"... ;)

    LG
    Christoph :)

  • BinDannMalWeg:
    Nach TheLuBu’s Frage zu urteilen, scheint es mir so als hätte er keine Idee wie man das mathematisch lösen könnte.


    TheLuBu:
    Es ist eigentlich ganz einfach. Stellen wir uns einmal ein Raster von 5x5 Quadraten je 10x10px vor. In diesen Raster ziehen wir nun irgendein Element an die Position [27, 9]. Diese Koordinate befindet sich im dritten Quadrat der oberen Reihe. Technisch wollen wir nun das Element an der linken oberen Ecke des Quadrates ausrichten. Der Trick dabei ist einfach, die linkeren oberen Ecke des Quadrates im Raster zu ermitteln. Und dazu können wir folgendes Rechenverfahren anwenden:

    Als erstes müssen wir feststellen an welcher Position sich unser Element befindet. Im Beispiel ist dies die Koordinate [27, 9] (relativ zum Raster).

    Nun verarbeiten wir die x-Koordinate folgendermaßen:
    Die x-Koordinate wird durch die Breite des Rasters (10px) geteilt. | 27 / 10 = 2,7
    Nun wird die x-Koordinate einfach abgerundet. | 2,7 = 2
    Zum Schluss wird die x-Koordinate wieder mit der Breite des Rasters multipliziert. | 2 * 10 = 20
    Nun haben wir die x-Koordinate des Quadrates im Raster erhalten, in welches sich unser Element befindet.

    Das gleiche Verfahren können wir 1 zu 1 auf die y-Koordinate anwenden und erhalten somit die Koordinaten des Quadrates im Raster, an welches sich unser Element ausrichten soll. Es entsteht dieser andocken Effekt.

    Unsere Beispielkoordinate [27, 9] dockt sich also an die Koordinate [20, 0] an.

    Hier eine kleine AutoIt Funktion zu dem Rechenverfahren:

    Spoiler anzeigen
    [autoit]

    $x = 27
    $y = 9

    [/autoit] [autoit][/autoit] [autoit]

    $Pos = _dock($x, $y, 10, 10)

    [/autoit] [autoit][/autoit] [autoit]

    ConsoleWrite('x-Koordinate: ' & $Pos[0] & @CRLF & _
    'y-Koordinate: ' & $Pos[1] & @CRLF)

    [/autoit] [autoit][/autoit] [autoit][/autoit] [autoit][/autoit] [autoit]

    ; $x >> x-Koordinate des Elements
    ; $y >> y-Koordinate des Elements
    ; $w >> Breite des Rasters
    ; $h >> Höhe des Rasters

    [/autoit] [autoit][/autoit] [autoit]

    Func _dock($x, $y, $w, $h)
    Local $aPos[2]

    [/autoit] [autoit][/autoit] [autoit]

    $aPos[0] = Int($x / $w) * $w
    $aPos[1] = Int($y / $h) * $h

    [/autoit] [autoit][/autoit] [autoit]

    Return $aPos
    EndFunc

    [/autoit]

    Nun sollte es dir nicht mehr schwer fallen diesen Effekt mit Controls oder GDI+ umzusetzen. Leider habe ich keine Zeit dir ein Skript dazu zu schreiben der diesen Effekt direkt vor Augen führt...

    Kleiner Tipp: Wenn du das Element in Echtzeit andocken willst (also während man das Element mit der Maus über das Raster zieht), dann verwende unbedingt die Mauskoordinaten!

    Ich hoffe ich konnte helfen!
    LG. Make ;P