Search the Community

Showing results for tags 'typescript'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 244 results

  1. I'm trying to figure out how to get typescript to recognize Babylon. My folder structure looks like this: app -assets --babylon.d.ts --babylon.js -game --game-model.ts In game-model.ts I'm using this: ///<referance path="../assets/babylon.d.ts" /> import * as BABYLON from 'BABYLON'; But when I try to build I get this error: client/dev/app/game/game-model.ts(2,26): error TS2307: Cannot find module 'BABYLON'. I know that it's finding the babylon.d.ts file because it's not giving me an error on that now. Maybe there's an easier way to do this using typings but I'm not finding babylon when I do `typings search babylonjs`. I'd appreciate any help. I'm pretty new to typescript. Used it in one other project but wasn't importing 3rd party JS. Thanks!
  2. Hi. I followed this tutorial to create a game. The example works but when I tried to add some code to it I got a problem. class SimpleGame { constructor() { = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { preload: this.preload, create: this.create }); } game: Phaser.Game; preload() {'logo', 'phaser2.png'); this.preloadGroup1(); // error 'this.preloadGroup1' is not a function this.preloadGroup2(); } preloadGroup1(){'group1', 'group1.png'); } preloadGroup2(){'group2', 'group2.png'); } } I got an error: 'this.preloadGroup is not a function'. It seems Phaser State call this inside it and can't find preloadGroup() which it's understandable because 'this' refer to SimpleGame object and not Phaser.State object. Strangely, calling or any property work flawlessly. Any way to work around this? Please don't tell me to write everything into preload function, I'd prefer not doing that.
  3. Hey guys, quick question.. I'm currently running PIXI v 3.0.10 with Typescript, but I wanted to bump up to PIXI 4. I can't find any type definition files online for this, does anybody here know if they exist yet? Thanks, Nick
  4. Hi, i'm looking for best pratices to start a phaser project with TypeScript. Most of the tutorials are not up to date (2013 on the site). What about project's structure (i mean directories, naming convention etc.), which tools etc ? EDIT : you can now download a complete Visual Studio Template for Phaser with TypeScript : (it's up to date and easy to install (VS Extension)) Regards, Fairy Regards,
  5. Hi, I'm reading this tutorial (2nd part) : in the second exemple, we got something like : class SimpleGame { constructor() { = new Phaser.Game(640, 480, Phaser.AUTO, 'content', { create: this.create});} moveUp(e: KeyboardEvent) { this.jetSprite.position.add(0, -1); } create() { this.W.onDown.add(SimpleGame.prototype.moveUp, this); } } can someone tell me why we need to use SimpleGame.prototype.moveUp to call this method? (and not just this.moveUP ?) is this because we are using this context ? regards,
  6. Hi all I have been trying out phaser, and want to use the Isometric plugin. I can get it all to work when using standard javascript, but ideally I'd like to use typescript. I can get phaser working in typescript based on the tutorials, and pull in the isometric plugin as so: this.iso =;but I cannot get calls such as, 0.1);var tile =, y, z, 'landscape', 'grass',;to work is constructor() { = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { preload: this.preload, create: this.create }); }I am using phaser 2.4.4 and latest isometric plugin. Any advice on if this is possible / I am doing it the wrong way would be greatly appreciated! Thanks
  7. Some background followed by several related questions. I have written a Javascript file myExtensionFile.js to submit for consideration as an extension. The current format of the file consists of a public function that calls several private functions and looks like this var private1 = function(a, b) { //code here } var private2 = function(a, b) { var myx = private1(c, d); //more code here } var myExtension = function(a, b, c) { //some code var myx = private1(m, n); //more code var myy = private2(p, q); //even more code } Once loaded you call it using myExtension(a, b, c). Now I have noticed that some files in the Babylon Extensions use BABYLONX Question 1 Should myExtensionFile.js be re-written so that it is called using BABYLONX.myExtension(a, b, c)? Question 2. If I changed to using BABYLONX is this the correct way to re-write myExtensionFile.js? var private1 = function(a, b) { //code here } var private2 = function(a, b) { var myx = private1(c, d); //more code here } var BABYLONX; (function (BABYLONX) { var myExtension = function(a, b, c) { //some code var myx = private1(m, n); //more code var myy = private2(p, q); //even more code } }()); Something to do with closures (I think) but haven't got to grips with them as yet. Question 3. Would using BABYLONX in this way clash with other extensions? Question 4. I can see that using BABYLONX rather than BABYLON shows in code that an extension is needed and should be loaded but would using just BABYLON be better for continuity? Is it possible to do that? Question 5. How would you format the myExtensionFile as typescript. I know I could just change the js file extension to ts but to be 'proper' typescript should I be using modules and classes? Question 6. For someone with a limited skill set (like me) would it be useful to have an 'How To Format A Babylon Extension for Javascript and Typescript' document? When I am clear whether there could be a standard format for writing extension code, what the format looks like and how to do it I wouldn't mind having a go at the documentation. Whether I will ever have sufficient clarity is another issue.
  8. Hello, here is a new classic game remade with a complete tutorial description, it use the Superpowers game editor (built on Threejs). You can address in this tutorial post your problems, propose change and ask for tutorial clarity. Or if you feel comfortable with that, you can open an issue on github or even can improve the tutorial directly by submitting pull requests for the markdown files in the github repository. You can also directly discuss about technical aspect of tutorial in the original post here. Thank you :-) SUPERPOWERS TUTORIAL #5 Super Pacman read gitbook tutorial --- play the game --- source assets --- source project Note : you can download fast zip for sources here.
  9. Hi, I'm probably doing something wrong here, but I can't find it for hours now... please help! I'm working with Typescript on a football game. I have a Game state and a ball sprite. I'm trying to create a class for the ball, which extends Phaser.Sprite. I'm getting no errors in the editor, but I get console error. This is the code for the Game state: // reference to typescript files /// <reference path="../lib/phaser.d.ts" /> /// <reference path="../Objects/Ball.ts" /> module Football{ export class Game extends Phaser.State{ ball: Football.Ball; preload(){"ball","Graphics/3d-ball.png", 229, 229, 4, 9, 6); } create(){ this.ball = new Ball(,100, 100); } update(){ } } } And this is the Ball class: /// <reference path="../lib/phaser.d.ts" /> module Football{ export class Ball extends Phaser.Sprite{ constructor (game: Phaser.Game,x:number,y:number){ super(game,x,y,"ballShadow"); } update(){ } } } When running, I get the following error in the console: "Game.ts:17 Uncaught TypeError: Football.Ball is not a constructor". Can someone tell me what's wrong with my code? Thanks!
  10. When you change the scale of the camera like this:; It also changes the camera bounds (They get multiplied by 1.5), but this means that the camera will show blackbars on the right and bottom side. It also seems like it's not possible to change the worldbounds every update (They get automatically changed again), besides this is also not a good solution.
  11. Hello, I made a tutorial for this little game I just released, I wanted to share it and take the opportunity to join the html5 game dev community. For the technology I use : it is Superpowers (which is a game editor based on threejs) and Typescript.
  12. Hey, Just a video [in French] for new users of Phaser : How to install Visual Studio Code (Free) and configures it to start your project with Phaser and TypeScript: Regards, Fairy.
  13. What should be the preferred language when writing Gameplay Code using Babylon.js? I have experience with engines like Unity and Unreal Engine where I've been used to programming in either C# (Unity) or C++ (Unreal); I haven't experienced any issues while writing Javascript code using Babylon.js but my question is would it be better to use Typescript instead of Javascript while developing games in Babylon.js? This is really important for me because if Typescript is more advantageous then I might just switch to it but since I don't really have much knowledge of Typescript I would have too learn it as well
  14. Hi, I am relatively new to Phaser. There are loads of game examples all written in plain Javascript. As I am a Visual Studio guy with OO experience, I prefer Typescript platforms over plain JS. Is there any guides that tell me how to convert JS code to Typescript productively? Please forgive me if the question had been asked before. If the answer does exist, please give directions. Thanks. Geo
  15. Hi, I just published short blog post on announcing my new Typescript defs for Phaser Box2D plugin. I remember, that few people asked for it here, on this forum. It may still contain some flaws - I already caught few of them during work on my game - but it is still very helpful. The blog post is here: And direct link to GitHub is here:
  16. Hello Folks, Global Game Jam 2016 happened last weekend and we'd like to show you our entry. It's a (very) short 'escape the room' game. We're proud of it because Phaser really increased our productivity, specially in jams, and we were able to finish the game in 26 hours. Here's the link: We hope you like it . We enjoyed it a lot while creating it! ... and before this question comes up: no, starving is not possible. You will get it when the time comes. Cheers, Vico
  17. My project for that evening was to try out Typescript a little bit to actually code something on the babylon framework. I did some tutorials and it seems really cool! Then I took the src Folder from Babylon added it to my Project Folder and wanted to compile and I got these errors: EDIT: Okay i managed to compile without errors. Than when using the javascript file I got that error when running in the Browser. I figgured that in the tsconfig.json the "module" should probably not commonjs but amd (it is some sort of require.js right?). But it didnt resolve the proble : / TypeError: BABYLON is undefined I am guessing there is something wrong with my config files... but I dont know what. I couldnt find any info online that helped me :/. I am using Visual Studio Code by the way. This would be the tsconfig.json { "compilerOptions": { "target": "es6", "module": "commonjs", "sourceMap": true, "out": "babylon_myBuild.js" } } And this is my task.json { "version": "0.1.0", // The command is tsc. Assumes that tsc has been installed using npm install -g typescript "command": "tsc", // The command is a shell script "isShellCommand": true, // Show the output window always "showOutput": "always", // Tell the tsc compiler to use the tsconfig.json from the open folder. "args": ["-p", "."], // use the standard tsc problem matcher to find compile problems // in the output. "problemMatcher": "$tsc" } Also what does the *.d.ts file mean? Would be cool if somebody could point me to the right direction
  18. Hello, this is my first topic on this board. I'm coding a simple BreakOut clone in TypeScript. My app consists of a main BreakOut class and the instances for Ball, Paddle and the canvas context. BreakOut.ts /** * Created by Nomid on 20/01/2016. */ /// <reference path="GameObject.ts"/> /// <reference path="Ball.ts"/> /// <reference path="Paddle.ts"/> /// <reference path="Direction.ts"/> /// <reference path="Sprite.ts"/> /// <reference path="Key.ts"/> class BreakOut { Ball : Ball; Paddle : Paddle; private pressed_keys : { [keycode: number] : boolean }; update(time: number): void { this.context.fillStyle = "red"; this.context.fillRect(0, 0, this.context.canvas.width, this.context.canvas.height); this.Ball.update(time); this.Paddle.update(time, this.pressed_keys); } updateKeys(E: KeyboardEvent) { this.pressed_keys[E.which || E.keyCode] = !this.pressed_keys[E.which || E.keyCode]; } constructor(public context: CanvasRenderingContext2D) { this.Ball = new Ball(context); this.Paddle = new Paddle(context); this.pressed_keys = []; window.addEventListener("keypress", this.updateKeys); window.addEventListener("keyup", this.updateKeys); } } It compiles without errors, but when I run it, these errors appear: BreakOut is initialized as follows: // jQuery 2.2.0 $(document).ready(function() { var Canvas = $("<canvas/>") .attr("width", window.innerWidth) .attr("height", window.innerHeight) .appendTo("body"); window.Game = new BreakOut(Canvas[0].getContext("2d")); window.requestAnimationFrame(Game.update); }); Thank you for helping me.
  19. I'm using Typescript with Phaser and I'd like to get some command-line tests running. I think I should be able to do this with node/mocha, but I'm having difficulty. I've got the following files; MyClass.ts /// <reference path="node_modules/phaser/typescript/phaser.d.ts" /> export class MyClass { d: Phaser.Sprite; constructor() { this.d = new Phaser.Sprite(new Phaser.Game, 10, 10); } win() : boolean { return true; } } test.ts /// <reference path="../typings/mocha/mocha.d.ts" /> import MyModule = require('../MyClass'); describe('MyClass', () => { var subject : MyModule.MyClass; beforeEach(function () { subject = new MyModule.MyClass(); }); describe('#win', () => { it('should pass', () => { var result : boolean =; if (result !== true) { throw new Error('Expected true but was ' + result); } }); }); }); I'm using ts-node to execute typescript in node so I execute mocha as follows; mocha --compilers ts:ts-node/register Compilation is successful, however the tests then fail at runtime because Phaser is not defined; MyClass #win 1) "before each" hook for "should pass" 0 passing (47ms) 1 failing 1) MyClass "before each" hook for "should pass": ReferenceError: Phaser is not defined at new MyClass (c:\Users\stafford\Documents\git\ts-node-test\MyClass.ts:5:22) at Context.<anonymous> (c:\Users\stafford\Documents\git\ts-node-test\test\test.ts:8:19) at callFn (C:\Users\stafford\AppData\Roaming\npm\node_modules\mocha\lib\runnable.js:286:21) at (C:\Users\stafford\AppData\Roaming\npm\node_modules\mocha\lib\runnable.js:279:7) at next (C:\Users\stafford\AppData\Roaming\npm\node_modules\mocha\lib\runner.js:297:10) at Immediate._onImmediate (C:\Users\stafford\AppData\Roaming\npm\node_modules\mocha\lib\runner.js:319:5) I thought I would then have to do something like this or similar; import Phaser = require('phaser'); But this then breaks compilation with the error phaser.d.ts is not a module. Has anyone had success testing in this way? What am I doing wrong? Or, perhaps if this is not possible, does anyone have another method of testing typescript objects that reference Phaser? There's a small repro here if anyone's interested.
  20. Are there any plans to submit babylonjs TypeScript type definition file to DefinitelyTyped site ?
  21. Hello everyone attached is my current running code, I tried to separate and make it more organized and more readable, I don't have any problems in Typescript (no compiling problems) but when I run it, it through run time error Uncaught TypeError: Cannot read property 'stars' of undefinedHere is the non working code :S Any help plz, The only difference I made a new class called StarEntity and just capsuled everything in it
  22. Hello! I found a strange (to me) behaviour. The 'this.load.path' value is not reset to null or an empty string at the end/start of a new state. I guess i see why you might want to set it once, if you have 1 place that you store all your content, but this behaviour caught me out. Is there a reason why it is not cleared automatically? I'd just like to know why the decision was made to have it that way. I guess i have been setting it in each State so this hasn't bit me before! Thanks!
  23. I'm still pretty new to Phaser/JS and TypeScript. I followed the Photonstorm tuts to get started with Phaser and TypeScript. And I have a few questions. First one is: How can I get the plugins: to work in my TypeScript environment? Do I have to re-write the files? Or can I just add them in as a reference? How? Thanks in advance!
  24. So I'm fairly new to Phaser and there are some topics I still haven't learn how to manage with TS. I saw some examples of the Isometric Plugin where Phaser plugins are loaded as follows: preload: function () { (...) // Add and enable the plug-in. game.plugins.add(new Phaser.Plugin.Isometric(game)); (...)}But reading the docs I realized that the class Phaser.Game does not contain a property "plugins". So I kept searching and I found the Phaser.PluginManager class that does have a "plugins" property but seems to take weird extra parameter. My question is: How can I create my own plugins and load them with typescript? I understand that my plugin class should extend Phaser.Plugin but I don't understand how to create an instance of the plugin in-game. Thanks for reading!
  25. Hi, I'm making a chess prototype. I'm having trouble with overlap. To make it simple, first I wanted to display a board and a pawn outside the board. The pawn is drag able. I wanted to achieve something like this: if the pawn is dragged on (so in other words if it overlaps) tile number 1 it will stay on this position, if not it will go back to the original position. It kinda works. But the problem is it accepts also the position slightly outside of a tile. How can I make this work properly? Also how (in elegant way) can I put the pawn into the center of the tile when the pawn overlaps the tile. Code snippet: onDraggingStart = (sprite: Phaser.Sprite, pointer: Phaser.Pointer) => { = "grabbing"; this.savePosition(); }onDraggingStop = (sprite: Phaser.Sprite, pointer: Phaser.Pointer) => { = "grab"; if (!this.checkOverlap(sprite, this.board.children[0])) { this.position.x = this.positionX; // it does not overlap -> go back to the original x this.position.y = this.positionY; // go back to the original y } }// the problem is with this functioncheckOverlap = (spriteA, spriteB) => { var boundsA = spriteA.getBounds(); var boundsB = spriteB.getBounds(); return Phaser.Rectangle.intersects(boundsA, boundsB);}Here is the screen shot of the original position: And accepted (but wrong) position: EDIT: OK, I found how can i center the sprite after release. It can be done by this line of code: this.input.enableSnap(64, 64, false, true, 7.5, 5);But still, I'm looking for an answer how to get more precise overlap. How can I accept changing position only if whole pawn is released inside the tile, not just piece of it?