Search the Community

The situation: I have an update loop where I "fixed the timestep". Physics is running at ta fixed 30fps and my render loop is completely independent. However, on a mobile device with a framerate that jumps around between 20-35 fps, there seems to be stuttering with the camera. Now, I know how to approach the issue, I'm just trying to figure out how to do it off the mobile device. What I want to do: I would like to simulate the irregular fps within the browser on desktop. Is there a way to do that via debug tools or with an extension on any browser? Does anyone know of a solution here? Fix your timestep: http://gafferongames.com/game-physics/fix-your-timestep/

There are a lot of things you can do to help get your questions answered faster. This announcement will provide some tips to get you unstuck as soon as possible. The first, and most important thing to do is ALWAYS develop your game with the most recent non-minified melonJS build. Switch to the minified build for your final release; never before that point. Follow the tips in the other announcement: https://groups.google.com/forum/#!topic/melonjs/SvC8ZNJ3P_c Familiarize yourself with the debugger in your browser/user agent. You are writing a lot of JavaScript to create a full game, perhaps more than most web developers will in their entire careers. If you are not using a debugger, you are shorting yourself, and extending development time greatly. Enable the "pause on all uncaught exceptions" feature in your debugger; this should be the first thing you configure when you open the debugger for the first time. console.log() and alert() are simple to use, but breakpoints are better in every imaginable way; they are temporary, can be enabled and disabled at runtime without modifying the JavaScript, and allow you to inspect variable state at any point in the program's execution. Learn to follow stack traces so you can understand how the code eventually leads up to specific events, like uncaught exceptions. If your game runs slow, use the profiler in your debugger to pinpoint functions that take up the most time, and try to minimize how often the slow functions are called, or make the slow functions faster! If you've done the above and still need a little boost in the right direction, please include the full source code for your game. It is often not enough to paste code snippets in the body of your message, because there are times when the issue lies in an area of the code you hadn't considered. We can use the techniques described above to find and solve a very wide range of issues, but only if we are able to run the code ourselves. If you have found a true bug in the melonJS engine (not just a support request), please search the github issues for similar reports, and file a new ticket if you don't find anything: https://github.com/melonjs/melonJS/issues This is the best way to get bugs in the engine solved quickly. If you are having trouble with the tutorial, it has its own git repository and issue tracker: https://github.com/melonjs/tutorial-platformer

I've just published the library called FConsole, which should help pixi.js developers with debugging visual elements (the same as it was with the Flash-Console in Flash). Demo site Features Display List Inspector Hierarchy Properties Editing Any feedback is welcomed!

Hi there. I have phaser game project and I want to setup debugger for all phaser files from repository. I can build my own single-file phaser via npm, but it is not comfortable rebuild every time after such minor changes. So interesting, how @rich (for example) use debugger for phaser (single-file debugging, or for all separate files)? And how is correctly setup the project for debug core-code. I need include all core files into my own html file, or I can use some special hack or existing sources?

Hi, I've just started playing with Phaser, and on the recommendation of the Getting Started Guide decided to use Cloud9 to develop. Mostly this has gone fine, but now I've started creating my own app I need to debug it and I can't find how to do this. I can set breakpoints but none of them ever get hit. Additionally I'm not actually sure what to run when I've added the breakpoints - I presume it's the index.html, but I've also tried running individual JavaScript files, but all to no avail. Could anyone tell me how to debug? Thanks.

