CODEWITHSUNDEEP
javascripthtmlphaser-framework
Pedro
Pedro

Reputation: 1450

How to load an image using Phaser

I'm trying to learn how to use Phaser, following instructions online on how to load an image; one of the examples that phaser offers is the load images example.

Here is the code that Phaser offers.

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });

function preload() {

    //  You can fill the preloader with as many assets as your game requires

    //  Here we are loading an image. The first parameter is the unique
    //  string by which we'll identify the image later in our code.

    //  The second parameter is the URL of the image (relative)
    game.load.image('einstein', 'assets/pics/ra_einstein.png');

}

function create() {

    //  This creates a simple sprite that is using our loaded image and
    //  displays it on-screen
    game.add.sprite(0, 0, 'einstein');

}

html

<html>
<head>
  <meta charset="UTF-8">
  <title>Experiments</title>
  <script src="../phaser.js"></script>
  <script src="game.js"></script>
</head>
<body>

</body>
</html>

I'm trying to run this code on my server (using node) but I don't see the image, can somebody explain me what am I doing wrong?

Upvotes: 1

Views: 2840

Answers (1)

rasah_dipikir_jerojero
rasah_dipikir_jerojero

Reputation: 175

try to add <div id="phaser-example"></div> inside <body></body> tag

<html>
   <head>
       <meta charset="UTF-8">
       <title>Experiments</title>
       <script src="../phaser.js"></script>
       <script src="game.js"></script>
   </head>
   <body>
        <div id="phaser-example"></div>
   </body>
</html>

js:

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });

function preload() {

    //  You can fill the preloader with as many assets as your game requires

    //  Here we are loading an image. The first parameter is the unique
    //  string by which we'll identify the image later in our code.

    //  The second parameter is the URL of the image (relative)
    game.load.image('einstein', 'assets/pics/ra_einstein.png');

}

function create() {

    //  This creates a simple sprite that is using our loaded image and
    //  displays it on-screen
    game.add.sprite(0, 0, 'einstein');

}

Upvotes: 5

Related Questions