Drawing element in phaser after droppable

[P4nch0]

Hello everyone!

 

In my aplication i have done phaser game wich is cooperate with droopable and draggable gui.

When i dropped element from equipment div to div with phaser game screen, console allert me element id from data base.

 

Now i want to draw element in phaser game screen when i dropped it on screen div but dont have ide how. How to  add elements to phaser game from java script function?

 

Anyone have idea?

 

 

How it work You can see on page http://lifetime.cba.pl when You login Login: test, password test, and them klick "graj"

 

Maybe anyone can help

Greets.

[P4nch0]

Any ideas? Maybe i can tell You something else wha can help to start work?

[P4nch0]

I have three files.

 

Index.php where is all html code ang game.js is starting run,

game.js where is code of game,and where elements are adding to the game,

preload.js where is loading files to the game (maps, objects).

 

Now i dont know how to run function from index.php wich add object in preload.js file, and add to the game in game.js file. Maybe now someone will be know how to do it

[drhayes]

Looks like you're using jQuery to handle drag and drop. You need to get your jQuery callback to talk to your Phaser game.

 

I don't think your game is running. I couldn't find a line that says "new Phaser.Game". Check out this example to see what I mean.

[P4nch0]

I know, where i have droopable and know where i can talk it to phaser, but i dont know how. In your example in one file is function preload and create but in my it is in separate file. What function i can use to add object in phaser?

 

This is function where after droppable element on screen i get element id from data base, but now i must tal ma game phaser to add this element.

  $(function() {         $("#TRESC").droppable({      activeClass: 'ui-state-hover',      hoverClass: 'ui-state-active',      drop: function(event, ui) {                     var przedmiotindex = $(ui.draggable).attr("przedmiotindex");       console.log(przedmiotindex);                  }    });  });

Know i have to files:

preload.js where i must add object image:

var TopDownGame = TopDownGame || {};//loading the game assetsTopDownGame.Preload = function(){};TopDownGame.Preload.prototype = {  preload: function() {    //show loading screen    this.preloadBar = this.add.sprite(this.game.world.centerX, this.game.world.centerY, 'preloadbar');    this.preloadBar.anchor.setTo(0.5);        this.load.setPreloadSprite(this.preloadBar);        //load game assets    this.load.tilemap('podworko', 'assets/tilemaps/podworko.json', null, Phaser.Tilemap.TILED_JSON);    this.load.tilemap('home', 'assets/tilemaps/home.json', null, Phaser.Tilemap.TILED_JSON);    this.load.image('gameTiles', 'assets/images/tiles.png');    this.load.image('gameTiles1', 'assets/images/tiles1.png');    this.load.image('gamedungeon', 'assets/images/dungeon.png');    this.load.image('gametowntiles', 'assets/images/towntiles.png');    this.load.image('gamesrodekdom', 'assets/images/srodekdom.png');    this.load.image('greencup', 'assets/images/greencup.png');    this.load.spritesheet('player', 'assets/images/player.png',32,48);    this.load.image('browndoor', 'assets/images/browndoor.png');    this.load.image('homedoor', 'assets/images/homedoor.png');    this.load.image('nasiono', 'assets/images/nasiono.png');      },  create: function() {    this.state.start('Game');  }};// JavaScript Document

and game.js where i have create function:

