Search the Community

Showing results for tags 'typescript'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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 159 results

  1. 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 !
  2. Hello, I need to add some 3d functionality to an existing project. That project is based on lastest PIXI build (so I can't use PIXI fork by ivan.popelyshev), and I decided to write a plugin that offers flat sprites in 3d space. On my PC (in Google Chrome) it works quite well, but when I'm testing it on Asus Zenfone 2 (also in Google Chrome) the FPS is very low, especially when my 3d objects are moving and rotating. The performance is bad even with quite a few objects (~25 visible objects and some invisible 3d containers). I added some optimizations, but it wouldn't help. Could you please tell me what can cause that performance issues? I attached plugin source code to the post. Thanks in advance for answer. P.S. Is there any new information about 3d support in PIXI itself (PIXI flip)? And is it possible to use another framework that supports 3d, along with existing project based on PIXI? plugin3d.zip
  3. This past weekend, I took a break from working on another game I'm working on called Space Pizzas (here's the forum post) to try out a couple web development technologies I hadn’t previously used: GlimmerJS and TypeScript. If you're not familiar with Glimmer, it is a component library (like React) with quite a bit more tooling (like Ember). And if you're not familiar with TypeScript, it is superset of JavaScript that adds a type system in the hopes of making big applications less fraught with peril than your typical big JavaScript app.Using the above technologies, I made a game called Croissant Hoops in the vein of Qwiboo’s Ball King. The idea of the game is to use the mouse or touch to drag an arc that will place the basketball into the hoop. I also added a slider that changes the games gravity (I mostly did this to try out the property bindings in Glimmer).The game can be played at hoops.spacepizzas.com.Here’s a GIF of Croissant Hoops: In case anyone is interested, I put the source code on GitHub. The game is made directly on an HTML <canvas>. If I were going to go any further with this game, I'd probably use a framework like Phaser, but I think I'll probably leave the game as it is for now.
  4. I just released Phaser NPM Webpack TypeScript Starter Project (catchy name, isn't it?) GitHub link or my github.io 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)!
  5. Hi everyone My entry in Jamtastic vol.#1 Play here: http://45.55.60.152/games/42/ (link fix) Made with: Phaser/Typescript (I'll put the game code in github soon. ) Any comments, feedback or suggestions anyone has is greatly appreciated =D
  6. 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';
  7. I'm currently trying to get my first Phaser project working, fiddled around a whole day trying to get it all set up but since I'm completely new to writing bigger JS projects with modules, I have no idea how any of this works, even after googling and reading a million guides. I want to write TypeScript in VSCode. So first I installed phaser with npm install phaser --save Then I import Phaser in my app.ts with import Phaser = require("phaser-ce"); Did I pick the right syntax out of the 50 different ones? Whatever, this is the one I chose. So, while im coding I now got code completion and type hints working, but after compiling to JS, I now have multiple problems: First of all, the compiler adds code to my main JS file which tries to access a global module or exports object which obviously doesn't exist. Why? Why does it assume this exists? How can I turn this off? No idea. This is what it pastes righto onto line 2 of the main JS file: Object.defineProperty(exports, "__esModule", { value: true }); And since "exports" doesn't exist unless I hack it into the HTML file, it gives me an error. But now the more important question is... how exactly do I import Phaser? As far as I know you can't really import other JS files into another? (At least not in ES5 as far as I know). (Great, after switching my text color to an illegible light gray, forcing me to manually recolor all the text to black, now the text editor here creates a new paragraph instead of a new line everytime I press enter. Whyyyyyyy...........) In order to get code hints I need to import Phaser in my TypeScript file with the import statement, but if I use anything other than "module": "commonjs" in my tsconfig.json It can't find phaser anymore: // tsconfig.json // ... "compilerOptions": { "module": "commonjs", // ... // game.ts import Phaser = require("phaser-ce"); // WORKS // tsconfig.json // ... "compilerOptions": { "module": "anything other than commonjs", // ... // game.ts import * as Phaser from "phaser-ce"; // Can't use same syntax. Why? I don't know. // TypeScriptCompiler error: // Cannot find module 'phaser-ce' But of course commonjs doesn't work in the browser so... I tried instead to load the typings manually by copying the into [email protected]/phaser and then instead of importing Phaser, instead referencing the typings with: /// <reference types="phaser"/> And including phaser.js in my index.htm But since Phaser itself has a bunch of dependencies that it tries to load with require() which of course doesn't exist and even if it did couldn't work, how am I supposed to do this correctly? It just whines about Pixi not being defined and some other stuff. I read http://phaser.io/tutorials/how-to-use-phaser-with-typescript but it never mentions how Pixi etc is supposed to be included and doesn't say anything about require, export, module errors, it just works apparently, but not for me. Which of the 50 different module systems does Phaser use, how does it export itself? RequireJS? AMD? UMD? ES6? ES2015? I have no idea how many different methods there are and how to tell which one is being used. How do I import it correctly? Do I need to manually add ALL *.js files of phaser into the <head> of my index.htm? This is all waaaaay too confusing....., help please Edit: I got a basic version working for now by just scrapping all the import stuff, setting tsconfig.json "module" to "none", adding a ///<reference types="phaser-ce"/> at the top of my game.ts and just including phaser.js in the html file. How it gets it's dependencies I still don't know but at least it works now. I also have no Idea where it gets the typings from, I guess it must be magic.
  8. Hi all! I am new on Phaser, just got it working with my FireLoop project. FireLoop generates Angular 2 project with Angular CLI. I made my own TypeScript game into that and it works just great, well almost. I have the following code in my project: /// <reference path="../../../node_modules/phaser/typescript/phaser.d.ts" /> import { SessionInterface, Session, FireLoopRef } from '../shared/sdk/models'; import { RealTime } from '../shared/sdk/services'; import { LoopBackConfig } from '../shared/sdk'; export class SimpleGame { session: Session; sessions: Session[] = new Array<Session>(); sessionRef : FireLoopRef<Session>; game: Phaser.Game; sessionsText: Phaser.Text; constructor(private rt: RealTime) { this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { create: this.create }); this.rt.onReady().subscribe(() => { this.sessionRef = this.rt.FireLoop.ref<Session>(Session); this.sessionRef.on('change').subscribe((sessions: Session[]) => { this.sessions = sessions; this.updateText(); }); // this.sessionRef.stats().subscribe((stats: any) => console.log("stats:", stats)); }); this.rt.onDisconnect().subscribe((error: string) => { console.log('Disconnected', error); }); this.rt.onUnAuthorized().subscribe((error: string) => { console.log('UnAuthorized', error); }); this.rt.onAuthenticated().subscribe((error: string) => { console.log('Authenticated', error); }); } create() { let text = "Hello World!"; let headerStyle = { font: "65px Arial", fill: "#ff0000", align: "center" }; let textStyle = { font: "24px Arial", fill: "#ff0000", align: "center" }; this.game.add.text(0, 0, text, headerStyle); this.sessionsText = this.game.add.text(0, 100, "Initializing...", textStyle); } updateText() { let sessionsString: string; if (this.sessions) { sessionsString = "Hosts: " + this.sessions.map(session => session.host) + ", Clients: " + this.sessions.map(session => session.client); console.log(sessionsString, this.sessionsText); this.sessionsText.setText(sessionsString); } } } The problem is with sessionText variable. When I console.log it right at the end of "create"-function, it seems to be proper object. Anyhow when I try to console.log it anywhere else, it is undefined. So, this setText line never works: this.sessionsText.setText(sessionsString); Instead, it gives an error. So, I guess it isn't saving the variable at the create like it's supposed to. Any solutions. Here's also a screenshot:
  9. Hello, I begin to study Pixi.js and TypeScript. This log shows "undefined" on line 34: // Add the sprite to the stage console.log(this.stage); Code: /// <reference path="./libs/pixi.js.d.ts" /> class Game { private stage: PIXI.Container; private renderer: PIXI.WebGLRenderer | PIXI.CanvasRenderer; public constructor() { // Create the stage and renderer this.stage = new PIXI.Container(); this.renderer = PIXI.autoDetectRenderer(256, 256); document.body.appendChild(this.renderer.view); } public run() : void { // User Pixi's build-in `loader` object to load an image PIXI.loader .add("./images/chapter01/pixie96x48.png") .load(this.setup); } // This `setup` function will run when the image has loaded private setup(): void { // Create the sprite from the texture let pixie = new PIXI.Sprite( PIXI.loader.resources["./images/chapter01/pixie96x48.png"].texture ); // Add the sprite to the stage console.log(this.stage); this.stage.addChild(pixie); // Render the stage this.renderer.render(this.stage); } } window.onload = () => { let game = new Game(); game.run(); }
  10. Hello, I began to make a Battle City clone for studying a programming in TypeScript and Phaser. You can run it: https://8observer8.bitbucket.io/Phaser/BattleCity/dist/ I don't understand how to write an algorithm for snapping a tank to a grid how it is in an original game. When I turn a tank I need to snap tank coordinates to: 16, 32, 48, 64, ..., 384, 400. Thank you in advance
  11. Hi, I guess this is a question and an answer, but not an announcement. I wanted to switch my BabylonJS game from javascript to TypeScript and wanted to share my experience in case it will help somebody else - otherwise looking forward to finding an even better way! The project template I used will run on Windows, Linux and Mac. My javascript was getting a bit unwieldy, so I looked around for a TypeScript solution that would also be easy to deploy and integrate later with server-side. I found that I was doing a lot of things in javascript by convention (ie: 'name' property on meshes) and I wanted the benefits of the structural typing provided by TypeScript - so, a compiler to pick up on my mistakes instead of run-time errors. I got additional benefits like better intellisense and less bugs (actually found bugs during the conversion!). My code is easier to read and my intent is sometimes clearer on the purpose of functions. Since switching a couple of weeks ago, I have found that my code is a lot easier to maintain and most importantly much easier to change and there was not a big learning curve. I checked out quite a few solutions like starter kits with TypeScript and settled on using the Microsoft SPA templates. I created a github demo repo: https://github.com/brianzinn/dotnet-new-babylonjs-starter The first commit is generated by the template and the second commit were the changes to add BabylonJS and create the attached screen. If you opt for Visual Studio you can put a break point in your TypeScript and it will break on code running in your scene. I only installed the free community version of Visual Studio, which installs the .NET Core dependencies as well. In the attachment can see that I clicked on the sphere in the scene and I can inspect the Mesh properties in the IDE. Nothing really new if you are used to the browser debugger, but nice that you can use your IDE and it will break in Chrome or IE. If you haven't used other transpilers like TypeScript/GWT that generate code maps for javascript, keep in mind you are breaking on TypeScript, but the browser is running javascript. You can look at the generated javascript in ./wwwroot/dist (that is what is served to the browser). I attached a breakpoint and the BabylonJS scene of the project running. Have Fun!!
  12. 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 = this.game.plugins.add(Phaser.Plugin.VirtualJoystick); 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 [email protected]/core'; import { NavController, NavParams } from 'ionic-angular'; import { Platform,AlertController } from 'ionic-angular'; import { Storage } from [email protected]/storage'; import { HomePage } from '../home/home'; /* Generated class for the Play page. See http://ionicframework.com/docs/v2/components/#navigation 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; this.game = new Phaser.Game(innerWidth, innerHeight, Phaser.AUTO, 'myGame', {create: this.create, preload: this.preload,update:this.update, render: this.render}, true); } preload(){ this.game.load.spritesheet('balloon', 'img/balloon-01.png',112,150); this.game.load.image('lest','img/sac.png'); this.game.load.image('target','img/hole.png'); this.game.load.tilemap('level1', 'img/bg-test.json', null, Phaser.Tilemap.TILED_JSON); this.game.load.image('bg-test', 'img/bg-test.png'); this.game.load.atlas('arcade', 'img/arcade-joystick.png', 'img/arcade-joystick.json'); } update = () =>{ this.game.physics.arcade.collide(this.balloon, this.hit,() => { this.balloon.kill(); this.score = this.score + 3; console.log("hit"); }); this.game.physics.arcade.collide(this.balloon, this.start); this.game.physics.arcade.collide(this.balloon, this.bg,() => { this.balloon.kill(); console.log("bg"); this.score = this.score - 1; }); this.game.input.update(); if (this.cursors.left.isDown) { this.balloon.position.x -= 5; } else if (this.cursors.right.isDown) { this.balloon.position.x += 5; } } render = () =>{ this.game.debug.body(this.balloon); } create = () =>{ /*var plugins = new Phaser.PluginManager(this.game); console.log(plugins);*/ this.pad = this.game.plugins.add(Phaser.Plugin.VirtualJoystick); this.game.physics.startSystem(Phaser.Physics.ARCADE); this.cursors = this.game.input.keyboard.createCursorKeys(); this.game.world.setBounds(0, 0, 9600,800); //MAP var map = this.game.add.tilemap('level1',9600,800,9600,800); map.addTilesetImage('bg-test'); this.hit = map.createLayer('hit'); this.start = map.createLayer('start'); this.bg = map.createLayer('bg'); //BALLOON this.balloon = new Phaser.Sprite(this.game, 192, 490, 'balloon'); this.balloon.debug = true; this.game.world.addAt(this.balloon, 3); this.game.physics.enable(this.balloon, Phaser.Physics.ARCADE); this.balloon.body.gravity.y = 15; this.balloon.body.collideWorldBounds = true; this.balloon.inputEnabled = true; this.game.camera.follow(this.balloon, 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,this.bg.index,true); map.setCollision([6],true,this.hit.index,true); map.setCollision([3],true,this.start.index,true); } }
  13. 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
  14. 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
  15. 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 Phaser.io 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 -> http://pearfiction.com/careers/ or via LinkedIn here -> https://www.linkedin.com/jobs/cap/view/271185313/?pathWildcard=271185313&trk=job_capjs
  16. 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); this.game.add.sprite(x, 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); this.animations.play("down", 4, true); this.game.add.existing(this); } } 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. this.game.add.existing(this); Doesn't have any effect. Thanks for reading and any help is appreciated!
  17. 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*/ this.active = 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 :-)
  18. 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
  19. 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 !
  20. I built a 1st release of entity system with typescript. You can find the library at https://github.com/francoagusto/entities and here an example with a quick developed game shooter (crimson like): https://github.com/francoagusto/entities-example I hear suggestions.. Thanks
  21. @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
  22. 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"?
  23. I have made a basic gulp file following Techemon's code (he uses grunt though) here: https://github.com/Temechon/Babylon.js-FPS 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' }) ); });
  24. 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
  25. 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!