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

  1. 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.
  2. 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?
  3. 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
  4. 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:
  5. 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';
  6. 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!
  7. 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
  8. 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:
  9. 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!
  10. 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.
  11. 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?
  12. 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.
  13. 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.
  14. 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
  15. Hi @Temechon How are you,.I purchase the babylon.js  book and the code samples so please point me in the book how I do this je je , by the way thanks for making book for your help in advance.

    ABOUT ME : Im a javascript programmer with experience in angular and js framework, but I'm new to blender and the 3D World (1 month using blender), I love babylon it's all in javascript.

    I have been working with many 3D SDK's and platforms, but all comes to the same problem, animation issues.

    I try Blend4Web but they want $999 for the technical support and there is little info about sample code, but they have an addon that exports JSON/Bin files  and if I bake every single mesh animation it will work but I think it crashes blender after baking 10 parts of the mesh a 720 frames each.



    then I try Play-Canvas (adult content) , it has VR camera ready and you can upload FBX files, so what I use to do is to Upload an FBX files for the mesh and another FBX with mesh and animations,  I delete it all in the one with the animation  and I use the just animation combined with the FBX with no animation and it works, but the platform is that it do not  accept may polygons meshes and you have to decimate making this more difficult and time consuming but works.

    I would like to try the previous method in blender but I dont know how can I combine the FBX files with the animation exported in a separate FBX in blender, so I can repeat this process on playcanvas .

    MY METHOD SO FAR so I also I import an alembic file

    Finally I created a .babylon file using alembics with cache vertex animation, , 


    here is information links for my files 


     it possible to do it with an vertex animation cache , meaning with out bones like an alembic file, I import the file into blender the animation plays well but I try the animated and its no working

    I created a .babylon file and added the animation attributes, e.g.' autoAnimate ... ' see below, then I drop the file in the sandbox

        "autoAnimate": true,
        "autoAnimateFrom": 0,
        "autoAnimateTo": 50,
        "autoAnimateLoop": true

    I tried before CTRL + A and add location, rotation, scale, and it worked on a simple animation

    I repeat the same with my files and it does not work :( 


    the files are big so please download it from this links the first one is the alembic the other ones are FBX and a BVH to capture the animation and also below I put pictures of my export options and the cube babylon code animated ready , ,


  16. Hi guys! What do you think to support TypeScript 2 with npm? Check that please Regards,
  17. 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!
  18. 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.
  19. In the newest version of the phaser.d.ts the function getShortestAngle from the module Math cannot be found. It may not be defined in the file. I used this command to install it: typings install github:photonstorm/phaser/typescript/typings.json -GD
  20. Hi, I have implemented a simple Observer Pattern library in TypeScript/JavaScript which does not require inheritance. I have called it Paon (French name for a bird with many "eyes" on its feathers). It is available in my GitHub and in npm. Any feedback would be greatly appreciated. Paon An Observer Pattern Component in TypeScript/JavaScript. No dependencies. No inheritance is required. Observable is just a component inside an object. Observers are just functions. Installation npm install paon To compile the TypeScript source to JavaScript, you would need to install the TypeScript compiler: npm install -g typescript To generate the minified JavaScript version when building, you would need to install uglifyjs: npm install -g uglifyjs Build Resulting files are created in the dist/ folder. Complete build (compilation and minification): npm run build Simple compilation (no minification): npm run compile Usage All constants, interfaces, classes and functions are accessible inside the Paon namespace. Simple example Here is a simple example where we add an observable component inside a class Subject: /// <reference path="paon.d.ts" /> class Subject { private name: string; observable: Paon.Observable; // Observer Pattern component constructor(name: string) { = name; this.observable = new Paon.Observable(); // Instanciation/Initialization } changeName(name: string): string { = name; this.observable.notifyObservers("nameChanged"); // A message is sent to observers return; } } function onNameChanged() { alert("Name has changed"); } let subject = new Subject("Penelope"); subject.observable.addObserver("nameChanged", onNameChanged); // Function onNameChanged() subscribes to subject's messages "nameChanged" subject.changeName("Melissa"); // An alert popup appears: "Name has changed" Above, in the class Subject, the method changeName() will send a "nameChanged" message to the instance's observers. After the instanciation of Subject, the function onNameChanged() subscribes to subject's messages "nameChanged". Therefore, when changeName() is called, an alert popup appears. As we can see, with such a pattern, no inheritance with extends or implements is required. Just simple composition. Example with extra data We can send extra data to observers as we can see below: /// <reference path="paon.d.ts" /> class Subject { private name: string; observable: Paon.Observable; // Observer Pattern component constructor(name: string) { = name; this.observable = new Paon.Observable(); // Instanciation/Initialization } changeName(name: string): string { = name; this.observable.notifyObservers("nameChanged", { data: name }); // A message with extra data is sent to observers return; } } function onNameChanged(msg: { data: string }) { alert("Name has changed into " +; } let subject = new Subject("Penelope"); subject.observable.addObserver("nameChanged", onNameChanged); // Function onNameChanged() subscribes to subject's messages "nameChanged" subject.changeName("Melissa"); // An alert popup appears: "Name has changed into Melissa" The parameter msg in function onNameChanged() contains the extra data we have sent via method changeName(). Here, this is an object with a property data, but this could be anything. Module Importation This library can also be imported as a module with the import statement: import Paon from "./paon"; // Declaration file .d.ts location class Subject { private name: string; observable: Paon.Observable; // Observer Pattern component constructor(name: string) { = name; this.observable = new Paon.Observable(); // Instanciation/Initialization } changeName(name: string): string { = name; this.observable.notifyObservers("nameChanged", { data: name }); // A message with extra data is sent to observers return; } } function onNameChanged(msg: { data: string }) { alert("Name has changed into " +; } let subject = new Subject("Penelope"); subject.observable.addObserver("nameChanged", onNameChanged); // Function onNameChanged() subscribes to subject's messages "nameChanged" subject.changeName("Melissa"); // An alert popup appears: "Name has changed into Melissa" Only the import statement differs from previous examples. Otherwise, the code is the same. API Documentation Add an observer to a type of message (similar to the DOM function addEventListener()): Paon.Observable.addObserver(type: string, observer: Observer): Observer; Remove an observer from a type of message (similar to the DOM function removeEventListener()): Paon.Observable.removeObserver(type: string, observer: Observer): void; Remove all observers from a type of message: Paon.Observable.removeObserversType(type: string): void; Send a message to observers (similar to the DOM function dispatchEvent()): Paon.Observable.notifyObservers(type: string, msg?: any): void; Contributors yahiko Licence MIT
  21. Link : Controls: Arrow keys to move CTRL for melee attack SHIFT for ranged attack This is a hack 'n slash based on a prototype for an AI implementation of behavior trees, which is the main reason of this project. Sprites of monsters come from The title screen and the HUD were made by myself. Features implemented so far: 2D circle based collisions AI (cf. below) Pathfinding (not enabled for now) Respawn of monsters AI behaviors implemented so far: : Melee attack : Ranged attack : Hit and run : Just wandering Technologies: Written in TypeScript Powered by Phaser Framework If anyone serious enough is interested to improve this game (game design, game play, graphics, optimizations), feel free to contact me.
  22. We are looking for a babylon js freelance developer who can join our team by hours or projects as he/she wish. The goal is to code small-medium web app tools for an ecommerce site (less than 2000 lines of code) Typescript + clean structured code required, just working code is not the goal. Please PM with your $/hour and we will make a test. Thanks.
  23. Hello. I am looking to make a isometric tiled game. I am new to developing games but not that new to programming though. I have previous experience in javascript but I am learning typescript. Along with that I was looking to create a isometric tiled game. If I could program it on typescript it would be great. I have heard about the isometric plugin for phaser and I tried working with it with typescript. As I lack experience in typescript I would appreciate tutorials which aim is developing isometric tiled games in typescript. However, with this plugin and phaser I found none... only javascript ones. Can someone help me with this? I mean, do you think I should look for another game engine more focused on what I am looking for and that has more support in typescript, like tutorials, or should I stick with phaser somehow...? Honest Answers, thank you.
  24. Hello there! I am new to this community. As I did find it a bit difficult to find good resources to code with Phaser in TypeScript I decided to "track" my experiences and write tutorials as I proceed. For those who are interested: You find the tutorials in my git wiki here. I hope this will help. Feedback is always welcome. Eric
  25. Hi everyone, I have a client in Boston who is looking to hire someone who is familiar with either Pixi.JS or Typescript. If you have both, that is what they're ideally looking for. Feel free to email me at if you are interested. Senior JavaScript, Typescript UI Developer in Boston, MA MUST HAVE Excellent JavaScript and Typescript programming Skills Experience developing software libraries or services (API design) DESIRED Node.Js/IOJs Electron Atom JavascriptM Mocha Location: Boston, MA