Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

modularizing documents

dthrasher90

By dthrasher90,
in Phaser 2

 Share

Recommended Posts

snowbillr Newbie

snowbillr

Posted
Posted

Nope, doesn't matter to phaser. All that matters is that you have your `index.html` file that pulls in phaser and your javascript files - that means a script tag linking to phaser, and then script tags linking to your own javascript files. 

In your index.html file I'm sure you have a `<script src="/some/path/to/phaser.js"></script>`. Underneath that, you'll have more <script> tags linking to your own javascript files. You can have as many javascript files as you want linked to from your index.html file. All that matters is that phaser is linked to first.

There's a lot of advanced techniques that end up with the minimal amount of javascript files possible for your page. But to keep it simple, link to phaser first, then your own javascript files - as many or as few as you want.

 

EDIT: some more in depth info

If you've got everything in your index.html file now, I assume you mean you have <script> tags that contain the javascript for your game in your html. Something like

<script>

var game = new Phaser.Game........etc

</script>

You can 'modularize' your page by cutting and pasting the javascript from that <script> tag and pasting it into a new javascript file (purely the javascript, you don't need to put the <script> tags in the javascript file). To keep it simple to start, you can put that javascript file right next to your index.html file in the folder structure. Something like: 

/my-game
  index.html
  game.js

Then, you'll need to link to your new javascript file from your html page. Where you had your <script> tag with the javascript on the index.html file before, you'll now have a <script src="game.js"></script> tag now. 

Link to comment
Share on other sites
spinnerbox Newbie

spinnerbox

Posted
Posted

I created my own template to enable separation of concerns, in different files.

Check this GitHub project

I use namespace() function to put all functionality under one DOM node, so it doesn't

mix with other code in the DOM namespace. Therefore I have two files State.js and Screen.js. Boot inherits from State and all other screens(scenes) inherit from Screen.

I also make utility classes like Utility.js where I put useful functions, so they don't mix with the other game logic or graphics code.

Link to comment
Share on other sites
spinnerbox Newbie

spinnerbox

Posted
Posted
18 hours ago, dthrasher90 said:

Spinner, how are you loading all of those files, are they json objects or local storage?

JSON file is just a pile of data, no code there. localStorage is the web API that enables you to save data locally that will last after you close the browser. But it is easy to delete it, just call

window.localStorage.clear();

You need JavaScript code and you include it in index.html 

<!DOCTYPE html>
<html>
    <head>
        <title>Game Name</title>
        <meta charset="UTF-8" />
        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="">
        <meta name="author" content="author">
        <meta name="viewport" content="width=device-width, height=device-height, maximum-scale=1, initial-scale=1, user-scalable=no">

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">
        <link rel="apple-touch-icon" href="assets/images/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon-16x16.png">
        <link rel="stylesheet" href="css/style.css">
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <style>
        body
            {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <!-- libraries -->
        <script src="js/phaser.min.js"></script>
        <script src="js/jquery.min.js"></script>
        
        <!-- main file and utility -->
        <script src="js/MainFile.js"></script>
        <script src="js/utils/Utility.js"></script>
        
        <!-- constants -->
        <script src="js/Constants/Graphics.js"></script>
        <script src="js/Constants/GameMessages.js"></script>
        <script src="js/Constants/GameErrors.js"></script>
        <script src="js/Constants/Constants.js"></script>
        <script src="js/Constants/GameSettings.js"></script>
        
        <!-- data -->
        <script src="js/GameData/GameData.js"></script>
        <script src="js/GameData/OptionsData.js"></script>
        
        <!-- states -->
        <script src="js/States/State.js"></script>
        <script src="js/States/Boot.js"></script>
        
        <!-- UI -->
        <script src="js/UI/ArtmButton.js"></script>
        <script src="js/UI/GoToScreen.js"></script>
        <script src="js/UI/GoToUrl.js"></script>
        
        <!-- screens -->
        <script src="js/Screens/Screen.js"></script>
        <script src="js/Screens/Preloader.js"></script>
        <script src="js/Screens/MainMenuScreen.js"></script>
        <script src="js/Screens/StatsScreen.js"></script>
        <script src="js/Screens/OptionsScreen.js"></script>

    </body>
</html>

But this is while developing. You should have only one file, something like MainFile.min.js which will hold all other files, minified. You can use Nodejs, Grunt and Uglify to minimize the js file automatically.

Link to comment
Share on other sites
spinnerbox Newbie

spinnerbox

Posted
Posted
18 hours ago, dthrasher90 said:

What difference does it make if you use the actual browser window as opposed to the web canvas?

canvas is just a tag in the DOM. window is the parent element of all other elements in the DOM. You can draw fast graphics in canvas. You could also do some drawing with CSS and HTML, but the DOM is very slow. So there is the difference. That is why Phaser works in canvas, not in the DOM.

Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...