Stwórz grę w JavaScript

Poznaj podstawy three.js, które wykorzystasz do stworzenia gry w JavaScript.

Uwielbiam gry. Uwielbiam też JavaScript. I dlatego przeprowadzę Cię teraz przez pierwszą część tworzenia świetnej i bardzo prostej gry w Javascript.

Wprowadzenie

Od kilku lat piszę w JavaScript aplikacje webowe i mobilne, a ostatnio zacząłem również tworzyć gry. W tym artykule pokażę Ci jak tworzyć niesamowite gry z pomocą JavaScript.

Będziemy korzystać z siatki modelu 3D Karima Maloula jako przykładu. Aby zobaczyć jego prace, odwiedź tę stronę.

Pierwsze kroki

Nie musisz być mistrzem JavaScriptu. Jeśli znasz trochę JS i CSS, to jesteś gotowy do tego projektu. Spokojnie, nie będziemy używać Node.js. Tylko JavaScript, tak jak kiedyś. Zróbmy to!

Jeśli znasz JavaScript, to wiesz o bibliotekach takich jak jQuery, Bootstrap, Angular, React itp. W tym tutorialu będę korzystał z dwóch bibliotek:

Three.js - biblioteki JS używanej do tworzenia i wyświetlania animowanej grafiki 3D w przeglądarce. Wykorzystamy ją do tworzenia obiektów 3D: Królika, który jest naszym bohaterem, Potwora, Marchewki (która daje naszemu bohaterowi życie), Świata, Podłogi, Środowiska i wielu innych. Prosta robota.

TweenMax - niezwykle szybkiej, lekkiej i elastycznej biblioteki do animacji. Wykorzystamy ją m.in. do stworzenia animacji biegania i obracania się.

Oto kilka fajnych projektów stworzonych przy pomocy Three.js.:
- A Short Yourney
- Investigate The Wayne Murder
- Car Visualizer

Dodamy je do naszego skryptu w ten sam sposób, w jaki dodajemy jQuery. <script src> </ script>.

Zanim zatopimy się w kodowaniu naszej głównej gry, stworzymy prostą grę, aby zaznajomić Cię z three js. Działanie TweenMax wyjaśnię Ci podczas tworzenia naszej głównej gry. To będzie jak użycie CSS-a i animacji jQuery.

Zanim zaczniemy

Zanim użyjesz biblioteki three.js, musisz mieć miejsce, by wyświetlić to, co wygeneruje. Zapisz następujący kod HTML w pliku na komputerze wraz z kopią three.js w katalogu js/ i otwórz go w przeglądarce.

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>My first three.js app</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
    <script src="js/three.js"></script>
    <script>
        // Our Javascript will go here.
    </script>
</body>
</html>

To wszystko. Cały kod przechodzi do pustego tagu <script>.

Tworzenie sceny

Aby móc wyświetlać wszystko z pomocą three.js, potrzebujemy trzech rzeczy: sceny, kamery i renderera - abyśmy mogli renderować scenę za pomocą kamery.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

Poświęćmy chwilę, żeby wyjaśnić, co tu się wydarzyło. Ustawiliśmy scenę, kamerę i renderer. W three.js jest kilka różnych kamer. Na razie użyjmy PerspectiveCamera.

Pierwszym atrybutem jest pole widzenia - field of view. FOV jest obszarem sceny, która jest widoczna na ekranie w danym momencie. Wartość mierzona jest w stopniach.

Drugi to współczynnik proporcji - aspect ratio. Prawie zawsze chcemy użyć szerokości elementu podzielonej przez wysokość. Albo uzyskamy taki sam efekt, jak podczas odtwarzania starych filmów na telewizorze z szerokim ekranem - obraz będzie spłaszczony.

Kolejne dwa atrybuty to bliska (near) i daleka (far) płaszczyzna obcinania. Oznacza to, że obiekty znajdujące się dalej od kamery niż wartość “daleko” lub bliżej niż “blisko”, nie będą renderowane. Nie musisz się teraz o to martwić, ale możesz użyć innych wartości w swoich aplikacjach, by uzyskać lepszą wydajność.

bliska i daleka płaszczyzna obcinania

Następny jest renderer. To tutaj dzieje się magia. Oprócz ‘WebGLRenderer’, którego tu użyjemy, three.js oferuje kilka innych, często używanych awaryjnie w przypadku starszych przeglądarek lub dla tych, którzy z jakiegoś powodu nie wspierają WebGL.

Oprócz tworzenia instancji renderera, musimy również ustawić rozmiar, w jakim chcemy renderować naszą aplikację. Dobrym pomysłem jest użycie szerokości i wysokości obszaru, który chcemy wypełnić naszą aplikacją - w tym przypadku szerokości i wysokości okna przeglądarki. W przypadku aplikacji wymagających dużej wydajności można również podać mniejsze wartości setSize, takie jak window.innerWidth/2 i window.innerHeight/2, które sprawią, że aplikacja będzie renderować się w połowie wielkości.

