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

  1. 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)!
  2. Hi guys, I am trying to create a Game with Ionic 2 (=> Typescript) and Phaser and so far it was fine... until that I tried to add the plugin Virtual Joystick. The line this.pad =; return an error about undefined "game" But the comment above this line works fine ... It's maybe that I don't use the correct syntax to call a plugin ... Please Help me import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; import { Platform,AlertController } from 'ionic-angular'; import { Storage } from '@ionic/storage'; import { HomePage } from '../home/home'; /* Generated class for the Play page. See for more info on Ionic pages and navigation. */ ///<reference path="js/phaser-virtual-joystick.min.js"/> @Component({ selector: 'page-play', templateUrl: 'play.html' }) export class PlayPage { score: any; scoreObj: Number; game: Phaser.Game; map: Phaser.Tilemap; balloon: Phaser.Sprite; bg: Phaser.TilemapLayer; start: Phaser.TilemapLayer; hit: Phaser.TilemapLayer; cursors: Phaser.CursorKeys; pad; stick; test; constructor(public navCtrl: NavController, public navParams: NavParams,platform: Platform,public storage:Storage,public alertCtrl: AlertController) { platform.ready().then(() => { storage.get('scores'); storage.get('level'); }); } ionViewDidEnter(){ this.score = 0; this.scoreObj = 100; var innerWidth = window.innerWidth; var innerHeight = window.innerHeight; = new Phaser.Game(innerWidth, innerHeight, Phaser.AUTO, 'myGame', {create: this.create, preload: this.preload,update:this.update, render: this.render}, true); } preload(){'balloon', 'img/balloon-01.png',112,150);'lest','img/sac.png');'target','img/hole.png');'level1', 'img/bg-test.json', null, Phaser.Tilemap.TILED_JSON);'bg-test', 'img/bg-test.png');'arcade', 'img/arcade-joystick.png', 'img/arcade-joystick.json'); } update = () =>{, this.hit,() => { this.balloon.kill(); this.score = this.score + 3; console.log("hit"); });, this.start);,,() => { this.balloon.kill(); console.log("bg"); this.score = this.score - 1; });; if (this.cursors.left.isDown) { this.balloon.position.x -= 5; } else if (this.cursors.right.isDown) { this.balloon.position.x += 5; } } render = () =>{; } create = () =>{ /*var plugins = new Phaser.PluginManager(; console.log(plugins);*/ this.pad =;; this.cursors =;, 0, 9600,800); //MAP var map ='level1',9600,800,9600,800); map.addTilesetImage('bg-test'); this.hit = map.createLayer('hit'); this.start = map.createLayer('start'); = map.createLayer('bg'); //BALLOON this.balloon = new Phaser.Sprite(, 192, 490, 'balloon'); this.balloon.debug = true;, 3);, Phaser.Physics.ARCADE); this.balloon.body.gravity.y = 15; this.balloon.body.collideWorldBounds = true; this.balloon.inputEnabled = true;, Phaser.Camera.FOLLOW_LOCKON, 0.1, 0.1); this.balloon.animations.add('fly', [ 0, 1, 2, 3, 4, 5], 20, true); this.balloon.body.velocity.y = 10; // GAME map.setCollision([1,2,4,5],true,,true); map.setCollision([6],true,this.hit.index,true); map.setCollision([3],true,this.start.index,true); } }
  3. Hi, We just published an article about how to install TypeScript IDE inside Phaser Editor. This allow you to create Phaser projects with TypeScript support and edit/compile the TypeScript files. Read the article here
  4. Hi, we are happy to announce a new (preview) release of Phaser Editor! There are a lot this time: The so waited MacOS support! Visual prefabs (sprites and groups). Visual editor support for states and preloader states. Some TypeScript support. Assets refactorings (great for larger projects) New Project wizards with more options (like include demo assets or use TypeScript). Updated Phaser Editor demos with prefabs and multi-levels. Git UI integration. And lot of fixes and enhancements. Many of them requested by Phaser Editor users (that's great, so many thanks!) Read the release notes. Arian
  5. Hi all, I am here to present Relic : Tale of the Undead Princess, a retro 2D action-adventure game. On the menu : Greenlight, trailers, playable demo and upcoming release ! OVERVIEW The princess is dead... But she is back ! The last hope against evil forces. Help her explore the realm and succeed where all heroes have failed. Relic : Tale of the Undead Princess is a retro 2D action-adventure game, with a fine blend of exploration, puzzles, secrets and challenges ! GREENLIGHT Support the Princess on Steam > Relic on Greenlight < I am not asking for "likes" it, but if you enjoy the concept and gameplay, a little help is always welcome. Thanks More resources on the Steam Greenlight page : trailer, screenshots, features and playable demos. DEVELOPMENT I work alone and I handle the programming, production, game design, level design, QA and misc art assets ; for everything else (main tilesheets, sprites, music) I license asset packs from artists and asset stores. Full detailed credits in the game. - Estimated play time : 8~12h, depending on player experience and game completion - Game size : ~200 playable screens - Team : myself ! - Development time : ~1 year, from scratch - Platforms : Windows 7/8/10, Linux (tested on Ubuntu 16.04 LTS) - Release date : TBC ~ Spring 2017 TOOLS - Tech : The game is developed in TypeScript, using VSCode and SmartGit. It is using the Phaser engine, in its latest pre-CE version, 2.6.2. On top of which I add my own gameplay framework, a json data-driven Entity-Component-System architecture. - Art & design : I'm using Pyxel for misc pixel art and Tiled for the level design. - Production : handled with Trello and Toggl, plus a collection of ad-hoc prod assets. - Shipping : The application is packaged with NW.js to deploy as a desktop executable. Thanks for reading - I hope you will enjoy Relic : Tale of the Undead Princess !
  6. PearFiction Studios is looking for an experienced HTML5 Game Developer to work with our highly talented Montreal team. Develop the next generation of online casino games in our cool loft style office in the trendy Plateau Mont-Royal district. If you have a personality to handle responsibility and collaborate in a small team environment, we'd love to have you join PearFiction Studio's dev team. Candidates should have an interest in online, mobile, and social casino games. You will be responsible for: Participating in designing the front-end aspects of a game design including entertainment, pacing, features, and UI functionality. Designing, developing, and maintaining games in HTML5. Developing new front-end game development tools, features, or extending current ones. Creating and owning all design documentation and deliverables for our HTML5 game development toolset. Developing new casino games with our HTML5 game development toolset. Integrating the game graphics and visual effects. Integrating the game business requirements and features. Ensuring entertainment value to end users. Maintain and test HTML5 games and tools to ensure stability. Essential Experience: Technical degree or higher in computer science Minimum of three years of HTML5 (Canvas and JavaScript/Typescript) game development for mobile and desktop platforms. Experience with Pixi.js or JavaScript/CSS frameworks. Solid knowledge of Object Oriented Programming, MVC and other design principles. Experience working in agile and iterative environments. Familiarity with project tracking tools such as JIRA or Trello. Familiarity with Git and feature branching approach. Understanding web browser game development, with focus on mobile. A flair for game graphics programming, animations, effects, and optimization for best performance for online and mobile use. Desirable Experience: Experience developing slot machine front ends. Good understanding of casino games and real money gaming mathematics. Experience working with graphically performance-heavy web applications. Experience with client-server integrations and serialization techniques. Open to challenges of learning new languages, technologies, frameworks and approaches to development. Experience in game development projects (hobby or professional). Experience with other programming languages (C#, Java, / PHP / Python / C++, etc) is an asset. Genuinely wants to do a good job as a matter of pride in one’s work. Keen to learn and demonstrate ability. Self-motivated. Bilingual (French and English) is an asset. You can apply on our website here -> or via LinkedIn here ->
  7. Hello, I'm trying to add animations to a class which is extending Phaser.Sprite export class PlayerEntity extends Phaser.Sprite { constructor(game: Phaser.Game, x: number, y: number) { super(game, x, y);, y, "player"); // Error this.animations.add("down", [0, 1, 2, 3], 10, true); this.animations.add("left", [8, 9, 10], 11, true); this.animations.add("right", [4, 5, 6, 7], 10, true); this.animations.add("up", [12, 13, 14, 15], 10, true);"down", 4, true);; } } Stacktrace: Uncaught TypeError: Cannot read property 'getFrameIndexes' of null at c.AnimationManager.add (phaser.min.js:19) at new PlayerEntity (:9000/js/entity/playerentity.js:18) at l.CreatePlayer (:9000/js/entity/entityfactory.js:5) at Level01.create (:9000/js/level/level01.js:20) at LevelController.create (:9000/js/level/controller.js:15) at WorldController.create (:9000/js/world/controller.js:27) at c.StateManager.loadComplete (phaser.min.js:10) at c.Loader.finishedLoading (phaser.min.js:20) at c.Loader.processLoadQueue (phaser.min.js:20) at c.Loader.asyncComplete (phaser.min.js:20) So "this.animations.add..." is the problem.; Doesn't have any effect. Thanks for reading and any help is appreciated!
  8. Hi, I'm writing a class that extends Phaser.Weapon and i want that the method update() keep running, like this: class MissileWeapon extends Phaser.Weapon { constructor(game: Phaser.Game){ super(game, game.plugins); } update(){ /*this not execute*/ } } But it not running. If i add this "hack": class MissileWeapon extends Phaser.Weapon { constructor(game: Phaser.Game){ super(game, game.plugins); /*the hack*/ = true; /*active plugin*/ this.hasUpdate = true; var test = game.plugins.add(Phaser.Weapon); /*Only for the game.plugins(PluginManager) start running*/ game.plugins.plugins.push(this); /*add my weapon in the PluginManager*/ } update(){ /*executing */ } } It seems that when extends of plugin Weapon, it not is added direct in the game.plugins (PluginManager), then the method update not executes. How could i make this without uses the "hack"? and i'm using Phaser version 2.6.2 thanks :-)
  9. 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
  10. Hi, I realized that I was not using the right indention and formatting option for the typescript files and this added a lot of unwelcomed whitespaces, linebreaks etc.. Is there a current formatting guideline for babylonjs ? If yes, would you consider adding it to the .tsconfig ? These are apparently my default ts formating settings. { "formatCodeOptions": { "indentSize": 4, "tabSize": 4, "newLineCharacter": "\r\n", "convertTabsToSpaces": true, "insertSpaceAfterCommaDelimiter": true, "insertSpaceAfterSemicolonInForStatements": true, "insertSpaceBeforeAndAfterBinaryOperators": true, "insertSpaceAfterKeywordsInControlFlowStatements": true, "insertSpaceAfterFunctionKeywordForAnonymousFunctions": false, "insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false, "placeOpenBraceOnNewLineForFunctions": false, "placeOpenBraceOnNewLineForControlBlocks": false } } Thanks !
  11. I built a 1st release of entity system with typescript. You can find the library at and here an example with a quick developed game shooter (crimson like): I hear suggestions.. Thanks
  12. @Deltakosh @davrous In the past year I've and others have seen a huge shift to Typescript. Why? In my opinion it is only creating a gap between native JS and those who might wish to use a wrap-around language - which has far less advantages than native WebGL. And for the future, will create serious limitations and divisions between users. Please explain the advantage to .TS files in the Github src directory of recent versions of BJS - if you can come up with ANY good reasons. Sorry if this sounds a bit harsh, but I'm having issues working with BJS for the first time in more than 2 years due to reading and working with Typescript. DB
  13. 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"?
  14. 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' }) ); });
  15. 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
  16. 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!
  17. 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; } }
  18. 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!
  19. 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.
  20. 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?
  21. 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:
  22. 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';
  23. 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!
  24. 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
  25. 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: