2016-08-15 8 views
0

Phaser.ioを使用して、少しHTM5ゲームを作ろうとしています。Phaser Typescript関数が起動しない

私は修正できない小さな問題があります。私MainClass(ゲーム)では

、私はちょうど新しいオブジェクト(コイン)を作成し、グループに追加しますループを作成したいです。

しかし、私は、なぜ私は起動しません呼び出す少し機能を知りません。

createCoin(): void { 
    /* 

    generate a coin 

    */ 
    console.log('test'); 

} 

かなりシンプルですが、何も起こりません:

create() { 

    //coins group 
    this.coins = this.game.add.group; 



    //set background 
    this.game.stage.backgroundColor = "#00F6FA"; 
    //load the map 
    this.map = this.game.add.tilemap('level', 195, 195, 2, 4); 
    this.map.addTilesetImage('free-2d-game-tiles-post-pic-1', 'tiles'); 
    //load collision layer 
    this.layer = this.map.createLayer('collision'); 
    //this.layer.debug = true; 
    //make the layer collide 
    this.map.setCollisionBetween(8, 9, true, this.layer.index, true); 
    //enable physics 
    this.game.physics.startSystem(Phaser.Physics.ARCADE); 
    //set the player 
    this.player = new Player(this.game, 0, 0); 


    this.game.time.events.repeat(Phaser.Timer.SECOND * 2, 10, this.createCoin, this); 
} 

そして、ちょうど背後:

は、ここに私のコードです。

私が見逃しているものが見えますか?

EDIT 1:

OKここに私のコードはGitHubの上だ:

https://github.com/c4n4r/coinFall/blob/master/JS/app.ts

私はまだ間違っているのか分からない...

答えて

2

少数thigs。最初に、コード全体が必要です。ゲームをどのように作成し、どのように作成機能をそれに適用しますか? 第2に、thisはdynamiccalyバインドされています。これをオブジェクトにバインドするには、たとえば太矢印の構文:createCoin =() => { ... }を使用します。あなたのthisconsole.log(this)でメソッドを作成する)で ルック - これは、あなたがそれを

は、作業例を見てみましょう:)ことを期待するものではありません。

export default class SimpleGame { 
    private game; 

    constructor() { 
     this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { create: this.create }); 
    } 

    //Used by Phaser to create real game - prepare it. Use fat arrow syntax here! 
    create =() => { 
     this.someInternalMethod(); 
    } 

    //This is ok to make it as normal method, as only bounded this (create) use it 
    private someInternalMethod(){ 
     //Ok! 
    } 
} 

は、単純な(私のソースコードを見てみましょう多くのためのTS &フェイザー)でのゲーム:https://github.com/Ami777/AmyInSpace TS中の脂肪の矢印について

より:この構文についてhttps://basarat.gitbooks.io/typescript/content/docs/arrow-functions.html

続きをI n ES6:https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/

よろしくお願いいたします。JakubKról。

+0

ここに私の完全なコードがあります、あなたの時間をありがとう:https://github.com/c4n4r/coinFall/blob/master/JS/app .ts、おそらく私はTSの知識が不足しているが、私はまだそれを取得しません... –

+0

@HadrienDelphinはい、私のコメントであなたのコードが動作しています。 'preload'、' render'、 'create'、' update'の定義を 'methodName =>()'に変更するだけです。例えば ​​'preload =>(' {'etc)のようになります:) –

+0

これはうまくいっています!ありがとうございました ! –

2

実は私は物事が少し楽に私が思うになるだろうこと、Phaser.Stateを使用することをお勧めします。そして、あなたは活字体でextendsキーワードを使用することができ、このような何か:

class SimpleGame extends Phaser.State { 

    // define your properties for SimpleGame 
    coins: Phaser.Group; 
    //game: Phaser.Game; // <- not needed! SimpleGame extends Phaser.State 
    map: Phaser.Tilemap; 
    // etc 

    // define methods for SimpleGame 
    create() { 
     //.. create code here 
     this.coins = this.add.group(); 

     // 'this' extends type Phaser.State, so notice you can use this.time: 
     this.time.events.repeat(Phaser.Timer.SECOND * 2, 10, this.createCoin, this); 
    } 

    update() { 
     //.. update code here 
    } 

    createCoin() { 
     //.. create a coin 
     var newCoin = new Banana(this, this.world.randomX, 0) 
     this.coins.add(newCoin) 
    } 
} 
関連する問題