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 141 results

  1. let mat1 : BABYLON.StandardMaterial = new BABYLON.StandardMaterial("mat1", scene); let mesh1 = new BABYLON.Mesh("mesh1", scene); mesh1.material = mat1; mesh1.material.opacityTexture = null; // '<-- This is not allowed.' In this situation TypeScript complains that we can't set opacityTexture because mesh1.material is of type BABYLON.Material (not BABYLON.StandardMaterial). I could of course just do "mat1.opacityTexture = null", but what is the typical way to handle this type of situation in TypeScript if I really want to access the material via "mesh1.material"?
  2. I have made a basic gulp file following Techemon's code (he uses grunt though) here: I notice he is using babylon.2.3.d.ts. (Not 2.5 or 2.6.) With my gulp build I am able to compile my project with babylon.2.3.d.ts and everything compiles successfully. With sublime text if I build (using the official typescript sublime text plugin) with babylon.2.5.d.ts, it compiles my game.ts file successfully, no errors. But if I try to use babylon.2.5.d.ts with gulp using gulp-typescript, I get the following compilation error: node_modules/typescript/lib/lib.d.ts(5603,11): error TS2320: Interface 'AudioContext' cannot simultaneously extend types 'AudioContextBase' and 'EventTarget'. Named property 'addEventListener' of types 'AudioContextBase' and 'EventTarget' are not identical. Am I doing something wrong? Is this a bug with babylon 2.5? Does anyone have an example gulpfile.js (preferably with browserify+tsify) that compiles their TypeScript game successfully with a recent version of Babylon? I don't know if it's relevant but here is my gulpfile.js: 'use strict'; var gulp = require('gulp'); var ts = require("gulp-typescript"); var sourcemaps = require('gulp-sourcemaps'); var paths = { ts: [ 'babylon.2.5.d.ts', 'game.ts', ] }; gulp.task("ts1", function () { return gulp.src(paths.ts) .pipe( ts({ module: 'amd', target: 'es5', declaration: false, sourceMap:true, removeComments:false, out: 'dist' }) ); });
  3. I'm still a relative newbie with BJS and typescript. I've managed to get observers working in my TS class but I found that I couldn't use "this" instance references within the callback function e.g. class MyMesh extends BABYLON.Mesh { private myMeshChild:BABYLON.Mesh; constructor() { // Create child mesh and add some animation etc. this.myMeshChild.onBeforeRenderObservable.add(function () { console.log(this.myMeshChild.rotation); } } } This compiles fine but results in runtime error "Cannot read property 'rotation' of 'undefined'". But if I instead assign to a local variable first, then it works, e.g. class MyMesh extends BABYLON.Mesh { private myMeshChild:BABYLON.Mesh; constructor() { // Create child mesh and add some animation etc. let myMeshChild = this.myMeshChild; this.myMeshChild.onBeforeRenderObservable.add(function () { console.log(myMeshChild.rotation); } } } I feel like I'm using Observables all wrong in Typescript. I'm wondering what's the best way to pass variables to the callback function from within my TS classes? Also I feel like if I add an observer to a mesh then the callback function should be aware of the context i.e. the mesh object from which it's called and therefore I shouldn't have to also assign objects to local variables before I can refer to them in the function, but maybe I'm expecting too much. Any pointers on using Observables correctly from within Typescript classes would be most appreciated. @Nockawa @Deltakosh
  4. I want to setup a Phaser project via npm: npm install --save phaser-ce When I put some code in a *.ts file, TSLint in VS Code will always say "cannot find name 'Phaser'". I can use triple-slash reference, but are there any better ways to do that? Or there are some tutorials on how to setup a project via NPM in TypeScript? Using NPM will be easier to keep Phaser up-to-date instead of downloading *.js and *.d.ts files respectively. Although there are many templates to help us setup a project with Phaser+Webpack+TypeScript, I think it's better to learn how to setup, so I could do more on it myself such as bundling Cordova and Eletron with Phaser in TypeScript. Thanks for advance!
  5. Hello everyone, I'm working on a small game using TypeScript, and I hit a compilation issue with the Phaser.Tilemap object. I was going to submit it as an issue to GitHub, but because I'm new here I wanted to error on the side of caution and make sure that this is actually an issue, as per the contribution guidelines. According to the phaser.d.ts file, on [line 5057](, the objects project is supposed to be an any[]. When running my application, I can see that Phaser.Tilemap.objects is an Object, with another property called objects, which is an any[]. I have attached a screenshot of my code editor watch expressions that shows the issue I'm facing. If we make the following change to the def file, it would resolve the issue. I have confirmed the change in my local repository, and everything appears to compile as expected. objects: { objects: any[]; }; To generate the error, I am loading TILED_JSON map data and iterating through it to find a specific tile, as follows: let map: Phaser.Tilemap for(let o of map.objects.objects) { if(o.type === "start") { start = new Phaser.Point(o.x, o.y - map.tileHeight); break; } }
  6. I just released Phaser NPM Webpack TypeScript Starter Project (catchy name, isn't it?) GitHub link or my link as a base starting point for creating games with Phaser using TypeScript taking advantage of the Phaser npm module and Webpack for building (which I couldn't find a template for, so I made one). It includes the typical 3 states (boot, preloader, title) to show the flow of a Phaser game. It also includes a watch task that watches the project for any changes and recompiles, and another task to run a live server that refreshes automatically after a build. It only takes a few seconds and a couple commands to get going (after having node.js installed)! It's platform agnostic (I've tested on OSX, Ubuntu running on a Chromebook, and Windows 10 in a VM running on OSX and had zero difference in behaviour). Hopefully someone here will find it useful, or at least take a look and let me know how to improve it (I plan on using this template and it's evolutions for all my future Phaser projects)!
  7. Hey all, I'm trying to filter an entire group, but I can't seem to succeed, where applying that same filter to a sprite instantly works. I'm working on my first Typescript project and I like it a lot! I have a MainGame class (mainGame.ts) which extends Phaser.State and I have a Container class (container.ts) which extends Phaser.Group When I apply a filter to a sprite that I simply added like: this.body = this.add.sprite(0, 0, 'bgBase'); this.body.filters = [ new Phaser.Filter.BlurY(, null,'') ]; the blur filter is applied. Now when I try to apply the filter to a container which contains Sprites, like: this.container = new Container(; this.container.filters = [ new Phaser.Filter.BlurY(, null,'') ]; does NOT work. But when I apply the filter directly to a Sprite inside the container, like: this.container.someSprite.filters = [ new Phaser.Filter.BlurY(, null,'') ]; the filter is applied as expected. I must be overlooking something important for how I create or add the group, but I keep missing it. I hope somebody has an idea about where to look. Help will be much appreciated!
  8. Hello I started to study this tutorial: Advanced Phaser and TypeScript Projects I want to write a code on JSFiddle. I started here: But I see the error in console: _super is not defined Please, help me.
  9. I am currently converting my working Babylon typescript code into an angular 2 component, but it doesn't seem to render on the screen. It is finding the correct canvas, and everything including the render loop (which calls scene.render) is running without errors and I am not sure why everything is working except for making it show up on the canvas, I had no issues with this prior to adding the code to a component and all of the code works except for that single part. Any suggestions regarding what could be going wrong?
  10. If you want to start testing WebGL 2 in TypeScript I have already written a definition file right here that you can use Reason I wrote this is because I couldn't find reliable ones on Internet (they were very obsolete) and currently TypeScript doesn't support WebGL 2 Edit: In order to use WebGL 2 API in code you need to write: const CANVAS: HTMLCanvasElement = document.getElementById("myCanvas") as HTMLCanvasElement; // get canvas element let GL: WebGLRenderingContext & WebGL2RenderingContext = CANVAS.getContext("webgl2") as any; // get webgl2 context
  11. Hello guys, just wanted to show an HTML5 game made with superpowers. Super Coin Collector is a shoot e'm up 2D for Android inspired by Super Crate Box. You can download it from:
  12. Anyone know the correct way to get plugins like pixi-spine into Angular 2 or Ionic 2? import * as PIXI from 'pixi.js'; works for getting the base pixi library in. But, how do you do something like import * as PIXI from 'pixi.js' and 'pixi-spine';
  13. Just4fun game, developed with phaser+typescript. You are the Governor of Campania (south of Italy)... and you must save Salerno (my city) from the Evil Imperial invasion.... Why "fried fish edition"... its a complex story related to a vote exchange in last italian constitutional referendum... hauhaahahauh!! Never mind... just play! tnx in advance for any feeback! Here a video about Salerno... and Penguins!
  14. Our company is developing a browser-based collectible card game where players will be able to create personal collections, build and edit decks, create and join games in a lobby, and play against live opponents entirely inside their browser. We are hiring a front-end web developer to build our website. We already have a backend game engine and database. The selected job applicant will be required to develop the site and connect it to the backend through our API. Our website is already partially developed. We have had two previous developers and it will be important that our new developer can work with a large existing code base. The platform is written in Typescript using the HTML5 based open-source game library Phaser. Technical requirements: This position is for a front end developer only. No back end work will be assigned Code written in Typescript, with Phaser Collect and validate user input Transmit user input to the API: user interactions include typing, clicking, and drag & drop Process responses from API Display responses to the user: output includes displaying cards moving to different locations, highlighting values that have changed. Attractive display (smooth animations, pleasant arrangement) are a must If you're interested in the position, message me with the following information: - Your CV - A brief description of what interests you about the project - How many hours a week you would like to work on the game - What is your desired rate of pay
  15. What physics engines are available for Javascript and/or Typescript? I've searched myself but maybe there's one or two I missed. I also found a post in these forums but that's over two years old now; It's a little disappointing to see that some of them aren't actively developed and lacking a lot of features. I put together a test to compare the different engines I tried - I've attached the files if anyone wants to try it out. Here are the engines I've tried: PhysicsJs - Incomplete: lacking simple features like constraints - Seems like it was last updated 2 years ago - Possibly the worst performance - Strange API (in my opinion) and difficult to use - Built in mouse interaction behaves strangely MatterJs - Also incomplete and lacking constraints - Has a built in mouse constraint but it acts strangely - Updated recently - Simple and easy to use - Doesn't handle stress test well p2.js - Complete - Updated within the last few months - Doesn't handle stress test well - Easy to use - Good documentation Box2DWeb - Complete - everything you would expect from Box2D - Last updated one or two years ago - Semi-poor documentation - you have use the box2d flash documentation which is fairly thorough but slightly outdated - Much faster and a lot more accurate than the above three libraries. Nape - Complete - lots of features - but isn't very active - Has a great marching squares utility which can convert bitmaps into polygons - Good site and documentation - Easy to use but the pooling get/dispose stuff can be a bit confusing - Similar (or maybe even slight better) performance to Box2DWeb and possibly more accurate - Large - minified it's still 1.7MB The one problem with Nape though is that it isn't really meant for Javascript and I had a lot of trouble getting it set up in Typescript. There were some project to convert it to js and generate definition files but I had to modify them a lot to get something complete that worked for me. I also had to manually convert the debug draw classes from as3 to js and Easeljs. Luckily that only needs to be done once - after that I didn't have any problems using it though. I also tried PhysicsType2D ( but couldn't get it to work. Overall I was a bit disappointed; In terms of performance, the 'native' js libraries fell short by a lot compared to the two ported ones, and on top of that they lacked a lot of important features. Even the ported ones didn't perform as well as their Flash/As3 versions - the Nape stress test (you can find it here) which I copied, runs significantly better in flash. UPDATE: You can find the updated github repo here:
  16. Hello, I'm trying to make separate weapon classes in an Asteroids-type game, for example a Missile.ts, Laser.ts, etc. What I have so far is this (Missile.ts): module Spaceroni { export class Missile extends Phaser.Weapon { constructor(game: Phaser.Game) { super(game, game.plugins); this.bulletKillType = Phaser.Weapon.KILL_LIFESPAN; this.bulletSpeed = 1500; this.fireRate = 20; } } } In my Player.ts I have weapon: Spaceroni.Missile; up top and I'm adding a weapon in its constructor with this.weapon = game.add.weapon(30, 'missile'); This isn't working (bulletSpeed and fireRate aren't changing), I think because game.add.weapon() creates a new weapon instance, separate from my Missile class. I would like to avoid putting all of this Missile-specific code directly into the Player class since I want to be able to change the weapon based on power-ups, as well as add the Missile weapon to enemies. Any ideas on how to properly extend the weapon plugin? Thanks in advance!
  17. Hello, I have a question about the layer property of the TileMap class. The documentation ( ( says that the layer property is of the type Phaser.TilemapLayer. However, the Typescript definition ( says that the type is a TilemapLayer[]. Is this right? How is this supposed to be used? I was under the impression that Tilemap.setLayer() could be used to set the current layer on the Tilemap object, and the the TilemapLayer object could be referenced through the Tilemap.layer property.
  18. So far I've been developing my project using TypeScript and simply compiling it into JavaScript via VS Code. Is there any good reason for me to migrate to Webpack? Will it positively affect the code or structure in any way?
  19. So I'm a phaser/html5 newbie, but coming from java I've chosen to take the typescript route, and am now trying to get plugins to work, but have been having major issues, and haven't been able to find any "official" information about typescript plugin support, only a few threads here with hacky solutions that haven't worked for me. What confuses me is that there are often typescript typings along with the plugins, which would indicate that they're supposed to work with typescript. Any insight into this would be greatly appreciated, and if I may suggest, should perhaps be more clearly presented in the documentation.
  20. I create a babylonjs starter for typescript here. built using gulp. The only issue I am having is when trying to get the definitions to work. I thought with typescript 2.0 you could simply do npm install --save @typings/babylonjs but it seems that points to an old version I am new to getting typescript working, so if anyone knows how to get that to work would really appreciate it. Currently with the starter I made You will get errors like src\client\game.ts(32,22): error TS2304: Cannot find name 'BABYLON'. Thanks for any help, and hopefully others can use this to get started in the future as well.
  21. I'm new to development and very new to Phaser. I'm trying to create my first game and I'm having issues getting my collision to work as well as creating timed events. Collision: I've already created my main player (doug) & some obstacles (snowman)., this.snowman, (doug: any, snowmen: any) => { if (doug instanceof (Phaser.Sprite)) { (<Phaser.Sprite>doug).kill; } } I'm not getting any errors, but nothing is happening when Doug runs into the snowmen. Perhaps is has something to deal with how I'm creating the snowmen: code below: let snowmen =; snowmen.enableBody = true;, Phaser.Physics.ARCADE); for (var i = 0; i < 4; i++){ this.snowman = snowmen.create( * Math.random(), -50,"snowman");, Phaser.Physics.ARCADE); this.snowman.body.collideWorldBounds = false; this.snowman.body.gravity.y = 40; } Timed Events: To give the illusion of moving through space, I'd like to make a function that creates sprites of trees falling at either end of my screen. function below: treefall() { let trees =; trees.enableBody = true;, Phaser.Physics.ARCADE); for (var i = 0; i < 4; i++) { this.tree = trees.create(-1250, -400, "tree4"); this.tree = trees.create(900, -400, "tree4"); this.tree.body.collideWorldBounds = false; this.tree.body.gravity.y = 40; } I'm getting an error on the line of code that calls this function: * 1, this.treefall,; This is sitting in my create function. Any advice would be hugely appreciated!
  22. Hey there, My name is Martin and I am the founder of Fractal Games and Zariba Game Academy. Fractal Games is a small, independent studio for creating original brain/puzzle HTML5 games. In Zariba Game Academy have different courses in game development, including one in Phaser. Having gained lots of experience in the last couple of years, we have decided to offer our services to help creating your games. We use the following technologies, among others: UI: HTML, CSS, JavaScript, jQuery and Angular (if necessary) Backend: Python or nodeJS Game Dev: Phaser and TypeScript Builds: Cordova, Crosswalk, Android Studio, Xcode, Gulp etc. What we can offer: Very reasonable (indie/freelance) prices and quick development. High quality code, structure and architecture to make your game/s as maintainable and extendable as possible. Highly responsive and scalable games - dynamically resizeable both in portrait and landscape. We can build your game/s for Web, Android, iOS, Facebook and Amazon, among others. We can implement native functions for Android and iOS like Score Sharing, Facebook and G+ login,personalized accounts with avatars... etc. LINKS: Website (beta) Daily Challenge (Sudoku is in beta) Google Play profile (more games soon) iOS Build (currently publishing more for iOS) Phaser Course from Zariba Academy Worms Clone for Zariba Academy (demo) Zeef Page (Zariba Academy) If you are interested, feel free to contact me directly: email: antonov.martin {((at))} skype: foggy-in_your_eyes facebook
  23. Hi guys! What do you think to support TypeScript 2 with npm? Check that please Regards,
  24. First and foremost, I want to thank the devs for making Phaser Editor, it's amazing! I'll definitely be purchasing it on my next paycheck (if my company doesn't expense it). For a bit of background I'm new to web-based game development (and web programming as a whole), and Phaser Editor is my entry point! That being said I come from a background as a Unity developer, and so I apologize if many (if not all) of my questions relate more to Phaser and js as a whole and not Phaser Editor in particular, but I'm hoping for the way to best do things using Phaser Editor. These questions are asked having done the "Mario-Style Platformer" tutorial found at: There are a few things I'm having a bit of trouble wrapping my head around:What exactly is a prototype? Does every object (sprite) have one? Where/how can you access this? Is it the name of the original image file? The first instance you create? The name of a function you first need to write and then assign? How would that be done?When you drag an object from assets to scene, or duplicate an object, does it create a new prototype, or a new instance?Can you assign instance variables to prototypes/objects? Can this be done in the scene editor? (ie every "coin" has the variable "collected" set to "false" at start)What is the best way to do this?In the templates and the "Mario-Style Platformer" tutorial, all logic is done in Level.js. Can you instead place the logic of each prototype/object into its own script? (ie Player.js, Coin.js)As Level.js already loads the assets.json, does every script need to do the same, or can they just access it from Level.js? How is cross-script referencing done?In the same tutorial, all the fruits/coins are collected into a group. Is this a container/parent object? Are the elements then children? What is the best way/when is the best time to assign a variable to all elements? (I tried doing so in Create using "this.pickups.setAll("collected", false);", but when I checked the value in an element later it returned null) In many Phaser examples online, Functions are done with out any form of container (ie Function preload()), and everything is executed by game (ie game.add._____) but in both the tutorial and the templates, functions are done through Level.protoype (ie Level.prototype.preload = function()), and everything is executed by this. (which I assume also points to Level.prototype?). Is there a difference? Is there a reason to doing things one way or the other? What is the best way to check/set a value in each element of the group?(ie Instead of kill the fruit object upon overlap with player, I set them to play an animation. How would I then set them to destroy upon completion?)Is there a way to find a specific element in a group (similar to an array index)?Can you set parent child relations in the scene editor? If not how is this set?Is there a way to use Vectors/containers to compare and assign values? (ie player.position = Vector2(x, y))Is there a way to emulate/simulate a 3 button mouse/middle click? (ie ctrl + alt + left click)I understand that at this time, Phaser Editor does not support Typescript. However as I am more familiar with C based OOP, many have suggested it. Would using Typescript externally alongside Phaser editor break workflow/the project? (From what I understand Phaser Editor does not support editing files externally?)Sorry for the trouble, and thank you for your time!
  25. I'm using Phaser and TypeScript to create a Snake game with multiple snakes and my question is about the general structure of the program. My question is: What is the best way to structure the data for such a game using Phaser.js? So I mean which variable types to use for the snakes, walls, apples etc. when the key features of the game would be: Everything is placed on a grid There are multiple snakes that can grow and shrink during a game Snakes move on a timer from tile to tile (so no smooth animation in-between tiles) There are walls, the layout differs per level but doesn't change during a game Food item appear randomly and can be eaten by the snakes The snakes are build up out of several sprites, and they will display the shape of the snake including the bends and turns with shadow effect etc. These snake-parts need to be updated as the snake moves/shrinks/grows. For each move the game will need to check if the snakeheads bumps into something, either a wall or a food item or another snake (or its own tail). I was first thinking of using just one big two-dimensional array, fill it with integers to represent all in-game items. And then another two-dimensional arry filled with sprites, make all those sprites invisible, and then for each move set the sprites (frame number/visibility) in the corresponding array positions. Array[x][y] (entire play area) with integers representing all items, 1=snakehead 2=snake-part-up .. 8=apple, 9=wall etc. Array[x][y] (entire play area) | +- Phaser.Sprite But a better approach would be to use Phaser.Group to group each snake, and then a separate Phaser.Group to hold all the food items and maybe also the walls. And for the hit detection/eat food etc. there need to iterate all groups children against all other groups children. Another thing is that each snake also needs to hold some extra information (head position, direction) and I can't easily extend default classes (using Type Script) array[snakes] | +- Phaser.Groups (a group for each snake) | +- Phaser.Sprites (snake parts) Phaser.Group (FOOD + WALLS) | +- Phaser.Sprite (sprite for each apple or mushroom) For the hit detection/eat food etc. it makes more sense to just put it in a two-dimensional array because everything is on a grid, and then you can simply lookup the grid positions to see if something is in it. So, I'll be glad to hear any ideas on this.. Btw I've already seen this Phaser Snake tutorial but that example does not address the issues with multiple snakes and the snake parts sprites.