Jump to content

Phaser in interaction with php


P4nch0
 Share

Recommended Posts

Hello,

in my project i want to create a game which will be support and save with php and MySql.
In my first step i created login script and i want to show game window when player is singed in and i have a problem, beccause my game window is disappearing when it is loading. I really dont know why, meybe i am wrong in use php and phaser. When someone can help me i will be very grateful.
How it work You can look on my page http://lifetime.cba.pl when You sing in on login: admin and password: admin
My code where i check sign and show game look like this:
 

<?phpinclude 'config.php';db_connect(); check_login(); // pobieramy dane usera$user_data = get_user_data(); echo '<center><p>Witaj <b>'.$user_data['user_name'].'</b>!</p>    <p>Jestes w strefie tylko dla zalogowanych.</p>    <p>[<a href="profile.php?id='.$user_data['user_id'].'">Wyswietl swoj profil</a>] [<a href="editprofile.php">Edytuj profil</a>] [<a href="userlist.php">Lista uzytkownikow</a>] [<a href="logout.php">Wyloguj sie</a>]</p>    </center>';db_close();?><!DOCTYPE html><html>	<head>		<meta charset="utf-8" />		<title>Learn Game Development at ZENVA.com</title>		<script type="text/javascript" src="js/phaser.js"></script>		<script type="text/javascript" src="js/Boot.js"></script>		<script type="text/javascript" src="js/Preload.js"></script>		<script type="text/javascript" src="js/Game.js"></script>		<style>		  body {         background-color: silver;		    padding: 0px;		    margin: 0px;		  } 		  </style>	</head>	<body>   <div> 		<!-- include the main game file -->		<script src="js/main.js"></script>    </div>	</body></html>

and check login function:

 

function check_login() {    if(!$_SESSION['logged']) {        die('<p>To jest strefa tylko dla użytkowników.</p>        <p>[<a href="login.php">Logowanie</a>] [<a href="register.php">Zarejestruj się</a>]</p>');    }
Link to comment
Share on other sites

Hello, my wrong was in sign script. When i change it, my game window now is available to see.

My second problem is how to create interactive aplication.
I want to use data base in my phaser game and support it with PHP. How i can convey my variable from php to phaser? I know about can do it with ajax but meybe someone can give me some other solution? Thanks in advance. :)

Link to comment
Share on other sites

Yes, you can read from the database and output it as JSON with PHP. Then using AJAX on the client side you can request the file and parse the JSON in javascript. We can only help you with the javascript/phaser releated things here, you might want to do PHP research on your own! :)

Link to comment
Share on other sites

  • 5 weeks later...

Hey i have problem with use Ajax in phaser. My php file is sending data and i want to get it on my java script.

I have a game.js which is working with game:
 

var TopDownGame = TopDownGame || {};TopDownGame.level = 'podworko';//title screen TopDownGame.Game = function(){}; TopDownGame.Game.prototype = {goToX : 0,goToY : 0,speed : 0.1,action : 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];      });  },  update: function() {    //collision    this.game.physics.arcade.collide(this.player, this.blockedLayer);    this.game.physics.arcade.overlap(this.player, this.items, this.collect, null, this);    this.game.physics.arcade.overlap(this.player, this.doors, this.enterDoor, null, this);    this.game.physics.arcade.overlap(this.player, this.Homedoors, this.enterHomeDoor, null, this);        //player movement    this.player.body.velocity.y = 0;    this.player.body.velocity.x = 0;      if(this.cursors.left.isDown) {      this.player.animations.play('left');          this.player.body.velocity.x -= 50;    }    else if(this.cursors.right.isDown) {      this.player.animations.play('right');           this.player.body.velocity.x += 50;    }        else     {        //  Stand still        this.player.animations.stop();         this.player.frame = 0;    }                if(this.cursors.up.isDown) {      this.player.animations.play('up');       this.player.body.velocity.y -= 50;    }    else if(this.cursors.down.isDown) {      this.player.animations.play('down');       this.player.body.velocity.y += 50;    }  if(Math.round(this.player.x) == Math.round(this.goToX) && Math.round(this.player.y) == Math.round(this.goToY)) {		//this.player.body.velocity.x = 0;		//this.player.body.velocity.Y = 0;		} else {		var distance = this.physics.arcade.distanceToXY(this.player, this.goToX, this.goToY);		var t = distance/this.speed;		if(t < 100) t = 100;		this.physics.arcade.moveToXY(this.player, this.goToX, this.goToY, 0, t);	}	// do ruchu na klick i trzymanie (usunąć do ruchu na klick)	//if (this.input.activePointer.isDown ) {	//	this.goToX = this.input.activePointer.x + this.camera.x;	//	this.goToY = this.input.activePointer.y + this.camera.y; 	//} },     //do ruchu na klick  movesprite: function(pointer) {  		this.goToX = this.input.activePointer.x + this.camera.x;		this.goToY = this.input.activePointer.y + this.camera.y;  },      collect: function(player, collectable) {    console.log('yummy!');    //remove sprite    collectable.destroy();  },  enterDoor: function(player, door) {    TopDownGame.level = door.targetTilemap;    TopDownGame.game.state.start('Game');      },colide: function(player, blockedLayer) {      console.log('colide!');  } };

