grafik i drracket - ida.liu.se tddc74/grafik/tddc74-grafik-2016.pdf  grafik i racket frame%...

Click here to load reader

Download Grafik i DrRacket - ida.liu.se TDDC74/grafik/tddc74-grafik-2016.pdf  grafik i racket Frame% Button%

Post on 09-Apr-2019

215 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

Grafik i

DrRacketAV TOMMY KARLSSON

Upplgg

Grundlggande

grafik i racket

Frame%

Button%

Pane% & Panel%

Canvas%

Bitmap%

Kodexempel! Generella

problemlsar-

strategier

Grafisk kodstruktur

Grafisk effektivisering

Tile-baserad grafik

Olika stt att bestmma rrelse

Frame%; Skapar ett objekt av typen frame% (ett fnster!)

(define *a-window* (new frame%

[width 300]

[height 200]

[label "Detta r ett fnster"]))

; Sger till vr frame att den ska synas

(send *a-window* show #t)

; En frame% r en container

(man kan placera saker i den!)

Det finns en mngd olika inargument som man kan utnyttja beroende

p vad man vill att den ska gra! Se docs.racket-lang.org!

Button%; Vr procedur som bestmmer vad som ska hnda

(define (button-proc button event)

(send button set-label Klick fungerade!))

Det finns en mngd olika inargument som man kan utnyttja beroende

p vad man vill att den ska gra! Se docs.racket-lang.org!

; Skapar ett objekt av typen button% (en knapp!)

(define *a-button* (new button%

[parent *a-window*]

[label En knapp]

[callback button-proc])

; En button mste ha en container (som t.ex. frame)

som parent!

Panel% & Pane%De r bda containers, s de kan fyllas med t.ex. button eller canvas

Kan anvndas fr att f en bttre struktur!

Underklasser:

horizontal-pane%

horizontal-panel%

vertical-pane%

vertical-panel%

Se dokumentationen

hur de anvnds!

(PS: kanterna kring

panelerna fs genom att

stta style till (border)

nr man skapar

panelerna!)

Canvas%; Sger vad som ska ritas nr canvasen uppdateras

(define (our-render-fn canvas dc)

; Innehller ngon form av kropp!

)

; Skapar ett objekt av typen canvas% (en mlarduk!)

(define *a-canvas* (new canvas%

[parent *a-window*]

[paint-callback our-render-fn]))

; En canvas r allts en mlarduk som vi kan rita figurer

eller bilder p!

Det finns en mngd olika inargument som man kan utnyttja beroende

p vad man vill att den ska gra! Se docs.racket-lang.org!

Exempel p dc%-

kommandonRitande Kommandon:

(send dc draw-rectangle x y width height)

(send dc draw-rounded-rectangle x y width height radius)

(send dc draw-arc x y width height start-radians end-radians)

(send dc draw-ellipse x y width height)

(send dc draw-line x1 y1 x2 y2)

(send dc draw-spline x1 y1 x2 y2 x3 y3)

(send dc draw-lines list-of-points)

(send dc draw-polygon list-of-points)

(send dc draw-text text x y)

(send dc draw-bitmap source x y)

Koordinatsystemsfrndrande kommandon

(send dc translate dx dy)

(send dc rotate angle)

(send dc scale x-scale y-scale)

Frginstllningar och liknande

(send dc set-pen color-name width style)

(send dc set-brush color-name style)

(send dc set-alpha opacity)

(send dc set-background color)

(send dc set-font font)

Rensa skrmen

(send dc clear)

Canvas: Exempel; Skapar fnstert(define *a-window* (new frame%

[width 600][height 400][label "Detta r ett fnster"]))

; Gr fnstret synligt(send *a-window* show #t)

; Vad ska ritas p vr canvas?(define (render-fn canvas dc)

(send dc set-brush "red" 'solid) ; ndrar frg p vr pensel(send dc set-pen "green" 10 'solid) ; ndrar frg p vr penna(send dc set-text-foreground "blue") ; ndrar frg p vr text(send dc draw-rectangle 10 10 50 50)(send dc draw-text "Hall dr!" 200 200)(send dc set-brush (make-object color% 1 0 0) 'solid) ; Vi skapar en egen frg istllet!(send dc draw-ellipse 240 240 100 100))

; Skapar vr canvas(define *a-canvas* (new canvas%

[parent *a-window*][paint-callback render-fn]))

Det finns en mngd olika inargument som man kan utnyttja beroende

p vad man vill att den ska gra! Se docs.racket-lang.org!

Translateringar, rotationer

och skalning

Rotation kring origo

Rotation kring vrt

nya origo!

Translateringar, rotationer

och skalningExempel p koordinatsystemsberoende kommandon:

(send dc translate xValue yValue) ; Frskjuter origo I den givna riktningen

(send dc rotate angle) ; Roterar den givna vinkeln kring origo

(send dc scale xFactor yFactor) ; Skalar bilden frn

Ofta vill man utg ifrn centrum av bilden:

(send dc translate (+ xValue (/ width 2)) (+ yValue (/ height 2)))

OBS!

Glm ej att terstlla koordinatsystemet

efter att ni anvnt det, annars blir det

riktigt jobbigt fr er!

Bitmap%

Mnga anvndningsomrden!

; Skapa en bitmap av en bildfil:

(define *our-bitmap* (make-object bitmap% testbild.png)

; Dimensionerna stts till bildens dimensioner!

; Skapar en tom bitmap

(define *our-bitmap* (make-object bitmap% 100 100)

; Dimensionerna stts till argumenten, hr 100 x 100!

; Hmta DC fr bitmapen s att vi kan mla precis som p canvasen!

(define *our-dc* (new bitmap-dc% [bitmap *our-bitmap*]))

; Ritar ut en bitmap med ngon dc, t.ex. p en canvas!

(send *some-dc* draw-bitmap *our-bitmap*

xPos

yPos)

Tangentbords och

musavknningCanvas% innehller funktionalitet fr att knna av mus- eller

Tangentbordsinmatning, men den r normalt sett avstngd!

Fr att ndra p detta utnyttjar vi arv:

(define input-canvas%

(class canvas%

; Vi lgger till ytterligare inargument

; (procedurer som vi sjlva mste skriva!)

(init-field keyboard-handler ; ska hantera tangentbord

mouse-handler) ; ska hantera mus

; Vid ett knapptryck, anropa vr keyboard-handler

(define/override (on-char key-event)

(keyboard-handler key-event))

; Vid musrrelse, anropa vr mouse-handler

(define/override (on-event mouse-event)

(mouse-handler mouse-event))

(super-new)))

OBS! Se vad man kan gra med argumenten key-event% och

mouse-event% i dokumentationen!

Exempel: mus + bitmap

Exempel: mus + bitmap

Timers

Timer% kan anvndas fr att s f procedurer att upprepas vid specifika tider

(Jmfr med att en itererande procedur alltid anropar sig sjlv direkt nr den r klar!)

60 Hz => periodtid 16,666 ms

; Vi definierar en timer som kommer anropa vr procedur our-update

(define *game-timer* (new timer%

[notify-callback our-update]))

; Vi startar timern och sger att den ska anropa sin procedur varje 16 millisekund

(send *game-timer* start 16 #f) ; #f sger att den inte bara ska kras en gng!

; Vi stannar timern

(send *game-timer* stop)

Exempel: mus + bitmap

Grafisk kodstruktur

Gr looparna s lttviktiga som mjligt!

r det ngra ondiga berkningar?

Finns det berkningar som inte mste ske varje iteration?

Gr det lttlst!

Flytta specifika rit-delar till respektive objekt!

Anropa t.ex. players ritprocedur istllet fr att skriva ritproceduren

i grafik-loopen!

Ex:

(send player draw-player dc)

Istllet fr:

(send dc draw-bitmap (send player get-bitmap) )

Detta ger kad lsbarhet och en lttare verblick ver vad

som egentligen sker i grafik-loopen!

Grafisk effektivisering

Vad hnder om koden r fr ineffektiv?

Programmet kan frysa

Programmet kan lagga

Vr fysikmotor kan sluta fungera! (Beror p implementation)

Hur kan man underska evalueringstid?

Ex:

(define (our-update)

(let ([startTime (current-inexact-milliseconds)])

; BODY

(displayln (- (current-inexact-milliseconds) startTime))))

OBS! Testa evalueringstiden p era loopar ibland under projektets gng

Om det r ngon del som r ineffektiv s r det ltt att hitta!

Tile-baserad grafik

Ltt att rita ut!

Ltt att gra kollisionsdetektering!

Ltt att gra kartan!

Tile-baserad grafik

Exempel (rita): Element p plats [3,12] har nummer 30.

Rita bitmapen som svarar mot siffran 30 p position:

Y = 3 * hjd-p-bitmap

X = 12 * bredd-p-bitmap

Klart!

Exempel (kollision): Spelaren frsker g till position (12, 153)

Tillten tile att g p?

Koordinaterna motsvarar element:

Rad = 153 / hjd-p-bitmap ; Avrundat nert

Kolumn = 12 / bredd-p-bitmap ; Avrundat nert

Fr spelaren g p tiles med siffran som finns p

position [rad, kolumn] ?

Matriser

0,0 0,1 0,2 0,3

1,0 1,1 1,2 1,3

2,0 2,1 2,2 2,3

3,0 3,1 3,2 3,3

0,0 0,1 0,2 0,31,0 1,1 1,2 1,32,0 2,1 2,2 2,33,0 3,1 3,2 3,3

Jmfr med:

Hmta element r ur matrisen

Hmta element k ur det

=> Element (r,k)!

Olika stt att bestmma rrelse

Lsta textfil och bygga tile-baserad karta

Det r lttare att redigera en txt-fil n att skriva en tile-baserad

karta direkt i racket!

Vektorbaserad rrelse

Linjr algebra:

Vi vill g frn punk (a.b) till (c,d).

Normerad riktningsvektor: (c-a , d-b) / Vektorns lngd

Ny kooridnat:

xPos = xPos + Normerad-riktningsvektor-x * S

yPos = yPos + Normerad-riktningsvektor-y * S

Klart!

Waypoints

Ex: Lista med koordinater: ( (1.1) , (1 . 2) , (3 . 2) , )

Riktning: Frn nuvarande position till (1