JS Reborn

Using [USER=“181”]kpedersen[/USER]'s php zelda demo, I managed to create a simple multiplayer client. If anyone remembers, I made a similar project awhile ago but wasn’t very successful due to the use of a now deprecated realtime database API, which I thought would do the trick, but obviously didn’t.

While this currently doesn’t look like much, the foundation for the engine is fairly solid in my opinion. I will be hosting it up on Github for everyone to check out and hopefully contribute to.


No long term goals for this project yet, I just thought it’d be fun (and relatively easy) to work on as a community if y’all are interested. Also, if we manage to make something worthwhile out of it, we could easily port it over to iOS or Android. It’s a long shot, but definitely possible.

Adding two blank, collision-responsive NPC’s to the map is as simple as this!

World.walls = new Array(); World.walls[0] = new NPC(0, 0, 100, 100); World.walls[1] = new NPC(100, 100, 25, 25);

Looks promising, Rammy. Where’s the Github link for the repository?

By the way, after checking how it is done lol, we need to be able to parse nw files (although there are already scripts that let you parse levels done on TILED level editor). Right now the demo by the other dude uses an image as level lmao.

Also it’s not a good idea to use Firebase realtime database. It is cool yeah. It’s easy to prototype with it, yeah… But if your game scales, then you have to pay. I recommend having something with MongoDb and using NodeJS backend. It could be great for this kind of games due to it’s non-blocking backend code.

My intention hadn’t be to allow the use of .nw or .graal files for tile data but rather to create a tile based system with our own file extension and tile editor. (Fault on my part for the ambiguity, but I’d rather we stay clear of Graal in terms of their code and maybe even their default graphics…what you see in the video is just a test of the multiplayer client but surely once we have that set up and ready to go, we can move on to changing the aesthetics and creating our own systems).

He does use an image as the background in his demo but that can easily be changed to a tile map (which is what I’m working on right now and why I held off on posting the repository link), something as simple as this:

var map = [[0, 0, 0, 0, 0, 0, 0] 0, 0, 1, 1, 0, 0, 0]]

Where the numbers would represent individual tiles and you’d have a nested loop to iterate through the 2-dimensional array and place the tiles on the map. If we decide to make an editor, we could even generate txt files with tile data and have the code read that if we wanted to.

Also, what you’re saying about Firebase is true in terms of scalability, but I doubt we’ll need to worry about costs until we reach a significant amount of users and would need a horizontal scaling solution to compensate, so it’s not too bad if we start with Firebase first then move onto Mongo + Node if the project is successful, there’s a great article just for that here: http://thejackalofjavascript.com/re-…e-app-in-node/.

I just thought of a clever solution to get around the scalability problem, inspired from this very cool Harvard video on cloud computing: https://www.youtube.com/watch?v=JlDD7G9oh6E

Firebase let’s users open up several different apps, which are basically separate databases, at no cost. I was thinking, why not create something like a load balancer which would constantly check to see how full a database is and then push the player’s coordinates and information to a server with less traffic.


You have X number of database (for now, let’s assume we have 3): Database A, Database B and Database C.
Which would look like the following in the code:

var databaseA = new Firebase(...); var databaseB = new Firebase(...); var databaseC = new Firebase(...);

The amount of data in those databases (number of parent nodes) is constantly being counted using a simple Firebase function: numChildren()

We can then compare the amount of traffic going to each database and and then if, for example, Database A is heavily populated, then we’d push the user’s coordinates to Database B instead. Also, anytime the user logs out, his coordinates are removed from the database and his data is added to a SQL database.
When he logs back in, his data is retrieved from the SQL database and then pushed to the database with the lowest traffic.

So we’d have a database that stores user information and then “temporary” realtime databases.
In essence, we’d be handling 3 times as much load without spending a penny.

Would the servers have different players from one to another?

Yeah, that load balancing system won’t work here. Since we need players to be able to know wheres the other player (and be on the same server) we cannot do that lol.

