Jump to content

Also Ragnarok in Browser!


curiosity

Recommended Posts


  • Group:  Members
  • Topic Count:  7
  • Topics Per Day:  0.00
  • Content Count:  133
  • Reputation:   189
  • Joined:  05/20/12
  • Last Seen:  

If you're not already tired of unfinished Ragnarok client projects - read on!

This is a little project of mine I've been working on for a while now. It's basically the same as KeyWorld's RoBrowser project. I thought his client looked kinda cool and got tired of waiting for it, so I decided to make my own, but it's tough work! Mostly it's a learning project for my own sake with no real roadmap. This is, this is more of a share and tell than an announcement.

The code-base so far is 100% JavaScript, using WebGL for graphics, WebSocket for server connection (using a WebSocket-TCP tunnel on the server side), HTML audio API for sounds and BGM and so on. Currently only running in WebKit-based browsers I think, I'll get around to other browsers later.

The long term goal is to make a client implementing the features available back in the good old days of Ragnarok, around episode 6 or so. (Meaning this is not intended to be a replacement for the official client!)

It a lot of work, but I'm getting closer to my first milestone; being able to log in and walk around. Some things are still left though. I need to fix my camera, implement actors, integrate my map viewer into the client and so on. Luckily I'll soon be done with all the 3D rendering related work, which is a huge relief because I have no idea what I'm doing.

Now for the screenshots...

Char select (as far as I've currently implemented the actual client):

charselect.png

Morocc the old-fashioned way. Once I get the shadowing on models up and running it'll look even prettier!

q1uQAtG.jpg

Lighthalzen in all it's glory. FPS is pretty good by the way. Even large detailed maps such as this go at a solid 60FPS, even when viewing the whole map at once with models animations and all that. I make sure to merge all the static geometry and build texture atlas for the models. This slows the map loading down by 5-10 seconds and uses lots of RAM (though only for a short while), so I'm considering trying to put this on the server side somehow. Unfortunately my GPU drivers are broken and crash a lot when using larger textures, so I only use atlas textures of size 2048x1024 for now, resulting in around 10 textures or so for all the models. By using atlas texture size 4096x4096 (which should work fine for most people) you only need a single texture for the whole map, speeding things up quite a bit.

lighthalzen.png

For fun I also tried to get my map rendering code running on my trusty iPad 1st gen. Can't say I expected much of it though. Which was why it was pleasant to see that it actually performed much better than expected, giving a great frame rate while rendering some GNDs. However it only has a grand total of 256 megabytes of RAM, of which only about 100MB is available to the browser. Another 100MB and I could probably safely load a map, but half of Alberta was the best I could do for now:

ipad_alberta.png

Along with some grass. Don't mind the textures here, I accidentally replaced a lot of them with textures from the Alpha client so some maps look weird.

eaPWn4I.jpg

Anyway, while my old iPad is a no-go I'm hoping to get this running on some of the newer mobile hardware available eventually. I don't think Android has any working support for WebGL yet, but it'll probably come soon.

That's all for now. It's been an interesting journey so far through all the insanity Gravity has pulled over the years. To be continued...

  • Upvote 7
Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  9
  • Topics Per Day:  0.00
  • Content Count:  379
  • Reputation:   304
  • Joined:  11/10/11
  • Last Seen:  

Good job dude !

Hope the best :P

Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  28
  • Topics Per Day:  0.01
  • Content Count:  802
  • Reputation:   393
  • Joined:  11/09/11
  • Last Seen:  

:o Looks interesting!
Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  18
  • Topics Per Day:  0.00
  • Content Count:  102
  • Reputation:   1
  • Joined:  11/06/12
  • Last Seen:  

Looks awesome /oops

Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  5
  • Topics Per Day:  0.00
  • Content Count:  42
  • Reputation:   0
  • Joined:  08/22/12
  • Last Seen:  

At last! something interesting topic came up :) keep it up maan /no1

Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  7
  • Topics Per Day:  0.00
  • Content Count:  133
  • Reputation:   189
  • Joined:  05/20/12
  • Last Seen:  

Thanks for all the kind compliments. I'll make sure to keep the topic updated on new development :)

Link to comment
Share on other sites

  • 4 weeks later...

  • Group:  Members
  • Topic Count:  7
  • Topics Per Day:  0.00
  • Content Count:  21
  • Reputation:   2
  • Joined:  04/18/12
  • Last Seen:  

LOL, aewsome

Link to comment
Share on other sites

  • 1 month later...
  • 1 month later...

  • Group:  Members
  • Topic Count:  16
  • Topics Per Day:  0.00
  • Content Count:  102
  • Reputation:   4
  • Joined:  12/05/11
  • Last Seen:  

