Andrew Fleming

Need a simple tutorial on using the Phaser Framework with VS Express 2012

Recommended Posts

Hello,

I'm attempting to follow the tutorial found here:

 

http://jessefreeman.com/game-dev/building-a-html5-game-with-phaser/

 

but I'm stuck from the start! I need some guidance please.

 

I have MS VS Express 2012 for Web installed and running, and the Typescript plugin installed. I start up a new project and the boiler-plate demo code works fine (printing the time to the web browser). I can compile and run it using the |> Google Chrome button no problem.

 

I have the Phaser framework downloaded from the github page, the phaser-master with the subfolders of build, Docs, Phaser, Tests, etc. How do I include this in my project? I've never used the new Visual Studio programs, so its possible that is a problem?

 

Thanks in advance for any help!

 

Andrew

Share this post


Link to post
Share on other sites

If you can compile the default TypeScript project (the one that is created automatically when you create a new project in Visual Studio) then I would do this:

 

1) Copy the Phaser folder inside of your project folder. If the repo is checked-out in a folder called phaser, then it would be phaser/Phaser - i.e. the folder that lives at the same level as Docs, Tests, etc. Copy that one to your project folder.

 

2) Edit app.ts and replace everything with this:

 

/// <reference path="Phaser/Game.ts" />(function () {    var myGame = new Phaser.Game(this, 'game', 800, 600);})();

 

3) There's on last thing to do. In Visual Studio do "Save All" and then close it down.

 

4) In Windows Explorer navigate to your projects folder. I'll assume your project is called "game". Inside the folder you will see a csproj file. It has a green C# icon NOT the purple VS icon. Drag this file into EditPad/Notepad/similar. Look for the TypeScript block and edit as like so:

 

  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">    <TypeScriptTarget>ES5</TypeScriptTarget>    <TypeScriptIncludeComments>true</TypeScriptIncludeComments>    <TypeScriptSourceMap>false</TypeScriptSourceMap>    <TypeScriptOutFile>yourgame.js</TypeScriptOutFile>  </PropertyGroup>  <PropertyGroup Condition="'$(Configuration)' == 'Release'">    <TypeScriptTarget>ES5</TypeScriptTarget>    <TypeScriptIncludeComments>false</TypeScriptIncludeComments>    <TypeScriptSourceMap>false</TypeScriptSourceMap>    <TypeScriptOutFile>yourgame.js</TypeScriptOutFile>  </PropertyGroup>

 

What this is doing is telling TypeScript to compile the whole game into a single JS file called yourgame.js. Also it's telling TypeScript to use ES5 which is really important.

 

Save this file then open Visual Studio again.

 

5) Edit the default.htm file that it created for you - at the top where it includes app.js change this to yourgame.js

 

6) Now compile and run. Hopefully (providing all the paths are correct) it will compile and you'll get the standard Phaser boot-screen appear. If you reach this point you're now ready to be able to put whatever code you want into the app.ts file and start experimenting. I would recommend looking at all of the source in the Tests folder first and copying bits of that across.

 

Sorry this sounds long-winded, it's because it is - if TypeScript didn't need the ES5 flag it'd be a lot easier, but alas!

 

Alternatively you could just use JavaScript :) But as we don't have any docs right now it makes more sense to do the above, then you get code completion / parameter help from VS.

Share this post


Link to post
Share on other sites

The thing to remember about the <reference> line is that it's 100% relative to the folder the current TS file is in. Not the whole project, but the actual TS file you have open.

 

If you've done the above correctly, or rather as I meant to explain it, then your project structure should look something like this:

 

yourgame/  Phaser/    gameobjects/    geom/    system/    AnimationManager.ts    Basic.ts    etc etc ...  default.htm  app.ts  app.css

 

From this structure the reference in app.ts would be Phaser/Game.ts

 

If you created a new folder called "Bob" then the reference from within that would need to be: ../Phaser/Game.ts

Share this post


Link to post
Share on other sites

Alright! Worked like a charm! 

 

I'm honestly not sure what my problem was before - but I'm forgetting all the quirkiness I introduced, and building off the new knowledge you've given me. Been looking into doing some HTML5 development - I'm currently an AS3 developer, porting over legacy C++ educational games to Flash, and have given Flixel a whirl a few times, so I'm somewhat familiar with that ecosystem.

 

Thanks again!

Share this post


Link to post
Share on other sites

Excellent :)

 

Until we get some docs sorted out I would strongly recommend just looking at the source to the Tests and copying whatever you feel you need :)

 

At least Visual Studio will give you method/property lists and such like as you're coding. That should make it more familiar to AS3/FlashDevelop for you.

Share this post


Link to post
Share on other sites

I use Visual Studio Professional 2012, which is the desktop one, and it works fine.

 

You don't -have- to use TypeScript/Visual Studio of course. It does make things easier, but WebStorm is equally good, and just using normal JavaScript is too (although that's harder until the docs are finished I agree).

Share this post


Link to post
Share on other sites

Visual Studio for desktop has plugin or addon for TypeScript?

 

Yes. Just install TypeScript like normal from the msi (not the node package) and make sure VS isn't running at the time. You will then be able to create a TypeScript project when you start VS.

Share this post


Link to post
Share on other sites

If you have Visual Studio Professional 2012 it definitely works with TypeScript.

 

Express 2012 for Web also works.

 

Is there a Visual Studio Express NOT for web? If so, try it anyway and see - you never  know! It may well work, especially as TypeScript adds itself under the C# block anyway.

Share this post


Link to post
Share on other sites

@Jesse Freeman

Hey thanks for the awesome tutorial. Any dev with nerve to do googling will find the correct resource. Thanks for introducing me to this nice platform. Looking forward to venture into GameDev :) All credit goes to you in first place.

Share this post


Link to post
Share on other sites

@Jesse Freeman

Hey thanks for the awesome tutorial. Any dev with nerve to do googling will find the correct resource. Thanks for introducing me to this nice platform. Looking forward to venture into GameDev :) All credit goes to you in first place.

 

All credit goes to Richard, couldn't have done any of this without him creating Phaser. I'll be writing a lot more about it in the up coming weeks. Looking forward to seeing it get to version 1!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.