KAPLAY - bevæg dine 'game objects'

Dette repo forsøger at vise, hvordan man i KAPLAY kan få sine 'game objects' til at bevæge sig.

Repoet bygger ovenpå den grundlæggende guide til KAPLAY, som du kan finde her: https://piratskibet.dk/kurser/byg-spil-med-kaplay/

Bevæg dine 'game objects' i et KAPLAY spil

For at vise, hvordan du med kode skaber simpel bevægelse for dine 'game objects' i KAPLAY spil, så vil dette vises via følgende steps:

1. Skab et KAPLAY spil
2. Kod bevægelse af et 'game object'

Skab et KAPLAY spil

For at skabe et KAPLAY spil, så skal man først og fremmest blot eksekvere nedenstående kommando i sin terminal (her er navnet 'mygame' valgt, men du kan kalde dit spil hvad du vil):

npx create-kaplay mygame

Dette vil således skabe en mappe kaldet mygame, som du så først lige skal skifte ned i via denne kommando i din terminal:

cd mygame

Og når du er skiftet ned i denne mappe, så skal du blot køre denne kommando for at få vist det umiddelbare spil, som er blevet skabt med den tidligere npx create-kaplay mygame kommando:

npm run dev

Med kørsel af denne kommando skulle du gerne få et link til det umiddelbare spil som kører i din browser. Link skulle gerne være:

http://localhost:3001/

Tryk derfor på linket til dit spil, og du skulle gerne se følgende i din browser:

Kod bevægelse af et 'game object'

Med alt dette sat op, er du nu klar til selv at kode bevægelse for dine 'game objects', hvilket vi vil gøre via følgende steps:

1. Åbn din 'main.js' fil i 'src' mappen
2. Slet sidste linje i 'main.js' filen
3. Lav en variabel til dit 'game object'
4. Kod selv bevægelse af dit 'game object'

Åbn din 'main.js' fil i 'src' mappen

Som det allerførste skal du bare åbne den 'main.js' fil som findes under 'src' mappen.

Åbner du den, vil du se denne kode (som er det der kører i din browser):

import kaplay from "kaplay";
// import "kaplay/global"; // uncomment if you want to use without the k. prefix

const k = kaplay();

k.loadRoot("./"); // A good idea for Itch.io publishing later
k.loadSprite("bean", "sprites/bean.png");

k.add([k.pos(120, 80), k.sprite("bean")]);

k.onClick(() => k.addKaboom(k.mousePos()));

Slet sidste linje i 'main.js' filen

I koden i 'main.js' vil du kunne se, at den sidste linje kode er følgende (hvilket blot er noget kode som får en pop-up med en "Kaboom" tekst til at vises, når man klikker i sin browser):

k.onClick(() => k.addKaboom(k.mousePos()));

Denne linje kode skal vi imidlertid ikke bruge til noget, hvorfor du blot kan slette den, således at du står tilbage med denne kode:

import kaplay from "kaplay";
// import "kaplay/global"; // uncomment if you want to use without the k. prefix

const k = kaplay();

k.loadRoot("./"); // A good idea for Itch.io publishing later
k.loadSprite("bean", "sprites/bean.png");

k.add([k.pos(120, 80), k.sprite("bean")]);

Lav en variabel til dit 'game object'

Ved at have slettet den sidste linje kode i 'main.js' filen har vi nu det vi skal bruge for at begynde at kode bevægelse af vores 'game object' (som i dette tilfælde er det lille grønne ansigt du ser i din browser).

Og det allerførste du skal, er blot at skabe en variabel til dit 'game object' ved at ændre sidste kodelinje fra:

k.add([k.pos(120, 80), k.sprite("bean")]);

til:

const bean = k.add([k.pos(120, 80), k.sprite("bean")]);

For med det har du nu en variabel, som vi senere kan bruge en metode på, således at vi med kode kan fortælle det grønne lille ansigt, at det fx skal bevæge sig til højre på skærmen, når du trykker på højre piltast på dit keyboard.

Kod selv bevægelse af dit 'game object'

Og måden hvorpå vi fx får det lille grønne ansigt til at bevæge sig til højre på skærmen, når vi trykker på højre piltast, er følgende.

Som det første skal vi fortælle vores grønne ansigt - dvs. vores bean variabel - at når en bruger trykker på højre piltast, så skal der ske noget.

Det gøres først ved at skrive denne linje kode til allersidst i 'main.js' filen:

bean.onKeyDown("right", () => {});

Det denne kode gør er bare at fortælle vores spil, at når nogen trykker på højre piltast, så skal der ske et eller andet.

Lige nu sker der så ikke noget, fordi det er inde mellem de 2 'tuborgklammer' ({}), at vi skal skrive koden til at bevæge vores bean variabel.

For at bevæge vores bean er det så mellem disse 2 'tuborgklammer' at vi bruger en metode kaldet move(), hvori vi angiver, hvor mange pixels vi vil flytte dennes x og y koordinat på skærmen per sekund.

Vil vi derfor flytte vores bean med 200 pixels, når nogen trykker på højre piltast, ja, så skriver man følgende kode inde mellem de 2 'tuborgklammer' til 'onKeyDown' metoden:

bean.onKeyDown("right", () => {
  bean.moveBy(200, 0);
});

Og med det vil du nu i din browser kunne se, at det lille grønne ansigt bevæger sig til højre på skærmen, når du trykker på højre piltast (hold gerne tasten inde, så du kan se, at den lille 'bean' bevæger sig glidende).

bean_movement.mov

The End

Mere er det faktisk ikke i det at få ens spils figurer ('game objects') til at bevæge sig rundt på ens skærm :-)

Og hvis du vil have din 'bean' til også at kunne bevæge sig til venstre, op og ned, så kommer her koden til det (som du blot kan 'copy-paste' ind under al din nuværende kode):

// Move left when pressing the left arrow key
bean.onKeyDown("left", () => {
  bean.move(-200, 0);
});

// Move up when pressing the up arrow key
bean.onKeyDown("up", () => {
  bean.move(0, -200);
});

// Move down when pressing the down arrow key
bean.onKeyDown("down", () => {
  bean.move(0, 200);
});