phaser-framework Samouczek
Rozpoczęcie pracy z phaser-framework

Android Cordova CSS HTML html5-canvas ionic-framework JavaScript jQuery Node.js TypeScript

Uwagi

Phaser to przede wszystkim platforma do gier HTML5 Desktop i Mobile.

Zawiera solidny zestaw dokumentacji, funkcji i przykładów, aby szybko przejść do działającej gry. Obsługuje WebGL poprzez silnik renderujący Pixi.js i zawiera rezerwową wersję Canvas dla wsparcia na starszych urządzeniach.

Chociaż silnik jest wbudowany w JavaScript, zawiera również definicje TypeScript

Pojawiła się nowa wizja projektu zgodna z ES6 o nazwie Lazer .

Wersje

Phaser 2

Wersja	Data wydania
2.6.2 Kore Springs	25.08.2016
2.6.1 Caemlyn	11.07.2016
2.6.0 Fal Moran	08.07.2016
2.5.0 Pięć królów	17.06.2016
2.4.9 Czterej królowie	16.06.2016
2.4.8 Watch Hill	2016-05-19

Pierwsze kroki Phaser

Utwórz folder
Utwórz index.html w nowym katalogu. Otwórz go w edytorze nawiasów
Pobierz repozytorium Phaser z github , a następnie pobierz plik phaser.js z folderu kompilacji. Umieść plik w katalogu projektu.
Otwórz index.html i połącz phaser.js wewnątrz tagu nagłówka.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>My Gamer</title>    
    
     <script type="text/javascript" src="lib/phaser.js"></script>

    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
    
</head>
<body>    
        <div id="gameContainer"></div>
</body>
</html>

Utwórz kolejny plik js w katalogu o nazwie game.js
Otwórz plik game.js w edytorze i napisz następujący kod:

// Phaser instance, width 800px, height 600px render as CANVAS. 
// Method signature - preload, create and update

var game = new Phaser.Game(800, 600, Phaser.CANVAS,'gameContainer', { preload: preload, create: create, update: update });

function preload() {
// this method used to load your game assets
}

function create() {
// this method run only once used to create to game world
}

function update() {
// this method loop 60 times in a seconds, used to handle gameplay.
}

Zapisz wszystkie pliki i otwórz plik index.html za pomocą Bracket liveserver (ikona w prawym górnym rogu).
Utworzono środowisko programistyczne Phaser. W przeglądarce powinien pojawić się ekran konsoli w celu weryfikacji błędów.

Rozpoczęcie pracy z Phaser za pomocą Node.js

Utwórz folder, w którym chcesz, aby gra była na żywo, i przejdź do tego

mkdir my-new-game
cd my-new-game

Zainicjuj katalog za pomocą npm.

npm init -y

Zainstaluj phaser jako pakiet węzłów.

npm install phaser

Zainstaluj serwer HTTP jako moduł globalny, który będzie używany w wierszu poleceń.

npm install -g http-server

Utwórz plik index.html i odwołaj się do pliku wykonywalnego Phaser i wklej do niego następujący kod.

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>My Gamer</title>
    <script type="text/javascript" src="node_modules/phaser/build/phaser.js"></script>
    <style type="text/css">
    body {
        margin: 0;
    }
    </style>
</head>

<body>
    <div id="helloWorld"></div>
</body>
<script>
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'helloWorld', {
    create: create
});

function create() {

    var text = "Hello World!";
    var style = {
        font: "65px Arial",
        fill: "#ff0044",
        align: "center"
    };

    var t = game.add.text(game.world.centerX, 300, text, style);
    t.anchor.set(0.5);

}
</script>

</html>

Uruchom serwer i załaduj http: // localhost: 8080 w przeglądarce!

hs

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow