Preloaded image doesn't change

[joerrey]

Hey everybody,

 

i'm new to Phaser and game development in general. After spending a lot of time with reading tutorials i just startet my first own game.

 

I'm preloading an image for my player sprite. After that i changed the image size with gimp and made it a bit smaller. The problem is, that the game does not update the image. Instead the old one is used after hitting the refresh button of chrome.

 

I assumed the memory was not cleared after refreshing the page. But the problem even exists when i close and restart chrome. So i used the shutdown method for my main_state and destroyed the player object, but nothing changed.

 

Well, after sitting about 3 hours on this problem, i decided to seek an advice from you guys. I really don't understand why this happens. 

 

edit: it seems to be a problem of chrome. FF is working fine. I also unsuccessfully tried incognito mode with chrome.

var game = new Phaser.Game(800, 480, Phaser.AUTO, 'game_div');var main_state = {    preload: function () {        this.player = new Player(game);        this.player.preload();    },    create: function () {        this.game.physics.startSystem(Phaser.Physics.ARCADE);        this.player.create();    },    update: function () {        this.player.update();    },    shutdown: function(){        this.player.destroy();        this.player = null;    }};game.state.add('main', main_state);game.state.start('main'); 

function Player(game) {    this.game = game;    this.sprite = null;    this.speedX = 200;}Player.prototype = {    preload: function () {        this.game.load.image("player", "assets/player/blue1.png");    },    create: function () {        this.sprite = this.game.add.sprite(150, 350, "player");        this.game.physics.enable(this.sprite, Phaser.Physics.ARCADE);    },    update: function () {        this.sprite.body.velocity.x = this.speedX;    }};

[lewster32]

A common technique to ensure you bypass the cache on browsers is to add a query string after the URL, e.g.:

    preload: function () {        this.game.load.image("player", "assets/player/blue1.png?v=1");    },

This tricks the browser into thinking that the resource is a different resource that should be reloaded from scratch, rather than retrieved from the cache. When you update your asset, you can change the number and the resource will again be downloaded from scratch. Be aware that subsequent calls to the same URL will still probably get cached, so it's only useful if you change the part after the ? in the URL. See this stackoverflow post: http://stackoverflow.com/questions/9692665/cache-busting-via-params

 

Alternatively you can just open the asset directly in the browser (http://localhost/yourgame/assets/player/blue1.png or whatever) then hit refresh again. That usually updates the asset and allows Phaser to retrieve the new one also.

[joerrey]

Great answer!

Thanks a lot, this works!

[wayfinder]

...or you can open the dev tools in chrome (F12) and in their options panel disable the cache while they're open

[joerrey]

That's even more comfortable!

 

Great =)

[jmp909]

you can use this stop it caching...

game.load.text('test1', 'txt/test1.txt?' + new Date().getTime())

it's similar to using a version but it's different each time, so always renewed

[Fenopiù]

These tricks works properly on Google Chrome desktop version... but not on mobile.

I've even tried to put

game.load.reset();
game.load.removeAll();

as firsts call of preload... but Chrome still don't want to cooperate.

Any ideas to force Google Chrome mobile to show the updated image without deleting the cache from the browser itself?

Maybe there is a way to erase from user cache every or selected file of my game cache?