完全なフェイザー3ゲーム開発ガイド


免責事項:これらの一連の記事は長く見えるかもしれないし、多くの情報があります.私は初心者のためにできるだけ多くのことを理解しようとするだけでなく、それらを読んで退屈しないようにしてください.あなたがどんな推薦をするならば、私は喜んで彼らを受け入れます!

これは何ですか。


フェイザー3は、HTMLやブラウザでビデオゲームを開発するためのシンプルで、完全な、効率的なJavaScriptライブラリです.フェイザー3は初心者のための開発の間、その単純さのために大きいです、そして、それは軽量環境(CPUまたは処理力の多くをとるUnityまたはUnrealと違って)です.ガイドのこの部分では、次のタスクを完了します
  • Installation
  • Importing Library
  • その後、我々は我々が作成しているプロジェクトの詳細にどのように我々の最初の“Hello World”フェイザーで(私を信じて、それは音よりも刺激的です)を実行する方法に我々はダイビングに通過します.
    必要なのは、
  • 基本的なHTML - CSSの知識
  • オブジェクト指向プログラミング技術(必須ではないJavaScript )
  • ノード.あなたのマシンにインストールされているJS(コンパイルと実行に必要なパッケージをインストールする必要があります)
  • テキスト/コードエディタ
  • そのすべてが終わったら、始めましょう!

    インストール

    There are many ways for installing Phaser 3 into your machine:

  • NPM
  • Source code
  • JS File
  • CDN
  • それぞれの利点と結果がありますが、それは別のセクションや記事です.今のところちょうどあなたのために最適なものを選択します.
    NPM
    Phaser 3 is available through the
    NPM Registry ですから、プロジェクトフォルダに行って実行する必要があります.npm install phaserコンソールから!
    そして、それは基本的にそれです!インストールが完了したら、他のメソッドをスキップしてhow to import the library.
    Source Code
    This library is Open Source which means it's source code is free to download and edit from a public repository (Github in this case). You can either download the zip/tar.gz file from the
    Phaser 3 Repository または、GPOを使用してプロジェクトにREPOをクローン化できます.git clone https://github.com/photonstorm/phaser.gitまたはGithub's CLI ツールを実行するだけです.gh repo clone photonstorm/phaserその後、私たちが後でインポートするファイルが呼ばれることを心に留めてくださいphaser.js ロケーションphaser/dist/phaser.js . これを行うと右に行くことができますhow to import the Phaser 3 library.
    JS File
    The simplest and easiest way you can install Phaser, it's to just download the js file from here:
    phaser.js
    その後、ちょうどあなたのプロジェクトフォルダにライブラリを含めると.完了!
    CDN
    For those who don't know, a CDN (Content Delivery Network) is used to import library (an almost infinite amount of libraries) from the internet without needing to install them locally! Lucky for us, Phaser has it's own CDN! Installing it is easy, you just need to go to the index.html file (or your main html file) and included into the browser's <head> tag as a <scrpt src="$PHASER_LIBRARY_CDN>
    <html>
       <head>
          <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
       </head>
       <body>
        ...
       </body>
    </html>
    
    Now with any of these installation methods, you can now start importing the library

    ライブラリのインポート

    With which ever method you chose! There are two main ways of importing the library:

  • Requiring the library using commonjs
  • Include into the HTML file
  • Require inside javascript file

    If you are familiar with commonjs, than you know that when we talk about importing the library, we are actually requiring it's contents into a variable. This variable will have ALL the functionality we need from the library.

    If you installed through npm, then you can simply write this into your main javascript file:

    const Phaser = require('phaser');
    

    If you installed through github or just downloaded the javascript file, you basically do the same step, but specifying the library's directory:

    With Github, it's highly likely that you import the library like this:

    const Phaser = require('./phaser/dist/phaser.js');
    

    Or if you downloaded the phaser.js file into a custom directory then you would import the library like this:

    const Phaser = require('./path/to/library/phaser');
    //REPLACE 'path/to/library/' WITH THE PHASER DIRECTORY
    

    Regarding which step you chose, you would actually need a bundling tool to compile your code (we will get into bundling in another section, so don't worry yet).

    Including in HTML file This step was already done in the CDN install しかし、もちろん、これはあなたが使用したインストール方法に関して異なっています.
    基本的には、あなたのフェイザーが含まれます.JSスクリプト<head> を使用してHTMLファイルのタグ<script src="src"> どこ"src" あなたのフェイザーライブラリです.
    NPMを使うならば
    <html>
       <head>
          <script src="./node_modules/phaser/dist/phaser.js"></script>
       </head>
       <body>
        ...
       </body>
    </html>
    
    を使用している場合、
    <html>
       <head>
          <script src="./phaser/dist/phaser.js"></script>
       </head>
       <body>
        ...
       </body>
    </html>
    
    あなたがフェイザーを保存するならば.カスタムディレクトリへのjsファイル
    <html>
       <head>
          <script src="./path/to/library/phaser.js"></script>
       </head>
       <body>
        ...
       </body>
    </html>
    
    そしてそれで、あなたはすべて完了です.

    私たちが学んだこと


    この部分では、我々のゲームを作成するために必要な基本的な要件を学び、どのように必要なライブラリをインストールするには、どのように我々のプロジェクトにライブラリをインポートします.インPart 1 我々は、プロジェクトが我々の“Hello World”プログラムを作成します.
    重要: CommonJSを使用してライブラリをインポートする場合require("$PHASER_LIBRARY") ), それからPart 0.5 Browserifyを使用して基本的なバンドルを学ぶ.