plicatibu

Setup and build of projects, Phaser's folder structure and debugging

Recommended Posts

Hi.

 

I started reading all post in this forum from the oldest to the newest in order to understand Phaser a little better and to see if I find out some of my own doubts already asked / answered.

 

Notwithstanding I have some very basic doubts about how to configure my development environment (I think that mainly because I'm still learning JavaScript).

 

Currently I'm creating a folder with the following structure (It's based in the post Is there a tutorial on a basic setup for Phaser?):

mygame/+       +-img/       +-lib/       |    +-phaser-min.js       +-snd/       +-src/       |    +-game.js       |    +-file1.js       |    +-file2.js       +-index.html

Where file1.js, file2.js, and so on are files called by game.js

 

My next step would be to generate an output folder ( say, named build ) that would contain all JavaScript merged into a single file as well as minified. Something like the following:

mygame/+       +-img/       +-lib/       | +-phaser-min.js       +-snd/       +-src/       | +-game.js       | +-file1.js       | +-file2.js       +-index.html       |       +-build/              +-img/              +-snd/              +-game.js              +-index.html

The point is I don't have any clue how to do it. Is there any script / tool available for that? Preferably command line tools that I can call from shell scripts / bat files or directly from VIM.

 

Another point I'd like to understand is the folder structure of Phaser.

 

I imagine that for develop a game I just need to use either phaser.js or phaser.min.js file and that the remaining files are either for development of Phaser itself or example files to guide us. Right?

 

What's better to use during game development: either phaser.js or phaser.min.js file?

 

 

Regarding the index.html file, in examples, usually I see JavaScript embedded in it:

<script type="text/javascript">(function () {...})();</script>

Can't I just create a function (say run()) and call it:

<script type="text/javascript">run();</script>

Is there any implication in doing this? Any special care I should take?

 

If someone could point me how to debug the my code it would be nice.

 

Any other tips you judge useful are very much appreciated.

 

 

 

Thank you all.

Share this post


Link to post
Share on other sites

hello,

best current tool to deal with everything related to js/html dev is Grunt (http://gruntjs.com/, it uses NodeJS) You can add some nice plugins to that command line tool, like grunt-contrib-concat, that can concat your JS files into one. You can add A LOT of plugins, to minify JS, optimise images etc.

Share this post


Link to post
Share on other sites

 

I imagine that for develop a game I just need to use either phaser.js or phaser.min.js file and that the remaining files are either for development of Phaser itself or example files to guide us. Right?

 

What's better to use during game development: either phaser.js or phaser.min.js file?

Yup, you just need to include either phaser or phaser.min. You should use phaser.js during development (for easier debugging) and switch to phaser.min.js when you're ready to deploy your game.

 

 

 

Regarding the index.html file, in examples, usually I see JavaScript embedded in it

 

In my index.html, I usually have something like this:

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <meta name="viewport" content="initial-scale=1 maximum-scale=1 user-scalable=0" />    <title>Game</title>    <script src="phaser.min.js"></script>    <script src="game.js"></script></head><body>    <script type="text/javascript">        window.onload = function () {            var myGame = new Phaser.Game(1024, 672, Phaser.AUTO, 'game');            myGame.state.add('boot', Screen.Boot, true);            myGame.state.add('preloader', Screen.Preloader);            myGame.state.add('gamescreen', Screen.GameScreen);        }    </script>    <div id="game"></div></body></html>

 

 

If someone could point me how to debug the my code it would be nice.

Google Chrome has some very nice debugging tools: https://developers.google.com/chrome-developer-tools/docs/javascript-debugging

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

  • Recently Browsing   0 members

    No registered users viewing this page.