Metin2 Patcher with Electron

[Karbust 4723]

M2 Download Center

This is the hidden content, please

• Sign In
• or
• Sign Up

( Internal )

 

GitHub Repository: 

This is the hidden content, please

• Sign In
• or
• Sign Up

            The tutorial bellow is also available on the repository.

  

Metin2-Patcher-Electron

A simple metin2 patcher made in Electron with React and TypeScript. The file verification is made with SHA256.

Getting Started

Install NodeJS: https://nodejs.org/en/download/

Install Yarn: https://yarnpkg.com/getting-started/install

Clone the repository:

git clone https://github.com/Karbust/Metin2-Patcher-Electron

Install the dependencies:

yarn install

Edit src/config.ts with your own values. Change resources/icon.png with your own logo (should be at least 256x256).

Available Commands

Command	Purpose
yarn run start	Starts the React App (aka Frontend) in development mode.
yarn run build	Builds a production ready React bundle.
yarn run electron-start	Starts the Electron App.
yarn run electron-pack	Builds a production package of the app.
yarn run lint	Check for linting errors.
yarn run lint-fix	Fixing some linting errors.

About the Patcher

This project was made with the intend of learn more about Electron, something I wanted to do for a while.

If the folders don't exist, they'll be created. If the files don't exist they will be downloaded.

The patcher checks the local files and if their checksum mismatches the remote checksum, they will get downloaded.

This patcher runs the downloads asynchronously, this means it will download multiple files at the same time.

The entire project is made in React and Electron both with TypeScript. For CSS was used TailwindCSS.

Deploying

After editing everything you must use the command yarn run electron-pack to build the application.

It will build 2 files inside the release folder:

• Metin2 Patcher Electron-X.X.X-win.zip
• metin2_patcher_electron.exe

The first file is the full bundle zipped that can be extracted to the client folder (after removing the 2 unnecessary LINCENSE files). DON'T USE THIS IF YOU ALREADY HAVE THE CEF BROWSER ON THE CLIENT.

The second file is also zipped but will be extract to a temporary folder during runtime (takes about 3 seconds to fully open) and clean after itself when it closes. This is the way if you can't perform the first option.

Development Testing

In case there isn't the possibility to use a local webserver (like Apache with Xampp, or Wampp) it may be necessary update the CORS on your remote server.

For NGINX

Go to the configuration file for the patcher host and add this line:

add_header 'Access-Control-Allow-Origin' 'http://localhost:3000';

For Apache

Go to the configuration file for the patcher host and add this line:

Header set Access-Control-Allow-Origin "http://localhost:3000"

It may also be needed to activate the headers module:

a2enmod headers

Web Server

Using

This is the hidden content, please

• Sign In
• or
• Sign Up

, you shall place the client files inside a folder called files and run the script.

It will generate the JSON file with the names, sizes and checksum hash of the files.

 

Issues

If you have any issues, post here or open an issue on the repository: 

This is the hidden content, please

• Sign In
• or
• Sign Up

Edited August 18, 2022 by Metin2 Dev
Core X - External 2 Internal

[FBI 43]

3, 2, 1

Spoiler

leakmmo

Spoiler

what a surprise you clicked here

Spoiler

and here

Spoiler

and ofc, it will be shared on just4scam too

Spoiler

love you

 

 

 

 

 

Edited April 5, 2021 by I3ooI3oo

[AZICKO 7107]

1 minute ago, I3ooI3oo said:

3, 2, 1

  Hide contents

leakmmo

  Hide contents

what a suprise you clicked here

  Hide contents

and here

  Reveal hidden contents

and ofc, it will be shared on just4scam too

  Reveal hidden contents

love you

 

 

 

 

 

Edited August 25, 2022 by Metin2 Dev
Core X - External 2 Internal

[Karbust 4723]

Updated README with a better explanation on how to start on development environment.

Added the .env for the React app with some parameters.

This is the hidden content, please

• Sign In
• or
• Sign Up

[Karbust 4723]

Updated README with a video tutorial (requested by @DemOnJR)

Fixed a typo on package.json (build.compression) not allowing to build the electron app.

This is the hidden content, please

• Sign In
• or
• Sign Up

 

[Migxelito 10]

Interest, thx

[DemOnJR 517]

On 4/22/2021 at 12:31 AM, Karbust said:

Updated README with a video tutorial (requested by @DemOnJR)

Fixed a typo on package.json (build.compression) not allowing to build the electron app.

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Thanks, i will use it for some tests.

[Karbust 4723]

Update

Added multi-language support. Instructions can be found on the README.

This is the hidden content, please

• Sign In
• or
• Sign Up

Multi-language

It ships with support for two languages, English (default) and Portuguese. These can be used as examples to add more languages.

To add more languages, you must edit both src\i18n.ts and src_electron\i18n.ts.

Three things are needed, import the translation file (.json) that must go inside the folder localization\, and add the language on resources and supportedLngs.

Do not edit the placeholders ( {{ }} ) when creating a new language, otherwise it won't work as expected.

To add flags edit the file src\components\Buttons.ts. There are flags for every language that are supported by the official, just need to add the button.

