Phaser and Phaser Isometric Questions

[chaoskreator]

Hello. Been reading for a while, first time posting.

I've got this game I'm attempting to build. It's going to be a multiplayer strategy type game (if it ever gets that far) somewhat like Age of Empires, but I've run into a couple of issues I can't seem to sort out. Bear in mind that I'm a newb when it comes to Phaser and game dev, but I've been programming in PHP and JavaScript for many years. So, what I want to do is create an isometric (axonometric) map using Lewster's plugin. While I'm able to render the layers normally, I can't seem to get interaction to work (input clicks). I'd like to make it so that the ground layer can be grabbed and dragged across, so that different parts of the map are visible in the viewport display. I also need click events for buildings and other objects that will be placed on the map. From what I've read, I can add input events to sprites. Now, Lewster's plugin provides the ability to create isometric sprites from images, but I would ultimately like to use a jsonHash like in the example to load my images (there are a lot). If I use the jsonHash to load images, the Isometric plugin doesn't allow for creating the sprites how it shows in the example.  Can a group (like I have the tiles collected into right now) be interacted with? Can layers? If so, can I make it to where the layer is moved as a whole, and not just each individual tile? Am I missing some key fundamental in using an atlas?

Unrelated to the above, I also have a question about opacity in canvases. When my game renders, the canvas background is black. Is there a way to make that part transparent without affecting the layers drawn on the canvas as a CSS opacity would do?

 

Here is my whole JS script that I'm using right now:

var game, BasicGame, groundGroup, buildingGroup;
var Page = {
	xhr: {},
	ajaxCall: function(url, dataStr, success){
		var _s = this;
		$.ajaxSetup({
			timeout: 10000,
			success: success,
			error: function(xhr, status){
				console.log('Could not load data. Error: '+status+'.');
			},
			cache: false,
			method: "post",
			dataType: "json",
		});
		_s.xhr = $.ajax({
			url : "ajax/"+url+".php",
			data: dataStr,
		});
	},
};

var Game = {
	obj: {},
	cursorKeys: {},
	width: window.innerWidth,
	height: window.innerHeight,
	init: function(elementId){
		game = new Phaser.Game(Game.width, Game.height, Phaser.AUTO, elementId, {preload: Game.preload, create: Game.create, update: Game.update, render: Game.render});
		BasicGame = function(game){ };
		BasicGame.Boot = function(game){ };
		
		Game.obj = game;
	},
	preload: function(){
		Game.obj.load.atlasJSONHash('atlas', 'assets/images/city_sprite.png', 'assets/json/city.json');
		// if commented out, throws error "Texture with key 'ground' not found."
		/*Game.obj.load.image('ground', 'assets/images/ground.png');
		Page.ajaxCall('game', 'mode=get_image_queue', function(data){
			$.each(data.images, function(k, v){
				Game.obj.load.image(k, v);
			});
		});
		*/
		// loader events so we can show the user that the game isn't just going to be a black screen the whole time
		Game.obj.load.onLoadStart.add(Game.loadStart, this);
		Game.obj.load.onFileComplete.add(Game.fileComplete, this);
		Game.obj.load.onLoadComplete.add(Game.loadComplete, this);
		
		// not sure what i need this for
		Game.obj.time.advancedTiming = true;
		
		// add the isometric plugin
		Game.obj.plugins.add(new Phaser.Plugin.Isometric(game));
		
		// trying to center the map on the user's only permanent building, but this is a pain in the butt, so we don't mess around with it much.
		Game.obj.iso.anchor.setTo(0.3, 0.02);//x, y
	},
	create: function(){
		// Create a group for our tiles.
		Map.groundGroup = Game.obj.add.group();
		Map.buildingGroup = Game.obj.add.group();
		
		// set the world bounds to accomodate for the size of the isometric map
		Game.obj.world.setBounds(0, 0, 1500, 1500);
		
		//current input method is with the keyboard only
		Game.cursorKeys = Game.obj.input.keyboard.createCursorKeys();
		
		//trying to get some opacity to the black background of the canvas
		Game.obj.stage.backgroundColor = 'rgba(0, 0, 0, 0.8)';
		
		// Let's make a load of tiles on a grid.
		Map.build();
		
		// Provide a 3D position for the cursor
		Map.cursorPos = new Phaser.Plugin.Isometric.Point3();
		
		//Let's do this.
		Game.start();
	},
	loadStart: function(){
		// add splash screen for loader progress
		Game.obj.load.start();
		
	},
	fileComplete: function(progress, cacheKey, success, totalLoaded, totalFiles){
		// update splash screen for loader progress
		var pc = Math.ceil((totalLoaded / totalFiles) * 100);
		console.log("File Complete: " + pc + "% - " + totalLoaded + " out of " + totalFiles);
	},
	loadComplete: function(){
		//remove splash screen for loader progress
	},
	update: function(){
		Game.obj.iso.unproject(Game.obj.input.activePointer.position, Map.cursorPos);
		
		Map.groundGroup.forEach(function (tile){
			// detecting whether or not the cursor is over a tile for highliting purposes
			var inBounds = tile.isoBounds.containsXY(Map.cursorPos.x, Map.cursorPos.y);
			if (!tile.selected && inBounds) {
				tile.selected = true;
				tile.tint = 0x86bfda;
			}else if (tile.selected && !inBounds) {
				tile.selected = false;
				tile.tint = 0xffffff;
			}
		});
		
		// this is how we're currently getting around on the map
		if(Game.cursorKeys.up.isDown){
			Game.obj.camera.y -= 4;
		}else if(Game.cursorKeys.down.isDown){
			Game.obj.camera.y += 4;
		}

		if(Game.cursorKeys.left.isDown){
			Game.obj.camera.x -= 4;
		}else if(Game.cursorKeys.right.isDown){
			Game.obj.camera.x += 4;
		}
	},
	render: function(){
		Game.obj.debug.text(Game.obj.time.fps || '--', 2, 14, "#a7aebe");
		Game.obj.debug.cameraInfo(Game.obj.camera, 32, 32);
	},
	start: function(){
	
	}
};

