Working More on Collision Detection (5/15)

Today I worked more on collision detection. I couldn't quite get it working, so I posted a StackOverflow question and pretty much continued attempting different functions all of class. Nothing has worked so far, but I'll continue trying and see if I can figure out the source of the problem. Once I can fix this bug, I can get back to feature adding!

Unfortunately I don't have any good step-by-step tutorials for today, but once I get collision detection working I'll be sure to add that in. Some of the recommendations for collision detection I've heard of are quadtrees and other Javascript libraries such as three.js. I haven't really used three.js however, because that's mainly for 3d rendering in Javascript.

EDIT (5/16): I finally got collision detection working! It wasn't anything to do with using the right algorithm, rather I had been passing an integer into my method instead of an array. It works great now! I'm now going to get started on velocities.

I also helped Aki on the tutorial today, so here's a link to his blog.

Really Getting Into Socket.io! (5/14)

So, half of this was done yesterday. But I decided to bunch it all up into one blog post today, because it's quite a bit of progress and there's a lot of cool stuff going on, so I thought I might as well put it together!

Yesterday and today, I've completed quite a bit of small milestones for my game project. They're not really huge features, but basic things that are required for every game. Surprisingly, a lot of them were pretty tough to get working. Sure, I had the amazing tutorial from yesterday, but the main issue is that I'm working on a multiplayer game. Therefore, a LOT more server interactions are going to have to be made. Anyways, that all aside, the features added include the following:

-You can now move! That's right, using W, A, S and D, or the arrow keys, your little character will move on screen.
-Other players can see you moving! And you can see them too. This is done via NodeJS. Here's how I did it:

I essentially have my game refresh at a rate of 60 frames per second, like most games. Obviously, if you can't achieve that framerate it's fine, but it might not look as good. On each of these updates, the socket emits a current player position. That position is then sent to the server, who bounces it back to all of the clients so that they can all update other players' positions. In essence, this is done like the following:

	// This function, main, is run every frame at 60 frames per second.
	// It updates all characters, and then calls a method called requestAnimFrame,
	// which essentially just sets canvas size.
	// As you can see, the function uses the date.now() function to make sure that
	// everything is updating on time. Much of this method was from the earlier
	// tutorial, but I had to make some modifications.
	function main() {
	var now = Date.now();
	var dt = (now - previousTime) / 1000.0;
	update(dt);
	previousTime = now;
	requestAnimFrame(main);
	};
	function update(dt) {
	handleInput(dt);
	setPlayerCount(CURR_PLAYERS);
	var imageObj = new Image();
	var canvas = document.getElementById("game");
	var context = canvas.getContext('2d');
	imageObj.src = "images/yourSprite.png";
	imageObj.onload = function () {
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.drawImage(imageObj, PLAYER.posX, PLAYER.posY, SHIP_WIDTH, SHIP_HEIGHT);
	};
	socket.emit('move', {
	'userId': USER_ID,
	'posX': PLAYER.posX,
	'posY': PLAYER.posY
	});
	}
	// I omitted some of the code from my update function above, which I'm currently working on.
	// However, this function shows the complete usage of movement of players on a server!
	// Essentially, how this works is I'm getting the position of the sprite, or player image,
	// on the screen. I then send their userId [a unique identifier], as well as their x and y
	// positions. Once that's all taken care of, we take a look on the server-side:
	// ~NodeJS
	socket.on('move', function (json) {
	var x = json.posX;
	var y = json.posY;
	var userId = json.userId;
	io.emit('clientmove', {
	'userId': userId,
	'posX': x,
	'posY': y
	});
	});
	// The socket notices Hey! Something moved! and then sends that information to everyone else.
	// They listen for this event and do the following:
	socket.on('clientmove', function (data) {
	var userId = data.userId;
	var x = data.posX;
	var y = data.posY;
	for (var i = 0; i < players.length; i++) {
	if (players[i].userId == userId) {
	players[i].posX = x;
	players[i].posY = y;
	}
	}
	});
	// As you can see, we just add that data to our players[] object, which handles all
	// the movement, user information, etc. of players. What's great is we can just
	// add stats on the fly to be sent and bounced back to the server. When a user
	// connects or disconnects, they are added/removed from our players[] object.

view raw gistfile1.js hosted with ❤ by GitHub

-You can shoot tiny pellets with the space key! And other players can see them! My whole concept of pellet travel is the exact same as above, but speed of the pellets is [obviously] faster than speed of the players. I want it to be kind of like Galaga in that sense. Interaction with these should be coming soon, that takes collision calculations which I'm going to get started on tonight.

Some features planned for this week:
-A changelog [I like the idea of live-updating things]
-Collision detection
-A background map

Helping Aki Fix The App (5/13)

Today I helped Aki fix the app from the tutorial. See Aki's post for details.

Temporary Project-Hop [Still Working on Android!] (5/12/15)

Today I temporarily hopped to a new interesting project. Aki had shown me a game earlier that used HTML5's canvas element to make an easy-to-understand and simplistic MMO. From what I saw, I knew already that they were using Node.js and Javascript to communicate with a server. An idea popped into my head, and that was that I should try my skills at creating a Node.js-based game for the browser.

For the record, I'm still working daily on my Android project, and I haven't forgotten about it. I'm just adding this to my list of side-projects.

