Loading assets

[tanmoy749]

How to load images or assets from local address instead of phaser assets through web?

Whenever I try to load assets from my local drive it doesn't show the contents.I want to load my assets offline.

Thanks in advance.

[Mobler]

You need a web server on a local machine.
I use gulp +  gulp-sunc

[tanmoy749]

Can you please elaborate @Mobler ?

 

[dude78]

http://phaser.io/tutorials/getting-started-phaser2

 

http://phaser.io/tutorials/getting-started-phaser2/part2

[Mobler]

 https://phaser.io/tutorials/getting-started-phaser3/index

with npm manager you can install https://browsersync.io/docs/gulp. 
 

[tanmoy749]

Thanks guys. Assets are showing now. But I can only see the existence of the sprite. Proper view of the image is still not visible.

Maybe i'm missing something very silly. I am using xampp for now.

[GideonSam]

Try adding a image the center of the game using the game centerX,centerY property.

if you are using group add it on the top most layer it should be visible clearly.

if there is a black box with green line instead of the image, that means the image is not loaded properly and check console for more

 

[dude78]

What do you mean by saying "see only existance. Proper view is not visible"?

[tanmoy749]

Yes that black box with green lines is showing. Okay you guys were helpful. I'll try to load them properly now.

[tanmoy749]

var game = new Phaser.Game(800, 600, Phaser.CANVAS);
var PhaserGame = function () {

    this.sprite1;
    this.sprite2;

    this.pad;

    this.stick1;
    

    var dropZone;
    var dragPosition;
    var bullet;
    var addGroup;
    var createBoat;
    var button;
    var buttons;
    var actionOnClick;
    var items;
    
};

  PhaserGame.prototype = {

    init: function () {
    this.game.renderer.renderSession.roundPixels = true;
    this.physics.startSystem(Phaser.Physics.ARCADE);

    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    this.scale.pageAlignHorizontally = true;
    this.scale.pageAlignVertically = true;

    },
    preload: function(){

        this.game.load.crossOrigin = 'anonymous'; 
      //  this.game.load.baseURL = 'http://examples.phaser.io/assets/';

        this.load.atlas('arcade', 'http://examples.phaser.io/assets/virtualjoystick/skins/generic-joystick.png', 'http://examples.phaser.io/assets/virtualjoystick/skins/generic-joystick.json');
      	this.load.image('boat', 'bubble.png');
        this.load.image('background', 'http://examples.phaser.io/assets/sprites/platform.png');
        this.load.image('bg','http://examples.phaser.io/assets/sprites/platform.png');
        this.load.image('ship','elbo.svg');
        this.load.image('eye', 'elbo.svg');
        this.load.image('rotate', 'elbo.svg');
        this.load.image('sample', 'elbo.svg');
        this.load.image('add','elbo.svg');
        this.load.image('delete','http://examples.phaser.io/assets/sprites/space-baddie.png');
        this.load.spritesheet('item', 'http://examples.phaser.io/assets/buttons/number-buttons-90x90.png', 90, 90);
     //   this.load.spritesheet('butt', 'http://examples.phaser.io/assets/buttons/button_sprite_sheet.png', 193, 71);


    },

 

[tanmoy749]

Can you tell me where's the problem. It's still showing black box with green layer.

[GideonSam]

Add the resource locally to a folder called assets and load it like 

this.load.image('boat', 'assets/boat.png');

[tanmoy749]

Still the same @GideonSam

 

[dude78]

@tanmoy749, could you please show console messages?

[vastron]

Make sure you provide the correct file name,

this.load.image('boat',' 'assets/bubble.png ')'

Also, I can not see your create method. Is it similar to this?

create: function(){

var boat = this.add.sprite(game.width/2,game.height/2,'boat');

boat.anchor.setTo(0.5);

}