Sign in to follow this  
spinnerbox

ID or name of the canvas holding the Phaser game?

Recommended Posts

I find my self often using console.log() to log for messages while developing which does the job but in the end I should remove all those log statements. 

So I though it would be nice if I use my own debug text field in Phaser. Yes I made one and it works but how to log messages on screen when all the JS scripts are still not loaded i.e before the game code loads?

So, the new canvas API has methods to draw text inside but I don't see the canvas html element being created by Phaser to have its own ID or name.

Yes I could possibly do it with custom JS function but are there some tools to help me already?

Or I just create separate html element like paragraph and write log messages inside of it and don't bother with the canvas?

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text

 

Share this post


Link to post
Share on other sites

This might be a silly question but anyway it shows some tips how to handle console.log() statements. Some old browsers do not recognize console.log, that is why you should avoid using in in production.

How did I remove all console.log() statements?

I had a function like this

printDifficultyCounts = function () {

       console.log(difficultiesCount); // difficultiesCount is object {}

}

I created method getDifficultiesCount() which returns this object instead of using function to print its contents. So with a getter method you can always print it in console.

Also if you have used console.log() statement, there is always a better way to not use it. :)

Share this post


Link to post
Share on other sites

If you're using webpack to package your code, you can use the strip-loader on your files to remove console.log statements: https://github.com/yahoo/strip-loader

Honestly, though, I'd be surprised to find a browser that supports canvas but doesn't have console.log. IE8 doesn't support canvas but does have console.log, for instance.

http://caniuse.com/#feat=canvas

http://caniuse.com/#feat=console-basic

Share this post


Link to post
Share on other sites

I enabled JSlint/JSHint "devel" option in Aptana studio 3 and I managed to clear all warnings including the console.log statements :)

Yes I knew that nowaday browsers all support console, its just a bad practice to leave such statements in production. There is always a better way how to not use console.log().

Yes there also an option to enable NodeJS into your code in Aptana and maybe run installed Node plugins/extensions. 

Ah and btw very useful tool is Grunt for Nodejs, you use Uglify task to minify all javascript files into one for production.

Haven't tried though to use NodeJS extension trough Aptana.

Share this post


Link to post
Share on other sites

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.

Guest
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.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.