release Metin2 Patcher: An Electron-Based Solution

[Andromeda]

This is the hidden content, please

• Sign In
• or
• Sign Up

 

Introducing a streamlined Metin2 patching tool developed using Electron, with a combination of React and TypeScript. This application ensures file integrity through SHA256 verification.

Getting Started

1. Install Node.js: Download from
   This is the hidden content, please

   • Sign In
   • or
   • Sign Up
   .
2. Install Yarn: You can find installation instructions on
   This is the hidden content, please

   • Sign In
   • or
   • Sign Up
   .
3. Clone the Repository:

• This is the hidden content, please

  • Sign In
  • or
  • Sign Up

   

• Install Dependencies:

4. This is the hidden content, please

   • Sign In
   • or
   • Sign Up

    

5. Edit Configuration: Customize the src/config.ts file with your specific values.
6. Replace Logo: Update resources/icon.png with your logo (minimum size of 256x256 pixels).

Quick Setup Video

For a visual guide on how to set up the patcher, check out this video:

This is the hidden content, please

• Sign In
• or
• Sign Up

This is the hidden content, please

• Sign In
• or
• Sign Up

Available Commands

Command	Description
yarn run start	Launches the React app in development mode.
yarn run build	Compiles a production-ready React bundle.
yarn run electron-start	Starts the Electron application.
yarn run electron-pack	Builds a production package of the application.
yarn run lint	Checks for linting errors.
yarn run lint-fix	Automatically fixes some linting errors.

About the Project

The development of this patcher stemmed from a desire to gain deeper insights into Electron. The tool will automatically create necessary folders and download missing files when required. It verifies local files and, if discrepancies in checksums are found, it initiates downloads for the affected files. The patcher operates downloads asynchronously, allowing multiple files to be processed simultaneously. It is built entirely with React, Electron, and TypeScript, utilizing TailwindCSS for styling.

Deployment Instructions

Once everything is configured, use the following command to package the application:

This is the hidden content, please

• Sign In
• or
• Sign Up

This will result in the creation of two files within the release folder:

• Metin2 Patcher Electron-X.X.X-win.zip: This compressed file contains the complete bundle that can be extracted to the client folder (remove the two unnecessary LICENSE files). Avoid using this if you already have the CEF browser on the client.
• metin2_patcher_electron.exe: This executable is zipped, and it will extract to a temporary directory during runtime (takes about 3 seconds to fully launch) and will clean up automatically upon closing. This is a suitable option if the first one cannot be performed.

Development Testing

If running a local web server (like Apache, XAMPP, or WAMP) is not viable, you may need to configure CORS on your remote server.

For NGINX:
In your configuration file for the patcher host, add:

This is the hidden content, please

• Sign In
• or
• Sign Up

For Apache:
In your configuration file, include:

This is the hidden content, please

• Sign In
• or
• Sign Up

You may also need to enable the headers module:

This is the hidden content, please

• Sign In
• or
• Sign Up

Running in Development Mode

First, launch the frontend (ensure port 3000 is free; otherwise, another port will be assigned, causing the patcher to display a blank screen):

This is the hidden content, please

• Sign In
• or
• Sign Up

Then, start the Electron application:

This is the hidden content, please

• Sign In
• or
• Sign Up

Web Server Setup

Using this Node.js script, place the client files in a directory named files and run the script. It generates a JSON file listing filenames, sizes, and checksums.

Multi-language Support

Currently, the application supports English (default) and Portuguese as examples for adding additional languages. To include new languages, modify both src/i18n.ts and src_electron/i18n.ts.

To add a language:

1. Import the translation file (.json) into the localization/ folder.
2. Add the new language to the resources and supportedLngs arrays.

Do not modify placeholders ({{ }}) when creating a new language, or issues may arise. To add language flags, adjust the src/components/Buttons.ts file, adding a button for each language that is officially supported.

Slider Configuration

To configure the slider, update the respective values in src/config.ts. The webserver file should resemble this structure:

This is the hidden content, please

• Sign In
• or
• Sign Up

Images should have dimensions of 780x300 pixels, and the image paths should be relative to the directory defined by the src/config.ts variable patchSliderImages. It’s recommended to use WebP images over PNG/JPG/JPEG for better quality at reduced file sizes.

Image Optimization Script

To convert images, the following script can be utilized:

This is the hidden content, please

• Sign In
• or
• Sign Up

You will need to install these packages:

This is the hidden content, please

• Sign In
• or
• Sign Up

This is the hidden content, please

• Sign In
• or
• Sign Up

Place images in a folder named img, and the output will be directed to the img_webp directory.

Reporting Issues

If you encounter any challenges, please open a New Issue for assistance.

 

This is the hidden content, please

• Sign In
• or
• Sign Up

This is the hidden content, please

• Sign In
• or
• Sign Up

This is the hidden content, please

• Sign In
• or
• Sign Up

This is the hidden content, please

• Sign In
• or
• Sign Up

This is the hidden content, please

• Sign In
• or
• Sign Up

Author

Karbust