Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Is there a tutorial on a basic setup for Phaser?


Recommended Posts

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.




Link to comment
Share on other sites

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:




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!




I hope this helps!



Link to comment
Share on other sites


  • Recently Browsing   0 members

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