phaser/tutorials/01 Getting Started/part6.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Phaser Tutorial 01 - Getting Started</title>
        <script src="build/phaser.js" type="text/javascript"></script>
        <style>
            body {
                font-family: Arial;
                font-size: 14px;
            }
        </style>
    </head>
    <body>

        <h1>Getting started with Phaser</h1>

        <h2>Part 6 - Hello World!</h2>

        <p>With your editor set-up, web server installed and Phaser downloaded it's time to create something and check it's all working.</p>

        <p>You need to discover where your 'web root' is on your machine. This is the folder in which the server looks for files. If you are using WAMP on Windows you can locate it by clicking the WAMP icon in your system-tray and select "www directory" from the pop-up menu. Other servers will have other methods of determining the location, but from this point on we'll refer to it as the 'webroot'.</p>

        <p>1. Within the webroot create a folder called 'hellophaser'. Download <a href="">this zip file</a> and extract the contents to the 'hellophaser' folder.</p>

        <p>2. Using your text editor create a file called index.html within the 'hellophaser' folder and paste the following code into it:</p>

        <code>

        </code>

        <p>3. Save the file and on Windows the final folder should look something like this:</p>

        <h3>Testing, testing ...</h3>

        <p>Open your web browser and browse to your local server. This may be as simple as typing in 'localhost' or '127.0.0.1' or you may need to specify a port number as well, it depends entirely on which server set-up method you used. If the server is set-up correctly and running you will see the default installation page in your browser. This will vary from server to server, but as long as the page doesn't "time out" or throw a permissions error you are good to go.</p>

        <p>Now add <em>/hellophaser</em> onto the end of the URL and the Hello World test should load. If it does it will display a black game area with a phaser logo in the middle. If it doesn't for whatever reason you need to bring up the debug console and see what errors are output. In most browsers you can do this by pressing F12. This works across Chrome, Firefox and Internet Explorer. Check to see what the error is, hopefully it's a simple one like the files being missing, in which case check your folder names and refresh the page. If it's something more complex feel free to post about it <a href="http://www.html5gamedevs.com/forum/14-phaser/">on the forum</a> and we'll help.</p>

        <p><a href="part7.html">Part 7: The Phaser Examples</a></p>

        <ul>
            <li><a href="index.html">Part 1: Introduction</a></li>
            <li><a href="part2.html">Part 2: Installing a web server</a></li>
            <li><a href="part3.html">Part 3: Run in the Cloud</a></li>
            <li><a href="part4.html">Part 4: Choosing an Editor</a></li>
            <li><a href="part5.html">Part 5: Downloading Phaser</a></li>
            <li><a href="part6.html">Part 6: Hello World!</a></li>
            <li><a href="part7.html">Part 7: The Phaser Examples</a></li>
            <li><a href="part8.html">Part 8: Next Steps</a></li>
        </ul>

    </body>
</html>
New Getting Started Tutorial. 2013-11-29 15:16:42 +00:00			`<!doctype html>`
			`<html>`
			`<head>`
			`<meta charset="UTF-8" />`
			`<title>Phaser Tutorial 01 - Getting Started</title>`
			`<script src="build/phaser.js" type="text/javascript"></script>`
			`<style>`
			`body {`
			`font-family: Arial;`
			`font-size: 14px;`
			`}`
			`</style>`
			`</head>`
			`<body>`

			`<h1>Getting started with Phaser</h1>`

			`<h2>Part 6 - Hello World!</h2>`

Tutorial update. 2013-11-29 16:26:59 +00:00			`<p>With your editor set-up, web server installed and Phaser downloaded it's time to create something and check it's all working.</p>`

			`<p>You need to discover where your 'web root' is on your machine. This is the folder in which the server looks for files. If you are using WAMP on Windows you can locate it by clicking the WAMP icon in your system-tray and select "www directory" from the pop-up menu. Other servers will have other methods of determining the location, but from this point on we'll refer to it as the 'webroot'.</p>`

			`<p>1. Within the webroot create a folder called 'hellophaser'. Download <a href="">this zip file</a> and extract the contents to the 'hellophaser' folder.</p>`

			`<p>2. Using your text editor create a file called index.html within the 'hellophaser' folder and paste the following code into it:</p>`

			`<code>`

			`</code>`

			`<p>3. Save the file and on Windows the final folder should look something like this:</p>`

			`<h3>Testing, testing ...</h3>`

			`<p>Open your web browser and browse to your local server. This may be as simple as typing in 'localhost' or '127.0.0.1' or you may need to specify a port number as well, it depends entirely on which server set-up method you used. If the server is set-up correctly and running you will see the default installation page in your browser. This will vary from server to server, but as long as the page doesn't "time out" or throw a permissions error you are good to go.</p>`

			<p>Now add <em>/hellophaser</em> onto the end of the URL and the Hello World test should load. If it does it will display a black game area with a phaser logo in the middle. If it doesn't for whatever reason you need to bring up the debug console and see what errors are output. In most browsers you can do this by pressing F12. This works across Chrome, Firefox and Internet Explorer. Check to see what the error is, hopefully it's a simple one like the files being missing, in which case check your folder names and refresh the page. If it's something more complex feel free to post about it <a href="http://www.html5gamedevs.com/forum/14-phaser/">on the forum</a> and we'll help.</p>
New Getting Started Tutorial. 2013-11-29 15:16:42 +00:00
			`<p><a href="part7.html">Part 7: The Phaser Examples</a></p>`

			`<ul>`
			`<li><a href="index.html">Part 1: Introduction</a></li>`
			`<li><a href="part2.html">Part 2: Installing a web server</a></li>`
			`<li><a href="part3.html">Part 3: Run in the Cloud</a></li>`
			`<li><a href="part4.html">Part 4: Choosing an Editor</a></li>`
			`<li><a href="part5.html">Part 5: Downloading Phaser</a></li>`
			`<li><a href="part6.html">Part 6: Hello World!</a></li>`
			`<li><a href="part7.html">Part 7: The Phaser Examples</a></li>`
			`<li><a href="part8.html">Part 8: Next Steps</a></li>`
			`</ul>`

			`</body>`
			`</html>`