フェイザーで最初にtoppestをドラッグした後、queのタイル（オブジェクト/スプライト）を無制限にスタック

Question

私はフェイザーを使ってゲームを作っています。タイルは無制限にタイルを重ねるように考えることができます。ユーザーが一番上のタイルをドラッグしてドロップ領域に配置すると、その下の同じタイルが表示され、ドラッグ可能でなければなりません。

私の現在のコード： - `

var greenTile = this.add.sprite(250,500,'greenTile');  
        greenTile.inputEnabled=true; 
        greenTile.input.enableDrag(); 
        greenTile.events.onDragStart.add(onDragStart, this); 
        greenTile.events.onDragStop.add(onDragStop, this);` 

総コードは私のゲームの状態であるが、次のとおりです。 - `

var patternsRatio = patternsRatio || {}; 
var x = 50; 
var y = 100; 
var canvas; 
var canvasBG; 
var canvasGrid; 
var canvasSprite; 
var canvasZoom = 32; 
var spriteWidth = 8; 
var spriteHeight = 8; 
patternsRatio.game1 = function() {}; 
patternsRatio.game1.prototype = {   
    preload: function() { 
    this.load.image('greenTile','assets/images/greentile.png') 
    this.load.image('redTile','assets/images/redtile.png') 
    }, 
    create: function() { 
     this.game.stage.setBackgroundColor(0x2d2d2d); 
     var question_l1 = "Puzzle 1: Enlarge this pattern by a factor of 2." 
     var style_l1 = {font: "25px Comic Sans MS Bold", fill: "#fff", align:"center"}; 
     var quet_l1=this.game.add.text(this.game.world.centerX,this.game.height-600, question_l1, style_l1) 
     quet_l1.anchor.setTo(0.5) 
     this.placetiles() 

     var greenTile = this.add.sprite(250,500,'greenTile');  
     greenTile.inputEnabled=true; 
     greenTile.input.enableDrag(); 
     greenTile.events.onDragStart.add(onDragStart, this); 
     greenTile.events.onDragStop.add(onDragStop, this); 

     var redTile = this.add.sprite(100,500,'redTile'); 
     redTile.inputEnabled=true; 
     redTile.input.enableDrag(); 
     redTile.events.onDragStart.add(onDragStart, this); 
     redTile.events.onDragStop.add(onDragStop, this); 


}, 
    update: function() { 

}, 
    placetiles: function() { 
     this.game.create.grid('drawingGrid', 16 * canvasZoom, 16 * canvasZoom, canvasZoom, canvasZoom, 'rgba(0,191,243,0.8)'); 
     canvas = this.game.make.bitmapData(spriteWidth * canvasZoom, spriteHeight * canvasZoom); 
     canvasBG = this.game.make.bitmapData(canvas.width + 2, canvas.height + 2); 

     canvasBG.rect(0, 0, canvasBG.width, canvasBG.height, '#fff'); 
     canvasBG.rect(1, 1, canvasBG.width - 2, canvasBG.height - 2, '#3f5c67'); 

     var x = 80; 
     var y = 64; 

     canvasBG.addToWorld(x, y); 
     canvasSprite = canvas.addToWorld(x + 1, y + 1); canvasZoom,canvasZoom 
     canvasGrid = this.game.add.sprite(x + 1, y + 1, 'drawingGrid'); 
     canvasGrid.crop(new Phaser.Rectangle(0, 0, spriteWidth * canvasZoom, spriteHeight * canvasZoom)); 

     } 

}; 

` 

私はinput.enableを追加していたときに私はまた、問題に直面しています"greenTile"変数の下にコードを書くと、redTileは消えます。これがなぜ起こるのかを知ることができます。 In the image below as we can see both red and green tile are appearing.

In this image as we can i had added input enable and the red Tile stopped appearing, Secondly as have dragged the green tile to the grid, i want on the original place their should be again the greenTile should come.(this is in reference to the stack able unlimited tile question)

Answer 1

私だけの機能を追加し、以下のようにドラッグ開始イベントでそれを呼び出すことによって、これを理解できます -

私が追加された機能は以下のとおりです。 -

addGreenTiles: function(){ 

    this.greenTile1 = this.add.sprite(250,500,'greenTile'); 
    this.greenTile1.inputEnabled=true; 
    this.greenTile1.input.enableSnap(canvasZoom, canvasZoom, false, true); 
    this.greenTile1.input.enableDrag(); 
    this.greenTile1.originalPosition = this.greenTile1.position.clone(); 
    this.greenTile1.events.onDragStart.add(this.addGreenTiles, this); 
    this.greenTile1.events.onDragStop.add(function(currentSprite){ 
      this.stopDrag(currentSprite, this.greenTile1); 
}, this); 

私はこの機能を次のところで呼び出しました：

this.greenTile1.events.onDragStart.add(this.addGreenTiles, this);