My apologies guys, what I meant to say instead of servers was databases to store temporary data. Each of the databases are connected to the main server and the algorithm would push user data to the database with lowest traffic. This way, rather than having one database for all the user data, it’s spread out over several and we’d be able to utilize Firebase’s real time capabilities without having to worry about databases failing or slowing down due to high traffic.

I edited my post to clarify.

(also databases of this kind are technically database servers, so I wasn’t completely off).

you are talking about a galera cluster

I was sick for most of the day today but I managed to add the tile map (see the 2D array towards the end of the video).
I also included an NPC to show collision detection:


[USER=“11182”]Rammy[/USER] does it have head, body support? or right now both are a single image?

Right now the head and body graphics are still separate images but I’m currently working on making them sprites.

Short demo with a level I made:


It’s still mostly image-based at this point, but I’m working on the sprites and the general tileset.
So far I managed to get the head working smoothly but the body is going to be a bit more of a challenge given the rapid frame transitions.

Credits to [USER=“3806”]Clockwork[/USER] for the tile graphics.

If anyone would like to see a better head graphic in my next video, feel free to make one: http://www.i.imgur.com/N4wZaZS.png

Edit: body sprite…done! http://i.imgur.com/izTvTCi.png

looks great so far

*Presence system: Nifty text in the top left hand corner of the game that indicates the number of users on the server.
*Map generated by tileset: The tile map is now generated from a standard graal tileset (type 1). Currently the algorithm only reads 32x32 tiles for simplicity. I’ll be changing that to 16x16 soon.
*Collision-responsive tiles: Tiles added to the map that are in the “blocking” region of the tileset are automatically collision responsive.
*Improved movement system: Other players on the server no longer look like they’re floating in the air while moving. There’s still some work to be done to fix the animation, but it’s almost done.

Here is a quick video demonstrating all of the above:


My goal is to eventually have the tile data fed from a text file so that we can start working on a basic tile editor.
Ideally, it would look like the following:



{[0, 0, 1, 0, 0, 0],
[0 0, 0, 0, 0, 0]}

Where the W and H coordinates are the size of the map and the X and Y coordinates are the positions of the tiles on the tileset image.

Also, this is assuming that there is one standard tileset. If we wanted to allow custom tilesets, we could simply include an extra line at the beginning or end of the file with a local path or web link of the image, and make a few modifications to the code accordingly.

If anyone here has sufficient knowledge of php and js, and would like to work on the editor, I’m always open for a collaboration.

Very nice work I’ll update head gfx if you want a certain head file post it and I’ll put it in the format you are using.

I’m making it a priority to update as often as I can.
Check out the new chat system! (and slightly more aesthetically-pleasing head and body graphics).


Things left to do before a possible web version beta release:

*Expand map (I’m considering keeping an image-based background until we complete a level editor of some sort).
*Change body graphic to something less graal-esque.
*Fix slight glitches in movement/presence system.
*Create sitting animation for chairs and benches.

Is that tileset missing some parts? or are tile errors intended and you were just trying to throw together a quick level? I like these tiles and can make all the parts connecting the top borders of the walls or any additions you need added to it. I don’t work quickly but I am very thorough.

Yeah I was definitely working pretty quick so I hadn’t had the chance to really fix things up and my leveling skills are only so good. I’ll attach the tileset and level file below to give you, and anyone else, a chance to make something.

I was thinking of having a general meeting place directly to the right of the current area (with lots of chairs and tables) that could be accessed by walking through a hallway at the bottom (where I left an opening).
The goal is to keep the level concise for the beta. If things work out, we can start expanding it.

Thanks a lot!

Link to level: https://dl.dropboxusercontent.com/u/112422235/new10.nw
Link to tileset: https://dl.dropboxusercontent.com/u/…35/tileset.png

[USER=“11182”]Rammy[/USER] it would be better to create a Github repository.