search

zardoy / minecraft-web-client

The most advanced Minecraft online/offline client + server in your browser! [IOS SUPPORTED]
https://mcraft.fun
MIT License
30 stars 30 forks source link
browser-minecraft emulator minecraft minecraft-web online react

readme

Minecraft Web Client

banner

A true Minecraft client running in your browser! A port of the original game to the web, written in JavaScript using the best modern web technologies.

You can try this out at mcraft.fun, pcm.gg (short link) mcon.vercel.app or the GitHub pages deploy. Every commit from the develop (default) branch is deployed to s.mcraft.fun - so it's usually newer, but might be less stable.

For building the project yourself / contributing, see Development, Debugging & Contributing. If you encounter any bugs or usability issues, please report them!

Big Features

All components that are in Storybook are published as npm module and can be used in other projects: minecraft-react

Recommended Settings

World Loading

Zip files and folders are supported. Just drag and drop them into the browser window. You can open folders in readonly and read-write mode. New chunks may be generated incorrectly for now. In case of opening zip files they are stored in your ram entirely, so there is a ~300mb file limit on IOS. Whatever offline mode you used (zip, folder, just single player), you can always export world with the /export command typed in the game chat.

docs-assets/singleplayer-future-city-1-10-2.jpg

Servers

You can play almost on any Java server, vanilla servers are fully supported. See the Mineflayer repo for the list of supported versions (should support majority of versions). There is a builtin proxy, but you can also host your one! Just clone the repo, run pnpm i (following CONTRIBUTING.MD) and run pnpm prod-start, then you can specify http://localhost:8080 in the proxy field.

Proxy servers are used to connect to Minecraft servers which use TCP protocol. When you connect connect to a server with a proxy, websocket connection is created between you (browser client) and the proxy server located in Europe, then the proxy connects to the Minecraft server and sends the data to the client (you) without any packet deserialization to avoid any additional delays. That said all the Minecraft protocol packets are processed by the client, right in your browser.

graph LR
    A[Web App - Client] --> C[Proxy Server]
    C --> B[Minecraft Server]
    style A fill:#f9d,stroke:#333,stroke-width:2px
    style B fill:#fc0,stroke:#333,stroke-width:2px
    style C fill:#fff,stroke:#333,stroke-width:2px

So if the server is located in Europe and you are connecting from Europe, you will have ~40ms ping (~180ms with residential proxy version), however if you are in the US and connecting to the server located in US, you will have >200ms ping, which is the worst case scenario.

Again, the proxy server is not a part of the client, it is a separate service that you can host yourself.

Docker Files

In case of using docker, you don't have to follow preparation steps from CONTRIBUTING.MD, like installing Node.js, pnpm, etc.

Rendering

Three.js Renderer

Advanced Settings

There are many many settings, that are not exposed in the UI yet. You can find or change them by opening the browser console and typing options. You can also change them by typing options.<setting_name> = <value>.

Console

To open the console, press F12, or if you are on mobile, you can type #dev in the URL (browser address bar), it wont't reload the page, but you will see a button to open the console. This way you can change advanced settings and see all errors or warnings. Also this way you can access global variables (described below).

Development, Debugging & Contributing

It should be easy to build/start the project locally. See CONTRIBUTING.MD for more info. Also you can look at Dockerfile for reference.

There is world renderer playground (link).

However, there are many things that can be done in online production version (like debugging actual source code). Also you can access some global variables in the console and there are a few useful examples:

The most useful thing in devtools is the watch expression. You can add any expression there and it will be re-evaluated in real time. For example, you can add viewer.camera.position to see the camera position and so on.

Watch expression

You can also drag and drop any .dat or .mca (region files) into the browser window to see it's contents in the console.

F3 Keybindings

world chunks have a yellow border, hostile mobs have a red outline, passive mobs have a green outline, players have a blue outline.

Query Parameters

Press Y to set query parameters to url of your current game state.

There are some parameters you can set in the url to archive some specific behaviors:

Server specific:

Single player specific:

{
    "baseUrl": "<url>",
    "index": {
        "level.dat": null,
        "region": {
            "r.-1.-1.mca": null,
            "r.-1.0.mca": null,
            "r.0.-1.mca": null,
            "r.0.0.mca": null,
        }
    }
}

Note that mapDir also accepts base64 encoded JSON like so: ?mapDir=data:application/json;base64,... where ... is the base64 encoded JSON of the index file. In this case you must use ?mapDirBaseUrl to specify the base URL to fetch the files from index.

General:

Notable Things that Power this Project

Things that are not planned yet

Alternatives