Jump to content

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

SelfCastingCookies

By SelfCastingCookies
in Client Releases

 Share

Recommended Posts

SelfCastingCookies Poring

SelfCastingCookies

Posted
Posted (edited)

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 by SelfCastingCookies
  • Upvote 3
  • Love 1
  • MVP 6
  • 5 months later...
  • 7 months later...
  • 1 year later...
  • 9 months later...
RavenheartZ Poring

RavenheartZ

Posted
Posted

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).

  • MVP 1
  • 1 month later...
  • 10 months later...
arcada Drops

arcada

Posted
Posted

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.

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.

×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...