This project converts an interactive Live2D character widget originally designed for web pages into a standalone desktop application using NW.js. The character can walk, talk, and respond to mouse interactions, making it a cute desktop copmanion.

Original HTML Embedding

The Live2D widget is typically embedded in a webpage with a few lines of HTML and JavaScript. Below is an example of the minimal HTML structure used:

    <meta charset="UTF-8"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <title>Live2D Desktop Mascot</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"></link>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #f0f0f0;
        }
        #github-link {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1000;
        }
        #github-link svg {
            width: 60px;
            height: 60px;
            fill: #333;
            transition: all 0.3s;
        }
        #github-link:hover svg {
            width: 100px;
            height: 100px;
        }
    </style>


    <a href="https://github.com/stevenjoezhang/live2d-widget" id="github-link" target="_blank" title="Source code on GitHub">
        
        <svg fill="currentColor" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.58.82-2.14-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.14 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
    </a>
    <script src="./autoload.js"></script>

This code references the autoload.js script from the live2d-widget open-source project, which automatically loads the character.

Desktop Packaging with NW.js

To turn the HTML page into a desktop executable, we use NW.js (formerly node-webkit). NW.js wraps web technologies (HTML, CSS, JavaScript) into a native application with full desktop capabilities.

Step 1: Prepare the Project Files

1. Place all your project files (HTML, CSS, JavaScript, images, etc.) into a ZIP archive.
2. Inside the ZIP, create a package.json file with the following configuration:

{
    "name": "live2d-desktop",
    "version": "1.0.0",
    "description": "Desktop mascot powered by Live2D",
    "main": "index.html",
    "window": {
        "title": "Live2D Mascot",
        "icon": "icon.png",
        "toolbar": false,
        "frame": true,
        "width": 350,
        "height": 350,
        "min_width": 350,
        "min_height": 250,
        "max_width": 350,
        "max_height": 350,
        "position": "center",
        "as_desktop": true,
        "resizable": false,
        "always_on_top": true,
        "fullscreen": false,
        "show_in_taskbar": true,
        "show": true,
        "kiosk": false
    },
    "webkit": {
        "plugin": false,
        "java": false,
        "page-cache": false
    }
}

Key settings:

• main: entry point (our HTML file).
• window: controls appearance and behavior (size, always-on-top, no toolbar, etc.).
• as_desktop: enables desktop-background mode (character appears on the desktop).
• always_on_top: keeps the window above other windows.

Step 2: Create the Executable

1. Rename the ZIP file extension from .zip to .nw.
2. Copy the .nw file into the same directory as the NW.js executable (nw.exe).
3. Open a command prompt and navigate to that directory.
4. Run the following command to combine the NW.js runtime with your application:

copy /b live2d-desktop.nw + nw.exe my-mascot.exe

The resulting my-mascot.exe is a standalone executable. No further dependencies are needed.

Customization

You can modify the package.json to adjust window size, transparency, or behavior. The Live2D character itself can be changed by replacing the model files referenced in autoload.js.

This method works for any HTML-based application that you want to run as a desktop app. For more advanced features, refer to the NW.js documentation.