Phaserjs基礎チュートリアル第1節:Phaserjsを認識する
7216 ワード
一、初歩的な認識Phaser
Phaserとは?どんな特徴がありますか?何ができるの?なぜそれを選んだのですか?新しいことを学ぶたびに、私はまずこのいくつかの問題を理解します.このようにしてこそ、私が学ぶことが何なのか、なぜそれを学ぶのか、Phaserにとっても、同じように、私は皆さんが先にこのいくつかの問題を理解することをお勧めします.あなたの答えは必ずしも正確ではありませんが、あなたがそれを学ぶのに役立ちます.
Phaserとは?
簡単に言えばPhaserは無料オープンソースのHTML 5ゲームフレームワークです
どんな特徴がありますか?
高性能:高速、無料、メンテナンスが容易.一方,開発者はKodingプラットフォーム上のVM開発システムを直接介してコード作成およびプレビューを行うことができる.一方,Canvas対応のブラウザに直接Phaserをインストールしてゲーム開発を行うことも可能である.
さまざまなサポート:JavaScript、Type-Scriptの二重サポート、内蔵ゲームオブジェクトの物理属性、WebGL、Canvasレンダリングの自由切り替え、Webオーディオの完全サポート、入力:マルチタッチ、キーボード、マウス、MSPointerイベント.
互換性が高い:IE 9+、Firefox、Chrome、Safari、Operaなどのデスクトップブラウザのほか、PhaserはMobile Chrome(Android 2.2+)やMobile Safari(iOS 5+)などのモバイルブラウザをサポートしている.Phaserを使ったゲーム開発には言語設定は一切ありません.
(注:特徴内容はPhaser中国語ネット、URL:http://www.phaserengine.com/ああ、英语のAPIに惯れていない学生はここの翻訳を参考にすることができますが、ここの翻訳はあまりそろっていないことに注意しなければなりません.また、一部の翻訳は直接道の疑いがあります.もし読めないなら、直接公式サイトに行って原文を探して自分で翻訳しましょう.公式サイトのアドレス:http://phaser.io/ああ、上のlearnを直接クリックして勉強を始めることができます.)
何ができるの?これは簡単です.H 5ゲームをするのはとても便利です.
なぜそれを選んだのですか?統計によると、2016年に最も人気のある15種類のhtml 5ゲームエンジン」(原文アドレス:https://www.diycode.cc/topics/16文章に見えるjsはpixiで2位だった.jsとegret.jsより前で、1位のthree.jsの学習の難易度と周期は比較的に高くて、人気の程度から言えば、もちろんphaserを優先します.jsは、html 5ゲームの開発に専念したり、発展の意向があれば、これらを深く学ぶことができます.もう一つ注目すべきはegret.jsは国内で開発されたH 5フレームワーク、すなわち俗称の白鷺であり、北京白鷺時代情報技術有限会社から来ており、間違いなく、中国人が開発したフレームワーク、中国語APIが最も読みやすく、興味のある学生もこのフレームワークを優先することができる.
二、Phaserの使い方
Phaserフレームワークを使用する方法は簡単で、phaserを直接参照します.jsでいいです.もちろん、これは2に限られます.xバージョンは、nodeを使用して環境を構築する場合はPhaser 3を使用できますが、このチュートリアルは2.xバージョン.
もう一つ注意しなければならないのはphaserですjsは大きく、2.7.0バージョンを例にとると、非圧縮バージョンは3128 KB、圧縮後も781 KBあるので、ローカルデバッグのほか、できるだけ圧縮バージョンを使用して、ロード速度を向上させることができます.
三、Phaserオブジェクト
Phaserフレームワークはゲームに必要な様々な素材やデバイスに豊富な機能を提供しています.これらの機能はすべてPhaserオブジェクトに含まれています.あるいは、Phaserフレームワークの学習は実際にはPhaserオブジェクトの学習です(このくだらない話を許してください).私が言いたいのは、コードにconsole eを入力してください.log(Phaser);あなたはPhaserについて大まかな理解を持っています.
四、簡単なゲームシーンを作成する
Phaserを使ってゲームを作成するのはとても簡単で、私は2つのコードを貼って、まずページの内容で、簡単なdivコンテナが1つしかなくて、プラグインと私たちが書いたコードをロードしました:
このコードの意味は簡単で、Phaserを作成します.gameオブジェクト.このオブジェクトにはいくつかのパラメータが含まれています.
800:ゲームビュー領域の幅(px)
600:ゲームビュー領域の高さ(px、ここでは文字列も使用できますが、文字列は0-100の数字で、パーセントに変換されます)
Phaser.Canvas:ゲームのレンダリングモードで、他の選択可能な値はPhaserです.AUTO,Phaser.WEBGL,Phaser.HEADLESS(このモードの公式翻訳は少しもレンダリングする必要はありません.使用後はゲームエリアが見つかりません.私もこのモードの存在の意味が分かりません)、デフォルト値はPhaserです.AUTO
'phaser-example':ゲームエリアのコンテナid
{preload:preload,create:create}:これはゲームの様々な状態であり、各状態は異なる方法を呼び出す.上記のコードに示すように、実際にはここの状態は多くあり得る.すでに提供されているpreload(プリロード)、create(作成)のほか、init、update、renderなどが選択できる.以下で詳細を説明する.
実は、完全なGameオブジェクトはこうです.
newGame(width, height, renderer, parent, state, transparent, antialias,physicsConfig),
上記の説明に加えて、transparent(背景が透明)、antialias(鋸歯を除去)、physicsConfig(物理エンジン設定)があります.これらは現在一般的にデフォルト値を採用しており、しばらく処理しないでください.
五、ゲームのすべての状態
このセクションの最後に、gameのすべての状態を学び、まず次のコードを見てみましょう.
上のコードでは、gameのすべてのステータスをリストし、4つのボタンを追加して簡単な操作を行いました.停止、継続、サイズの調整、破棄、ブラウザウィンドウの新規作成、コンソールの開き、ページアドレスの入力、車の戻り、コンソールの出力内容の表示、いくつかの問題を見つけることができます.
一部の方法では、init、preload、loadUpdate、createのように1回しかトリガーされませんが、update、preRenderer、renderのような呼び出しが続いています.停止をクリックすると、pauseUpdate、preRenderer、renderも印刷され、破棄をクリックすると停止します.
ここまで言うと、ロード、作成のようなイベントは1回の呼び出しで、プリレンダリング、レンダリング、更新のイベントはずっと呼び出されているので、コードを書く過程で、イベントがトリガーされる場所に注意しなければならない理由が考えられます.
このセクションの内容は主にPhaserを理解することです.jsというフレームワークでは、以下のリンクを参照してください.
Gitアドレス:https://github.com/photonstorm/phaser
公式インスタンスライブラリのアドレス:https://github.com/photonstorm/phaser-examples(phaser 2.xの複数バージョンを含むdemoと対応する素材をいくつか提供し、合計200 Mに近い)
公式サイトのアドレス:http://phaser.io/(公式サイトのAPIは非常に詳細で、各オブジェクトの属性と方法を詳しくリストしています)
Phaser中国語サイト:http://www.phaserengine.com/
このセクションでは、Phaserjsの特徴、利点、基礎的な流れを簡単に理解します.次のセクションでは、Phaserjsでゲームを作ることを正式に学びます.
Phaserとは?どんな特徴がありますか?何ができるの?なぜそれを選んだのですか?新しいことを学ぶたびに、私はまずこのいくつかの問題を理解します.このようにしてこそ、私が学ぶことが何なのか、なぜそれを学ぶのか、Phaserにとっても、同じように、私は皆さんが先にこのいくつかの問題を理解することをお勧めします.あなたの答えは必ずしも正確ではありませんが、あなたがそれを学ぶのに役立ちます.
Phaserとは?
簡単に言えばPhaserは無料オープンソースのHTML 5ゲームフレームワークです
どんな特徴がありますか?
高性能:高速、無料、メンテナンスが容易.一方,開発者はKodingプラットフォーム上のVM開発システムを直接介してコード作成およびプレビューを行うことができる.一方,Canvas対応のブラウザに直接Phaserをインストールしてゲーム開発を行うことも可能である.
さまざまなサポート:JavaScript、Type-Scriptの二重サポート、内蔵ゲームオブジェクトの物理属性、WebGL、Canvasレンダリングの自由切り替え、Webオーディオの完全サポート、入力:マルチタッチ、キーボード、マウス、MSPointerイベント.
互換性が高い:IE 9+、Firefox、Chrome、Safari、Operaなどのデスクトップブラウザのほか、PhaserはMobile Chrome(Android 2.2+)やMobile Safari(iOS 5+)などのモバイルブラウザをサポートしている.Phaserを使ったゲーム開発には言語設定は一切ありません.
(注:特徴内容はPhaser中国語ネット、URL:http://www.phaserengine.com/ああ、英语のAPIに惯れていない学生はここの翻訳を参考にすることができますが、ここの翻訳はあまりそろっていないことに注意しなければなりません.また、一部の翻訳は直接道の疑いがあります.もし読めないなら、直接公式サイトに行って原文を探して自分で翻訳しましょう.公式サイトのアドレス:http://phaser.io/ああ、上のlearnを直接クリックして勉強を始めることができます.)
何ができるの?これは簡単です.H 5ゲームをするのはとても便利です.
なぜそれを選んだのですか?統計によると、2016年に最も人気のある15種類のhtml 5ゲームエンジン」(原文アドレス:https://www.diycode.cc/topics/16文章に見えるjsはpixiで2位だった.jsとegret.jsより前で、1位のthree.jsの学習の難易度と周期は比較的に高くて、人気の程度から言えば、もちろんphaserを優先します.jsは、html 5ゲームの開発に専念したり、発展の意向があれば、これらを深く学ぶことができます.もう一つ注目すべきはegret.jsは国内で開発されたH 5フレームワーク、すなわち俗称の白鷺であり、北京白鷺時代情報技術有限会社から来ており、間違いなく、中国人が開発したフレームワーク、中国語APIが最も読みやすく、興味のある学生もこのフレームワークを優先することができる.
二、Phaserの使い方
Phaserフレームワークを使用する方法は簡単で、phaserを直接参照します.jsでいいです.もちろん、これは2に限られます.xバージョンは、nodeを使用して環境を構築する場合はPhaser 3を使用できますが、このチュートリアルは2.xバージョン.
もう一つ注意しなければならないのはphaserですjsは大きく、2.7.0バージョンを例にとると、非圧縮バージョンは3128 KB、圧縮後も781 KBあるので、ローカルデバッグのほか、できるだけ圧縮バージョンを使用して、ロード速度を向上させることができます.
三、Phaserオブジェクト
Phaserフレームワークはゲームに必要な様々な素材やデバイスに豊富な機能を提供しています.これらの機能はすべてPhaserオブジェクトに含まれています.あるいは、Phaserフレームワークの学習は実際にはPhaserオブジェクトの学習です(このくだらない話を許してください).私が言いたいのは、コードにconsole eを入力してください.log(Phaser);あなたはPhaserについて大まかな理解を持っています.
四、簡単なゲームシーンを作成する
Phaserを使ってゲームを作成するのはとても簡単で、私は2つのコードを貼って、まずページの内容で、簡単なdivコンテナが1つしかなくて、プラグインと私たちが書いたコードをロードしました:
ExamplesTest-pharser.js
var game = newPhaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload,create: create });
functionpreload() {
console.log("preload");
}
functioncreate() {
console.log("create");
}このコードの意味は簡単で、Phaserを作成します.gameオブジェクト.このオブジェクトにはいくつかのパラメータが含まれています.
800:ゲームビュー領域の幅(px)
600:ゲームビュー領域の高さ(px、ここでは文字列も使用できますが、文字列は0-100の数字で、パーセントに変換されます)
Phaser.Canvas:ゲームのレンダリングモードで、他の選択可能な値はPhaserです.AUTO,Phaser.WEBGL,Phaser.HEADLESS(このモードの公式翻訳は少しもレンダリングする必要はありません.使用後はゲームエリアが見つかりません.私もこのモードの存在の意味が分かりません)、デフォルト値はPhaserです.AUTO
'phaser-example':ゲームエリアのコンテナid
{preload:preload,create:create}:これはゲームの様々な状態であり、各状態は異なる方法を呼び出す.上記のコードに示すように、実際にはここの状態は多くあり得る.すでに提供されているpreload(プリロード)、create(作成)のほか、init、update、renderなどが選択できる.以下で詳細を説明する.
実は、完全なGameオブジェクトはこうです.
newGame(width, height, renderer, parent, state, transparent, antialias,physicsConfig),
上記の説明に加えて、transparent(背景が透明)、antialias(鋸歯を除去)、physicsConfig(物理エンジン設定)があります.これらは現在一般的にデフォルト値を採用しており、しばらく処理しないでください.
五、ゲームのすべての状態
このセクションの最後に、gameのすべての状態を学び、まず次のコードを見てみましょう.
var game = newPhaser.Game(800, 600, Phaser.AUTO, 'phaser-example',
{ init: init,
preload: preload,
loadUpdate: loadUpdate,
loadRender: loadRender,
create: create,
update: update,
preRender: preRender,
render: render,
resize: resize,
paused: paused,
resumed: resumed,
pauseUpdate: pauseUpdate,
shutdown: shutdown });
functioninit() {
console.log("init");
console.log(Phaser);
console.log(game);
}
functionpreload() {
console.log("preload");
}
functionloadUpdate() {
console.log("loadUpdate");
}
functionloadRender() {
console.log("loadRender");
}
functioncreate() {
console.log("create");
}
functionupdate() {
console.log("update");
}
functionpreRender() {
console.log("preRender");
}
functionrender() {
console.log("render");
}
functionresize() {
console.log("resize");
}
functionpaused() {
console.log("paused");
}
functionresumed() {
console.log("resumed");
}
functionpauseUpdate() {
console.log("pauseUpdate");
}
functionshutdown() {
console.log("shutdown");
}
var body =document.getElementsByTagName('body')[0];
//
varpauseButton = document.createElement("input");
pauseButton.setAttribute('type','button');
pauseButton.setAttribute('name','Pause');
pauseButton.setAttribute('value','Pause');
pauseButton.οnclick= function(){
game.paused = true;
}
body.appendChild(pauseButton);
//
varresumeButton = document.createElement("input");
resumeButton.setAttribute('type','button');
resumeButton.setAttribute('name','Resume');
resumeButton.setAttribute('value','Resume');
resumeButton.οnclick= function(){
game.paused = false;
}
body.appendChild(resumeButton);
//
varresizeButton = document.createElement("input");
resizeButton.setAttribute('type','button');
resizeButton.setAttribute('name','Resize');
resizeButton.setAttribute('value','Resize');
resizeButton.οnclick= function(){
game.world.resize(600, 400);
}
body.appendChild(resizeButton);
//
varshutdownButton = document.createElement("input");
shutdownButton.setAttribute('type','button');
shutdownButton.setAttribute('name','Shutdown');
shutdownButton.setAttribute('value','Shutdown');
shutdownButton.οnclick= function(){
game.destroy();
}
body.appendChild(shutdownButton);上のコードでは、gameのすべてのステータスをリストし、4つのボタンを追加して簡単な操作を行いました.停止、継続、サイズの調整、破棄、ブラウザウィンドウの新規作成、コンソールの開き、ページアドレスの入力、車の戻り、コンソールの出力内容の表示、いくつかの問題を見つけることができます.
一部の方法では、init、preload、loadUpdate、createのように1回しかトリガーされませんが、update、preRenderer、renderのような呼び出しが続いています.停止をクリックすると、pauseUpdate、preRenderer、renderも印刷され、破棄をクリックすると停止します.
ここまで言うと、ロード、作成のようなイベントは1回の呼び出しで、プリレンダリング、レンダリング、更新のイベントはずっと呼び出されているので、コードを書く過程で、イベントがトリガーされる場所に注意しなければならない理由が考えられます.
このセクションの内容は主にPhaserを理解することです.jsというフレームワークでは、以下のリンクを参照してください.
Gitアドレス:https://github.com/photonstorm/phaser
公式インスタンスライブラリのアドレス:https://github.com/photonstorm/phaser-examples(phaser 2.xの複数バージョンを含むdemoと対応する素材をいくつか提供し、合計200 Mに近い)
公式サイトのアドレス:http://phaser.io/(公式サイトのAPIは非常に詳細で、各オブジェクトの属性と方法を詳しくリストしています)
Phaser中国語サイト:http://www.phaserengine.com/
このセクションでは、Phaserjsの特徴、利点、基礎的な流れを簡単に理解します.次のセクションでは、Phaserjsでゲームを作ることを正式に学びます.