Gry praktycznie w HTML5 - Zasoby  

Autor: Piotr Bubacz

Opublikowano: 2012-03-27

Świat gry to świat fikcyjny, w którym ma miejsce akcja gry. Składa się on z elementów graficznych, które są przechowywane jako zasoby gry. Po uruchomieniu, logika gry pobiera niezbędne pliki graficzne dla całej gry lub danego poziomu - w przypadku gry wielopoziomowej. W tym odcinku nauczymy się pobierać zasoby gry oraz wyświetlać prosty świat gry.

Przed wykonaniem zadań powinieneś znać:

• podstawy języka JavaScript,
• podstawy elementu Canvas.

Po wykonaniu zadań dowiesz się:

• jak pobierać zasoby gry,
• jak wyświetlić świat gry.

Implementacja

W tej części kursu utworzysz nową stronę, dodasz do niej elementy graficzne i wyświetlisz je odpowiednio w elemencie Canvas za pomocą JavaScript. Wynik zadań został przedstawiony na Rys. 1.

Rys. 1. Świat gry.

Przygotowanie strony

Pierwszym krokiem będzie przygotowanie w programie WebMatrix strony internetowej.

1. W programie WebMatrix utwórz nową stronę i nazwij ją GamesOnHTML5:

• uruchom program WebMatrix,
• kliknij przycisk Templates,
• wybierz szablon Empty Site i w polu Site Name wpisz GamesOnHTML5,
• kliknij przycisk OK,
• kliknij przycisk Files,
• kliknij prawym przyciskiem myszki plik Default.cshtml. Kliknij Delete. W oknie potwierdź chęć usunięcia pliku.

2. Pobierz pliki graficzne i dodaj je do katalogu Images:

• pobierz Hands-on Lab Source Files ,
• w projekcie utwórz katalog Images,
• wypakuj zawartość pobranego archiwum i dodaj do projektu w katalogu Images, z katalogu \Assets\Media\Images\Content za pomocą przeciągnij-i-upuść (drag-and-drop), pliki: alien1.png, bullet.png, cloud1.png, cloud2.png, ground.png, hills.png, lista.txt, mountains_blurred.png, sun.png, tank.png.

3. Dodaj nowy plik do projektu w WebMatrix:

• na wstążce Home kliknij New, a następnie New File,
• na liście dostępnych typów plików kliknij HTML, a następnie jako nazwę wpisz  index.html.

4. Umieść niezbędne elementy do obsługi elementu Canvas:

• w znaczniku title wpisz:

Alien Game w HTML5

• w elemencie body umieść znacznik cavas:

<canvas id="gra" width="480" height="800"></canvas>

Programowanie elementu Canvas

W tym momencie mamy stronę internetową z elementem Canvas. Teraz wszystkie operacje będziemy wykonywali w języku JavaScript.

5. W JavaScript sprawdź, czy przeglądarka wspiera element Canvas:

• ustaw kursor przed znacznikiem </body> , wstaw nową linię i dodaj następujący kod:

<script type="text/javascript">
  //po uruchomieniu strony wykonaj: 
  window.addEventListener("load", function () {
      // Sprawdź, czy przeglądarka obsługuje element Canvas
      var canvas = document.getElementById('gra');
          if (!canvas.getContext) { return; }
      ctxMain= canvas.getContext('2d');
      width = canvas.width;
      height = canvas.height;

      // Dodaj bufor dla elementu canvas
      canvasBuffer = document.createElement('canvas');
      canvasBuffer.width = width;
      canvasBuffer.height = height;
      ctx = canvasBuffer.getContext('2d');

      // Pobierz zasoby
      LoadResources();
  }, false);
// Funkcja pobierająca zasoby
// Funkcja rysująca świat gry
// Funkcje do sterowania czołgiem
// Zmienne w aplikacji
</script>

Informacja

W celu uzyskania płynnego ruchu na elemencie canvas utworzyliśmy dodatkowy element canvas – bufor. Wszystkie operacje rysowania będziemy wykonywali na nim, a po wyrysowaniu, jednorazowo, całą jego zawartość przerysujemy na widocznym elemencie canvas.

6. Dodaj zmienne do wyświetlenia świata gry:

