Jump to content

WebStorm (OSX, Linux) Starter Files and Tutorial


Recommended Posts

finally have my workflow set up exactly how I want it (I think).  Using require.js and source maps, I finally have modular TypeScript that can be written in WebStorm with full code hinting, error detection, etc... and live debugging of the original TypeScript files in Chrome. 


When I first started, I was building a huge javascript file from my TypeScript source (with tsc and grunt), and debugging was a pain because I'd have to set breakpoints in my massive .js file, then hunt down the equivalent code in TypeScript somewhere in the project.  Thanks to source maps and Chrome, I only have to 'compile' the single .js file when I deploy the game online.


It works just fine on both OSX and Linux, and I'm using the EAP version of WebStorm 6 (free for 30 days).


The blog post was written pretty hastily, so feedback is welcome.


Phaser Start Project for WebStorm and Chrome: Modular TypeScript, Code Completion, and Live Debugging


Also, this was based off of Jesse Freeman's Phaser Template. I've removed grunt, as I would rather rely solely on WebStorm's build tools and the typescript compiler for now.



Link to comment
Share on other sites

  • 2 weeks later...
  • 4 weeks later...

I followed this guide - and am pleased to say it worked for me.

I was wondering though, rather than use the compiled versions of Phaser, is it possible to use the TS resources and still work in this way? (Apologies for the n00bness of this question - I am just beginning my HTML5 journey).

Link to comment
Share on other sites

  • 3 months later...
I'm begginer in javascript
how build all js files to one js file in webstorm?
my index.html
<!DOCTYPE html><html lang="en"><head>	<meta charset="utf-8">	<title>TestPhaser</title>	<script src="phaser.js"></script>    <script src="src/js/JokSrc/AllHelp.js"></script>    <script src="src/js/JokSrc/Gui/JokButton.js"></script>    <script src="src/js/JokSrc/AnimHelp.js"></script>    <script src="src/js/JokSrc/TransitionScreen.js"></script>    <script src="src/js/JokSrc/HelperChoosePath.js"></script>    <script src="src/js/JokSrc/JokParticle/JokParticle.js"></script>    <script src="src/js/JokSrc/JokParticle/JokParticleManager.js"></script>	<script src="src/js/Main.js"></script>	<script src="src/js/TestState.js"></script>	<script src="src/js/PirateGame/LoadState.js"></script>    <script src="src/js/PirateGame/EvolutionSoundManager.js"></script>    <script src="src/js/PirateGame/EvolutionMusicManager.js"></script>	<script src="src/js/PirateGame/States/MainMenu.js"></script>    <script src="src/js/PirateGame/States/GameManager.js"></script>    <script src="src/js/PirateGame/Field/FieldHead.js"></script>    <script src="src/js/PirateGame/Field/GameField.js"></script>    <script src="src/js/PirateGame/Field/IconField.js"></script>    <script src="src/js/PirateGame/Field/IconSpec.js"></script>    <script src="src/js/PirateGame/Field/ScoreAddGroup.js"></script>    <script src="src/js/PirateGame/Gui/GuiGroup.js"></script>    <script src="src/js/PirateGame/Gui/NextIcons.js"></script>    <script src="src/js/PirateGame/Gui/HelpGui.js"></script>    <script src="src/js/PirateGame/Gui/Score.js"></script>    <script src="src/js/PirateGame/Gui/PauseFrame.js"></script>    <script src="src/js/PirateGame/Gui/GameOverFrame.js"></script>    <script src="src/js/PirateGame/Gui/ButtonSound.js"></script></head><body>	<script>Main.main(600,800);</script></body></html>

I would like to make it so

<!DOCTYPE html><html lang="en"><head>	<meta charset="utf-8">	<title>TestPhaser</title>	<script src="phaser.js"></script>	<script src="app.js"></script></head><body>	<script>Main.main(600,800);</script></body></html>
Link to comment
Share on other sites


  • Recently Browsing   0 members

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