Jump to content

noob here: "ReferenceError: PIXI is not defined" on VS 2015


Recommended Posts

Please help to start using Phaser.


I followed the tutorial:




I get the following errors:

ReferenceError: PIXI is not defined Phaser.js:357:4
TypeError: Phaser is undefined app.js:28:8
When building the solution, no errors appear.
I added a couple of alerts:
var game = new PhaserDemo();
and the "test2" alert runs fine.
Also, it might be useful to add that in app.ts, when hovering over:
this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { preload: this.preload, create: this.create });
Visual Studio 2015 says:
"could not choose overload for new expression"
On a separated but related note, 
I also tried setting up the project with the VS2013 extension
In that case the image would appear, however the VS console was showing more than 100 errors.
Link to comment
Share on other sites

Hi, check my blog - there is 3 part tutorial for simple game in Typescript in Visual Studio. 1. part here: http://sbcgamesdev.blogspot.cz/2015/05/phaser-tutorial-dronshooter-simple-game.html


In last part, there is link to complete project. You can download it and try if it works for you. If yes, delete game specific code and use it as a skeleton for your game.


Almost forgot - I have all *.d.ts files in lib directory

Link to comment
Share on other sites

Hi Tom, Atom, thank you very much for suggesting the Visual Studio 2013 tutorial.


Unfortunately, the tutorial in Visual Studio 2013 and I need to work in VS 2015,

which seems very different (for example, there is no Web.Config file)


Is there a tutorial or a source project for VS 2015?

Link to comment
Share on other sites

I worked in VS2013 until last month. Now, I am in VS2015 with Win10 and I still have web.config file in my Typescript project... Just now, I created new empty project and web.config still there (it is last item in project explorer).

I can also open all my VS2013 projects without problem in VS2015 - just doubleclick .sln file.

Only thing I encountered was, that it is not necessary to edit web.config ... I had to delete previous edits (that definition of JSON type)

Link to comment
Share on other sites

Hi Tom Atom.


thank you to your advice and to your tutorial, things are beginning to work but I still have got one issue: I hope that you can tell me more.


I opened VS 2015.

I selected create new Apache Cordova Typescript App (I want to test whether I could use the same code to also build the game to native Android/IOS apps, rather than using Unity3D).


I added your image and the beginning of your code, and it works: when the Ripple Android emulator opens the app, Phaser shows your background image.

You can see the code is below:


///<reference path="phaser.d.ts"/>
///<reference path="pixi.d.ts"/>
///<reference path="p2.d.ts"/>

module CordovaApp2 {
    "use strict";

    export module Application {
        export function initialize() {
            document.addEventListener('deviceready', onDeviceReady, false);

        function onDeviceReady() {
            // Handle the Cordova pause and resume events
            document.addEventListener('pause', onPause, false);
            document.addEventListener('resume', onResume, false);

            // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.

            new Game();
            alert("Phaser in native Android app without runtime errors");

        function onPause() {
            // TODO: This application has been suspended. Save application state here.

        function onResume() {
            // TODO: This application has been reactivated. Restore application state here.


    window.onload = function() {

    class Game extends Phaser.Game {
        constructor() {
            super(640, 400, Phaser.CANVAS, "content", State);

    class State extends Phaser.State {
        preload() {
            this.game.load.image("BG", "images/bg.jpg");   

        create() {
            // background
            this.add.image(0, 0, "BG");
            // dron sprite
            //this.add.sprite(320, 100, "Atlas", "dron1", this.world);




However, the issue I am having is that, when I am editing in index.ts,  Visual Studio 2015 says that the TypeScript code is full of errors and Intellisense does not work at all in Phaser classes.

So, at runtime, everything works.

But at design time, the TypeScript editor cannot make sense of the .d.ts files.


I can see that the files are in the right folders because I added the reference...


///<reference path="phaser.d.ts"/>


....using Intellisense, not manually.

Link to comment
Share on other sites

 Sorry, I have no experience with: "Apache Cordova Typescript App". I always used "HTML Application with Typescript" - try it and minimal working templete should be created for you by VS. In it you can check if intellisense works.


 From my personal experience: I had problem with VS2015 after fresh instalation on (also fresh) Win10. Somehow, it did not parsed .js files - no intellisense and it was saying, it is unknown type of file. Then I found whole my VS installation turned bad somehow (even uninstallation was not possible, hanging on creating restroe point, ...). In the end I had to reinstall whole computer - after reinstalling VS2015 it started to work (but this time I was picky what components to install - not installing greedy all as before - I wanted to see Android/iOS support and many others). One of the components I did not install is support for Apache Cordova as in some forums I found, that it is maybe the component, that made .js parsing unavailable.


 If above way with minimal "HTML Application with Typescript" dos not work, try to launch VS installer/uninstaller from control panel and in "Modify" check which components are installed (maybe try "Repair" there).


Edit: here is image of components I have installed (+ Visual C++, which is not in picture):



Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...