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
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 191 results

  1. Typescript vs Javascript

    Hello everyone, I've decided to start with PhaserJs, at the getting started page there is a sentence that reads "If you're coming from Flash / AS3 then we'd recommend giving a TypeScript a go"... And yes I coming pretty much from 12 years of Flash. Someone please could explain my what are the advantage of code in TypeScript and also recommend a IDE? Thanks in advance
  2. Arrows - Move Ship Space - Fire Weapon A, S, D - Change Weapon 3 Power Ups : - Slow Time - Speed - Shield
  3. OBJ Exporter help?

    So, with some googling i found this... the problem is, it's in TypeScript (I don't know what this is even)... I don't know how to implement this any time i try using this i get unexpected identifiers. (I also noticed this TypeScript language is really similar to c# lol). So how would i use this... I know this is very nooby but meh
  4. Hi, I am trying to use the Arcade-Slopes plugin in Typescript, but I'm not sure how to do it. I added a ref to the .d.ts file in tsconfig.json: "files": [ "./src/app.ts", "./vendor/phaser.d.ts", "./vendor/phaser-arcade-slopes.d.ts" ] This is how I'm trying to load the plugin. // enable arcade slopes plgin; But when I try to convert the collision layer: // Convert the collision layer to work with Arcade Slopes, 'arcadeslopes'); I get the following errors: src/app.ts(71,26): error TS2339: Property 'convertTilemapLayer' does not exist on type 'ArcadeSlopes'. vendor/phaser-arcade-slopes.d.ts(61,5): error TS7010: 'resolve', which lacks return-type annotation, implicitly has an 'any' return type. vendor/phaser-arcade-slopes.d.ts(156,17): error TS2304: Cannot find name 'object'. vendor/phaser-arcade-slopes.d.ts(157,14): error TS2304: Cannot find name 'object'. vendor/phaser-arcade-slopes.d.ts(238,3): error TS7010: 'clear', which lacks return-type annotation, implicitly has an 'any' return type. It looks like the arcade slopes .d.ts file isn't compiling properly either. Has anyone managed to use Arcade Slopes successfully with Typescript? I'm seriously considering restarting with plain old JS to avoid this problems.
  5. I'm just starting out with Phaser and not sure why I shouldn't use TS. It seems better to me. Not sure if there are any benefits over using JS.
  6. const ASSETS:string = "./assets"; // Simple game. class SimpleGame { phaser_game:Phaser.Game; constructor () { this.phaser_game = new Phaser.Game( 800, 600, Phaser.AUTO, "phaser", { create: this.create, preload: this.preload } ); } create () { let piplup_sprite:Phaser.Sprite = this.phaser_game.add.sprite(,, "logo" ); piplup_sprite.anchor.setTo(0.5, 0.5); } preload () { let piplup_sprite_path:string = ASSETS + "/piplup.png"; console.log(this.phaser_game); // Undefined? this.phaser_game.load.image("logo", piplup_sprite_path); } } window.onload = () => { let simple_game:SimpleGame = new SimpleGame(); }; I suppose the title is self-explanatory. I used Phaser with vanilla JavaScript before. Decided to learn TS but I got stuck why the `this.phaser_game` is undefined, while it is clearly defined in `constructor`?
  7. Phaser with Kotlin

    Hello. I've made a repository with a template and ported 568 examples of Phaser with Kotlin. Kotlin is a modern statically typed programming language that compiles to Javascript and now it can be used to code Phaser games!
  8. In my tsconfig.json I have "strictNullChecks": true That won't let me have something like: function unsetParent(mesh: AbstractMash) { mesh.setParent(null); } Error TS2345 (TS) Argument of type 'null' is not assignable to parameter of type 'AbstractMesh'. I didn't see a tsconfig in BabylonJS project. Seems like it should be setParent(mesh: AbstractMesh | null){...}? Or is it just not support to have strictNullChecks.
  9. Create React App + BabylonJS

    With the recently added NPM support added in 3.1.0alpha3.4 and some popular React ES6/Typescript starter kits being deprecated in favour of CRA (, I wanted to finally try out importing GUI with CRA + TypeScript. Thought I would put up a repo for anybody interested. Here is the demo: Source: Source for page with BabylonJS: So, it's pretty straightforward from the docs (, but also in practice turned out quite fast to get started.
  10. Hello , I'm super new to Typescript , html5 , and I'm looking for some direction, so I started my first "hello world" game and I would like to know how to host it(web host). I have windows hosting through Arvixe... not sure what is required I'm using visual studio 2015 and typescript Thank you in advance Jimmy
  11. [Help] Access function in html file

    Hello there, I am relatively new to game development. I have defined a function ShowAds() within the html index file <script type="text/javascript"> var version = 'dev', libs = [ ]; var game = new StuddGames.AppBoot(); function ShowAds() { console.log("Show Ad"); } </script> is there a way i can call this function from typescript within the game code? Thanks for your help
  12. I'm stuck with loading my meshes. I'm new to all the 3D and modelling so any thoughts are highly appreciated. Basically I want to extends Babylons default Mesh class called BaseMesh and add a 'load' function to it to get rid of clutter in my scene code. I'm extending this BaseMesh class for each model I have. My BaseMesh class: (Note that all code examples are written in TypeScript) // BaseMesh.ts class BaseMesh /* extends BABLYON.Mesh */ { public readonly BASE_URL: string; // I want these to be static public readonly MODEL_URL: string; // I want these to be static public readonly NAME: string; // I want these to be static public body; /* constructor( scene ) { // I don't know what to do here super( this.NAME //name scene // scene null // parent ? // source ); } */ public load( assetsManager: BABYLON.AssetsManager ) { return assetsManager.addMeshTask( this.NAME + ' task', // name "", this.BASE_URL, this.MODEL_URL ); } public onLoaded( results ) { // I don't know what to do here this.body = results.loadedMeshes[0]; } public update(): void {} }; A model class would looks like this: // Robot.ts class Robot extends BaseMesh { public readonly BASE_URL: string = '/models/'; public readonly MODEL_URL: string = 'robot.babylon'; public readonly NAME: string = 'robotMesh'; public update(): void { this.body.rotation.y += 0.03; } } In my code above I store the loadedMesh from the AssetsManager into this.body. But here is question 1: why is my model already showing on the scene when the meshtask has run? I'm only loading a mesh, I've not put anything about putting it on the scene. Question 2: How do I extend my BaseMesh class from BABLYON.Mesh so that the result (loadedMeshes) of my load function is "the mesh itself" (instead of an attribute this.body). For example this would mean I could change my update function to 'this.rotation.y += 0.03;' and just generally makes more sense. Question 3: I'm really confused about the relationship between my "code" and my "model/.babylon files". Is there any good documentation/tutorials about this? These questions range from: - when is it healthy to split different parts of a model in different files - do I apply textures in my code or do I do that in my .babylon file - do I apply animations in my blender file or do I code them - ... This was a pain to type, if you have any questions please do ask Thank you in advance!
  13. I wrote an interactive neural network visualization web program where people can explore the inner workings of neural networks. Here is the description page (where I mention and link to BabylonJS in the FAQ): This is the browser-based application:
  14. Hi, So, I've been following many tutorials but appear to be stuck at the first hurdle. I don't appear to be able to use the Debug Inspector if I'm using TypeScript and ES6 imports. I've setup my first scene using the initial tutorial (a sphere and a surface) on the website just fine using the TypeScript documentation (creating a Game class and so on). To do this in the ES6 way I import BabylonJS from node_modules by doing import * as BABYLON from 'babylonjs'; at the top of my .ts file and it works like a charm. Then I add; to show the debug panel and I'm then faced with the following error in the Chrome debug console: babylon.inspector.bundle.js:408 Uncaught ReferenceError: BABYLON is not defined at INSPECTOR (babylon.inspector.bundle.js:408) at Object.t (babylon.inspector.bundle.js:408) at __webpack_require__ (babylon.inspector.bundle.js:21) at Object.<anonymous> (babylon.inspector.bundle.js:49) at __webpack_require__ (babylon.inspector.bundle.js:21) at babylon.inspector.bundle.js:41 at babylon.inspector.bundle.js:44 This is because it's absolutely right, the namespace BABYLON isn't included globally, my application is ES6, imports libraries where needed and then concatenates using Webpack. I moved to BabylonJS because it's dev team seemed to embrace TypeScript and ES6 but can't believe that something like this would have been overlooked? So that leads me to thinking I'm doing something wrong here. The only way I can see this working (which I found some libraries to do) is if the show() function to take the BABYLON object directly as an optional parameter, rather than expect for it to exist on the window (because it won't if you're importing ES6 style and webpacking). Open to thoughts and suggestions on this one as I'm new to BabylonJS. If I'm right with the above and it's just not something that has been done yet, I don't mind submitting a pull request.
  15. I was trying to layout 3 columns of buttons. The buttons are GUI.Controls. Each column could be a GUI.StackPanel. As far as adding the 3 StackPanels to the texture you might add them to the GUI.AdvancedDynamicTexture using addControl(control :Control). No idea what would happen layout wise. Adding a StackPanel to an AdvancedDynamicTexture works though. If you were to do this in Typescript you would error GUI.StackPanel inherits from GUI.Container. GUI.Control is a root class. Should not the AdvancedDynamicTexture signature for add/removeControl be: public addControl(control: Control|Container): AdvancedDynamicTexture You might also add the 3 stackPanels in to a larger one with horizontal orientation. You could expect to know what would happen. Container.addControl seems to have the same problem, yet Control.AddHeader() does that.
  16. Hey all, just wondering if anyone could spare their knowledge on getting started with PIXI.js with Typescript I've made a couple of simple games now using PIXI.js and love it! Though really find javascript a pain to use as the games get bigger with all code being in 1 js file. What I want to start doing is making a library around PIXI.js for common things I will need (e.g. controls, grid layouts, etc) and build it up from there. Something so simple with UnityC# and even FlashAS3 that I always took for granted! I understand Typescript maybe the best way to do this, though am a little confused about the difference between all the options (Browserify, Babel, ES6, Typescript etc) what they all actually do what if any of those I will need, and what is the best way forward! Many thanks for any advice!
  17. Good evening all, My name is Christopher, and I have decided to use the Babylonjs npm repo. Question Once you include the babylonjs npm library through npm install how do you activate the extensions which are included? the attached file-structure.png shows the file-tree which is created in node_modules after using npm install. I am trying to use the included gui extension specifically. Environment Angular, Node, and Express, compiled using webpack Library npm babylon js To install the npm library into my project's node_modules: npm install --save babylonjs then my component has the import statement below: import * as BABYLON from 'babylonjs'; The above statement will utilize the babylon.module.d.ts file in the attached image and babylon.max.js This lets me use the BABYLON class with types perfectly as expected. However, none of the files in the gui folder in the attached image are hooked up. How would I go about activating this extension?? Solutions I've attempted thus far 0) just a normal import of the main babylonjs module: import * as BABYLON from 'babylonjs'; All core BABYLON methods and properties are accessible. However, BABYLON.GUI gives the following typescript error: "Property 'GUI' does not exist on 'typeof BABYLON'." Which is to be expected, since none of the gui files are hooked up. 1) using CDN for everything in index.html. <head> <!-- base href="/" is used for angular2 routing --> <base href="/"> <title>some website</title> <link id="favicon" rel="icon" href="public/assets/favicon.png"> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></script> </head> This works, however, is not ideal, and defeats the purpose of the npm library. Also, the typescript definition files have to be maintained separate, either through the tsconfig.json, or in the component with a ///ref tag, and is very finecky. 2) using npm for babylon, and CDN for gui. Does not work, this method throws errors, because the CDN script tag in the head of index.html is compiled before the npm module, meaning the babylon class this extension extends does not exist at that time. 3) Using a second import to try to include the BABYLON.GUI class extension. import * as BABYLON from 'babylonjs'; import 'babylonjs/preview release/gui'; there is no .module file in the gui filepath so npm doesn't find anything there, so the second import fails. I've looked everywhere, including the docs and haven't found a clear solution. So how do we activate these extensions? They are included in the npm repo so naturally the devs want us to use them, and I'd love to take advantage of them
  18. I'm getting ready for the js13k competition by refining and expanding my TypeScript Game Framework MINI.ts with the goal to let me make 2D games as fast as possible. My current plans are to work on Clean up Canvas Renderer Implement 2D WebGL renderer Implement Steering Behavior Refine basic physics Implement QuadTrees and Chunking Implement Terrain generation Implement some standard UI elements Improve the build process and get the TS code to generate JSDocs so that I can use Google's Closure compiler to get a smaller file size I'm looking for other ideas of features I might need later on or that make help speed up developer later on.
  19. Phaser + Typescript issue

    I've got an issue with phaser and Typescript where my classes that extend Phaser classes aren't recognizing the Phaser class fields. I posted a pretty detailed stackoverflow question about it, but was wondering if anyone on here might have a suggestion. Feel free to reply here or there. Here's the details:
  20. Pixi.js + TypeScript boilerplate

    After a couple of days working with Pixi.js, I've built up a simple boiler plate for the TypeScript language I'm glad to share: The game loop with a FPS meter is already implemented. This boiler plate supports source maps, incremental builds, unit tests and browser auto-refresh. Maybe this could be helpful. Feel free to comment. There is certainly a room for improvement. Cheers!
  21. A small simple multiplayer game There is also book that I have just published showing the steps to take to create such a game Preview:
  22. I'm trying to crop a Phaser.Text, so I can make something similar to the As3 TextField class (where your text is inside of a mask). But the crop method is not working, here is what I did: this.pText = new Phaser.Text(, 0, 0, text, style); this.pText.crop(new Phaser.Rectangle(0, 0, 20, 20), true); this.pText.updateCrop();
  23. Weird typing issues..

    Hi, I'm getting some really odd issues when I am trying to extend Babylon JS objects. Example: class Scene extends BABYLON.Scene { } class Game { public engine: BABYLON.Engine; public currentScene: Scene = null; } Mesh = BABYLON.Mesh.CreateGround("newGround", 1000, 1000, 1, newGame.currentScene); Gives me the following errors: (9,69): error TS2345: Argument of type 'Scene' is not assignable to parameter of type 'BABYLON.Scene'. Property '_environmentTexture' is protected but type 'Scene' is not a class derived from 'Scene'. Is this something that is not supported? Weird thing is I had this working and then suddenly it stopped.. Thanks! -StarToaster
  24. I am wondering why the renderer.backgroundColor property is not public in TypeScript. In order to get directly access to this useful property, I needed to create a helper class to expose this attribute: class GameRenderer extends PIXI.WebGLRenderer { public backgroundColor: number; } If anyone has an explanation, I would be interested to read it. Thanks!