W ubiegłym tygodniu uczniowie klasy 3b (kierunek: technik informatyk) na lekcjach programowania gier komputerowych kodowali swoje gry w JavaScript oraz HTML5. Zanim szczegółowo omówimy różne biblioteki fizyki oraz silniki gier 3d, postanowiliśmy „dla sportu” napisać od podstaw własną platformówkę w Vanilla JS.

Od czego powinno się zacząć lekcję programowania? Oczywiście od zaparzenia mocnej kawy.

Następnie zrobiliśmy krótki wstęp teoretyczny. Omówienie nowych funkcji, integracja z dotychczasowym repozytorium oraz zaplanowanie dalszej pracy. Cel na dzisiaj – implementacja animacji poklatkowych z arkuszy spritów.

Najpierw HTML – jak wiadomo, cudów tutaj nie ma. Zwykły canvas na którym rysowana jest cała gra:

index.html

See the Pen JS Animate1 by Vladimir (@wlodku) on CodePen.

Przejdźmy do klasy postaci – nazwijmy ją Dragon. Z rozpędu dodajemy koordynaty, załadowujemy arkusz z klatkami animacji oraz liczniki wierszy i kolumn animacji. Wyjątkowo pustą zostawimy medodę update() – przyda się później w czasie programowania kolizji. Kluczowe były funkcje przewijające animację w czasie ruchu postaci oraz „sprytne” wywołanie funkcji drawImage():

dragon.js

See the Pen JS Animate2 by Vladimir (@wlodku) on CodePen.

Acha, no a tak wygląda nasz sprite sheet – pierwszy lepszy darmowy arkusz pobrany stąd. Szerokość klatki: 96px.

bahamut.png

Na koniec pętla główna gry. Wykorzystaliśmy rekurencyjne wywołanie funkcji requestAnimationFrame() – docelowo 60 FPS. . Dla uproszczenia kodu nie liczyliśmy delty czasu pomiędzy klatkami – ale pamiętamy, że gdy gra się rozbuduje będziemy musieli do tego wrócić, aby nie grafika się nie cięła przy spadku FPSów. Sterowanie postacią mieliśmy zrobione w ubiegłym tygodniu. Teraz zostało tylko zebranie wszystkiego w całość:

script.js

See the Pen JS Animate3 by Vladimir (@wlodku) on CodePen.

No i w końcu kilka zdjęć z kodowania – najprzyjemniejszej części lekcji. Większość uporała się z zadaniem przed czasem.

Tak wygląda efekt naszej pracy – sterowanie strzałkami (po kliknięciu na ramkę). Teraz zostało „tylko” dodanie mapy z kafelków, przeciwników, fabuły… i gra będzie gotowa. Za kilka tygodni powinniśmy skończyć i wtedy na pewno wrócimy do tematu w następnych migawkach.

Włodzimierz Bubak

 

Ilość odsłon: 6047

wstecz