Ex AS3 to HTML5

[Heppell08]

Hello everyone, I'm new here and decided to start in HTML5. ive done alot of reading and think i've picked a good option over the AS3 route i was on.

I have installed everything needed and can begin to code all that i need. My issue is a very noob one but kind of necessary for me to code. 

I'm using sublime text 3 with typescript add on. I've got grunt and node installed as well. I eventually got phaser to download after my git failed on me (connection issues...) So now i have a tutorial open on making a game in phaser for my starting point before i dive straight in and begin to code properly but im confused as to where phaser is supposed to be?

Like in relation to the game project and assets etc, where do i place the import for phaser to run in my project? I'm very used to flixel being easily moved around and imported from the top of classes in AS3 but this transition is still a bit confusing to me.

Sorry for the noob question but i'm sure i'll be ok once i get the basics down. Thanks again!

[rich]

If you're going to use TypeScript I would honestly recommend using Visual Studio instead (pretty sure they have a free version available). It will give you code completion and other important stuff, and configuring the project is mostly painless in VS. Removes the requirement for node and grunt as well, although it's no bad thing having those around as they can be super-handy for speeding up deployment.

 

However to answer your question: you only need 1 file from Phaser, the build/phaser.js file. At it doesn't matter where in your project structure it sits so long as you reference it in your html that contains the game. You'll need the defs file too for TypeScript, but it doesn't need to be part of your project structure.

[pat]

webstorm supports typeScript too

[rich]

True, but it's not free

[Heppell08]

Yeah i left the typescript option behind and went with javascript instead (thanks Photon via twitter) The sublime text 3 was rather glitchy for typescript and support was rather minimal. 

I've never read so much stuff in all my life learning but it seems to be running ok now. Just decided on taking the hard route instead of the simple route. Also mainly because i followed this : http://jessefreeman.com/game-dev/building-a-html5-game-with-phaser/ but that is a typescript based tut and thats where i tried to start with phaser. I'm just trying to sort out my javascript IDE for code completion and im ready to go.

Also the HTML confuses me because ive read >>

 

Hi Mmarzex, I think I can help you out 

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!

 

-Travis

 

And that says the HTML file only needs 

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

But when i do my tests to run my game.js it does nothing but show me the phaser logo screen instead?

I have WAMP set up and have experience using i so i know thats all running fine (I had a maplestory server and ported forward with MYSQL to have a sign up to my server website in WAMP with CYPE site)

Once i get this HTML file working i can start the coding process. Just baby steps at the minute but I'm reading alot on this stuff. Thanks in advance and sorry for this HUGE post lol

[Heppell08]

*EDIT* 

Ok forget the above post I've got it all sorted now. The main issue was set up but now I'm running smoothly eventually. Sublime text 2 with a few plugins and auto complete working perfectly too. Wamp working and the game runs now as i go. 

Doing the http://www.photonstorm.com/phaser/tutorial-making-your-first-phaser-game Tut now and then going to read on some documentation for phaser for all functions and stuff.

Thanks for the help

[AxxxJ]

I'm having the same problem when I follow the quoted post by Travis, i'm running on a Mac, if that changes anything. I really want a way to separate it all off into different scripts, just seems nicer although maybe I'm being slightly OCD.

[Heppell08]

You can have it seperate with the HTML file calling in the scripts like the one posted above. Aslong as all the files are being pointed to correctly then I don't think it should make a difference between mac or pc but I'm not 100% on that. Just use the HTML set up as posted in that quoted link and it should work. I'm OCD with code too. Need everything working in a certain way haha