tanaka's Programming Memo

プログラミングについてのメモ。

Phaserをサンドボックスで試す(7)文字の表示とスコアの実装

Phaser JavaScript

f:id:am1tanaka:20170417231648p:plain

前へ

仕上げに、文字を表示して、スコアを実装します。Phaser公式チュートリアルのMaking your first Phaser game: Part 8 - Finishing touches - Learn - Phaserを参考にして進めます。

(6)星を作成するの続きです。

先のサンドボックスを閉じてしまっていたら、こちらを右クリックして[新しいウィンドウで開く]で開いて、作業を始めてください。

スコアの定義と文字の表示

createタブを開いて、以下の場所に必要な変数を定義します。

f:id:am1tanaka:20170418180948p:plain

追加するコードは以下の通りです。

// 9:
// (A Valiable of the score)
var score = 0;
// (A Valiable of the Text)
var scoreText;

文字を表示するテキストを作成して、変数scoreTextに代入します。一番上に表示したいので、function create() {の最後に追加します。

f:id:am1tanaka:20170418181137p:plain

追加するのは以下のコードです。

    // 86:
    scoreText = game.add.text(12, 12, 'Score: 0', { font: "24px", fill: "#000" });

左から12ピクセル、上から12ピクセルの座標に、Score: 0と表示するテキストを作成して、変数scoreTextに代入します。フォントサイズは24ピクセル、黒で塗りつぶします。

PLAYタブに切り替えて画面を確認してください。文字が表示されます。

f:id:am1tanaka:20170417223847p:plain

スコアを加算する

星を取った時に、点数が10点入るようにします。どこにプログラムを書き足せばよいでしょうか？

星を取った時に、星を消すコードを前の記事で書きました。その場所にスコアを10点増やすコードを追加すれば、目的を達することができそうです。

updateタブを開いて、関数collectStar内の以下の場所に、点数を加算するコードを追加します。

f:id:am1tanaka:20170418181400p:plain

追加するコードは以下の通りです。

    // 44:
    //  Add and update the score
    score += 10;
    scoreText.text = 'Score: ' + score;

PLAYタブに切り替えたら、星を集めてください。点数が加算されます。

f:id:am1tanaka:20170417231648p:plain

コードを書く場所を工夫することで、自動的に「星をとった時」に点数を加算することができました。プログラミングは、「どこに」「どのような順番で」コードを書くかによって、同じコードでも意味が変わることがあるのです。

ここまでのまとめ

このチュートリアルは、これで完成です。利用する画像の指定の仕方、画像やパターンを持ったスプライトの読み込み、グループの作成、スプライトの表示、物理エンジンの活用、キー操作方法、キャラクターが重なった時の処理、文字の表示方法など、多くのことを実装してきました。これを応用すれば、もっと色々なことができるでしょう。例えば、クリアやゲームオーバー要素がありません。星と同様の方法で障害物を作成して、プレイヤーと重なったらプレイヤーを削除するようにすればゲームオーバーが作れます。あるいは、ゲームオーバー要素はなくして、以下に短い時間で星を全て集められるかを競うようにすることも考えられます。発想を広げるための画像が http://examples.phaser.io/assets/ に用意されています。

ここで示したチュートリアル以外にも、コミュニティーで作成された700を越えるチュートリアル(Tutorial - Learn - Phaser)や、公式チュートリアル(Official Phaser Tutorials - Learn - Phaser)が公式サイトで公開されています。自分が作りたいゲームに近いものを探したり、似た処理をしているサンプルを探して、どのようにプログラムが作られているかを知ることができます。

Phaser Forumに疑問や質問を書き込めば、コミュニティーの人たちが助けてくれるかも知れませんので活用してみてください（英語ですが）。

完成版

以下、完成版のサンドボックスプロジェクトです。

完成版

最後に

Phaserで思い通りにゲームを作るには、JavaScriptというプログラミング言語の理解が必要になります。基礎を独学で学べる便利なサービスがありますので紹介します。

Phaserは安価なPCでも動かすことができる、モダンなゲームエンジンです。英語の情報が多いですが、サンプルのプログラムは沢山ありますので、プログラムを見て勉強することができるでしょう。

前へ

参考URL