Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Image are not appearing on stage


xdiepx
 Share

Recommended Posts

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.
 
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>
<html itemscope itemtype="http://schema.org/" xmlns="http://www.w3.org/1999/xhtml"  xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel ="stylesheet" type="text/css" href="style.css"/>
</head>
 
 <body onload="<?php echo getServer()?>" style="overflow: hidden;">
<div style='overflow: hidden; width:100%; height:100%;'>
<canvas id="mainCanvas" tabindex="1" width="1024" height="768" style="background-color:#000000">Game</canvas>
</div>
<!--Libraries-->
<script type="text/javascript" src="js/project/lib/phaser.js"></script>
<!--boot-->
<script type="text/javascript" src="js/project/boot/Boot.js"></script>
<!--boot start-->
<script type="text/javascript" src="js/project/startup/Startup.js"></script>
 
</body>
</html>
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...