baseic rendering player on the map

labs/frago/README

@@ -0,0 +1,4 @@
+TODO:
+
+- implement singleton pattern in fusite.js
+- implement GameMap like GamePlayer in fusite

labs/frago/index.html

@@ -16,6 +16,7 @@
 	<script src="js/core/GameMap.js"></script>
 	<script src="js/core/Stage.js"></script>
 	<script src="js/core/GameStage.js"></script>
+	<script src="js/core/GamePlayer.js"></script>
 	<script src="js/core/fusite.js"></script>
 	<script src="js/game.js"></script>
 

labs/frago/js/core/GameMap.js

@@ -16,11 +16,6 @@
 	*/
 	m.height = 0;
 
-	/*
-	* Context to draw into the canvas element
-	*/
-	m.ctx = null;
-
 	/*
 	* Know if the assets are loaded
 	*/
@@ -49,14 +44,14 @@
 	/*
 	* Constructor
 	*/
-	m.initialize = function(ctx) {
-		this.ctx = ctx;
+	m.initialize = function() {
+
 	}
 
 	/*
 	* Draw map
 	*/
-	m.draw = function() {
+	m.draw = function( callback ) {
 		if (!this._assetsLoaded) {
 			this._loadAssets();
 			return;
@@ -80,7 +75,7 @@
 	/*
 	* Update map position according to cordinates
 	*/
-	m.updateMap = function( position ) {
+	m.update = function( position ) {
 		this.viewport = position;
 		this.draw();
 	}

labs/frago/js/core/GamePlayer.js

@@ -0,0 +1,90 @@
+( function(window, undefined)  {
+
+	function GamePlayer() {
+		this.initialize();
+	}
+
+	var p = GamePlayer.prototype;
+
+	p._assetManager;
+
+	p.stage;
+
+	p._spritePosition = 's0';
+
+	/*
+	* Constructor
+	*/
+	p.initialize = function(ctx) {
+		if (!ctx) return;
+
+		this.stage = ctx;
+	}
+
+	/*
+	* Draw player on the map
+	*/
+	p.draw = function(assets) {
+		if (!this.stage) return;
+
+		this._loadAssets(assets);
+		assets = null;
+	},
+
+	/*
+	* Calculate the location of the player in the map
+	*/
+	p._calculateLocation = function() {
+		var character = {
+			width: this._assetsManager.getAsset('n0').width,
+			height: this._assetsManager.getAsset('n0').height
+		};
+
+		var screen = {
+			width: 144, // Fix me: get data from Fusite object
+			height: 144 // Fix me: get data from Fusite object
+		};
+
+		var x = (screen.width / 2) - (character.width / 2),
+			y = (screen.height / 2)+ 8 - (character.height);
+
+		return {left: x, top: y};
+	}
+
+	/*
+	* Load all assets required for the map
+	*/
+	p._loadAssets = function(assets) {
+		var assetsLoaded = 0,
+			self = this;
+
+		this._assetsManager = new AssetManager();
+
+		for(var i=0, len=assets.length; i < len; i++) {
+			this._assetsManager.queueDownload(assets[i]);
+		}
+		this._assetsManager.downloadAll(function(){
+			assetsLoaded++;
+
+			if (assetsLoaded == assets.length) {
+				self._assetsLoaded = true;
+
+				self._render();
+
+				assets = null;
+			}
+		});
+	}
+
+	p._render = function() {
+		var loc = this._calculateLocation();
+		this.stage.drawImage( this._assetsManager.getAsset(this._spritePosition), loc.left, loc.top );
+	}
+
+	p.update = function(position) {
+		this._spritePosition = position;
+		this._render();
+	}
+
+window.GamePlayer = GamePlayer;
+})(window)

labs/frago/js/core/GameStage.js

@@ -65,6 +65,13 @@
 		this._map.draw();
 	}
 
+	g.addPlayer = function(options) {
+		this._player = new GamePlayer();
+		this._player.name = options.name;
+		this._player.stage = this.context; // improve?
+		this._player.draw( options.sprites );
+	}
+
 	/*
 	* Initializing event listeners for control the game
 	*/
@@ -73,19 +80,29 @@
 			switch(e.which) {
 				case 38: // up
 					this._viewport.y--;
+					pos = 'n0';
 					break;
 				case 40: // down
 					this._viewport.y++;
+					pos = 's0';
 					break;
 				case 37: // left
 					this._viewport.x--;
+					pos = 'w0';
 					break;
 				case 39: // right
 					this._viewport.x++;
+					pos = 'e0';
+					break;
+				default:
 					break;
 			}
 
-			this._map.updateMap( this._viewport.position() );
+			// render map
+			this._map.update( this._viewport.position() );
+
+			// render player
+			if (this._player) this._player.update( pos );
 		}, this));
 
 	}

labs/frago/js/core/fusite.js

@@ -1,36 +1,41 @@
 var Fusite = function() {
 
-	var gs;
+	var gs,
+		SCREEN_WIDTH,
+		SCREEN_HEIGHT;
 
+	/*
+	* The fun begins
+	*/
 	function start(options) {
 		gs = new GameStage( window.document.getElementById('canvas') );
-	    gs.width(160);
-	    gs.height(160);
-	    gs.start(options.map, options.tiles);
-	}
 
-	function drawMap(map) {
-		gs.drawMap(map);
-	}
-
-	function setTiles() {
-
-	}
-
-	function addPlayers() {
+		SCREEN_WIDTH = options.screenWidth;
+		SCREEN_HEIGHT = options.screenHeight;
+		SPRITE_SIZE = (options.spriteSize) ? options.spriteSize : 16;
 
+	    gs.width(SCREEN_WIDTH);
+	    gs.height(SCREEN_HEIGHT);
+	    gs.start(options.map, options.tiles);
 	}
 
-	function addPlayer() {
-
+	/*
+	*	Add player to the game
+	*
+	*	@params object {
+	*		name: ''
+	*		sprites: []
+	*	}
+	*/
+	function player(options) {
+		gs.addPlayer(options);
 	}
 
 	return {
 		start: start,
-		drawMap: drawMap,
-		setTiles: setTiles,
-		addPlayer: addPlayer,
-		addPlayers: addPlayers
+		player: player,
+		SCREEN_WIDTH: SCREEN_WIDTH,
+		SCREEN_HEIGHT: SCREEN_HEIGHT
 	}
 
 }();