var City = {
	enterBuilding: function(tile){
		// get the building id and/or x,y and do some stuff
		console.log(tile.frameName);
	},
	enterBuildSpot: function(tile){
		// get the tile x,y and do some stuff
		var x = Math.ceil(Map.cursorPos.x / Map.tileWidth),
			y = Math.ceil(Map.cursorPos.y / Map.tileWidth);
		console.log(x+','+y);
		//pop up building options
	}
}

var Map = {
	cursor: {},
	cursorPos: {},
	tileWidth: 0,
	groundGroup: {},
	buildingGroup: {},
	build: function(){
		// perform ajax call to gather the size and other data of the map
		Page.ajaxCall('map', 'mode=city&action=build', function(data){
			var tile;
			Map.tileWidth = data.map.tile_width;
			
			// render the ground tiles on the map
			for(var xx = 0; xx < data.map.width_px; xx += data.map.tile_width){
				for(var yy = 0; yy < data.map.width_px; yy += data.map.tile_width){
					tile = Game.obj.add.isoSprite(xx, yy, 0, 'ground', 0, Map.groundGroup);
					tile.anchor.set(0.5, 0);
					tile.inputEnabled = true;
					tile.events.onInputDown.add(City.enterBuildSpot, this);
				}
			}
			
			// render buildings on the map based upon data obtained from the ajax call
			$.each(data.map.buildings, function(k, v){
				xx = (v.x * data.map.tile_width) - v.offset_x;
				yy = (v.y * data.map.tile_width) - v.offset_y;
				tile = Game.obj.add.isoSprite(xx, yy, 0, k, 0, Map.buildingGroup);
				tile.anchor.set(0.5, 0);
				tile.inputEnabled = true;
				tile.events.onInputDown.add(City.enterBuilding, this);
			});
		});
	}
};

$(document).ready(function(){
	// let's make sure our view port is as big as our device and design structure will allow
	$(window).resize(function(){
		Game.height = window.innerHeight;
		Game.width = $('#canvasContainer').parent('div.large-12').width();
	});
	Game.width = $('#canvasContainer').parent('div.large-12').width();
	
	// start the whole mess
	Game.init('canvasContainer');

	// we are go for gaming
	Game.obj.state.add('Boot', BasicGame.Boot);
	Game.obj.state.start('Boot');
});

 

[drhayes]

Can't speak to the isometrics.

Your game instance has a property called "renderer". I think you can set "clearBeforeRender" on the renderer to false to disable this behavior. Or you might try setting "game.stage.backgroundColor" to "rgba(0, 0, 0, 0.0)".

Not sure about either of these because I haven't needed them... but try it and see if that helps!