Jeśli chcesz zachować rozmiar swojej aplikacji, ale renderować ją w niższej rozdzielczości, możesz to zrobić, wywołując funkcję setSize z wartością false dla updateStyle (trzeci argument). Przykładowo setSize(window.innerWidth/2, window.innerHeight/2, false) spowoduje, że Twoja aplikacja wyświetli się w dwa razy mniejszej rozdzielczości, przyjmując, że <canvas> ma 100% szerokości i wysokości.

Teraz ostatnie, ale nie mniej ważne - dodajemy element renderer do dokumentu HTML. Jest to element ‘<canvas>’, którego renderer używa do wyświetlania sceny.

Wszystko super, ale gdzie jest ta kostka, którą obiecałeś? - Dodajmy ją teraz.

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

Aby utworzyć sześcian, potrzebujemy BoxGeometry. Jest to obiekt zawierający wszystkie punkty (vertices) i wypełnienie (faces) sześcianu. Dokładniej zbadamy to później.

Potrzebujemy teraz materiału, aby pokolorować obiekt. Three.js ma ich kilka, ale na razie trzymamy się MeshBasicMaterial. Wszystkie materiały przyjmują obiekt z właściwościami, które zostaną do nich zastosowane. Aby zrobić najprościej, dostarczamy tylko atrybut koloru 0x00ff00, który jest zielony. Działa to w ten sam sposób, w jaki kolory działają w CSS lub Photoshopie (hex colors).

Trzecią rzeczą, której potrzebujemy, jest siatka (Mesh). Siatka jest obiektem, który wykorzystuje geometrię i stosuje do niej materiał, który możemy następnie wstawić do naszej sceny i swobodnie nim poruszać.

Domyślnie, gdy wywołujemy scene.add(), rzecz, którą dodamy, zostanie dodana do współrzędnych (0,0,0). To spowodowałoby, że zarówno kamera, jak i sześcian znajdowałyby się wewnątrz siebie. Aby tego uniknąć, musimy po prostu nieco odsunąć kamerę.

Renderowanie sceny

Jeśli skopiujesz powyższu kod do pliku HTML, który utworzyliśmy wcześniej, nic nie zobaczysz. Dzieje się tak dlatego, że jeszcze niczego nie renderujemy. Do tego potrzebujemy czegoś, co nazywa się renderem (render) albo pętlą animacji (animate loop).

function animate() {  
      requestAnimationFrame( animate );  
      renderer.render( scene, camera ); 
} 
animate();

Utworzy się pętla, która powoduje, że renderer rysuje scenę za każdym razem, gdy ekran jest odświeżany (60 razy na sekundę na typowym ekranie). Jeśli dopiero zaczynasz pisać gry w przeglądarce, możesz zapytać: dlaczego nie stworzymy setInterval? Chodzi o to, że możemy, ale requestAnimationFrame ma wiele zalet. Prawdopodobnie najważniejsze jest to, że zatrzymuje się, gdy użytkownik przechodzi do innej karty przeglądarki, a więc nie marnuje cennej mocy obliczeniowej i żywotności baterii.

Animowanie kostki

Jeśli wstawisz cały powyższy kod do pliku utworzonego przed rozpoczęciem, powinieneś zobaczyć zielone pole. Sprawmy, że wszystko stanie się bardziej interesujące poprzez obrócenie go.

Dodaj to zaraz nad wywołaniem renderer.render w funkcji animate:

cube.rotation.x += 0.01; 
cube.rotation.y += 0.01;

Będzie on uruchamiany w każdej klatce (zwykle 60 razy na sekundę) i da sześcianowi przyjemną animację rotacji. Zasadniczo wszystko, co chcesz przenieść lub zmienić podczas działania aplikacji, musi przejść przez pętlę animacji. Możesz oczywiście wywoływać stamtąd inne funkcje, dzięki czemu funkcja animate nie będzie miała setek linijek.

Wynik

Gratulacje! Ukończyłeś swoją pierwszą aplikację three.js. To proste, ale musisz jakoś zacząć.

Pełny kod jest dostępny poniżej. Baw się z nim, aby lepiej zrozumieć, jak działa.

<html>
<head>
    <title>My first three.js app</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
    <script src="js/three.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        var geometry = new THREE.BoxGeometry( 1, 1, 1 );
        var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        var cube = new THREE.Mesh( geometry, material );
        scene.add( cube );

        camera.position.z = 5;

        var animate = function () {
            requestAnimationFrame( animate );

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render( scene, camera );
        };

        animate();
    </script>
</body>
</html>

Ostatnia uwaga

Tworzenie gier z JavaScriptem nie jest tak skomplikowane, jak się wydaje. W kolejnej części tej serii przeprowadzę Cię przez proces tworzenia środowiska naszej gry.