[GUIDE] Create your own custom Ragnarök Online Client for Windows, Linux and MacOS

SelfCastingCookies · March 31, 2018

Introduction

The objective of this guide is to create a full client that can run on every platform and where you have complete control over the source code of it, meaning you can add new windows, style every part of the game and adapt it to suit your server need. To do so we'll rely on a stack made of node-js with electron framework and express combined with RoBrowser from KeyWorld.

Setup

Text Editor

Get a good text editor, my personal choice for this will be atom : https://atom.io/

RoBrowser

Download RoBrowser from here : https://www.robrowser.com/

Follow the instructions present here to set it up : https://www.robrowser.com/getting-started

You'll need a webserver for the first setup, if you're on Linux use Apache with PHP other wise you can get a nice wamp stack here : http://www.easyphp.org/

This is the basic result you should at least get to before continuing this tutorial :

Spoiler

image.png.e72a74d563bb981005e9010f632a3ce4.png

Electron

Download NodeJS from here : https://nodejs.org/en/

Install it and restart your computer.

Open a terminal / Windows Command Line and type the following :

npm install -g electron-forge

Creating a new project

In the terminal, go to your working folder :

cd c:\projects

For the sake of this tutorial, we'll call our project "sakexe".

Now you'll initialize your project :

electron-forge init sakexe

A new folder named after the project was created, we'll move into this folder :

cd sakexe

We'll now install express :

npm install express --save

Open your project with atom :

Spoiler

image.png.5b1b03260ff118a056713c724477e460.png

Now we'll edit index.html to the following (replace ROConfig contents with whatever your configuration is) :

<!DOCTYPE html>
<html>
	<head>
		<title>SakExe : FullClient</title>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<script type="text/javascript" src="./api.js"></script>
		<script type="text/javascript">
			function initialize() {
				var ROConfig = {
					target:        document.getElementById("robrowser"),
					type:          ROBrowser.TYPE.FRAME,
					application:   ROBrowser.APP.ONLINE,
					remoteClient:  "http://127.0.0.1:5737/client/",
					development:    false,
					servers: [{
						display:     "Demo Server",
						desc:        "roBrowser's demo server",
						address:     "5.135.190.4",
						port:        7000,
						version:     25,
						langtype:    12,
						packetver:   20131223,
						packetKeys:  true,
						socketProxy: "ws://5.135.190.4:443/",
						adminList:   [2000000]
					}],
					skipServerList:  true,
					skipIntro:       true,
				};
				var RO = new ROBrowser(ROConfig);
				RO.start();
			}
			window.addEventListener("load", initialize, false);
		</script>
		<style>
			html, body, iframe, #robrowser {
				height:100%;
				width:100%;
				margin:0;
				padding:0;
				overflow: hidden;
				min-width: 800px;
				min-height: 600px;
			}
		</style>
	</head>
	<body>
		<div id="robrowser">Initializing roBrowser...</div>
	</body>
</html>

Edit index.js to the following :

import { app, BrowserWindow } from 'electron';
const express = require('express');
const server = express();

// Handle server requests to serve static files
server.use('/', express.static((__dirname)));

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
  app.quit();
}

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;

const createWindow = () => {
  // Start listening to port 5737
  server.listen(5737, function() {});
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
  });

  // and load the index.html of the app.
  mainWindow.loadURL(`http://127.0.0.1:5737`);

  // Disabling the webtools
  mainWindow.webContents.on("devtools-opened", () => { mainWindow.webContents.closeDevTools(); });

  // Disabling the mainmenu
  mainWindow.setMenu(null);

  // Emitted when the window is closed.
  mainWindow.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
};

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow();
  }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and import them here.

It's time to copy contents from your RoBrowser folder into your Sakexe folder so your file structure looks like this :

Spoiler

image.png.997b9d4430c9452607845f51f75ec040.png

Now you can try your project by typing the following :

electron-forge start

Here's the expected result :

Spoiler

image.png.b28b7c5746d7886150d0987fd9854f04.png

Compiling

Your can now compile your project for your current platform by using :

electron-forge make

You can find more details about compilation and packaging at the following link : https://github.com/electron-userland/electron-forge

Branding

You can set an icon for your executable by following these instructions here : https://stackoverflow.com/questions/44122559/how-to-set-the-app-icon-using-electron-forge-package-on-mac

Thanks for reading ?

Changelog

2018-04-02 : Fixed a mistake in parameters sent to RoBrowser that'd try to load the client from RoBrowser repository instead of the local custom client. I plan to edit this guide later on to implement a websocket proxy directly into the electron framework to avoid having to set on up with RoBrowser.

Edited April 2, 2018 by SelfCastingCookies

Quesooo · April 1, 2018

nice guide

all we need is source code for this

SelfCastingCookies · April 1, 2018

@Quesooo Thanks for the feedback, which source code do you need ? RoBrowser sources are available here : https://upload.robrowser.com/roBrowser.zip , the electron framework source code is generated by the command line :

electron-forge init sakexe

and the sources I did modify are listed in "Code brackets".

Did I miss something ?

Secrets · April 1, 2018

Updooted, nice guide.

Edit: Here's a mirror for roBrowser's source code.

https://mega.nz/#!d08QhDZI!yyDlaLesimL0zHSAlb1tJCWptB8YrFAh5XWeCyTtdJw

SHA1: 2d8de69774442210cc7768c2aaf81cd49cbd5238
SHA256: c610180aac7f6ceb3e062d21ee951cd0db2bb1da2e2c4fee366b61f6432f1c25
MD5: 95ce6c6e9ec31e95838fca6746ecb5e1

Edited April 1, 2018 by Secrets

dpunkz09 · September 4, 2018

cool.. can i use the 2018 client and server?

exiie · April 17, 2019

Love this idea, hoping to make this a reality for my test server and be able to share the nostalgia of RO with friends over Chrome

CobraHue · May 2, 2020

Could someone upload a working client using roBrowser? Can't make it work in anyway

RavenheartZ · February 6, 2021

I loved the idea and improved the concept in this repository (giving you credits):

https://github.com/wjrosa/roBrowser-electron

The difference here is the use of env vars and separation from roBrowser base code. I will now convert roBrowser to a NPM package so we can use in this project as dependency instead of just copying it. Then I will convert the PHP remote client to NodeJS. This way we don't need a server with PHP support and we could just run the whole client locally (as Electron already runs the web server using Express).

Volskis · April 4, 2021

can you add stuff like new .str files and change area skills idicators?

arcada · February 20, 2022

i gave up sometime ago trying making this thing to run... its almost impossible now.

documentation is very hard to follow, guides are broken and the old tools for compiling wont work. serves to nothing the tutorial above.

Sign In

[GUIDE] Create your own custom Ragnarök Online Client for Windows, Linux and MacOS

Recommended Posts

SelfCastingCookies

Link to comment

Share on other sites

Quesooo

Link to comment

Share on other sites

SelfCastingCookies

Link to comment

Share on other sites

Secrets

Link to comment

Share on other sites

dpunkz09

Link to comment

Share on other sites

exiie

Link to comment

Share on other sites

CobraHue

Link to comment

Share on other sites

RavenheartZ

Link to comment

Share on other sites

Volskis

Link to comment

Share on other sites

arcada

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Docs

Get Started

Github

Community

My Account