Jump to content

Drawing element in phaser after droppable

Recommended Posts

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 :)


Link to post
Share on other sites

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 :)

Link to post
Share on other sites

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.

Link to post
Share on other sites

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?


Link to post
Share on other sites
  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...