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

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

Andrew Fleming

By Andrew Fleming,
in Phaser 2

 Share

Recommended Posts

Andrew Fleming Newbie

Andrew Fleming

Posted
Posted

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

Link to comment
Share on other sites
rich Grand Master

rich

Posted
Posted

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.

Link to comment
Share on other sites
rich Grand Master

rich

Posted
Posted

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

Link to comment
Share on other sites
Andrew Fleming Newbie

Andrew Fleming

Posted
  • Author
Posted

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!

Link to comment
Share on other sites
rich Grand Master

rich

Posted
Posted

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.

Link to comment
Share on other sites
rich Grand Master

rich

Posted
Posted

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).

Link to comment
Share on other sites
rich Grand Master

rich

Posted
Posted

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.

Link to comment
Share on other sites
rich Grand Master

rich

Posted
Posted

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.

Link to comment
Share on other sites
Mayu Newbie

Mayu

Posted
Posted

@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.

Link to comment
Share on other sites
Jesse Freeman Newbie

Jesse Freeman

Posted
Posted

@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!

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

  • Recently Browsing   0 members

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