|
| 1 | +# `code/canvas/` |
| 2 | + |
| 3 | +> Enkel spillmotor som lar deg lage visuelle applikasjoner som tegnes i et vindu med gitt størrelse. |
| 4 | +
|
| 5 | +## Komme i gang |
| 6 | + |
| 7 | +La oss starte med å opprette et tomt vindu. |
| 8 | + |
| 9 | +Denne guiden tar utgangspunkt i at du har opprettet en pakke og en klasse i denne pakken. |
| 10 | + |
| 11 | +```java |
| 12 | +import studio.programkode.jgdk.API; |
| 13 | +import studio.programkode.jgdk.Launcher; |
| 14 | +import studio.programkode.jgdk.Plugin; |
| 15 | +``` |
| 16 | + |
| 17 | +Disse 3 klassene er grunnsteinen i det å komme i gang. |
| 18 | + |
| 19 | +La oss ta en titt på et utgangspunkt for opprette et tomt vindu som er 640x480 stort (piksler): |
| 20 | + |
| 21 | +```java |
| 22 | +import studio.programkode.jgdk.Launcher; |
| 23 | +import studio.programkode.jgdk.Plugin; |
| 24 | + |
| 25 | +class TestWindow extends Plugin { |
| 26 | + static void main() { |
| 27 | + Launcher.createWindow(640, 480, new TestWindow()); |
| 28 | + } |
| 29 | +} |
| 30 | +``` |
| 31 | + |
| 32 | +Koden over er det som trengs som et minimum for å opprette et vindu som vises med en bakgrunnsfarge. |
| 33 | + |
| 34 | +La oss utvide dette til å, for eksempel, tegne en firkant! |
| 35 | + |
| 36 | +```java |
| 37 | +import studio.programkode.jgdk.Launcher; |
| 38 | +import studio.programkode.jgdk.Plugin; |
| 39 | + |
| 40 | +class TestWindow extends Plugin { |
| 41 | + static void main() { |
| 42 | + Launcher.createWindow(640, 480, new TestWindow()); |
| 43 | + } |
| 44 | + |
| 45 | + public void draw(API window) { |
| 46 | + window.drawRectangle(50, 50, 100, 100); |
| 47 | + } |
| 48 | +} |
| 49 | +``` |
| 50 | + |
| 51 | +Måten dette fungerer er at en plugin er kode som kjøres av spillmotoren for å utvide dens funksjonalitet. |
| 52 | + |
| 53 | +Det finnes 3 metoder for å gjøre dette, forutenom `Launcher.createWindow(...)` for å opprette selve vinduet: |
| 54 | + |
| 55 | +```java |
| 56 | +void setup(API.Setup window) { |
| 57 | + // kjøres 1 gang før loop-en starter |
| 58 | +} |
| 59 | + |
| 60 | +void update(API.Update window) { |
| 61 | + // kjøres 10 ganger i sekundet |
| 62 | +} |
| 63 | + |
| 64 | +void draw(API window) { |
| 65 | + // kjøres 20 ganger i sekundet |
| 66 | +} |
| 67 | +``` |
| 68 | + |
| 69 | +Hvorfor to ulike metoder som oppdateres flere ganger i sekundet? |
| 70 | + |
| 71 | +`draw(API window)`-metoden er ment for å kun tegne til vinduet, hvor det ikke er meningen å kjøre noe "tung" kode. |
| 72 | + |
| 73 | +`update(API.Update window)`-metoden er hvor du kan ha tyngre utregnelser som f.eks. logikk eller fysikk. |
| 74 | + |
| 75 | +Poenget er at felter brukes for å håndtere data, hvor gjerne `setup(API.Setup window)`-metoden brukes for å sette initialisere nødvendige verdier. |
| 76 | +Hvorfor kan ikke dette gjøres i konstruktøren f.eks.? Vinduet er ikke tilgjengelig når konstruktøren kjøres! |
| 77 | +Hva om du ønsker å lagre midtpunket i vinduet før du begynner å gjøre utregnelser? |
| 78 | + |
| 79 | +--- |
| 80 | + |
| 81 | +Ta gjerne en titt på eksemplene du finner i innunder `games` og `examples` mappene. |
| 82 | + |
| 83 | +--- |
| 84 | + |
| 85 | +## Koordinatsystemet |
| 86 | + |
| 87 | +Vinduet har 2 akser, en X- og en Y-akse. |
| 88 | + |
| 89 | +X-aksen er negativ venstre og positiv høyre, hvor Y-aksen er negativ opp og positiv ned. |
| 90 | + |
| 91 | +Det øverste punktet til venstre er x0 y0, hvor vi gjerne bruker punkter for å representere disse posisjonene: |
| 92 | + |
| 93 | +```java |
| 94 | +import studio.programkode.jgdk.library.math.geometry.Point; |
| 95 | + |
| 96 | +private Dimension size; |
| 97 | + |
| 98 | +void setup(API.Setup window) { |
| 99 | + this.position = new Point(0, 0); |
| 100 | +} |
| 101 | + |
| 102 | +``` |
| 103 | + |
| 104 | +Størrelser definereres som en dimensjon; |
| 105 | +Dersom vi har et punkt og en størrelse, så kan vi tegne et rektangel slik også: |
| 106 | + |
| 107 | +```java |
| 108 | +private Point position; |
| 109 | +private Dimension size; |
| 110 | + |
| 111 | +void setup(API.Setup window) { |
| 112 | + this.position = new Point(25, 25); |
| 113 | + this.size = new Dimension(50, 50); |
| 114 | +} |
| 115 | + |
| 116 | +void draw(API window) { |
| 117 | + window.drawRectangle(this.position, this.size); |
| 118 | +} |
| 119 | +``` |
| 120 | + |
| 121 | +Hva hvis du ønsker å skrive noe tekst midt på skjermen? |
| 122 | + |
| 123 | +```java |
| 124 | +private Point center; |
| 125 | + |
| 126 | +void setup(API.Setup window) { |
| 127 | + this.center = window.getCenterPoint(); |
| 128 | +} |
| 129 | + |
| 130 | +void draw(API window) { |
| 131 | + window.drawTextCentered(this.center, "middle of the window"); |
| 132 | +} |
| 133 | +``` |
| 134 | + |
| 135 | +--- |
| 136 | + |
| 137 | +Det finnes en del metoder, hvor jeg anbefaler å sjekke ut hva IntelliJ foreslår etter du skriver `window.` inne i en av de tre metodene. |
| 138 | + |
| 139 | +--- |
| 140 | + |
| 141 | +# Hva en kan forvente |
| 142 | + |
| 143 | +Det er mulig å lage enkle spill eller bruke vinduet for å lage et visuelt brukergrensesnitt for ditt program. |
| 144 | + |
| 145 | +Dette er dog avansert og krever en del av deg med tanke på å være nysgjerrig og det å forsøke seg fram. |
| 146 | + |
| 147 | +Om det er noe du savner eller ønsker implementert, gi meg en lyd! |
| 148 | + |
0 commit comments