P4nch0 Posted January 17, 2015 Share Posted January 17, 2015 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: adminMy 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 More sharing options...
P4nch0 Posted January 17, 2015 Author Share Posted January 17, 2015 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 More sharing options...
Daniel Belohlavek Posted January 17, 2015 Share Posted January 17, 2015 Quick response here: You could use AJAX or Websockets. Since you are using PHP, AJAX is probably the way to go, it'll allow you to receive and send updates to the server without the need to reload the page. Link to comment Share on other sites More sharing options...
P4nch0 Posted January 17, 2015 Author Share Posted January 17, 2015 Thanks for replay And You think it can give me a posibility to use variable from data base in java script in phaser? Link to comment Share on other sites More sharing options...
Daniel Belohlavek Posted January 17, 2015 Share Posted January 17, 2015 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! P4nch0 and shohan4556 2 Link to comment Share on other sites More sharing options...
P4nch0 Posted February 16, 2015 Author Share Posted February 16, 2015 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 More sharing options...
P4nch0 Posted February 17, 2015 Author Share Posted February 17, 2015 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 More sharing options...
shohan4556 Posted January 12, 2016 Share Posted January 12, 2016 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 More sharing options...
Recommended Posts