Overview

This article has following explanations to develop WebGL application with "OpenSiv3D for Web."

• Install Prerequisites (Python, emscripten)
• Download "Sample Program for OpenSiv3D for Web"
• Build and Run Sample Program

This is English translation; original article is "OpenSiv3D Web版を使ってブラウザで動くゲームを作る (VSCode版, Windows)," written in Japanese.

Tested Develop Environment

• Windows 10 Education (Version 10.0.17763.1098)
• Visual Studio Code 1.47.3
• emscripten 1.40.1

Install Prerequisites (Python, emscripten)

We can use "emscripten SDK (emsdk)" in order to install emscripten to your develop environment. Python must be installed to use commands included in "emscripten SDK (emsdk)", which is written in Python script.

Install Python

Follow instructions in Using Python on Windows - Installation steps¹.

Download emscripten SDK (emsdk)

Follow link to GitHub - emscripten-core/emsdk, then Click Code button in green and Download ZIP button in this order².

Install Emscripten

Open administrator command prompt³, change directory to the folder you have downloaded emsdk, and run these commands:

emsdk install 2.0.4
emsdk activate 2.0.4 --global

emsdk install latest will install emscripten and its dependencies (clang, node.js, java) to your develop environment.
emsdk activate latest --global will perform setup for these tools.

Set Up Visual Studio Code

Install Extensions

Open "Extension Tab" in Visual Studio Code, search and install these extensions:

• C/C++ VSCode Extension
• Debugger for Chrome
• Debugger for Firefox

Open "Sample Program for OpenSiv3D for Web" on Visual Studio Code

Download "Sample Program for OpenSiv3D for Web"

Follow link to GitHub - nokotan/OpenSiv3DForWeb-VSCode, then Click Code button in green and Download ZIP button in this order.

Open "Sample Program for OpenSiv3D for Web" on Visual Studio Code

Launch Visual Studio Code, open folder-selecting dialog⁴, and select the folder that includes "Sample Program for OpenSiv3D for Web" you have extracted.

Writing source code

With "OpenSiv3D for Web," you can use the features which is supported in OpenSiv3D for Linux.

You should have a browser handle JavaScript events, or the browser hangs up because of infinite loop. Therefore, make a function that includes logics that should be processed regularly, and register the function as a callback which is called at the start of an animation frame.

Main.cpp

# include <Siv3D.hpp> // OpenSiv3D v0.4.3
# include <emscripten.h>

void RunMainLoop(void* arg)
{
    static_cast<const std::function<void()>*>(arg)->operator()();
}

void SetMainLoop(std::function<void()> mainLoop)
{
    emscripten_set_main_loop_arg(RunMainLoop, reinterpret_cast<void*>(&mainLoop), 0, 1);
}

void Main()
{
    // Set background color to aqua blue
    Scene::SetBackground(ColorF(0.8, 0.9, 1.0));

    // Create font which size is 60
    const Font font(60);

    // Create cat texture
    const Texture cat(Emoji(U"🐈"));

    // Cat position
    Vec2 catPos(640, 450);

    SetMainLoop([&]()
    {
        System::Update();

        // Draw text at the center of the shown window
        font(U"Hello, Siv3D!🐣").drawAt(Scene::Center(), Palette::Black);

        // Draw a cat animating its size
        cat.resized(100 + Periodic::Sine0_1(1s) * 20).drawAt(catPos);

        // Draw a transparent red circle that follows the cursor
        Circle(Cursor::Pos(), 40).draw(ColorF(1, 0, 0, 0.5));

        // if key 'A' is pressed down
        if (KeyA.down())
        {
            // Add 'Hello!' to debug draw
            Print << U"Hello!";
        }

        // if the button is pressed down
        if (SimpleGUI::Button(U"Move the cat", Vec2(600, 20)))
        {
            // Move a cat to random position within the window
            catPos = RandomVec2(Scene::Rect());
        }
    });
}

Building and Debugging

To build sample program:

• Press [Ctrl]+[Shift]+[B]
• Press [Ctrl]+[Shift]+[P], Select "Run Task ...", then Select Build: Debug (or Release)

To debug sample program (both will launch local server and open browser):

• Press [Ctrl]+[Shift]+[P], Select "Run Task ...", then Select Run Local Server and Open Browser
• Start debugging in debugging tab (requires browser extension)

---

1. Enable these settings if you want to customize python instalation ↩

   • pip
   • Add python into PATH

   

2. You can use following command instead of downloading zip, if git is available in your environment. ↩

   git clone https://github.com/emscripten-core/emsdk.git
   

3. Press [Windows]+[X], and select PowerShell (Administrator) ↩

4. Click File > Open Folder ... ↩