phaser-framework チュートリアル
phaser-frameworkを使い始める

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

備考

Phaserは、主にオープンソースのデスクトップおよびモバイルHTML5ゲームフレームワークです。

これには、堅牢なドキュメント、機能、および例が含まれており、作業中のゲームに素早く移行することができます。これは、 Pixi.jsレンダリングエンジンを介してWebGLをサポートし、古いデバイスでのサポートのためのキャンバスフォールバックを含みます。

エンジンはJavaScriptで構築されていますが、 TypeScriptの定義も含まれています

Lazerと呼ばれるES6準拠のプロジェクトの新しい構想があります。

バージョン

フェイザー2

バージョン	発売日
2.6.2コレスプリングス	2016-08-25
2.6.1 Caemlyn	2016-07-11
2.6.0 Fal Moran	2016年7月8日
2.5.0 5人の王	2016年6月17日
2.4.9 4人の王	2016年6月16日
2.4.8ウォッチヒル	2016年5月19日

フェイザー入門

フォルダを作成する
新しいディレクトリ内にindex.htmlを作成します。ブラケットエディタで開きます
githubからPhaserリポジトリをダウンロードし、 phaser.jsファイルをビルドフォルダから取得します。プロジェクトディレクトリ内にファイルを配置します。
index.htmlを開き、ヘッダータグ内のphaser.jsをリンクします。

<!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>

game.jsという名前のディレクトリ内に別のjsファイルを作成する
エディターでgame.jsファイルを開き、以下のコードを書いてください：

// 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.
}

すべてのファイルを保存し、 index.htmlをBracket liveserver（右上のアイコン）を使用して開きます。
Phaser開発環境が作成されました。エラー確認のためにブラウザにコンソール画面が表示されます。

Node.jsを使用したPhaser入門

あなたのゲームをライブにしたい場所にフォルダを作成し、そのフォルダに移動します

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

npmを使用してディレクトリを初期化します。

npm init -y

phaserをノードパッケージとしてインストールします。

npm install phaser

http-serverをグローバルモジュールとしてインストールし、コマンドラインで使用します。

npm install -g http-server

index.htmlファイルを作成し、Phaser実行可能ファイルを参照し、次のコードをそのファイルに貼り付けます。

<!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>

サーバーを起動し、ブラウザにhttp：// localhost：8080をロードしてください！

hs

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow