Jump to content

SelfCastingCookies

Members
 View Profile  See their activity

  • Posts

    2

  • Joined

  • Last visited

  • Days Won

    1

SelfCastingCookies last won the day on April 1 2018

SelfCastingCookies had the most liked content!

Profile Information

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

SelfCastingCookies's Achievements

Poring

Poring (1/15)

11

Reputation

  1. SelfCastingCookies
    @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 ?
  2. SelfCastingCookies
    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 : 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 : 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 : Now you can try your project by typing the following : electron-forge start Here's the expected result : 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.
×
×
  • Create New...