var TopDownGame = TopDownGame || {};start();//title screen TopDownGame.Game = function(){}; TopDownGame.Game.prototype = {goToX : 0,goToY : 0,speed : 0.1,action : true,lastanimation : '',doubleanim : true,znak : true,   create: function() {        this.map = this.game.add.tilemap(TopDownGame.level);    //the first parameter is the tileset name as specified in Tiled, the second is the key to the asset    this.map.addTilesetImage('tiles1', 'gameTiles1');    this.map.addTilesetImage('tiles', 'gameTiles');    this.map.addTilesetImage('dungeon', 'gamedungeon');    this.map.addTilesetImage('srodekdom', 'gamesrodekdom');    this.map.addTilesetImage('towntiles', 'gametowntiles');    //create layer    this.backgroundlayer = this.map.createLayer('backgroundLayer');    this.blockedLayer = this.map.createLayer('blockedLayer');    //collision on blockedLayer    this.map.setCollisionBetween(1, 5000, true, 'blockedLayer');      //resizes the game world to match the layer dimensions    this.backgroundlayer.resizeWorld();    this.createItems();    this.createDoors();        //create player    var result = this.findObjectsByType('playerStart', this.map, 'objectsLayer')    this.player = this.game.add.sprite(result[0].x, result[0].y, 'player', 5);        this.game.physics.arcade.enable(this.player);    this.player.anchor.set(.5);    this.player.width=15;    this.player.height=20;    //the camera will follow the player in the world    this.game.camera.follow(this.player);               this.physics.startSystem(Phaser.Physics.Arcade);    	//this.input.onDown.add(this.moveSprite, this);    this.goToX = this.player.x + this.camera.x;    this.goToY = this.player.y + this.camera.y;        //do ruchu na klick usunac do ruchu na klick i trzymanie    //this.game.input.onDown.add(this.movesprite, this);    //move player with cursor keys                this.cursors = this.game.input.keyboard.createCursorKeys();        this.player.animations.add('left', [4, 5, 6,7],5, true);    this.player.animations.add('right', [8, 9, 10,11], 5, true);    this.player.animations.add('down', [0, 1, 2,3], 5,true);    this.player.animations.add('up', [12, 13, 14,15], 5,true);        //this.game.input.onDown.add(this.moveSprite, this);  },  createItems: function() {    //create items    this.items = this.game.add.group();    this.items.enableBody = true;    var item;        result = this.findObjectsByType('item', this.map, 'objectsLayer');    result.forEach(function(element){      this.createFromTiledObject(element, this.items);    }, this);  },  createDoors: function() {    //create doors    this.doors = this.game.add.group();    this.doors.enableBody = true;    result = this.findObjectsByType('door', this.map, 'objectsLayer');    result.forEach(function(element){      this.createFromTiledObject(element, this.doors);    }, this);  },  //find objects in a Tiled layer that containt a property called "type" equal to a certain value  findObjectsByType: function(type, map, layer) {    var result = new Array();    map.objects[layer].forEach(function(element){      if(element.properties.type === type) {        //Phaser uses top left, Tiled bottom left so we have to adjust        //also keep in mind that the cup images are a bit smaller than the tile which is 16x16        //so they might not be placed in the exact position as in Tiled        element.y -= map.tileHeight;        result.push(element);      }          });    return result;  },  //create a sprite from an object  createFromTiledObject: function(element, group) {    var sprite = group.create(element.x, element.y, element.properties.sprite);      //copy all properties to the sprite      Object.keys(element.properties).forEach(function(key){        sprite[key] = element.properties[key];      });  },

I made it based on phaser tutorial, and now i want to grow it up. Can You tell me something more how i can add from index.php file object in preload.js file and game.js file?

 

And why You think ma game is not running? Look at page, klick "logowanie" login on login: test password test and them klick "graj" , then game will be run.

[P4nch0]

When i write Your example i see about is using

    game.input.onDown.add(releaseBall, this);

maybe it can be solve, but now how do  it work only when element is draggable, not when it is clicking on element in game.

[P4nch0]

Im am trying so:

 

in index.php run function addelement():

  $(function() {         $("#TRESC").droppable({      activeClass: 'ui-state-hover',      hoverClass: 'ui-state-active',      drop: function(event, ui) {                     var przedmiotindex = $(ui.draggable).attr("przedmiotindex");       console.log(przedmiotindex);                $.getScript( "js/game.js", function() {  addelement();});                      }    });  });

and in game.js in this function try to add element:

        addelement : function(){    console.log("addelement");    }}; 

but now in console i have about addelement is not defined. This is good way? Maybe is more solution?

 

[P4nch0]

Anyone have ideas how to start create it?

[P4nch0]

Maybe i can tell something more what i want to do? Anyone have idea?