Gdi+ Tutorial [Part 5]

  • PROLOG

    Hallo und Herzlich Wilkommen zu diesem Tutorial.

    In diesem Tutorial geht es um die Gdi+ au3 einer Udf die bei AutoIt mitgeliefert ist.
    Ihr bindet sie mit

    [autoit]

    #include <GdiPlus.au3>

    [/autoit]


    ein.

    Diese Funktionen kann man z.B. benutzen um

    • Spiele zu erstellen
    • Guis einen eigenen Stil zu geben
    • Animationen zu erstellen
    • Bilder zu verändern
    • Bilder per Gdi Stift "zeichnen"

    all diese Funktionen werden in diesem Tutorial angesprochen und anhand von Beispielen erklärt.

    Hinweis: In diesem tutorial könnt ihr die Hilfe zu jedem Befehl der genannt ist mit einem klick auf den Befehl aufrufen.


    Kapitel 1:
    Die Grundlagen

    Um GdiPlus zu benutzen braucht ihr erst ein mal den Befehl

    [autoit]

    _GDIPlus_Startup()

    [/autoit]

    Diese Resourcen müsst danch wieder mit

    [autoit]

    _GDIPlus_Shutdown()

    [/autoit]


    wieder freigeben.

    Desweiteren kann es passieren das man die Ressourcen einzelner funktionen auch einzenln wieder freigeben muss.
    Wenn dem so ist wird das aber hier im Tutorial vermerkt.


    Kapitel 2:
    Die ersten Funktionen

    Die erste Funktion die wir uns aneignen wollen ist die Funktion die wohl am häufigsten gebraucht wird und die Funktion von GdiPlus wohl am besten verdeutlicht.

    [autoit]

    _GDIPlus_GraphicsDrawImage($hGraphics, $hImage, $iX, $iY)

    [/autoit]

    Als erstes zeichenen wir uns eine Gui

    [autoit]

    #include <GuiConstants.au3>

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

    $Gui = GUICreate("Beispiel", 179, 163, 100,100)
    GUISetState(@SW_SHOW)

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

    While 1
    Switch GUIGetMsg()
    Case $GUI_EVENT_CLOSE
    Exit
    EndSwitch
    WEnd

    [/autoit]


    Danach fügen wir die GdiPlus Elemente hinzu:

    [autoit]

    #include <GuiConstants.au3>
    #include <GdiPlus.au3>;das include

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

    OnAutoItExitRegister("_end") ; die Funktion _end am Ende des Scriptes ausführen

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

    $Gui = GUICreate("Beispiel", 179, 163, 100,100)
    GUISetState(@SW_SHOW)

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

    _GDIPlus_Startup() ;Gdi starten

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

    While 1
    Switch GUIGetMsg()
    Case $GUI_EVENT_CLOSE
    Exit
    EndSwitch
    WEnd

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

    Func _end();die Exit funktion
    _GDIPlus_Shutdown()
    EndFunc

    [/autoit]

    Jetzt wo wir unsere Grundvorrausetzungen haben wollen wir uns doch mal die Parameter von

    [autoit]

    _GDIPlus_GraphicsDrawImage($hGraphics, $hImage, $iX, $iY)

    [/autoit]


    angucken:


    [autoit]

    $hGraphics ;die Graphic die vorher erstellt wurde
    $hImage ; ein geladenes Bild
    $iX ; die X Koordinate
    $iY ; die Y Koordinate

    [/autoit]

    Für die ersten beiden Parameter brauchen wir noch eine zusätzliche Vorbereitung:

    [autoit]

    _GDIPlus_ImageLoadFromFile
    _GDIPlus_GraphicsCreateFromHWND

    [/autoit]

    Für ersteres brauchen wir erst mal ein Bild, welches ihr zusammen mit dem aktuellen Script

    Zitat von Hilfe

    Befehl englischer Name deutscher Name
    25 --------- LEFT ARROW key -------- Pfeiltaste nach links
    26 --------- UP ARROW key ----------- Pfeiltaste nach oben
    27 --------- RIGHT ARROW key ------ Pfeiltaste nach rechts
    28 --------- DOWN ARROW key ------ Pfeiltaste nach unten Die Figur bewegen wir indem wir sie immer an den Variablen $x und $y zeichnen lassen und die Variable bei einem Tastendruck ensprechen verändern.


    Dazu benutzen wir eine Select Schleife:

    [autoit]

    Select
    Case _IsPressed(25)
    $x -= 1
    Case _IsPressed(26)
    $y -= 1
    Case _IsPressed(27)
    $x += 1
    Case _IsPressed(28)
    $y += 1
    EndSelect

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

    _GDIPlus_GraphicsDrawImageRect($graphic,$figur,$x,$y,20,20 * $verhaelnis) ;die Figur wird an der neuen Position gezeichnet

    [/autoit]
    X und Y Achse


    Hinweis:
    zur x und y Achse hier eine verdeutlichung


    [Blockierte Grafik: http://img180.imageshack.us/img180/6720/85550311.png]

    Das heisst nach links auf dem Bildschirm nimmt die Zahl der X Achse zu und nach unten nimmt die Zahl der Y Achse zu.

    Der Code sieht dann so aus:

    [autoit]

    #include <GuiConstants.au3>
    #include <GdiPlus.au3>;das include
    #include <Misc.au3>

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

    OnAutoItExitRegister("_end") ; die Funktion _end am Ende des Scriptes ausführen

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

    $x = 0;x und y deklarieren
    $y = 0

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

    $Gui = GUICreate("Beispiel", 179, 163, 100, 100)
    GUISetState(@SW_SHOW)

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

    _GDIPlus_Startup() ;Gdi starten

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

    $figur = _GDIPlus_ImageLoadFromFile(@ScriptDir & "\figur.gif")
    $height = _GDIPlus_ImageGetHeight($figur)
    $width = _GDIPlus_ImageGetWidth($figur)
    $verhaelnis = $height / $width
    $graphic = _GDIPlus_GraphicsCreateFromHWND($Gui)

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

    While 1
    Switch GUIGetMsg()
    Case $GUI_EVENT_CLOSE
    Exit
    EndSwitch
    Select
    Case _IsPressed(25)
    $x -= 1
    Case _IsPressed(26)
    $y -= 1
    Case _IsPressed(27)
    $x += 1
    Case _IsPressed(28)
    $y += 1
    EndSelect

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

    _GDIPlus_GraphicsDrawImageRect($graphic, $figur, $x, $y, 20, 20 * $verhaelnis) ;die Figur wird an der neuen Position gezeichnet
    WEnd

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

    Func _end();die Exit funktion
    _GDIPlus_GraphicsDispose($graphic);Grafik Objekt freigeben
    _GDIPlus_ImageDispose($figur);Bild Objekt freigeben
    _GDIPlus_Shutdown();Ressourcen freigeben
    EndFunc ;==>_end

    [/autoit]

    Uns fallen zwei Sachen auf:

    • Die Figur wird zwar neu gezeichnet die alte Figur bleibt aber an der Stelle bestehen
    • Man kann mit der Figur ausserhalb des Bildes gehen.


    Zu1:
    Das liegt daran das wir das Bild nicht löschen.
    Wir zeichnen es nur neu.

    Also fügen wir ein Hintegrundbild hinzu.

    Dies könnt ihr euch zusammen mit dem Funktionierenden Code hierdownloaden.

    Leider flackert das Bild immer noch.
    Deswegen benötigen wie einen Buffer.

    Zum buffer haben ich und name22 ein Beispiel geschrieben.
    Ihr könnt euch einmal selbst testen indem versucht den Code ohne Kommentare zu verstehen.
    Nur die Befehle

    [autoit]

    $hBitmap = _GDIPlus_BitmapCreateFromGraphics(400, 400, $hGraphic)
    $hBuffer = _GDIPlus_ImageGetGraphicsContext($hBitmap)

    [/autoit]


    sind neu.

    Sie werden weiter unten erklärt.

    Code umkommentiert
    [autoit]

    #include < GUIConstants.au3 >
    #include <GDIPlus.au3>

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

    Opt("GUIOnEventMode", 1)

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

    $iX = 50
    $iY = 50
    $vX = 2
    $vY = 1

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

    $iSleep = 10
    $bBuffering = True

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

    $hWnd = GUICreate("Buffer", 400, 440)
    $cBuffering = GUICtrlCreateCheckbox("Buffering", 5, 355)
    $cLabel = GUICtrlCreateLabel("Wartezeit zwischen den Frames: " & $iSleep, 5, 390)
    $cFramerate = GUICtrlCreateSlider(5, 410, 200, 20)
    $cApply = GUICtrlCreateButton("OK", 220, 400)
    GUICtrlSetLimit($cFramerate, 100, 10)
    GUICtrlSetState($cBuffering, $GUI_CHECKED)
    GUISetState()

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

    _GDIPlus_Startup()
    $kreis = _GDIPlus_ImageLoadFromFile(@ScriptDir & "\kreis.png")
    $weiss = _GDIPlus_ImageLoadFromFile(@ScriptDir & "\weiss.jpg")
    $hGraphic = _GDIPlus_GraphicsCreateFromHWND($hWnd)
    $hBitmap = _GDIPlus_BitmapCreateFromGraphics(400, 400, $hGraphic)
    $hBuffer = _GDIPlus_ImageGetGraphicsContext($hBitmap)

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

    GUISetOnEvent($GUI_EVENT_CLOSE, "_Exit")
    OnAutoItExitRegister("_Exit")

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

    GUICtrlSetOnEvent($cBuffering, "_Buffering")
    GUICtrlSetOnEvent($cApply, "_ApplySettings")

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

    While Sleep($iSleep)
    $iX += $vX
    $iY += $vY
    If $iX >= 380 Or $iX <= 0 Then $vX *= -1
    If $iY >= 325 Or $iY <= 0 Then $vY *= -1

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

    Switch $bBuffering
    Case True
    _GDIPlus_GraphicsDrawImageRect($hBuffer, $weiss, 0, 0, 400, 350)
    _GDIPlus_GraphicsDrawImageRect($hBuffer, $kreis, $iX, $iY, 20, 20)
    _GDIPlus_GraphicsDrawImageRect($hGraphic, $hBitmap, 0, 0, 400, 400)
    Case False
    _GDIPlus_GraphicsDrawImageRect($hGraphic, $weiss, 0, 0, 400, 350)
    _GDIPlus_GraphicsDrawImageRect($hGraphic, $kreis, $iX, $iY, 20, 20)
    EndSwitch
    WEnd

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

    Func _Buffering()
    $bBuffering = Not $bBuffering
    EndFunc ;==>_Buffering

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

    Func _ApplySettings()
    $iSleep = GUICtrlRead($cFramerate)
    GUICtrlSetData($cLabel, "Wartezeit zwischen den Frames: " & $iSleep)
    EndFunc ;==>_ApplySettings

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

    Func _Exit()
    _GDIPlus_GraphicsDispose($hGraphic)
    _GDIPlus_GraphicsDispose($hBuffer)
    _GDIPlus_BitmapDispose($hBitmap)
    _GDIPlus_Shutdown()
    Exit
    EndFunc ;==>_Exit

    [/autoit]
    Code kommentiert
    [autoit]

    #include <GUIConstants.au3>
    #include <GDIPlus.au3>

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

    Opt("GUIOnEventMode", 1)

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

    $iX = 50
    $iY = 50
    $vX = 2
    $vY = 1

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

    $iSleep = 10
    $bBuffering = True

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

    $hWnd = GUICreate("Buffer", 400, 440)
    $cBuffering = GUICtrlCreateCheckbox("Buffering", 5, 355)
    $cLabel = GUICtrlCreateLabel("Wartezeit zwischen den Frames: " & $iSleep, 5, 390)
    $cFramerate = GUICtrlCreateSlider(5, 410, 200, 20)
    $cApply = GUICtrlCreateButton("OK", 220, 400)
    GUICtrlSetLimit($cFramerate, 100, 10)
    GUICtrlSetState($cBuffering, $GUI_CHECKED)
    GUISetState()

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

    _GDIPlus_Startup()
    $kreis = _GDIPlus_ImageLoadFromFile(@ScriptDir & "\kreis.png")
    $weiss = _GDIPlus_ImageLoadFromFile(@ScriptDir & "\weiss.jpg")
    $hGraphic = _GDIPlus_GraphicsCreateFromHWND($hWnd);noramle Grafik erstellen
    $hBitmap = _GDIPlus_BitmapCreateFromGraphics(400, 400, $hGraphic);Buffer erstellen Schritt 1...
    $hBuffer = _GDIPlus_ImageGetGraphicsContext($hBitmap);...und 2

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

    GUISetOnEvent($GUI_EVENT_CLOSE, "_Exit")
    OnAutoItExitRegister("_Exit")

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

    GUICtrlSetOnEvent($cBuffering, "_Buffering")
    GUICtrlSetOnEvent($cApply, "_ApplySettings")

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

    While Sleep($iSleep)
    $iX += $vX
    $iY += $vY
    If $iX >= 380 Or $iX <= 0 Then $vX *= -1
    If $iY >= 325 Or $iY <= 0 Then $vY *= -1

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

    Switch $bBuffering
    Case True
    _GDIPlus_GraphicsDrawImageRect($hBuffer, $weiss, 0, 0, 400, 350);mit Buffer
    _GDIPlus_GraphicsDrawImageRect($hBuffer, $kreis, $iX, $iY, 20, 20)
    _GDIPlus_GraphicsDrawImageRect($hGraphic, $hBitmap, 0, 0, 400, 400)
    Case False
    _GDIPlus_GraphicsDrawImageRect($hGraphic, $weiss, 0, 0, 400, 350);ohne Buffer
    _GDIPlus_GraphicsDrawImageRect($hGraphic, $kreis, $iX, $iY, 20, 20)
    EndSwitch
    WEnd

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

    Func _Buffering()
    $bBuffering = Not $bBuffering ;wenn der hacken angeklickt wurde kehrt dieser Befehl die Variable ins Gegenteil
    EndFunc ;==>_Buffering

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

    Func _ApplySettings()
    $iSleep = GUICtrlRead($cFramerate)
    GUICtrlSetData($cLabel, "Wartezeit zwischen den Frames: " & $iSleep)
    EndFunc ;==>_ApplySettings

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

    Func _Exit()
    _GDIPlus_GraphicsDispose($hGraphic)
    _GDIPlus_GraphicsDispose($hBuffer)
    _GDIPlus_BitmapDispose($hBitmap)
    _GDIPlus_Shutdown()
    Exit
    EndFunc ;==>_Exit

    [/autoit]

    Code Download (mit Bildern :!: )


    Zur Funktion des Buffers

    Wie man unschwer erraten kann erstellt die Funktion _GDIPlus_BitmapCreateFromGraphics ein Bitmap Objekt aus einem erstellten Grafik Objekt.
    Damit auf dieses erstellte Bitmap etwas gezeichnet werden kann brauchen wir den "Kontext" der Grafik.
    Dazu benutzen wir _GDIPlus_ImageGetGraphicsContext.
    Jetzt können wir auf das Bitmap wie auf unser Grafik Objekt zugreifen und Bilder/Formen etc. darauf zeichnen.
    Nur müssen wir das Bitmap selber dann noch an das Grafk Objekt weitergeben.
    Dies geschiet im Code hier:

    [autoit]

    _GDIPlus_GraphicsDrawImageRect($hGraphic, $hBitmap, 0, 0, 400, 400)

    [/autoit]


    Welchen Vorteil hat nun diese Befehlsreihe:

    [autoit]

    _GDIPlus_GraphicsDrawImageRect($hBuffer,$weiss, 0, 0, 400,350)
    _GDIPlus_GraphicsDrawImageRect($hBuffer,$kreis,$iX,$iY,20,20)
    _GDIPlus_GraphicsDrawImageRect($hGraphic, $hBitmap, 0, 0, 400, 400)

    [/autoit]

    Gegenüber der:

    [autoit]

    _GDIPlus_GraphicsDrawImageRect($hGraphic,$weiss, 0, 0, 400,350)
    _GDIPlus_GraphicsDrawImageRect($hGraphic,$kreis,$iX,$iY,20,20)

    [/autoit]

    Wir brauchen nicht ständig auf das Grafik Objekt und damit auf das Fenster zugreifen.
    Dadurch wird der Code schneller und das Bild flackert nicht.


    Nun können wir den Buffer auch auf unser kleines Beispiel anwenden:
    (Wenn du willst kannst du es einmal selbst versuchen bevor du den Code kopierst)

    Code
    [autoit]

    #include <GuiConstants.au3>
    #include <GdiPlus.au3>;das include
    #include <Misc.au3>

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

    OnAutoItExitRegister("_end") ; die Funktion _end am Ende des Scriptes ausführen

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

    $x = 0;x und y deklarieren
    $y = 0

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

    $Gui = GUICreate("Beispiel", 179, 163, 100, 100)
    GUISetState(@SW_SHOW)

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

    _GDIPlus_Startup() ;Gdi starten

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

    $figur = _GDIPlus_ImageLoadFromFile(@ScriptDir & "\figur.gif")
    $bk = _GDIPlus_ImageLoadFromFile(@ScriptDir & "\bk.jpg")
    $height = _GDIPlus_ImageGetHeight($figur)
    $width = _GDIPlus_ImageGetWidth($figur)
    $verhaelnis = $height / $width
    $graphic = _GDIPlus_GraphicsCreateFromHWND($Gui)
    $bitmap = _GDIPlus_BitmapCreateFromGraphics(179, 163, $graphic);----------------- geändert ----------------------
    $buffer = _GDIPlus_ImageGetGraphicsContext($bitmap);----------------- geändert ----------------------

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

    While 1
    Switch GUIGetMsg()
    Case $GUI_EVENT_CLOSE
    Exit
    EndSwitch
    Select
    Case _IsPressed(25)
    $x -= 3
    Case _IsPressed(26)
    $y -= 3
    Case _IsPressed(27)
    $x += 3
    Case _IsPressed(28)
    $y += 3
    EndSelect

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

    _GDIPlus_GraphicsDrawImageRect($buffer, $bk, 0, 0, 179, 163);----------------- geändert ----------------------
    _GDIPlus_GraphicsDrawImageRect($buffer, $figur, $x, $y, 20, 20 * $verhaelnis);----------------- geändert ----------------------
    _GDIPlus_GraphicsDrawImage($graphic, $bitmap, 0, 0);----------------- geändert ----------------------
    Sleep(30)

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

    WEnd

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

    Func _end();die Exit funktion
    _GDIPlus_GraphicsDispose($graphic);Grafik Objekt freigeben
    _GDIPlus_GraphicsDispose($buffer);----------------- geändert ----------------------
    _GDIPlus_BitmapDispose($bitmap);----------------- geändert ----------------------
    _GDIPlus_ImageDispose($figur);Bild Objekt 1 freigeben
    _GDIPlus_ImageDispose($bk);Bild Objekt 2 freigeben
    _GDIPlus_Shutdown();Ressourcen freigeben
    EndFunc ;==>_end

    [/autoit]

    Nun könnten wir unser spiel noch weiter verbessern indem wir logische beschränkungen einbauen.

    Wie es z.B. im Beispiel zu Buffern gemacht wurde.

    [autoit]

    $iX += $vX
    $iY += $vY
    If $iX >= 380 Or $iX <= 0 Then $vX *= -1
    If $iY >= 325 Or $iY <= 0 Then $vY *= -1

    [/autoit]

    Ich habe noch einmal hinzugefügt das man nicht über den Fensterrand hinaus kann.

    [autoit]

    #include <GuiConstants.au3>
    #include <GdiPlus.au3>;das include
    #include <Misc.au3>

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

    OnAutoItExitRegister("_end") ; die Funktion _end am Ende des Scriptes ausführen

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

    $x = 0;x und y deklarieren
    $y = 0

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

    $Gui = GUICreate("Beispiel", 179, 163, 100, 100)
    GUISetState(@SW_SHOW)

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

    _GDIPlus_Startup() ;Gdi starten

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

    $figur = _GDIPlus_ImageLoadFromFile(@ScriptDir & "\figur.gif")
    $bk = _GDIPlus_ImageLoadFromFile(@ScriptDir & "\bk.jpg")
    $height = _GDIPlus_ImageGetHeight($figur)
    $width = _GDIPlus_ImageGetWidth($figur)
    $verhaelnis = $height / $width
    $graphic = _GDIPlus_GraphicsCreateFromHWND($Gui)
    $bitmap = _GDIPlus_BitmapCreateFromGraphics(179, 163, $graphic)
    $buffer = _GDIPlus_ImageGetGraphicsContext($bitmap)

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

    While 1
    Switch GUIGetMsg()
    Case $GUI_EVENT_CLOSE
    Exit
    EndSwitch
    Select
    Case _IsPressed(25) And Not $x <= 0; ------------- geändert -------------
    $x -= 3
    Case _IsPressed(26) And Not $y <= 0; ------------- geändert -------------
    $y -= 3
    Case _IsPressed(27) And $x <= 160; ------------- geändert -------------
    $x += 3
    Case _IsPressed(28) And $y <= 125; ------------- geändert -------------
    $y += 3
    EndSelect

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

    _GDIPlus_GraphicsDrawImageRect($buffer, $bk, 0, 0, 179, 163)
    _GDIPlus_GraphicsDrawImageRect($buffer, $figur, $x, $y, 20, 20 * $verhaelnis)
    _GDIPlus_GraphicsDrawImage($graphic, $bitmap, 0, 0)
    Sleep(30)

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

    WEnd

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

    Func _end();die Exit funktion
    _GDIPlus_GraphicsDispose($graphic);Grafik Objekt freigeben
    _GDIPlus_GraphicsDispose($buffer)
    _GDIPlus_BitmapDispose($bitmap)
    _GDIPlus_ImageDispose($figur);Bild Objekt 1 freigeben
    _GDIPlus_ImageDispose($bk);Bild Objekt 2 freigeben
    _GDIPlus_Shutdown();Ressourcen freigeben
    EndFunc ;==>_end

    [/autoit]

    Wenn euch das noch nicht so klar ist schaut euch evtl. noch mal die veranschaulichung zur X und Y Achse an.


    Der Rest liegt bei euch.

    Dies ist noch nicht das Ende der Eindührung in die Spieleentwicklung Fortgeschrittenere Beispiele werden folgen...

    Kapitel 3:
    Guis in Gdi+

    Zuerst ein kleiner Ausblick, was ich damit meine:
    Dowload Pc Info Tool

    Diese Gui ...

    • ist Scrollbar
    • hat Buttons die angeklickt werden können und einen sogenannten Hover effekt haben (d.h. sie können "eingedrückt" werden )
    • hat "Labels" die verändert werden können (halt je nach dem auf welchem Pc das Tool ausgeführt wird)
    • sieht klasse aus :thumbup: (man erkennt nicht das sie mit AutoIt gemacht wurde)


    Das wollen wir nun auch schritt für schritt lernen.
    Zum erstellen eigener Individueller Guis sollte man ein Grafikprogramm beherschen. (z.B. GIMP oder Photoshop)
    In diesem Tutorial nehme ich euch jedoch diese Arbeit ab.

    Der GdiPlus teil des oben gezeigten Programmes setzt sich grössten teils aus Befehlen zusammen die wir bereits kennen.
    Es werden nämlich die Bilder (im Ordner Images zu finden, schaut sie euch mal an) auf die Gui gezeichnet.

    Eine Technik die wir noch nicht kennen ist jedoch das zeichnen von Strings mit denen die "Labels" erstellt wurden.
    Natürlich kann man auch mit einem Grafikprogramm eine Schrift erstellen diese ist jedoch nicht einfach anpassbar und erfüllt nicht die Funktion die ein Label oft hat, nämlich Ergebnisse drastellen die im Script ermittelt wurden.

    Das sehen wir auch im Script, denn die texte die sich nicht von Pc zu Pc verändern wurden mit einem Grafikprogramm direkt auf den Hintergrund der Gui gezeichnet:

    Bild


    Dieses Bild wird einfach mit

    [autoit]

    _GDIPlus_GraphicsDrawImageRect($hBuffer, $hImageBG, 0, $iY, $iGUIWidth, $iGUIHeight) ;ohne änderung aus dem Script übernommen

    [/autoit]


    auf die Gui gezeichnet.
    Die ermittelten Infomationen des Pc's werden danach per

    [autoit]

    For $i = 1 To 12
    _GDIPlus_GraphicsDrawStringEx($hBuffer, $aPCInformation[$i][0], $hFont, $aPCInformation[$i][2], $hFormat, $hBrushText)
    Next
    ;ohne änderung aus dem Script übernommen und deshalb sehr fortgeschritten und recht kompliziert

    [/autoit]


    auf das Bild gezeichnet.

    So weit zum theoretischen.

    Wir beginnen mal wieder mit unserer Beispiel Gui:

    [autoit]

    #include <GuiConstants.au3>
    #include <GdiPlus.au3>

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

    OnAutoItExitRegister("_end")

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

    $Gui = GUICreate("Beispiel", 179, 163, 100,100)
    GUISetState(@SW_SHOW)

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

    _GDIPlus_Startup()

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

    $hGraphics = _GDIPlus_GraphicsCreateFromHWND($Gui) ; erstellt eine Graphic aus dem Fenster $Gui
    $hImage = _GDIPlus_ImageLoadFromFile(@ScriptDir & "\Image.gif") ; Lädt das Bild Image.gif aus dem ScriptDir Ordner
    _GDIPlus_GraphicsDrawImage($hGraphics, $hImage, 10, 30) ; Zeichnet das geladene Bild $hImage auf die Graphic $hGraphics mit den Kooardinaten $iX = 10 und $iY = 30

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

    While 1
    Switch GUIGetMsg()
    Case $GUI_EVENT_CLOSE
    Exit
    EndSwitch
    WEnd

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

    Func _end();die Exit funktion
    _GDIPlus_GraphicsDispose($hGraphics)
    _GDIPlus_Shutdown()
    EndFunc

    [/autoit]

    Jetzt wollen wir noch einen String darauf zeichnen.
    Dafür benötigen wir die Funktion.

    [autoit]


    _GDIPlus_GraphicsDrawString($hGraphics, $sString, $iX, $iY[, $sFont = "Arial"[, $fSize = 10[, $iFormat = 0]]])

    [/autoit]


    unbedingt benötigte Parameter:

    [autoit]


    $hGraphics ; die bereits erstellte Graphic
    $sString ; der String der gezeichnet werden soll (entweder als Variable oder in Anführungszeichen)
    $iX ; die X Kooradinate
    $iY ; die Y Kooradinate

    [/autoit]

    die Zusatzparameter sind

    [autoit]


    $sFont ; die Schriftart des gezeichneten Strings (Standart: Arial)
    $fSize ; die Schriftgröße (Standart: 10 px)
    $iFormat ; die Formatflags siehe hier *link zu _GDIPlus_GraphicsDrawString* (Standart: 0)

    [/autoit]


    Doch die Zusatzparameter lassen wir erst ein mal ausser acht und malen mit unseren kenntnissen einen einfachen String auf die Gui:
    (bitte auf Kommentare achten.)

    [autoit]

    #include <GuiConstants.au3>
    #include <GdiPlus.au3>

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

    OnAutoItExitRegister("_end")

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

    $Gui = GUICreate("Beispiel", 179, 163, 100,100)
    GUISetState(@SW_SHOW)

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

    _GDIPlus_Startup()

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

    $hGraphics = _GDIPlus_GraphicsCreateFromHWND($Gui);Das kennen wir ja schon (erstellen eines Grafik Objektes)
    _GDIPlus_GraphicsDrawString($hGraphics, "Hallo Welt!", 50, 10) ;Zeichnet den String "Hallo Welt!" mit den Kooardinaten $iX = 50 und $iY = 10
    ;(wir sehen das die Grundparameter die gleichen sind wie bei _GDIPlus_GraphicsDrawImage nur das statt einem Bildobjekt ein String angegeben wird

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

    While 1
    Switch GUIGetMsg()
    Case $GUI_EVENT_CLOSE
    Exit
    EndSwitch
    WEnd

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

    Func _end();die Exit funktion
    _GDIPlus_GraphicsDispose($hGraphics)
    _GDIPlus_Shutdown()
    EndFunc

    [/autoit]

    Wie ihr seht, kennen wir dieses Prinzip schon von _GDIPlus_GraphicsDrawImage.
    Es sollte uns also keine großen Probleme machen ;)


    Bald geht es weiter ........


    mfg Ubuntu


    Danksagungen


    Danke an name22 für sein umfangreiches Buffer Beispiel
    Danke an yxyx an sein kleines Tut über Strings.

    25 Mal editiert, zuletzt von Ubuntu (5. Juni 2010 um 12:54)

  • Na also, geht doch :P
    Ich freu mich auf die Fortsetzung :D

    Spoiler anzeigen

    Grundkenntnisse in: C++, JavaScript
    Sehr gute Kenntnisse: PHP, JAVA, C und näturlich AutoIt


    Klaviatur, Anhang UDF, GDI+ Mühle

    Zitat

    "Wenn einen um 20h der Pizzadienst anruft und fragt, ob man's nur vergessen hat und ob man das gleiche
    möchte wie immer -- dann sollte man sein Bestellverhalten evtl überdenken"

  • schön schön, aber ich dachte ihr wolltet direkt bei Fortgeschrittenen Sachen einsteigen. Das sind ja nicht mal die basics :(

    Das finden von Rechtschreibfehlern muss sofort und unverzüglich dem Autor gemeldet werden. Das eigennützige Verwenden dieser Rechtschreibfehler ist strengstens untersagt und kann mit Freiheitsenzug bestraft werden.

  • Darter:
    Das habe ich nie gesagt.

    Pinguin:
    Danke wird geändert.

    @All:
    Danke für das Lob :)

    @Alle Helfer:
    Seid nicht zu übereifrig, ich habe bereits einen Plan und werrde jetzt nach diesem weiter schreiben.
    Wenns an die GDIP Sachen bräuchte ich hilfe.

    mfg Ubuntu

  • Ich glaub du hast vergessen in der Exit Funktion die Ressourcen der Graphik mit

    [autoit]

    _GDIPlus_GraphicsDispose()

    [/autoit]

    freizugeben und das geladene Bild mit

    [autoit]

    _GDIPlus_ImageDispose()

    [/autoit]

    freizugeben.

  • Jep da hat er recht ;)

    Immer noch gutes Tutorial heheh :p


    Häng doch Figur.GIF an, dann kannjeder dein "Spiel" sehen !

    Es gibt sehr viele Leute, die glauben. Aber aus Aberglauben.
    - Blaise Pascal

  • das mit figur bewegt musste eig nur kurz erklären, denn es erklärt sich ja wohl von selbst das X und Y die koordinaten des bildes sind :D
    sonst gut für anfänger, ich bin leider schon etwas weiter (aber auch nur etwas!) 8)

  • Naja sollte er das mit dem bewegen der figur einführen ,dann kommt er auch nicht an der Erklärung von Front- und Backbuffer vorbei oder nicht?
    Wäre zumindest ziemlich hilfreich das noch zu erklären :wacko:


    MfG Hellboy

    MfG hellboy

    [autoit]

    Do
    _help($user)
    Until $questions = 0

    [/autoit]

    Meine Werke:
    Ste`s Web-Radio