Edited May 7, 2021 by Karbust

[Karbust 4723]

Update

Added support for NodeJS 17 (OpenSSL Issue).
Added a discord button (can be enabled/disabled on src\config.ts).
Fixed the error when building saying electron belongs to devDependencies.
Fixed the isDev issue not working on production build.

This is the hidden content, please

• Sign In
• or
• Sign Up

[Karbust 4723]

Update

Sorry for another sudden update.

Added support for update locale.cfg when changing the language on the patcher. The default value is false which means the locale.cfg file will not be updated when changing the patcher's language.
To set it up edit src\config.ts.

This is the hidden content, please

• Sign In
• or
• Sign Up

Disclaimer: The locales may not be 100% correct since I don't have every metin2 client. If you find a mistake on the ones already defined let me know.

Edited November 29, 2021 by Karbust
Added the disclaimer

[lime 247]

1 hour ago, Karbust said:

Update

Sorry for another sudden update.

Added support for update locale.cfg when changing the language on the patcher. The default value is false which means the locale.cfg file will not be updated when changing the patcher's language.
To set it up edit src\config.ts.

This is the hidden content, please

• Sign In
• or
• Sign Up

Disclaimer: The locales may not be 100% correct since I don't have every metin2 client. If you find a mistake on the ones already defined let me know.

Good idea, bro! How did you come up with it?  Nice patcher!

[Karbust 4723]

Update

Added a slider component that can be enabled or disabled (enabled by default) (instructions on how to use it are available on the repository).

 

Changed from CRA (Create-React-App aka react-scripts) to Vite, which allows for a faster development, build time and reduced package size. Also replaced the compression method from "maximum" to "normal", since there is no difference in sizes, but takes much less time to build.

This is the hidden content, please

• Sign In
• or
• Sign Up

Edited August 17, 2022 by Metin2 Dev
Core X - External 2 Internal

[akin025 1]

Can anyone make a video about the web server setup?

[FileX 53]

Hey,

I haved problem with installing. 

In fact, everything probably works correctly. I created files.json using a script and so on. The problem is, that:

1. Do not run download percent
2. Only a few files will be downloaded and then it will end.

How can I edit it? I probably made a mistake, but I don't know which one.

Now i have problem with stuck on 87%..

Edited February 25, 2022 by matyasvane

[cBaraN 109]

Nice project, but i think it should be in the file deletion argument just like the original ymir installer. I think it is necessary to delete old files. Also, if you solve the "process.env.PORTABLE_EXECUTABLE_DIR is undefined" error, i think it will be a very good project.

[Yushuu 0]

Hey. Thanks for sharing.
Everything was done by the tutorial, followed every step.
Now my problem is that everytime i try to use the patcher to start the game it's randomly stops.
After a few re-starts the patcher will download some files again and stuck in progress. Maybe add a few MB of files.

[Gantur 2]

How to set up the network Connection? 

[Karbust 4723]

On 9/9/2023 at 10:56 PM, Gantur said:

How to set up the network Connection? 

What do you mean by "network Connection"? o.O

[Gantur 2]

10 hours ago, Karbust said:

What do you mean by "network Connection"? o.O

Can you explain how to set it up for FTP?
How to make connection to Domain server "FTP" and create the .exe file

[Karbust 4723]

13 hours ago, Gantur said:

Can you explain how to set it up for FTP?
How to make connection to Domain server "FTP" and create the .exe file

Those instructions are on the README and on the first post, edit the file config.ts with your variables and then run yarn run electron-pack to create the exe. The script to generate fhe files.json for the webserver is also on the first post and the README.

[Gantur 2]

On 9/12/2023 at 10:32 AM, Karbust said:

Those instructions are on the README and on the first post, edit the file config.ts with your variables and then run yarn run electron-pack to create the exe. The script to generate fhe files.json for the webserver is also on the first post and the README.

Connection Error for me..

 

Do I have to do a CORS update?
Or is there a chance without a Cors update?

Edited September 13, 2023 by Gantur
Core X - External 2 Internal

[Karbust 4723]

9 hours ago, Gantur said:

Connection Error for me..

 

Do I have to do a CORS update?
Or is there a chance without a Cors update?

On debug you have to update CORS, that's not needed when you build it.

Add a console.log above the following line: 

This is the hidden content, please

• Sign In
• or
• Sign Up

Also add the variable name on line (between the parentisis) 

This is the hidden content, please

• Sign In
• or
• Sign Up

 to be able to see what the error is.

After you do this, the error will be shown on the Chromium DevTools that the patcher opens on debug.

[Gantur 2]

Thanks, now all work fine 

[FNCX 0]

what's the point of running a browser that consumes memory a lot compared to other drawing guis for patcher lmao

[b6d4a82c15 80]

2 hours ago, FNCX said:

what's the point of running a browser that consumes memory a lot compared to other drawing guis for patcher lmao

Nowadays computers are much more powerful and so electron/CEF apps have become the norm. It's also easier to develop and maintain.

Slack, MS teams, discord, whats, spotify, battle.net client, Adobe Illustrator and many others are running inside embedded browsers.