Image are not appearing on stage

xdiepx · February 9, 2014

I have been trying add an image on stage but nothing is appearing. In chrome developer tool it shows that the image has been loaded, however nothing appears when i try to add it on stage. I am not getting any error messages so I am not sure why nothing is on stage.

This code works, but I am trying to structure my game to make it look neat.

//-----------------------------------------Example code

var game = new Phaser.Game(1024,768,Phaser.AUTO,'',{preload: preload, create:create});

var bg = null;

function preload(){

this.stage.scale.pageAlignHorizontally = true;

this.stage.scale.pageAlignVeritcally = true;

this.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL; /

this.stage.scale.setShowAll();

this.stage.scale.refresh();

this.load.image('bg','bg.png');

}

function create(){

bg = game.add.sprite(0,0, 'bg');

}

//-----------------------------------------

However I am trying to structure my game like this.

//-------------------------Startup

this.project = this.project || {};

var game = null;

project.init = function() {

game = new Phaser.Game(1024, 768, Phaser.AUTO, "stage");

//---------i'll end up adding more things here like main menu.

game.state.add('Boot', project.Boot, true);

game.state.start('Boot');

};

//---------------------------------------Boot

this.project = this.project || {};

(function() {

var Boot = function() {};

var p = Boot.prototype;

p.preload = function() {

this.stage.scale.pageAlignHorizontally = true;

this.stage.scale.pageAlignVeritcally = true;

this.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;

this.stage.scale.setShowAll();

this.stage.scale.refresh();

this.load.image("bg",'bg.png');

};

p.create = function() {

var bg = this.add.sprite(0,0, "bg");

console.log("image has been added")

};

project.Boot = new Boot();

}());

Like i said the pre-loading works but adding the image doesn't. Any help would be great thank you.

rich · February 9, 2014

The first thing I would check:

Does the canvas actually get added to the DOM where you're expecting it? As I notice you don't give it a div ID in the game constructor. Try setting the game background colour to something. Also try Phaser.CANVAS instead of AUTO to force canvas mode, in case there is something WebGL related going on.

It may well be to do with your structure, but I would rule out the above first.

xdiepx · February 10, 2014

Hi Rich,

I change the canvas background and change Phaser.CANVAS. I can the see the canvas, but the image hasn't been added. For the div ID I have put that in my index.php file (below is my php)

<?php

function getServer(){

$serverName = $_SERVER['SERVER_NAME'];

if($serverName == 'localhost' || strpos($serverName, '192.168')===0){

$basePath .='project/';

}

return "project.init('mainCanvas')";

}

?>

<!DOCTYPE HTML PUBLIC>

<head>

</head>

<body onload="<?php echo getServer()?>" style="overflow: hidden;">

</div>

</body>

</html>

xdiepx · February 11, 2014

I fixed the problem. it was something to do with my html page.

Sign In

Image are not appearing on stage

Recommended Posts

xdiepx

Link to comment

Share on other sites

rich

Link to comment

Share on other sites

xdiepx

Link to comment

Share on other sites

xdiepx

Link to comment

Share on other sites

Recently Browsing 0 members

Browse

Activity