{"action":"created","issue":{"url":"https://api.github.com/repos/photonstorm/phaser/issues/2609","repository_url":"https://api.github.com/repos/photonstorm/phaser","labels_url":"https://api.github.com/repos/photonstorm/phaser/issues/2609/labels{/name}","comments_url":"https://api.github.com/repos/photonstorm/phaser/issues/2609/comments","events_url":"https://api.github.com/repos/photonstorm/phaser/issues/2609/events","html_url":"https://github.com/photonstorm/phaser/issues/2609","id":164671239,"number":2609,"title":"[Typescript] [Examples] Mistake with methods bindings","user":{"login":"Shiroy","id":1006143,"avatar_url":"https://avatars.githubusercontent.com/u/1006143?v=3","gravatar_id":"","url":"https://api.github.com/users/Shiroy","html_url":"https://github.com/Shiroy","followers_url":"https://api.github.com/users/Shiroy/followers","following_url":"https://api.github.com/users/Shiroy/following{/other_user}","gists_url":"https://api.github.com/users/Shiroy/gists{/gist_id}","starred_url":"https://api.github.com/users/Shiroy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Shiroy/subscriptions","organizations_url":"https://api.github.com/users/Shiroy/orgs","repos_url":"https://api.github.com/users/Shiroy/repos","events_url":"https://api.github.com/users/Shiroy/events{/privacy}","received_events_url":"https://api.github.com/users/Shiroy/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-07-09T15:19:48Z","updated_at":"2016-08-05T05:43:18Z","closed_at":null,"body":"Hi !\r\n\r\nThis Issue is about \r\n\r\n* A bug in the API\r\n* A problem with my own code\r\n\r\nIn this code\r\n\r\n```typescript\r\nclass SimpleGame {\r\n\r\n    constructor() {\r\n        this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { preload: this.preload, create: this.create });\r\n    }\r\n\r\n    game: Phaser.Game;\r\n\r\n    preload() {\r\n        this.game.load.image('logo', 'phaser2.png');\r\n    }\r\n\r\n    create() {\r\n        var logo = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'logo');\r\n        logo.anchor.setTo(0.5, 0.5);\r\n    }\r\n\r\n}\r\n\r\nwindow.onload = () => {\r\n\r\n    var game = new SimpleGame();\r\n\r\n};\r\n```\r\n\r\nIf you rename the attribute game to anything else, the code won't pass the preload state because of an undefined attribute 'new game's name'.\r\n\r\nThis is because, when phaser calls state functions, the `this` attributes is overridden by a `Phaser.Game` object. Because a Phaser.Game has the attribute `game`, it runs perfectly in this case. It crashes in any other cases.\r\n\r\nThe expected behavior is to have a `this` of type `SimpleGame`.\r\n\r\nYou can find more information here : https://github.com/Microsoft/TypeScript/wiki/'this'-in-TypeScript\r\n\r\nTo sum up the article :\r\n```typescript\r\nvar x = this.preload\r\n//is equivalent to\r\nvar x = SimpleGame.prototype.preload\r\n\r\n// =================\r\n//What is expected\r\nx();\r\n//equivalent to\r\nthis.preload();\r\n//==================\r\n\r\n//How to get it\r\nvar x = SimpleGame.prototype.preload.bind(this);\r\n```\r\n\r\nThanks"},"comment":{"url":"https://api.github.com/repos/photonstorm/phaser/issues/comments/237760747","html_url":"https://github.com/photonstorm/phaser/issues/2609#issuecomment-237760747","issue_url":"https://api.github.com/repos/photonstorm/phaser/issues/2609","id":237760747,"user":{"login":"joelrobichaud","id":1106491,"avatar_url":"https://avatars.githubusercontent.com/u/1106491?v=3","gravatar_id":"","url":"https://api.github.com/users/joelrobichaud","html_url":"https://github.com/joelrobichaud","followers_url":"https://api.github.com/users/joelrobichaud/followers","following_url":"https://api.github.com/users/joelrobichaud/following{/other_user}","gists_url":"https://api.github.com/users/joelrobichaud/gists{/gist_id}","starred_url":"https://api.github.com/users/joelrobichaud/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/joelrobichaud/subscriptions","organizations_url":"https://api.github.com/users/joelrobichaud/orgs","repos_url":"https://api.github.com/users/joelrobichaud/repos","events_url":"https://api.github.com/users/joelrobichaud/events{/privacy}","received_events_url":"https://api.github.com/users/joelrobichaud/received_events","type":"User","site_admin":false},"created_at":"2016-08-05T05:43:18Z","updated_at":"2016-08-05T05:43:18Z","body":"The way I see it, this is not a problem with the API, but mostly a problem with the way your code is layed out. Since Typescript uses lexical this, I think the proper way of implementing what you want is by having your classes extend the base Phaser classes, like so\r\n\r\n```\r\nclass MainState extends Phaser.State {\r\n  preload() {\r\n    // Your state preload code here.\r\n  }\r\n\r\n  create() {\r\n    // Your state create code here.\r\n  }\r\n}\r\n\r\nclass SimpleGame extends Phaser.Game {\r\n  constructor() {\r\n    super({\r\n      width: 800,\r\n      height: 600,\r\n      renderer: Phaser.AUTO,\r\n      parent: 'content'\r\n    });\r\n\r\n    this.state.add('main', MainState);\r\n    this.state.start('main');\r\n  }\r\n}\r\n\r\nwindow.onload = () => {\r\n  let game = new SimpleGame();\r\n};\r\n```\r\n"}}
{"actor":{"display_login":"joelrobichaud"}}