Grafik i Racket

Grafik
med Racket
TDDC74 Mikael Silvén 2013

Dagens föreläsning
Förkunskaper
2D Grafik
- Grunderna
- Målare och målarduk
- Grafik i Racket
- Två typer av renderingssystem
- Världens enklaste spelmotor
Kort om numerisk integration
Exempelprogram

Förkunskaper
OOP
- Grafikbiblioteken är objektorienterade
- ((sak 'msg) x), (ask sak 'msg x),
(send sak msg x)
- Arv används för att komma åt input (se pdf)
Samplingsteori
- Vi måste sampla tillräkligt snabbt för att
kunna återskapa animationer.

2D-Grafik
Pixel
- Picture Element
- Minsta beståndsdelen av en skärm
- Beskrivs med 3 värden, R G B mellan 0-255
Bild
- En mängd pixlar, en bredd, en höjd
- R G B, Kanske A, för alpha/genomskinlighet
2D-Grafik är konsten att bygga intressanta
bilder genom att manipulera dess pixlar

2D-Grafik II
Super Mario Bros 3 av Nintendo

2D-Grafik III

2D-Grafik IV

2D-Grafik V

2D-Grafik VI
Kortfattat
- Målarduken målas på
- Målaren förändrar målarduken
Men kod då?
Instans av canvas% behöver en paint-callback
som får canvas samt drawing-contex som
argument: (define (draw-stuff canvas dc) ...)

Minimalt Exempel
(define *my-window* (new frame%
[width 300] [height 200] [label "En ram"]))
(define (render-fn canvas dc)
(let-values ([(w h) (send canvas get-virtual-size)])
(send dc draw-rectangle 4 4 (- w 8) (- h 8))))
(define *my-canvas* (new canvas%
[parent *my-window*]
[paint-callback render-fn]))
(send *my-window* show #t)

Mer man kan göra?
(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 end)
(send dc draw-ellipse x y width height)
(send dc draw-line x1 y1 x2 y2)
(send dc draw-text text x y)
(send dc set-alpha opacity)
(send dc set-background color)
...
;; Kanske mest intressant
(send dc translate dx dy)
(send dc rotate angle)
(send dc scale x-scale y-scale)
(send dc draw-bitmap source x y)

Måla bilder
(send dc translate x y)
(send dc rotate angle)
(send dc draw-bitmap image
(/ (- (send image get-width)) 2)
(/ (- (send image get-height)) 2))
(send dc rotate (- angle))
(send dc translate (- x) (- y))
// Javakod nedan, visst är det likt?
g.translate(x, y);
g.rotate(angle);
g.drawImage(image, -image.getWidth(null) /2,
-image.getHeight(null)/2, null);
g.rotate(-angle);
g.translate(-x, -y);
// g är ett graphics-objekt, motsvarar dc

Grafikmotorer
Kod som målar ut saker på skärmen.
För enklare projekt finns det två kategorier:
- Tillståndsmaskiner, måla varje gång du
byter tillstånd. T.ex. efter giltigt drag som svar
på musklick i Schack eller varje gång en figur
förflyttas i Tetris.
- Simuleringar, updatera och måla så ofta
som möjligt. T.ex: När en fågel flyger i Angry
Birds eller en match i FIFA.

Grafikmotorer II
Kommer inte föreläsa om finita
tillståndsmaskiner
Absoluta majoriteten av spel är av den senare
kategorin
Enklare att implementera animationer
Tekniken är densamma: (send *my-canvas* refresh)

Grafikmotorer III
Låt oss anta koden från tidigare slide:
(define *my-window* ...)
(define (render-fn ...)
(define *my-canvas* ...)
(send *my-window* show #t)
Lägg nu till:
(define (tick!)
(send *my-canvas* refresh))
(define *my-timer* (new timer% [notify-callback tick!]))
(send *my-timer* start 16) ;; 16 ms intervall ger ~60 FPS

Grafikmotorer IV
Det händer inte så mycket... Vi provar en
intressantare renderingsfunktion:
(define *angle* 0.0)
(define (render-fn canvas dc)
(send dc translate 50 50)
(send dc rotate *angle*)
(send dc draw-rectangle -25 -25 50 50)
(send dc rotate (- *angle*))
(send dc translate (- 50) (- 50)))
(tick!) blir nu:
(define (tick!)
(set! *angle* (+ *angle* (/ 1 6.28))))
(send *my-canvas* refresh))

Grafikmotorer V
Resultatet blir en roterande ruta:
Men det är jobbigt ha lägga
till en massa saker såhär...
Tänk istället om vi kapslade
in beteendet för utmålning
Om varje sak kunde uppdatera och måla sig
själv behöver vi bara ha en lista med saker

Grafikmotorer VI
(define *all-things* '())
(define (make-thing ...)
(define (update) ...)
(define (render canvas dc) ...)
(lambda (cmd)
(cond ((eq? cmd 'update) update)
((eq? cmd 'render) render))))
(define (render-fn canvas dc)
(define (render-one thing)
((thing 'render) canvas dc))
(for-each render-one *all-things*))
(define (tick!)
(define (update-one! thing)
((thing 'update))) ;;Kanske vill skicka med saker här
(for-each update-one! *all-things*)
(send *my-canvas* refresh))

Grafikmotorer VII
(define (rotating-square x y)
(let ((angle 0))
(define (update)
(set! angle (+ angle (/ 1 6.28))))
(define (render canvas dc)
(send dc translate x y)
(send dc rotate angle)
(send dc draw-rectangle -25 -25 50 50)
(send dc rotate (- angle))
(send dc translate (- x) (- y)))
(define (dispatch cmd)
(cond
((eq? cmd 'update) update)
((eq? cmd 'render) render)))
dispatch))
(set! *all-things* (cons (rotating-square 50 50)
*all-things*))

Grafikmotorer VIII
Vi har nu grunden till världens enklaste
spelmotor
Koden lite huller om buller, bättre ordning i
fristående pdf
Att lägga till lager och olika skärmar lämnas
som övning
http://commons.wikimedia.org/wiki/File:Parallax-scroll-example-2.png

Simuleringar
De flesta spel är
simuleringar. Saker
händer hela tiden
och objekt måste
uppdateras
P = P + v * dt
v = v + a * dt
a = a + F / m
http://en.wikipedia.org/wiki/Euler_method

Tack för er tid
Frågor?