CODEWITHSUNDEEP
javascriptpixi.js
ipsa scientia potestas
ipsa scientia potestas

Reputation: 531

How to properly install and set up PIXI.js? (PIXI is not defined)

I recently found out about pixi.js via github and am intrigued.

I used npm install pixi.js --save and pasted in the example code from the github repo, but I was returned the following error:

C:\Users\*****\WebstormProjects\pixie_the_game\game.js:4
const app = new PIXI.Application();
            ^

ReferenceError: PIXI is not defined
    at Object.<anonymous> (C:\Users\*****\WebstormProjects\pixie_the_game\game.js:4:13)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Function.Module.runMain (module.js:693:10)
    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:612:3

Process finished with exit code 1

I have tried looking at the pixi getting started page but haven't found anything useful.

Where did I go wrong? How do I correctly set up pixi.js?

Upvotes: 2

Views: 6106

Answers (1)

helloitsjoe
helloitsjoe

Reputation: 6529

Usually when working with PIXI you'll want it as a global dependency, so you can point a script tag at it in your index.html.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello World</title>
</head>
  <!-- Point this at `pixi.min.js` in your node_modules folder -->
  <script src="pixi/pixi.min.js"></script>
<body>
  <script type="text/javascript">
    let type = "WebGL"
    if(!PIXI.utils.isWebGLSupported()){
      type = "canvas"
    }

    PIXI.utils.sayHello(type)
  </script>
</body>
</html>

See here for more information: https://github.com/kittykatattack/learningPixi#setting-up

Alternatively, if you don't want to add it globally, you can just import it at the top of game.js:

import * as PIXI from 'pixi.js'

const app = new PIXI.Application();

Upvotes: 1

Related Questions