Loading screen change

Background to black Loading text added
arcanous · Dec 22, 2014 · 0366b99 · 0366b99
1 parent 7c5324d
commit 0366b99
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 9 deletions.
diff --git a/assets/tilemaps/desert/desert.json b/assets/tilemaps/desert/desert.json
diff --git a/index.html b/index.html
@@ -10,12 +10,15 @@
 		<script type="text/javascript" src="js/Preload.js"></script>
 		<script type="text/javascript" src="js/Game.js"></script>
 
+		<link href="//fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet" type="text/css">
+
 		<style>
 		  body {
 		    padding: 0px;
 		    margin: 0px;
 		  }
-		  </style>
+		</style>
+
 	</head>
 
 	<body>  

diff --git a/js/Boot.js b/js/Boot.js
@@ -10,7 +10,7 @@ TopDownGame.Boot.prototype = {
   },
   create: function() {
     //loading screen will have a white background
-    this.game.stage.backgroundColor = '#fff';
+    this.game.stage.backgroundColor = '#000';
 
     //scaling options
     this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

diff --git a/js/Game.js b/js/Game.js
@@ -26,8 +26,12 @@ TopDownGame.Game.prototype = {
     //create player
     var result = this.findObjectsByType('playerStart', this.map, 'objectsLayer')
     this.player = this.game.add.sprite(result[0].x, result[0].y, 'player');
+
+    //this.player.body.collideWorldBounds = true;
+
     this.game.physics.arcade.enable(this.player);
 
+
     //the camera will follow the player in the world
     this.game.camera.follow(this.player);
 

diff --git a/js/Preload.js b/js/Preload.js
@@ -11,16 +11,30 @@ TopDownGame.Preload.prototype = {
 
     this.load.setPreloadSprite(this.preloadBar);
 
+    //game loading text
+    var text = "Loading...";
+    var style = { font: "13px Open Sans", fill: "#aaa", align: "center" };
+    this.loadingTextNode = this.game.add.text(this.game.width/2, this.game.height/2 + 30, text, style);
+    this.loadingTextNode.anchor.set(0.5);
+
     //load game assets
-    this.load.tilemap('level1', 'assets/tilemaps/desert/desert.json', null, Phaser.Tilemap.TILED_JSON);
-    this.load.image('gameTiles', 'assets/tilemaps/desert/tmw_desert_spacing.png');
-    this.load.image('greencup', 'assets/images/greencup.png');
-    this.load.image('bluecup', 'assets/images/bluecup.png');
-    this.load.image('player', 'assets/images/player.png');
-    this.load.image('browndoor', 'assets/images/browndoor.png');
+    this.load.tilemap('level1', '/assets/tilemaps/desert/desert.json', null, Phaser.Tilemap.TILED_JSON);
+    this.load.image('gameTiles', '/assets/tilemaps/desert/tmw_desert_spacing.png');
+    this.load.image('greencup', '/assets/images/greencup.png');
+    this.load.image('bluecup', '/assets/images/bluecup.png');
+    this.load.image('player', '/assets/images/player.png');
+    this.load.image('browndoor', '/assets/images/browndoor.png');
 
+    this.game.load.onFileComplete.add(this.onFileCompleteCallback, this);
+
   },
   create: function() {
     this.state.start('Game');
+  },
+
+
+
+  onFileCompleteCallback: function (percentLoaded, assetName) {
+    this.loadingTextNode.text = percentLoaded + "% loaded";
   }
 };