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.
[ngg_images source=”galleries” container_ids=”15″ display_type=”photocrati-nextgen_basic_thumbnails” override_thumbnail_settings=”0″ thumbnail_width=”200″ thumbnail_height=”140″ thumbnail_crop=”1″ images_per_page=”30″ number_of_columns=”3″ ajax_pagination=”0″ show_all_in_lightbox=”0″ use_imagebrowser_effect=”0″ show_slideshow_link=”0″ slideshow_link_text=”[Pokaz zdjęć]” template=”/home/rotsu81/domains/ckziu.jaworzno.pl/public_html/wordpress/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/ngglegacy/view/gallery.php” order_by=”sortorder” order_direction=”ASC” returns=”included” maximum_entity_count=”500″]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.
[ngg_images source=”galleries” container_ids=”16″ display_type=”photocrati-nextgen_basic_thumbnails” override_thumbnail_settings=”0″ thumbnail_width=”200″ thumbnail_height=”140″ thumbnail_crop=”1″ images_per_page=”30″ number_of_columns=”3″ ajax_pagination=”0″ show_all_in_lightbox=”0″ use_imagebrowser_effect=”0″ show_slideshow_link=”0″ slideshow_link_text=”[Pokaz zdjęć]” template=”/home/rotsu81/domains/ckziu.jaworzno.pl/public_html/wordpress/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/ngglegacy/view/gallery.php” order_by=”sortorder” order_direction=”ASC” returns=”included” maximum_entity_count=”500″]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: 6210