Riddle Posted July 27, 2016 Share Posted July 27, 2016 I have been trying to find good quality phaser tutorials with typescript. But all the documents and tutorials on the phaser site of quality are for javascript, the typescript tutorials are not as in depth and somewhat confusing. I've been trying to find phaser-typescript tutorials around the web but they're mostly dated 2 or more years ago, seem to target more advanced users, and when I attempt to copy and paste it doesn't work. So far I've been hacking together this based on what I could find in any available typescript-phaser tutorials I could get my hands on and google searching problems I get from the compiler. The current issue I am receiving when I compile: Error /file path/phaser.d.ts is not a module. Which is a step up to module not found (had to ../../add those)...but not sure how to make it a module... Right now I have a practice1.ts file located in www/game/practice/practice1.ts, phaser1.html, compiled phaser1.js and my phaser stuff: www/engine/typescript/phaser.d.ts and www/engine/js/phaser.js Here is my .ts file----------------- /// <reference path="../../engine/typescript/phaser.d.ts" /> import Phaser = require('../../engine/typescript/phaser.d.ts') class SimpleGame { constructor() { this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { create: this.create }); } game: Phaser.Game; create() { var text = "Hello World!"; var style = { font: "65px Arial", fill: "#ff0000", align: "center" }; this.game.add.text(0, 0, text, style); } } window.onload = () => { var game = new SimpleGame(); }; Here is my .html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Hello Phaser</title> <link rel="stylesheet" href="app.css" type="text/css" /> <script src="engine/js/phaser.js"></script> <script src="practice1.js"></script> </head> <body> <div id="content"></div> </body> </html> I am not sure if I should have written ../../engine/js/phaser.js -- here but everything loads a blank either way. I have the tsconfig.json file, there is nothing in it because I'm new to all this and don't know what to do. I wanted to program this in typescript because I enjoy C# and have experience with that but I dislike the tangled mess of javascript, it is the only language of the web with everythng else compiling to it of sorts. So with the work I want to do there is no way around it. I like that typescript just looks cleaner and I can think in classes easier; so this is the language I want to use, but I'm hitting some snags. I've been stuck on this for a while now. Can anyone help? Link to comment Share on other sites More sharing options...
Riddle Posted July 27, 2016 Author Share Posted July 27, 2016 1 hour ago, Riddle said: import Phaser = require('../../engine/typescript/phaser.d.ts') Update, I removed the import line, and it was able to run. This leaves me with my next question: are there any up to date beginner friendly typescript tutorials that are high quality/detailed? alternatively any typescript-phaser books in existence? Link to comment Share on other sites More sharing options...
Ralph Posted July 28, 2016 Share Posted July 28, 2016 A quick google got me here: http://www.gamefromscratch.com/page/Adventures-in-Phaser-with-TypeScript-tutorial-series.aspx I know some of their other tutorials are pretty decent, but have no idea how good or accurate this one is. I must ask tho, why use typescript, especially if you are new? Link to comment Share on other sites More sharing options...
Riddle Posted July 28, 2016 Author Share Posted July 28, 2016 Hey Ralph thanks, the short answer is because I'm not new to programming in the same sense, I'm uncomfortable with it but being in my 30s, I've been programming since I was 14 or 16, and building websites since tables were used. The long answer is that It's better to say that I'm a hack and slash programmer. I can read code semi-fluently and hack code together from existing material to do what I want, but struggle to write original code. I'm shit at it, but I enjoy it. I'm forcing myself to expand as a programmer out of necessity for where my work is leading me. I've programmed games in C# , Unity both 2D and 3D, gamemaker, Tads 3, Inform and Unreal engine. I am comfortable building websites, and I have a degree in game development but that doesn't mean I'm comfortable with what I do, or even confident. I have written a few games in javascript over 3-4 years ago but I didn't enjoy it and don't consider myself a strong programmer and have always -hated- javascript with a passion so I backed away from it. At the same time I also really wanted to program games via the web, esp. with html5 and CSS3 evolving in a direction that I like a lot and because I never could quite get on the flash bandwagon. Years ago there were things I wanted to do without javascript that I can actually do now with just CSS3 and HTML5, though try as I might to resist it, javascript is the only language of the web esp. when it comes to adding game-logic (enter frameworks like Phaser). I recently found out bridge.net and typescript existed when I decided to get into blockchain development for an ARG I was working on as an alternative to 'javascript' which led me to "Meteor". From that point, I switched from working on a PHP game to Node.js and changed my mindset with javascript and decided to use the Phaser engine with Typescript to build an Oregon Trail style text-based game. Bonus being that Phaser was pure javascript. I'd explored using other engines designed for text-based games, but needed to do something that would have required coding my own stuff that Phaser already had built in, and wanted to do something console styled. Phaser comes with built in game-logic for the game loop and has Typescript support and more. I can also add animations and sprites to my text-based game and do some things with Phaser that I can't do with something like Inform or Tads 3 or Choicescript without building features from scratch. Since typescript is similar to C# and requies Node.js and since it seemed more reasonable to build a game using C# than it did Javascript. I ended up here. But I had never used Typescript before or any other language that compiles to Javascript, despite having played with Javascript I am still in a new world. I didn't want my 'lack' of knowledge to keep me from doing something that would make life easier in the long run so I installed node.js, learned command lines, explored different frameworks for both node and game engines (when building my developer environment),installed typescript, did a few typescript tutorials, downloaded Phaser, followed the javascript tutorials, seemed easy enough since I'm used to working with frameworks anyway. And I just have learned as I have gone along since then. Now I am working on Phaser-Typescript games. I know what Typescript adds to Javascript and what it changes; but the biggest thing for me is I'm a web developer on one side, and a game developer on the other and not even a good one at that (I do this because I'm a writer first, programmer second), this is the first time i'm marrying the two together. Game Web Development is completely different and new to me; but I'm not 'new' if that makes sense? Essentially I'm just switching from one language to the other and trying to learn how do you 'do that' with that language in the web development world (which has been significantly different but not painfully so...). Since I'm developing a game with Phaser the tool I'm using is Typescript. Though it's fair to say that since yesterday I feel much more comfortable with typescript and phaser, just getting hung up on a few bits and trying to get over programmer anxiety! sojiro and Fenopiù 2 Link to comment Share on other sites More sharing options...
Tom Atom Posted July 28, 2016 Share Posted July 28, 2016 Hi, some time ago I wrote small 3 part tutorial on making small game: http://sbcgamesdev.blogspot.cz/2015/05/phaser-tutorial-dronshooter-simple-game.html It should be still valid. It is small game using P2 physics. Riddle 1 Link to comment Share on other sites More sharing options...
digitsensitive Posted February 14, 2017 Share Posted February 14, 2017 Hello! You might have a look at my repository / wiki here: https://github.com/Wizak/phaser.typescript.tutorial For now it shows you the configuration and setup Phaser <-> Typescript and how to work with multiple typescript files. I am planing to update my wiki in the coming weeks and months. Link to comment Share on other sites More sharing options...
Cyclone112 Posted February 15, 2017 Share Posted February 15, 2017 On 7/27/2016 at 11:18 PM, Ralph said: A quick google got me here: http://www.gamefromscratch.com/page/Adventures-in-Phaser-with-TypeScript-tutorial-series.aspx I know some of their other tutorials are pretty decent, but have no idea how good or accurate this one is. I must ask tho, why use typescript, especially if you are new? This is the exact tutorial I used to start my game in TypeScript a few months back. Most of it is still relevant and some pages have comments with modifications to things that are outdated. Highly recommended. Link to comment Share on other sites More sharing options...
Recommended Posts