and my ajax connection which is getting data :

 

 function (){ $(document).ready(function(){        $.ajax({            type:"GET", /*Informacja o tym, że dane będą pobierane*/            url:"start.php", /*Informacja, o tym jaki plik będzie przy tym wykorzystywany*/            contentType:"application/json; charset=utf-8", /*Informacja o formacie transferu danych*/            dataType:'json', /*Informacja o formacie transferu danych*/                             /*Działania wykonywane w przypadku sukcesu*/                success: function(json) { /*Funkcja zawiera parametr*/                                         /*Pętla typu for...in języka Javascript na danych w formacie JSON*/                    for (var klucz in json)                        {                            var wiersz = json[klucz];  /*Kolejne przebiegi pętli wstawiają nowy klucz*/                                 var mapastart = wiersz[0];                                                                                     /*Ustalenie sposobu wyświetlania pobranych danych w bloku div*/                            $("<span> mapastart: "+mapastart+"</span>")                            .appendTo('#wykaz')                            .append("<hr>")                        }                                                                            },                                                  /*Działania wykonywane w przypadku błędu*/                error: function(blad) {                    alert( "Wystąpił błąd");                    console.log(blad); /*Funkcja wyświetlająca informacje                    o ewentualnym błędzie w konsoli przeglądarki*/                }                     });         });       };

Anyone have idea how i can get data from ajax in Phaser script? I wan to load some variables from mysql to the game in phaser. Please help, i will be very gratefull. :)

Link to comment
Share on other sites

Hello, i think about i founded solution but have a wrong yet.

I am trying to use java script code phaser in html file, and there use the phaser:
 

<!DOCTYPE html><html>	<head>		<meta charset="utf-8" />		<title>Learn Game Development at ZENVA.com</title>    		<script type="text/javascript" src="js/phaser.js"></script>        <script type="text/javascript" src="js/jquery.js"></script>    	</head>	<body>var TopDownGame = TopDownGame || {};TopDownGame.level = 'podworko';//title screen TopDownGame.Game = function(){}; TopDownGame.Game.prototype = {goToX : 0,goToY : 0,speed : 0.1,action : 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];      });  },  update: function() {    //collision    this.game.physics.arcade.collide(this.player, this.blockedLayer);    this.game.physics.arcade.overlap(this.player, this.items, this.collect, null, this);    this.game.physics.arcade.overlap(this.player, this.doors, this.enterDoor, null, this);    this.game.physics.arcade.overlap(this.player, this.Homedoors, this.enterHomeDoor, null, this);        //player movement    this.player.body.velocity.y = 0;    this.player.body.velocity.x = 0;      if(this.cursors.left.isDown) {      this.player.animations.play('left');          this.player.body.velocity.x -= 50;    }    else if(this.cursors.right.isDown) {      this.player.animations.play('right');           this.player.body.velocity.x += 50;    }        else     {        //  Stand still        this.player.animations.stop();         this.player.frame = 0;    }                if(this.cursors.up.isDown) {      this.player.animations.play('up');       this.player.body.velocity.y -= 50;    }    else if(this.cursors.down.isDown) {      this.player.animations.play('down');       this.player.body.velocity.y += 50;    }  if(Math.round(this.player.x) == Math.round(this.goToX) && Math.round(this.player.y) == Math.round(this.goToY)) {		//this.player.body.velocity.x = 0;		//this.player.body.velocity.Y = 0;		} else {		var distance = this.physics.arcade.distanceToXY(this.player, this.goToX, this.goToY);		var t = distance/this.speed;		if(t < 100) t = 100;		this.physics.arcade.moveToXY(this.player, this.goToX, this.goToY, 0, t);	}	// do ruchu na klick i trzymanie (usunąć do ruchu na klick)	//if (this.input.activePointer.isDown ) {	//	this.goToX = this.input.activePointer.x + this.camera.x;	//	this.goToY = this.input.activePointer.y + this.camera.y; 	//} },     //do ruchu na klick  movesprite: function(pointer) {  		this.goToX = this.input.activePointer.x + this.camera.x;		this.goToY = this.input.activePointer.y + this.camera.y;  },      collect: function(player, collectable) {    console.log('yummy!');    //remove sprite    collectable.destroy();  },  enterDoor: function(player, door) {    TopDownGame.level = door.targetTilemap;    TopDownGame.game.state.start('Game');      },colide: function(player, blockedLayer) {      console.log('colide!');  } }; // JavaScript Document      	</body></html>   


but i have wrong in my console:

 

SyntaxError: expected expression, got '<'

 

anyone have idea why? Thanks in advance.
 

Link to comment
Share on other sites

  • 10 months later...
On 1/17/2015 at 4:31 AM, Daniel Belohlavek said:

Yes, you can read from the database and output it as JSON with PHP. Then using AJAX on the client side you can request the file and parse the JSON in javascript. We can only help you with the javascript/phaser releated things here, you might want to do PHP research on your own! :)

very nice answer, would you please share with use an working example, if possible. 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...