Really cool..... and I really want it for my server... lol

Link to comment
Share on other sites

  • 1 month later...

  • Group:  Members
  • Topic Count:  7
  • Topics Per Day:  0.00
  • Content Count:  133
  • Reputation:   189
  • Joined:  05/20/12
  • Last Seen:  

Development have been at a standstill for a while for various reasons, but for the last few days I've worked hard to put all the pieces together. I ended up (re)writing a couple of thousand lines of code, so I'm happy to finally have map rendering, sprite rendering and networking working together.

 

ILqKAXQ.jpg

 

If everything goes according to plan I'll implement some network packets in the following days, and hopefully some very basic game-play isn't too far off!

  • Upvote 4
Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  22
  • Topics Per Day:  0.01
  • Content Count:  806
  • Reputation:   220
  • Joined:  03/13/12
  • Last Seen:  

excellent-frog-andrew-long-dream-gift-ec

 

Looking forward to it :D

Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  9
  • Topics Per Day:  0.00
  • Content Count:  379
  • Reputation:   304
  • Joined:  11/10/11
  • Last Seen:  

Nice, keep it up :)

Edit: Why your network parsing is done in the MapLoader.js file ?

Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  7
  • Topics Per Day:  0.00
  • Content Count:  133
  • Reputation:   189
  • Joined:  05/20/12
  • Last Seen:  

Oh, no network code there I can assure you! The messages are from an mouse event handler which passes the move request on to the game instance, which in turn calls the network manager. I haven't gotten around to implementing a central input handler yet, so currently the mouse events are handled in the same class which holds the 3D scene because mouse picking is done there at the moment. MapLoader is growing into a beast though (over 1600 LOC now :P), and it needs to be split into an actual loader and a class for the 3D world.

 

@project:

 

In addition to a lot of changes to the core, the main things I've done since last time are:

  • Added RSM atlas texture caching using the FileSystem API (available in Chrome only for now), which reduces the loading time to about 5-7 seconds for all maps, given that other map resources are loaded from a local web server.
  • Fixed (hopefully) the last bugs in the RSM matrix calculation.
  • Fixed some errors with drawing order of sprites.
  • Added shadow on sprites based on the GND file's shadow map, which comes with a funny bug which is also present in Gravity's client: When you walk to the beginning of e.g. bridges you character goes dark because of shadow mapping on the cliffs, but you can't see the shadow on the ground because the bridges are RSM models which don't use the ground shadow map.
  • Started working on the basic in-game interface.
Link to comment
Share on other sites

  • 4 weeks later...

  • Group:  Members
  • Topic Count:  2
  • Topics Per Day:  0.00
  • Content Count:  2
  • Reputation:   2
  • Joined:  12/21/12
  • Last Seen:  

Congratulations, I was very interested in the project =)

If it is released, I will actually use it often.

Edited by KeplerBR
Link to comment
Share on other sites

  • 2 weeks later...

  • Group:  Members
  • Topic Count:  105
  • Topics Per Day:  0.02
  • Content Count:  390
  • Reputation:   27
  • Joined:  07/12/12
  • Last Seen:  

does anyone know how i can start doing this? links for download or tutorials and stuff?

Link to comment
Share on other sites

  • 2 weeks later...

  • Group:  Members
  • Topic Count:  81
  • Topics Per Day:  0.02
  • Content Count:  1654
  • Reputation:   583
  • Joined:  08/09/12
  • Last Seen:  

any news on this?

Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  22
  • Topics Per Day:  0.01
  • Content Count:  806
  • Reputation:   220
  • Joined:  03/13/12
  • Last Seen:  

curiosity killed the cat !!! :P J/K

waiting for updates as well. :)

Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  7
  • Topics Per Day:  0.00
  • Content Count:  133
  • Reputation:   189
  • Joined:  05/20/12
  • Last Seen:  

I've investigated networking a bit, but honestly I haven't really done that much more. It's going a bit slow again since I'm away from home this summer and don't have my development computer. Well, I'll see if I can't get something done in the next couple of weeks anyway. Also if people are interested I might put the code up on GitHub or something, though I'm a little hesitant because it's in a pretty bad shape.

  • Upvote 1
Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  0
  • Topics Per Day:  0
  • Content Count:  1
  • Reputation:   3
  • Joined:  06/27/13
  • Last Seen:  

Also if people are interested I might put the code up on GitHub or something, though I'm a little hesitant because it's in a pretty bad shape.

