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

Is there a tutorial on a basic setup for Phaser?

MikeHart

By MikeHart,
in Phaser 2

 Share

Recommended Posts

MikeHart Newbie

MikeHart

Posted
Posted

Hi folks,

 

I am a total newbie regarding Phaser and not much more when it comes to javascript.

 

In the examples, I basically can't find an example how to setup a simple project with it.

 

Take the Minigame "f1.js", how does one get to run this script?

 

Can someone show me a simple setup, maybe containing an index.html file, its css file and the javascript file with a small example? that could get me started.

 

Thanks

Michael

Link to comment
Share on other sites
Travis Newbie

Travis

Posted
Posted

Hi Mmarzex, I think I can help you out :D 

Here's some simple steps you can use to create a template for starting a new project with multiple files and no inline script.

This tutorial uses the "Hello Phaser" folder which you can find in the phaser-master/Docs directory.

 

1) Set up a project folder in your local server's /www or /htdocs folder. Set it up however you like, I personally made bin, lib, and src folders for holding assets, libraries (phaser in this case) and source code, respectively.

 

2) Copy the logo.png file, index.html file, and phaser-min.js file into your project folder. Put them in their proper directories. Here's what mine looks like:

 

mhGpbo3.png

 

3) Now create a new javascript file in your source directory, I name mine game.js.

 

4) Open your index.html file, and copy the content of the inline <script> into your game.js file.

 

5) If logo.png and index.html are not in the same folder, change the line game.load.image('logo', 'logo.png') to game.load.image('logo', '(YOUR_DIRECTORY)/logo.png')

 

6) Delete the first and last lines of game.js

 

Your game.js should now look something like this:

	var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });	function preload() {		game.load.image('logo', 'bin/logo.png');	}	var logo;	function create() {		logo = game.add.sprite(0, 0, 'logo');	}	function update() {	}

7) Now go back to your index.html file and delete the inline <script> code as well as all of the <body> code. Phaser will automatically create a <body> and <canvas> element for you, so you don't need to worry about that.

 

8) If phaser-min.js is in a different folder than index.html, change the script src= to your proper directory.

 

9) Make sure to add your game.js script in, for me it was <script src="src/game.js"></script>

 

Your index.html should look like this:

<!DOCTYPE HTML><html><head>	<title>phaser - hello world</title>	<script src="lib/phaser-min.js"></script>	<script src="src/game.js"></script></head></html>

10) Now open localhost/(PROJECT_FOLDER_NAME) and if you set up everything correctly, it should work!

 

rmRhpV0.png

 

I hope this helps!

 

-Travis

Link to comment
Share on other sites
Mmarzex Newbie

Mmarzex

Posted
Posted

Cool, thanks. That makes sense. I guess for some reason I was thinking I needed to do some sort of require statement or something in the other js file. Way too much node stuff lately, just need to get it to work with webstorm now for the auto complete.

Link to comment
Share on other sites
mikehamil10 Newbie

mikehamil10

Posted
Posted

That state example was extremely useful, almost imperative for creating anything in Phaser beyond trivial examples.

 

Hopefully it will be ready to be moved out of WIP and into the mainstream examples soon because I think it will help a lot of people out...

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

  • Recently Browsing   0 members

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