Puzzle program

Dzisiaj zrobimy sobie program do układania puzzli, ale aby to zrobić musimy mieć puzzle. Nie będziemy robić programu do dzielenia obrazka na puzzle, gdyż byłoby to bardzo skomplikowane. Dużo łatwiej i estetyczniej jest wyciąć sobie je samemu przy użyciu Inkscape i Gimpa. Aby to zrobić, należy oczywiście zainstalować oba programy i dodać do nich rozszerzenia:

Inkscape: https://github.com/Neon22/inkscape-jigsaw

Gimp: https://github.com/devolonter/gimp-cut-to-pieces

Nie będę się tutaj rozwijał w temacie, wszystko co i jak prezentuje na filmie poniżej:

Działanie programu który będziemy robić prezentuje na tym filmie:

Program który ja przygotowałem prezentuje poniżej:

 

Puzzelek 1.0

 

Kiedy potniemy już sobie puzzle, przyszedł czas na utworzenie Formy do naszego projektu:

Rodzaj elementu Nazwa elementu Ustawienia
Form Form1 Name: Form1
Text: Puzzle VisualMonsters.cba.pl
Size: 642; 475
WindowState: Maximized
BackColor: White
BackgroungImageLayout: CenterDubleBuffer: True
Panel Panel1  Name: Panel1
Anchor: Bottom, Right
Size: 187; 52
BorderStyle: FixedSingle
TrackBar TrackBar1  Name: TrackBar1
Dock: Fill
Maximum: 100
Value: 10

Należy teraz umieścić nasze puzzle w programie (jeśli nie chciało wam się robić puzzli, możecie pobrać je tutaj: iron-man, statek, South Park). Robimy to tak jak na gifie poniżej:

Program, nie będzie miał bardzo skomplikowanych ustawień, tak więc obracanie puzzli czy zmiana ich rozmiaru pozostawiam wam. Nie będziemy się też za bardzo skupiać nad komplikowaniem tego projektu. Tutorial ma za zadanie nauczyć użytkownika manipulować elementami graficznymi. Zaczynamy od dodania elementów puzzli z zasobów projektu i od deklaracji zmiennych:

Oczywiście efektem będzie wyświetlenie puzzli na naszej formie, zajmiemy się teraz etapem ogólnego przesuwania elementów. Będzie się ona składał z trzech zdarzeń:

  1. MouseMove

    – to zdarzenie monitoruje nam na bieżąco położenie kursora nad formą, jeśli natrafi na nasz obiekt (co ważne funkcja KursorJestNadObiektem zwróci true, a zwróci tylko wtedy gry pixel, nad którym znajduje się kursor, nie jest przezroczysty) wtedy pobiera jego index i zmienia kursor na łapkę:Oczywiście w chwili złapania obiektu, zdarzenie MouseMove odpowiada również za zmianę lokalizacji obiektu, ale metoda ta nie jest skomplikowana i polega na zmianie parametrów w liście LokalizacjaPuzzla.

  2. MouseDown

    – Ustawia Offset, który jest wykorzystywany w przesuwaniu elementu/ów. Dział ten podzieliłem na trzy części.

    1. Pierwszy to przesuwanie tylko jednego elementu odbywa się to za pomocą lewego przycisku myszy:
    2. Drugi to przesuwanie wskazanego elementu i elementów z nim graniczących:
    3. Trzeci etap to przesuwanie wszystkich stykających się ze sobą elementów:
  3. MouseUp

    – etap końcowy zmienia opcje TrzymanyIndex na false, dla trzymanych obiektów sprawdza, czy elementy nie zostały przesunięte poza układany obszar (dzięki niemu nie zgubimy naszych puzzli :P):

Wiemy jak to będzie działać, pełen kod wygląda tak:

 

Ostatnim etapem jest doprecyzowanie elementów. Często jest tak, że dopasowanie elementów do siebie za pomocą myszy, może nam sprawić dość duży kłopot. Spróbujcie ruszyć tak myszą, aby przesunąć ją o 1px w lewo bądź w prawo. Ciężkie zadanie, więc wprowadziłem taką oto metodę. Gdy element lub elementy są trzymane, ich index dodawany jest do listy „TrzymanyIndexPrecyzyjny”, który pozwoli lokalizacji tych elementów o 1px zgodnie z przyciśniętym klawiszem strzałki:

Kod do tego elementu jest bardzo prosty:

Pozostał ostatni element, kiedy układamy puzzle mamy na pudełku docelowy składany obrazek. Musimy wiedzieć, co układamy, tak samo będzie i w naszym przypadku. Opcja zablokowana w Form_Load i TrackBar będą nam kontrolować przezroczystość obrazka docelowego tak, aby podpowiedz, nie była oczywista i nie zasłaniała nam naszych puzzli:

Odblokuj w Form_Load:

Kod kontrolujący krycie tła:

Efekt prezentuje poniżej:

Zauważyć można, że gdy krycie jest równe 1, wtedy tło robi się całe czerwone, jest to zabieg celowy pomagający stwierdzić czy elementy puzzli są dobrze dopasowane (można go usunąć, jeśli uznacie, że jest niepotrzebny lub zmienić mu kolor z czerwonego na czarny, lub biały).

Jeśli chodzi o aplikacje, to jest gotowa do działania. Do pobrania:

Pełen projekt: Puzzle_VisualMonsters.cba.pl.zip

Sam kod źródłowy: Puzzle VisualMonsters.cba.pl.txt

 

Podpowiedzi:


Obracanie puzzli o określony kąt

Jeśli jesteście zainteresowani rozwojem tej aplikacji, na pewno wpadniecie na pomysł, aby obrócić puzzle o jakiś losowy kąt. Nie jest to takie proste, ponieważ będziemy musieli przerzucić się z „Rectangli” na listę punktów dokładniej czterech, które będą określały położenie obróconego elementu i dodać nową listę integer (Private KatNachylenia As New List(Of Integer)) którą, wypełnimy na początku albo wartością 0 lub losową z przedziału od 0 do 360. Jeśli chcecie sprawdzić, w jaki to działa sposób, zmieńcie metodę Form1_Paint:

Należy też dodać jakiś bodziec, który będzie zmieniał kąt nachylenia naszego obrazka, w moim wypadku jest to scroll na myszce:

Wygląda to bardzo dobrze:

Niestety trzeba bardzo się namęczyć, aby dopracować ten element, ponieważ należy zastąpić „Rectangle” tablicą punktów. Łatwiejszą metodą jest obrót tylko o 90 stopni, taką metodę możemy w całości zamontować w zdarzeniu MouseWheel:

Ja w swoim programie wykorzystałem właśnie tę metodę, ponieważ jest łatwa do zaimplementowania i nie wymaga dużo klikania.

Jeśli macie jakieś pomysły lub pytania, pytajcie a może coś dodamy do tutoriala

 

 

Permalink do tego artykułu: https://visualmonsters.cba.pl/puzzle-program/

Dodaj komentarz

Twój adres email nie będzie publikowany.