Yes, of course there are interested people! You can't even imagine. Programming is a little hobby of mine and for years now I was wondering how 3d part of clients such as RO is done. And it always boggled my mind that such an old and popular game with an open-source server existing for more than ten years, still doesn't have any open-source client code. And then to find out that there are actually plenty of programmers working on their little client-projects only to abandon it later, it's such a shame. Please, be the first one to actually release something. Don't let that effort to just go to waste.

 

As for code quality, I consider orignial jAthena code to be ugly as hell. But if it wasn't released we wouldn't be talking here right now :)

  • Upvote 3
Link to comment
Share on other sites

  • 2 weeks later...

  • Group:  Members
  • Topic Count:  59
  • Topics Per Day:  0.01
  • Content Count:  225
  • Reputation:   5
  • Joined:  05/30/12
  • Last Seen:  

cant wait to test all the roBrowser ^_^

Link to comment
Share on other sites

  • 1 month later...

  • Group:  Members
  • Topic Count:  7
  • Topics Per Day:  0.00
  • Content Count:  133
  • Reputation:   189
  • Joined:  05/20/12
  • Last Seen:  

Okay, here's a repo with the current code base along with a some words on how to run it continued development.

 

I'm kept busy with real work, and it can go months between updates on my part. As such I've decided to release what I have so far in hopes that someone will find it useful. As with my other work you can regard my code as public domain, though I encourage sharing if you decide to improve it.

 

https://github.com/curio-r/rangarok-js

 

Hopefully I managed to get all the necessary files up. If not, let me know.

 

As I stated from the beginning, this is a personal project I've worked on a little now and then, so it's not up to any standard. This goes for coding style, application architecture, error handling etc. I haven't run it in more than a couple environments, so it's not unlikely you will need to fix something to get it running.

 

Please understand that game play is not ready yet. Most notably I haven't implemented an entity system, and due to various circumstances I haven't really begun working on the zone server packets.

 

How to set it up:

  • Open settings.js and change the data folder path. This is the path exposing the data folder on your WEB SERVER. Setting a local URI (e.g. "C:\Ragnarok\data\") will NOT work because of security policies in your web browser. This is all you should need to do in order to use the map loader.
  • (Optional) Put the Ragnarok BGM folder into the ragnarok-js folder for music.
  • If you want to connect to an Athena server you will also need to setup a WebSocket-TCP bridge. I use a program called WebSockify and by default the web client will try to connect to [$real_port - 1]. So you need to e. g. set up WebSockify on port 6899 to connect to the login server at port 6900. Same goes for char and map. Because this approach effectively hides the client IP from the server there are certain issues with connecting to remote servers which I haven't bothered dealing with yet.

I recommend you use Chrome or an equivalent. I've tested on Firefox as well, but it's slow, though this might be due to my setup. It should be able to run on fairly weak computers, but your graphics card needs to have support for WebGL (i. e. not too old OpenGL version). If things don't work out for you remember that you can open the web inspector to see error messages (ctrl-shift-i in Chrome).

 

Running:

  • http://path-to-ragnarok/MapLoader.html will open the map loader. It should load gl_knt02 by default (change in MapLoader.html) and allow you to walk around. From the web inspector's JavaScript console you can spawn monsters (ex. "spawn('raydric')"), change class (ex. "setclass(7)" to change into knight) or head gear (ex. "settop(AccessoryIdTable.ACCESSORY_BUNNYBAND)"). Example: http://i.imgur.com/bDXe84D.jpg

  • http://path-to-ragnarok/Ragnarok.html will open the client. If everything goes well you should be able to get into the game. After that it's not much more you can do.

  • Upvote 4
Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  96
  • Topics Per Day:  0.02
  • Content Count:  554
  • Reputation:   14
  • Joined:  09/24/12
  • Last Seen:  

Perfect project.. Look clean...
How can you ever think about this.. ^  ^

Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  3
  • Topics Per Day:  0.00
  • Content Count:  19
  • Reputation:   2
  • Joined:  12/16/11
  • Last Seen:  

polyfill.js is missing?

btw is there a chance to manage a websocket-tcp-bridge on windows? is there a guide anywhere in the web? :D

Link to comment
Share on other sites


  • Group:  Members
  • Topic Count:  7
  • Topics Per Day:  0.00
  • Content Count:  133
  • Reputation:   189
  • Joined:  05/20/12
  • Last Seen:  

Oh, it shouldn't be needed. I've removed the dependency from the repository now.

 

You can use WebSockify on Windows. Binary download here: https://github.com/downloads/kanaka/websockify/websockify.zip
 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...