Greetings, I'm new to this "asking for help" thing, so this is my first post because I just can't do this alone anymore. I'm working on a sidescroller with a simple background image, a player using player.animations for cursor movement, and physics.ARCADE. I'm hopelessly stuck with a lot of code and a white page on the other end. I'm using Brackets live preview via chrome but can anyone look at my code and possibly point me in the right direction? I'm not sure how most people go about debugging, but JSLint hasn't helped. Let me know if I'm abusing any sort of etiquette, code or otherwise, and thanks in advance. <!doctype html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>hello phaser!</title> <script src="phaser.min.js"></script> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(3500, 420, Phaser.AUTO, '', { preload: preload, create: create }); function preload () { game.load.sprite('background', 'background.png'); game.load.spritesheet('scottRunning', 'playerSpritesheet.png', 70, 70); } var player; var cursors; function create () { game.physics.startSystem(Phaser.Physics.ARCADE); game.add.image(0, 0, 'background'); //origin point and dimensions of the background game.world.setBounds(0, 0, 3500, 420); player = game.add.sprite(92, game.world.centerY, 'scottRunning'); game.physics.arcade.enable(player); player.body.bounce.y = 0.2; player.body.gravity.y = 300; player.body.collideWorldBounds = true; player.animations.add('left', [0, 1, 2, 3, 4, 5, 6, 7, 8], 8, true); player.animations.add('right', [9, 10, 11, 12, 13, 14, 15, 16, 17], 8, true); player.animations.add('up', [18], 8, true); game.camera.follow(player); } function update () { // V collision parameters V //game.physics.arcade.collide(player, whatever); //game.physics.arcade.overlap(player, stars, collectStar, null, this); cursors = game.input.keyboard.createCursorKeys(); player.body.velocity.x = 0; if (cursors.left.isDown) { player.body.velocity.x = -150; player.animations.play('left'); } else if (cursors.right.isDown) { player.body.velocity.x = 150; player.animations.play('right'); } else if (cursors.down.isDown) { player.body.velocity.x = 0; player.animations.play('up'); } else { player.animations.stop(); player.frame = 18; } if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -350; } } function render () { game.debug.cameraInfo(game.camera, 32, 32); game.debug.spriteCoords(player, 32, 500); } </script> </body> </html>

Hi all I am thinking of starting using Babel to develop my games. Maybe this is a silly question but how am i going to debug my modules from within the browser? Thanks.

So I didn't see this in here and I thought it might be helpful to others since I had to look it up. I was running into an issue where I would make a simple change to one of my js or json files and then not see the changes in my game due to the cached versions of the files being used instead of my changed versions. The easiest way to resolve this is to simply launch the game in incognito mode while you are debugging. If for whatever reason you want to prevent cached files from being used without using incognito here is a few methods you can use http://hungred.com/how-to/tutorial-stop-caching-jquery-javascript/

I am trying to test some body data for a game I'm making by modifying the Body Debug example at http://phaser.io/examples/v2/p2-physics/body-debug. I'm getting a TypeError: Undefined is not a function message when I try to run the script, however, and it is happening at the call to game.load.physics. I am using the exact code from the example besides changing the filenames to match my filesystem, and the game.load.image calls work fine, just no body data can be loaded. I just updated my phaser version from GitHub, so it shouldn't be out of date, but I'm not sure if there's some other issue causing this. I doubt it'd be a bug in Phaser. Do you think there is something wrong with the download, or is there something else that'd be causing the problem? The full code for the script and error message stack trace are below (I removed the HTML components, but they were unchanged from the downloadable code for the example: Uncaught TypeError: undefined is not a function (index):23 preload (index):23 d.StateManager.start phaser.min.js:4 d.StateManager.add phaser.min.js:4 d.StateManager.boot phaser.min.js:4 d.Game.boot phaser.min.js:5 d.Game._onBoot phaser.min.js:5 window.onload = function() { var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('contra2', 'contra2.png'); game.load.image('bunny', 'bunny.png'); game.load.image('block', 'block.png'); game.load.image('wizball', 'wizball.png'); console.log(game.load.physics); game.load.physics('physicsData', 'sprites.json'); } var contra; var bunny; var block; var wizball; var result = 'Click a body'; function create() { // Enable p2 physics game.physics.startSystem(Phaser.Physics.P2JS); contra = game.add.sprite(100, 200, 'contra2'); bunny = game.add.sprite(550, 200, 'bunny'); block = game.add.sprite(300, 400, 'block'); wizball = game.add.sprite(500, 500, 'wizball'); game.physics.p2.enable([ contra, bunny ], true); game.physics.p2.enable([ block, wizball ], true); // Convex polys contra.body.clearShapes(); contra.body.loadPolygon('physicsData', 'contra2'); bunny.body.clearShapes(); bunny.body.loadPolygon('physicsData', 'bunny'); // Circle wizball.body.setCircle(45); game.input.onDown.add(click, this); console.log(contra.body.debug); console.log(block.body.debug); } function click(pointer) { // You can hitTest against an array of Sprites, an array of Phaser.Physics.P2.Body objects, or don't give anything // in which case it will check every Body in the whole world. var bodies = game.physics.p2.hitTest(pointer.position, [ contra, bunny, block, wizball ]); if (bodies.length === 0) { result = "You didn't click a Body"; } else { result = "You clicked: "; for (var i = 0; i < bodies.length; i++) { // The bodies that come back are p2.Body objects. // The parent property is a Phaser.Physics.P2.Body which has a property called 'sprite' // This relates to the sprites we created earlier. // The 'key' property is just the texture name, which works well for this demo but you probably need something more robust for an actual game. result = result + bodies[i].parent.sprite.key; if (i < bodies.length - 1) { result = result + ', '; } } } } function update() { bunny.body.rotateLeft(2); } function render() { game.debug.text(result, 32, 32); } };

Hi, Does anyone have any good tools for debugging HTML5 game development? The Console in Chrome is alright, but doesn't show me that much. I'm developing with LimeJS and Closure, and as my code base footprint increases, I'm finding debugging a little tricky. Any suggestions would be appreciated. Cheers,

Thought this may be useful for those of you trying to visually debug canvas issues: In Chrome Canary: in your browser, enter this url chrome://flags/ enable Enable Developer Tools experiments relaunch Chrome in the developer tools, click the 'gear' to bring up developer preferences select experiments from the menu select Canvas Inspections relaunch Chrome

If (like me) you have to support JavaScript on IE7 and IE8 then you'll know what a royal pain in the ass it is to debug. Today I found this excellent app that removes that pain proper breakpoint support, stepping, etc. Don't let the horrendously 1990s looking web site put you off, the app works great and has saved me loads of time already! http://www.remotedebugger.com/javascript_debugger/javascript_debugger.asp

"Continuous painting mode for paint profiling is now available in Chrome Canary. This article explains how you identify a problem in page painting time and how you can use this new tool to detect bottlenecks in painting performance. INVESTIGATING PAINTING TIME ON YOUR PAGE So you noticed that your page doesn't scroll smoothly. This is how you would start tackling the problem. For our example, we'll use the demo page Things We Left On The Moon by Dan Cederholm as our example. You open the Web Inspector, start a Timeline recording and scroll your page up and down. Then you look at the vertical timelines, that show you what happened in each frame." http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode

If you'd like to get really down and dirty with the way chromium renders, this is a very interesting read: http://wesleyhales.com/blog/2013/02/18/Adventures-With-the-Skia-Debugger/