* Player Identification - Adds Red outline for enemies

* Player HUD Name

Project.xml

@@ -37,7 +37,7 @@
 	<haxelib name="colyseus" />
 
 	<!--In case you want to use the addons package-->
-	<!--<haxelib name="flixel-addons" />-->
+	<haxelib name="flixel-addons" />
 
 	<!--In case you want to use the ui package-->
 	<!--<haxelib name="flixel-ui" />-->
@@ -69,7 +69,7 @@
 	<!--<haxedef name="FLX_NO_SOUND_SYSTEM" />-->
 
 	<!--Disable the Flixel core focus lost screen-->
-	<!--<haxedef name="FLX_NO_FOCUS_LOST_SCREEN" />-->
+	<haxedef name="FLX_NO_FOCUS_LOST_SCREEN" />
 
 	<!--Disable the Flixel core debugger. Automatically gets set whenever you compile in release mode!-->
 	<haxedef name="FLX_NO_DEBUG" unless="debug" />

dungeon.code-workspace

@@ -0,0 +1,13 @@
+{
+	"folders": [
+		{
+			"path": "."
+		},
+		{
+			"path": "..\\dungeon-server"
+		}
+	],
+	"settings": {
+		"haxe.enableExtendedIndentation": true
+	}
+}

source/PlayState.hx

@@ -3,13 +3,19 @@ package;
 import flixel.FlxG;
 import flixel.FlxSprite;
 import flixel.FlxState;
+import flixel.ui.FlxVirtualPad;
+import flixel.util.FlxColor;
 import io.colyseus.Client;
 import io.colyseus.Room;
 import models.State;
+import openfl.display.BlendMode;
 
 class PlayState extends FlxState
 {
-	var client = new Client('ws://localhost:3000');
+	var client = new Client('ws://dungeon-server.glitch.me');
+
+	public static var virtualPad:FlxVirtualPad;
+
 	private var room:Room<State>;
 
 	private var players:Map<String, Player> = new Map();
@@ -17,7 +23,9 @@ class PlayState extends FlxState
 	override public function create()
 	{
 		super.create();
+		virtualPad = new FlxVirtualPad(FULL, NONE);
 
+		add(virtualPad);
 		this.client.joinOrCreate("my_room", [], State, function(err, room)
 		{
 			if (err != null)
@@ -27,13 +35,18 @@ class PlayState extends FlxState
 			}
 
 			this.room = room;
-
 			this.room.state.players.onAdd = function(player, key)
 			{
 				trace("Player" + player.x);
-				var _player = new Player(player.x, player.y);
+				var _player = new Player(player.x, player.y, player.name, room.sessionId);
 				this.players[key] = _player;
 				add(_player);
+				if (room.sessionId == player.name)
+				{
+					FlxG.camera.follow(_player);
+				}
+
+				trace(room.id);
 			}
 
 			this.room.state.players.onChange = function(player, key)
@@ -53,32 +66,46 @@ class PlayState extends FlxState
 
 	override public function update(elapsed:Float)
 	{
-		if (FlxG.keys.pressed.UP)
+		var up, down, left, right;
+		#if desktop
+		up = FlxG.keys.pressed.UP;
+		down = FlxG.keys.justPressed.DOWN;
+		left = FlxG.keys.justReleased.LEFT;
+		right = FlxG.keys.justReleased.RIGHT;
+		#end
+
+		#if mobile
+		up = virtualPad.buttonUp.pressed;
+		down = virtualPad.buttonDown.pressed;
+		left = virtualPad.buttonLeft.pressed;
+		right = virtualPad.buttonRight.pressed;
+		#end
+		if (up)
 		{
 			// The up arrow key is currently pressed
 			// This code is executed every frame, while the key is pressed\
-			this.room.send("move", {y: -1});
+			this.room.send("move", {y: -1 * elapsed * 200});
 		}
 
-		if (FlxG.keys.justPressed.DOWN)
+		if (down)
 		{
 			// The left arrow key has just been pressed
 			// This code is only executed once, on the frame immediately after the key has been pressed
-			this.room.send("move", {y: 1});
+			this.room.send("move", {y: 1 * elapsed * 200});
 		}
 
-		if (FlxG.keys.justReleased.LEFT)
+		if (left)
 		{
 			// The left arrow key has just been released
 			// This code is only executed once, on the frame immediately after the key has been released
-			this.room.send("move", {x: -1});
+			this.room.send("move", {x: -1 * elapsed * 200});
 		}
 
-		if (FlxG.keys.justReleased.RIGHT)
+		if (right)
 		{
 			// The left arrow key has just been released
 			// This code is only executed once, on the frame immediately after the key has been released
-			this.room.send("move", {x: 1});
+			this.room.send("move", {x: 1 * elapsed * 200});
 		}
 		super.update(elapsed);
 	}

source/Player.hx

@@ -1,13 +1,30 @@
 package;
 
 import flixel.FlxSprite;
+import flixel.addons.effects.chainable.FlxEffectSprite;
+import flixel.addons.effects.chainable.FlxOutlineEffect;
+import flixel.group.FlxGroup.FlxTypedGroup;
+import flixel.group.FlxSpriteGroup.FlxTypedSpriteGroup;
+import flixel.text.FlxText;
 import flixel.util.FlxColor;
 
-class Player extends FlxSprite
+class Player extends FlxTypedSpriteGroup<FlxSprite>
 {
-	public function new(x:Float = 0, y:Float = 0)
+	var _effectSprite:FlxEffectSprite;
+	var _outline:FlxOutlineEffect;
+
+	public function new(x:Float = 0, y:Float = 0, name:String, sessionId:String)
 	{
 		super(x, y);
-		loadGraphic("assets/images/player.png");
+		var player = new FlxSprite();
+		player.loadGraphic("assets/images/player.png");
+		add(_effectSprite = new FlxEffectSprite(player));
+		if (sessionId != name)
+		{
+			_outline = new FlxOutlineEffect(FlxColor.RED, 2);
+			_effectSprite.effects = [_outline];
+		}
+		var text = new FlxText(0, 2, 0, name, 8);
+		add(text);
 	}
 }