• ustaw kursor po // Zmienne, w aplikacji wstaw nową linię i dodaj następujący kod:

var ctxMain=null;
var canvasBuffer; 
var ctx = null;
var width = 0;
var height = 0;
//liczba elementów do pobrania
var doPobrania = 0;
//elementy graficzne
var background, sky, mountains, hills, ground, tank, cloud1, cloud2, sun, bullet, tire, alien;
//pozycja słońca
var sunPos = 0;
//pozycja X czołgu
var tankXTarget;

Pobierz zasoby gry

Teraz, gdy mamy już zdefiniowane zmienne, możemy pobrać zasoby. Zasoby w grach, to przede wszystkim elementy graficzne, symbolizujące obiekty w grze (np. gracza, pociski, itp.) oraz muzykę odtwarzaną w tle.

7. Dodaj funkcję pobierającą niezbędne grafiki:

• ustaw kursor po // Funkcja pobierająca zasoby. Wstaw nową linię i dodaj następujący kod:

function LoadResources() {
    mountains = loadImg('Images/mountains_blurred.png');
    hills = loadImg('Images/hills.png');
    ground = loadImg('Images/ground.png');
    tank = loadImg('Images/tank.png');
    cloud1 = loadImg('Images/cloud1.png');
    cloud2 = loadImg('Images/cloud2.png');
    sun = loadImg('Images/sun.png');
    bullet = loadImg('Images/bullet.png');
    alien = loadImg('Images/alien1.png');
    setTimeout(checkLoad, 100);
}
function loadImg(path) {
    doPobrania++;
    var v = new Image();
    v.src = path;
    v.addEventListener("load", function () { doPobrania--; }, false);
    return v;
}
function checkLoad() {
    if (doPobrania == 0) {
        DrawGameWorld();
    }
    else {
        setTimeout(checkLoad, 100);
    }
}

Informacja

Funkcja loadImg() umożliwia pobranie obrazka umieszczonego w określonej lokalizacji. Zmienna doPobrania określa liczbę obrazków pozostałą do pobrania (zwiększana przy pobraniu, zmniejszana po zdarzeniu load obrazka). Funkcja checkLoad(), uruchamiana po 100ms od ostatniego wywołania funkcji loadImg(), sprawdza, czy wartość zmiennej doPobrania jest równa 0. Jeśli tak jest, to uruchamiana jest funkcja rysująca świat gry, jeśli nie, to po kolejnych 100ms uruchamiana jest ponownie funkcja checkLoad();

Wyrysuj świat gry

Świat gry jest najczęściej światem fikcyjnym, w którym ma miejsce akcja gry.

8. Wyrysuj świat gry.
9. Ustaw kursor po // Funkcja rysująca świat gry i dodaj następujący kod:

function DrawGameWorld() {
  ctx.clearRect(0, 0, width, height);
  // Niebo
  ctx.fillStyle = '#6495ED';
  ctx.fillRect(0, 0, width, height);
  // Góry
  ctx.drawImage(mountains, 0, height - 401);
  // Pagórki
  ctx.drawImage(hills, 0, height - 175);
  // Ziemia
  ctx.drawImage(ground, 0, height - 86);
  // Słońce
  sunPos = sunPos + .1;
  ctx.drawImage(sun, sunPos, 0);
  // Chmurka 1
  ctx.drawImage(cloud1, 150, 50);
  // Chmurka 2
  ctx.drawImage(cloud2, 300, 20);
  // Czołg 
  ctx.drawImage(tank, 300, 644);
  // Obcy
  ctx.drawImage(alien, 100, 200);
  // Pociski
  // Wyniki
  // Prześlij bufor na element canvas
  ctxMain.drawImage(canvasBuffer, 0, 0);  
}

10. Zapisz zmiany. Wciśnij przycisk Run. Sprawdź, czy na stronie możesz zobaczyć widok podobny do przedstawionego na Rys. 1.

Podsumowanie

W tym artykule nauczyliśmy się pobierać zasoby gry – pliki graficzne i wyświetlać świat gry.

W kolejnym artykule nauczymy się, jak obsługiwać urządzenia użytkownika – klawiaturę i mysz.

 

---