Search the Community

Hi, I'm looking for a method to save the progress of my game. I already use localstorage but I would like to know if there is better system. Thank you.

Hello Guys! First of all, this is my first topic! I've read some of your questions and answers, and most of them have helped me a lot with Phaser 2 to 3 update. Thanks a lot for all the hard work. But, I have some questions. Right now I'm updating one of my games from Phaser 2 to Phaser 3, and wow its a lot of classes updates. and logic changes. But I need a suggestion in one of them. In Phaser 2, I extended the Phaser.Game class to save some data on it (most of it its configuration data), and I could access it from ANYWHERE in my classes and states. Now in Phaser 3, with the scene logic introduction and game (world) not even accessible (well, I could with Scene Injection Map, but you don't recommend it), I can't reach this data. To make this data 'globally" accessible again, I thought maybe creating an immortal scene should be enough, or maybe an object out of phaser 3 logic. Is this a correct approach? Am I missing something that could make this easier?

Hey Guys I am currently struggling significantly with a task, I have my canvas with 38 sprites in, which you pan across each is set up with these values; staffnum = 38; staffs[staffnum].name = "Dave"; staffs[staffnum].description = "Description: Dave is cool"; staffs[staffnum].title = "Title: Dave's Title" staffs[staffnum].image = "Images/TinyPNG/Dave.png"; staffs[staffnum].department = "Dave's Tech" staffs[staffnum].position.x = 23.3; staffs[staffnum].position.z = -0.2; staffs[staffnum].position.y = 5.65; staffs[staffnum].isPickable = true; staffs[staffnum].size = 3; I currently run through the array and can pull the data values for each.name .description and so on... with a mouse click, so when you click a sprite it opens a modal box in html over the top of the canvas with that image and the values pulled through and displayed, then you can close the box and return to canvas. The task I am trying to accomplish, is when my mouse cursor is hovering over someone, i want to display there .name and .title value that's being created in my js file through and display above the cursor so you can see who you are hovering over basically. I currently cannot find a way of completing this task, if anyone could make a simple playground, code pen, whatever platform with a small demo of this in affect that I could use to understand and then apply to my work? My build is seperated into multiple files currently so making a babylon playground isnt possible, but if need be i can provide a link to my build folder for download, THANKSSSS Mezz

Hi, sorry for very noobish question I have my phaser game.js file which have reached more than 700 lines of code. I want to divide it into documents containing f.e. only create function, update, variables and other functions. I thought this will work: <div id="game"> <script type="text/javascript" src="game.js"></script> <script type="text/javascript" src="create.js"></script> <script type="text/javascript" src="update.js"></script> <script type="text/javascript" src="functions.js"></script> </div> But error, create function not found. In game.js it look like this: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { (...) } function create() { (...) } function update() { (...) } functions....

How do populate and retrieve data to and from the sprite's data object? Let's say I want to save Player's stats (speed, attack, health) in it and then retrieve it later. var Player = function (game) { this.data = { 'speed': 1, 'attack': 1, 'health': 1 }; Phaser.Sprite.call(this, game, 0,0); }; Player.prototype = Object.create(Phaser.Sprite.prototype); Player.prototype.constructor = Player; Player.prototype.update = function() { console.log(this.data.speed); };

I am trying to store from this code: Potato.upgradeButtonsData = [ {icon: '1stUpgrade', PIcon: 'potato4Upgrade', background: 'upgradeBg', themeText: "", name: '', level: 1, cost: 100, pas: 100, purchaseHandler: function(button, player){ Potato.player.clickDmg += 0.2; }}, But the problem is that when I try it either says "Nan" or will just do nothing. I am using localStorage because i could not get the store.js thing to work. And if you have to store all the items(by all the items i just mean (level, cost and pas)) like an Array then I dont know how to. I am pretty new to Phaser This is the code I am using to store the items in the list: if(localStorage.getItem('numL') === null){ console.log("Creating localStorage 'numL"); localStorage.setItem('numL', Potato.upgradeButtonsData.level); } if(Potato.upgradeButtonsData.level >= 1){ Potato.upgradeButtonsData.level = localStorage.getItem('numL'); } Potato.upgradeButtonsData.level = parseInt(localStorage.getItem('numL')); And in the update method: localStorage.setItem('numL', Potato.upgradeButtonsData.level); Any help would be awesome! EDIT: I have more than 1 item in the lists in my actual code, this is just an example

I checked this topic here: http://www.html5gamedevs.com/topic/3242-unit-testing-a-phaser-application/#comment-21011 It doesn't seem there are some updates. I have html form with data and I would like to test reset function i.e it restores default values for the form input elements. I am using jQuery and QUnit, both related to each other. But the problem is, this form has some dependencies which are inside my main JS object holding the game object which renders to canvas. I can include my main JS object but I don't want it rendering visual output. I tried using HEADLESS mode but it still shows visual output as if there is a bug. I will check again for Phaser 2.6.1 in a plain game set-up to see if it has really a bug. But the main question is, are there some tutorials or libraries adapted for testing Phaser game including html forms or other html elements?

I'm relatively new to Phaser, but up until now I have found everything to work as expected. I'm trying to develop a Worms clone (just for fun) and i'm basing most of my code on the following tutorial :http://phaser.io/tutorials/coding-tips-001 The problem is, I can't get my worms (group) to collide with the land (bitmapdata converted into a sprite) Here is my create() create: function() { //create background first this.background = this.game.add.sprite(0,0,'background'); //start the physics system this.physics.startSystem(Phaser.Physics.ARCADE); //create land this.createLand(); //create worms this.createWorms(); } and createLand() createLand: function(){ //create the land bitmap data this.landBmp = this.add.bitmapData(1500,1000); this.landBmp.draw('land1'); this.landBmp.update(); //convert to sprite landBmp -> land this.land = this.game.add.sprite(0,0,this.landBmp); //enable physics on land sprite this.physics.arcade.enable(this.land); this.land.body.allowGravity = true; this.land.body.immovable = true; } createWorms() createWorms: function(){ this.worms = this.game.add.group(); this.physics.enable(this.worms,Phaser.Physics.ARCADE); for (var i = 0; i < 10; i++) { //calculate team and select name var team = i % 2; var name = names[Math.floor((Math.random() * names.length -1))]; //create a worm var worm = this.worms.create(land1SpawnPoints[i].x,land1SpawnPoints[i].y,'sprites'); worm.team = team; worm.name = name; worm.health = 100; //enable physics for the worm this.physics.arcade.enable(worm); worm.body.gravity.y = 200; worm.body.bounce = 0.3; worm.body.velocity.x = 1; //animations worm.animations.add('idle' , Phaser.Animation.generateFrameNames('worm_idle',1,1),5,true); worm.animations.add('move' , Phaser.Animation.generateFrameNames('worm_walk',1,3),5,true); //add the worm to worms group this.worms.add(worm); } }, and in my update function i'm calling this.physics.arcade.collide(this.worms,this.land); //NOTE: this function works , and by works, I mean - // //The function this.test will be called when a worm overlaps with the land sprite //this.physics.arcade.overlap(this.worms, this.land, this.test, null, this); When I run my code with physics.arcade.collide it doesn't trigger any callback function and the worms just fall through the ground. However if I use the overlap function , a callback function is triggered. If anyone could point me in the right direction as to what is going wrong I would be very grateful. Edit: Even if you could tell me how I can programmatically stop my worms from falling through the ground . For example, the following function would be called when a worm overlaps with the ground. test : function(worm, land) { //code goes here to prevent worm falling further },

Hey everyone, I am currently coding a boilerplate for scientist like myself who wish to create web based tasks using the latest technology the web has to offer This boilerplate is not aimed to be babylon.js specific but the two main example from which users could build upon would be in 3d in BabylonJS and in 2D probably using ... phaser ? did not decide yet. The design needs to be built independently of the game engine used and I was wondering if you had any advices on how i should build my object hierarchy. What is special with experimental tasks is that everything has to be collected at the millisecond, well stored, exportable etc. So beside the general hassle of building a robust game state system I need to handle inputs and data asynchronously. I created this little flow chart that you are welcome to modify if you have any relevant comment/idea, I'll be very glad to have any input from you guys ! https://drive.google.com/file/d/0BxggOFF8_iXkLUpXeXlyTkh2a2c/view?usp=sharing Thank you !

I was wondering is there function in Phaser that will allow me to generate pixel data object from current Phaser Scene (cover the whole canvas or part of it) and pass this object in I don't know which form to the second Phaser Stage and display it as it is at certain position? Something like this: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas Or I just fall back to plain Canvas API and use ImageData object?

I am trying to save sprite data to a database and being able to change it later. but I am having trouble figuring out how to implement this. (preferable redis) db.hmset("graphics:dude", JSON.stringify(dudeData)); var dudeData = [ '.......3.....', '......333....', '....5343335..', '...332333333.', '..33333333333', '..37773337773', '..38587778583', '..38588888583', '..37888888873', '...333333333.', '.F....5556...', '3E34.6757.6..', '.E.55.666.5..', '......777.5..', '.....6..7....', '.....7..7....' ]; Then use something like JSON.parse() to get the data back?

Is there some plugin or some tool inside Phaser that can help me draw a table of data. I have this image: As you can see I have two arrays of data and they are drawn in Phaser text field as string, but since the numbers inside are of different string length points array is longer than errors array and therefore cut if over the screen boundaires. How can I draw a table with this data, 3 rows by 15 columns? Also could I possibly create such plugin for Phaser?

The link http://www.askforgametask.com/mobile/games/cover/ Description What Is The Most Terrible Cover is an HTML5 one-button puzzle/skill game where your goal is to go through 10 rounds guessing which of two book covers is more terrible regarding the upvotes (karma) from the TerribleCover subreddit. For each correct choice you are scoring a number of points proportionally to the remaining time for playing that round. Be aware that each wrong choice will be scored with negative penalty points! This game is mobile friendly so you can play it either on your desktop or mobile browser. Screenshots Source code The game is made in HTML5 using Phaser framework. If you are interested how it is done you can read these tutorials and find there free source code of the prototypes: Part 1: How to create an HTML5 Reddit's Image Scraper using Phaser Part 2: How to create an HTML5 game in Phaser using image data scraped from Reddit JSON

Hi, I have built a prototype for a simple game. This game is used by parents and children. The next stage of the app, is the ability to create a simple user account for the child, managed by the paren. Steps: 1. The parent would create an account and input the child's name. 2. The account would keep simple data about the game and save the data to be retrieved, the next time that the game is played. Is this kind of thing possible in Phaser ? Thank you to anyone who can give me advice about this. Codenburger

Hi, I'm new to Phaser, as a prove-of-concept and get-to-know-phaser for my final app (which will be pretty big) I'm building simple chess game. I'm stuck on extending Phaser.Sprite object with my own, I need to send some extra information with Sprite to onInputDown event. Maybe there is some other way around to do this, I dont insist on extending, if there is some other clean way to get information to event callback. As mentioned I'm using coffee script (I dont insist on cs either, but I'm not going back to clean javascript). I have PieceFactory, that is creating Pieces, here is coffee script code, its realy nothing Factory: drawPawn: (x, y, color)-> targetField = @board.getSquare x, y pawn = new Piece(@game, targetField.positionX, targetField.positionY, color, 5)Piece class: class Piece extends Phaser.Sprite constructor: (game, x, y, texture, frame)-> sprite = super game, x, y, texture, frameThis is Piece compiled to this javascript code: var Piece, __hasProp = {}.hasOwnProperty, __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };Piece = (function(_super) { __extends(Piece, _super); function Piece(game, x, y, texture, frame) { var sprite; sprite = Piece.__super__.constructor.call(this, game, x, y, texture, frame); } return Piece;})(Phaser.Sprite);When this code executes, nothing happens. No error codes, no renders, as it was never executed... I would love to know how to get this extending working with coffee script. I would also appreciate "best practices" for passing data and/or functionality to event callbacks. Thanks in advance, have a nice day. Solution: Extending was working ok, you need to append your Sprite instance to world / group / etc. Example given: customSprite = new ExtendedSprite(100, 100, 'sprite_name')@game.world.addChild customSprite # @game is instance of Phaser.Game obvsly

I am making a relatively simple game using Phaser.Tilemap... I need to save the tilemap data to a sql database. Any idea how to go about that? I am aware of localstorage, but I need a permanent data save that can be share across sessions and users... Also, when I try to use: myTileMapName.dump();also,I get hundreds of '.' characters printed to the console... nothing else... I am confused. Any help very appreciated.

Is it possible to load a Phaser Sprite from a data URI instead of a URL without changing the internals of how Phaser work? I'd rather avoid having to do that to solve this issue.

This code: this.mesh.setVerticesData(BABYLON.VertexBuffer.PositionKind, positions, true); this.mesh.setVerticesData(BABYLON.VertexBuffer.NormalKind, normals, true); this.mesh.setVerticesData(BABYLON.VertexBuffer.UVKind, uvs, true); this.mesh.setIndices(indices); Does work with Internet Explorer, and doesn't work with Chrome. When I say doesn't work I mean the mesh doesn't appear in the scene. It happened when I updated to the latest beta version. In previous version I worked with (where the setVerticesData had the signature (number[], string, boolean) instead of (string, number[], boolean) ) it worked just well in both browsers.

I'm trying to make it to where the user can draw lines on the screen, with a bitmapData object. When I try to draw on the screen, I get a 404 error, and I'm not sure why. Any help is appreciated! Here's my code: var game= new Phaser.Game(720,1000,Phaser.CANVAS, 'game_div');var play={ preload: function() { this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.setShowAll(); game.scale.refresh(); this.game.load.image('nope','assets/wrong.png'); }, create: function() { this.bmd=this.game.add.bitmapData(720,1000); this.ctx=this.bmd.context; this.ctx.setLineWidth(5.0); this.ctx.setFillColor(255,0,0,0); this.game.add.sprite(0,0,this.bmd); this.game.stage.backgroundColor='#ab54c1'; this.game.scale.forceOrientation(false, true, 'nope'); }, update: function() { if(this.game.input.activePointer.isDown) { this.ctx.lineTo(this.game.input.activePointer.x,this.game.input.activePointer.y); } }}game.state.add('play', play);game.state.start('play');

I'm new to Phaser and I like it. It has everything I need to make a new html5 game quickly but there is a problem: In the examples provided there is no any preloader example. All we know that preloader must have it's resources preloaded in order to display some kind of beautiful background or animation while loading the rest of data. I've tried adding onLoadComplete listener and then, when preloader resources got downloaded, there is no hope on loading the game data. GameInstance.loader just shuts down and never invokes even after reset(); I suppose there are some state changing mechanisms for that, but I would like to avoid those deeps. There is no documentation on that and I ask you to help me with that weird situation.

Is there a preferred way of saving and loading data from within Phaser? I couldn't find a class in the docs that would seem to reflect something like a data manager (and a quick forum search turned nothing up), so I wanted to double check and see how others do it.