I started doing some research on the Canvas element, and found that it was pretty simple to use, but there's not a whole lot of documentation about it. Then, I found an article on creating a basic game using the canvas element, by a Mozilla developer. Although it's not exactly the concept of what I'm doing, I'm going to look at it to get an idea of what I'm going to try to do.

I then made a basic landing page using Bootstrap, and I started working on an "Upgrades Store".

After just an hour or so, my landing page started to look pretty nice. I'd be happy to show an example, I just don't want to upload any images yet since I think my game idea is pretty nice :)

It got even better when I started handling user connections, and mentioned their names. Since I'm on a Mac, it even featured Emoji support:

I then went ahead and setup multiple server support, like so:

	function connectToServer(servername, userid) {
	var dataToSend = {
	'userid': USER_ID
	};
	if (SERVER_ID == 'east') {
	socket = io.connect("http://localhost:3000", { // Connect to east
	'forceNew': true
	});
	} else if (SERVER_ID == 'west') {
	socket = io.connect("http://localhost:3000", { // Connect to west
	'forceNew': true
	});
	}
	socket.on('connect', function () {
	socket.emit('newconnection', dataToSend);
	socket.on('clientconnect', function (info) {
	setPlayerCount(info);
	});
	socket.on('clientdisconnect', function (info) {
	setPlayerCount(info);
	});
	});
	}

view raw gistfile1.js hosted with ❤ by GitHub

I can't wait to get players to load tomorrow! I think it's going to be an interesting concept. I'm also going to work more on my Android project tomorrow. Unfortunately I couldn't do so tonight because I need to use multiple devices to test and have access to the internet while doing so.

Continuing Work on Android (5/11)

Today I finalized my server for my Android app. Once again, involving socket.io. However, I came into the issue that each client needs a specific ID. So, after some thought, I made it such that each client listens from the socket only on a very specific ID event. That way, the client will only listen to information pertaining to what it needs to know, without having to listen to information from a lot of other sources.

I did it by assigning a listen event to a variable, like so:

socket.on(idVariable, eventFunction);

Then, the eventFunction would be called, and we could send and receive data from the server to the client.

Working more with sockets and runnables (5/8/15)

Today I worked on a Runnable class for my Android app that sends data every 10 seconds. I added some methods to cancel and start it as well, but I haven't been able to test them yet. This method will allow me to continuously send data when I need to, and cancel it when I need to stop [onAppClosed, etc.]. It uses the CountDownTimer interface for Android to handle this.

	public static void startSendingData(boolean start){
	if(start){
	new CountDownTimer(30000, 1000) {
	public void onTick(long millisUntilFinished) {
	// Send Data via socket.io
	}
	public void onFinish() {
	startSendingData(true);
	}
	}.start();
	}
	else {
	// this.cancel(); or similar
	}
	}

view raw gistfile1.java hosted with ❤ by GitHub

I also worked a bit on planning and pulling the repo for the expo tomorrow, and doing some planning on how our internet connection, etc. will work.

Working more with NodeJS/SocketIO (5/5)

Today I started on one of my other projects and integrating Socket.io into it. I now have a go-to Socket.io script, as seen below.

As you can see, using the NodeJS modules http, express, and socket.io, a server is created. I then went and implemented this into my Android app like so:

	var app = require('express')();
	var http = require('http').Server(app);
	var io = require('socket.io')(http);
	app.get('/', function (req, res) {
	res.sendfile('index.html');
	});
	io.on('connection', function (socket) {
	console.log('a user connected');
	socket.on('disconnect', function () {
	console.log('user disconnected');
	});
	socket.on('testEvent', function(data){
	// Do stuff with TestEventData here
	});
	});
	});
	http.listen(3000, function () {
	console.log("=================================");
	console.log("Now running Server v0.2.0");
	console.log("=================================");
	console.log('[Server] Listening on *:3000');
	});

view raw gistfile1.js hosted with ❤ by GitHub

And just like that (granted the Android device has an internet connection), the socket works! You can now use this as a server to send and receive data to one or multiple devices. I decided to change the event for each device, so the event is sent like 'socket.emit('deviceEvent ' + deviceId, informationHere)'. That way, the server can talk to individual Android devices. The Android code is as follows:

	public void startConnection(final String roomId) {
	try {
	mSocket = IO.socket("yourSocketIP"); // TODO Set our website in here with URL
	mSocket.on(Socket.EVENT_CONNECT, new Emitter.Listener() {
	@Override
	public void call(Object... args) {
	// Send some data
	}
	}).on("yourData", new Emitter.Listener() {
	// Android device is now listening so when yourData is called, it does the following...
	@Override
	public void call(Object... args) {
	JSONObject jsonObject = new JSONObject();
	try {
	jsonObject = new JSONObject(args[0].toString());
	}
	catch(Exception e){
	e.printStackTrace();
	}
	}
	}).on(Socket.EVENT_DISCONNECT, new Emitter.Listener() {
	@Override
	public void call(Object... args) {
	// Code is called when the device disconnects from the server
	}
	});
	mSocket.connect();
	} catch (URISyntaxException e) {
	e.printStackTrace();
	}
	}
	public void sendDataToServer(final String roomId) {
	new CountDownTimer(11000, 1000) {
	@Override
	public void onTick(long millisUntilFinished) {
	// This method is called every 1 second. I'm using it to send more data from the server.
	}
	@Override
	public void onFinish() {
	sendDataToServer(roomId);
	}
	}.start();

view raw gistfile1.java hosted with ❤ by GitHub