Help us understand the problem. What is going on with this article?

WebGL game development with OpenSiv3D for Web (VSCode on Windows)

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 steps1.

スクリーンショット 2020-09-20 13.46.49.png

Download emscripten SDK (emsdk)

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

InstallEMSDK1.png

Install Emscripten

Open administrator command prompt3, 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

VSCodeExt1.png

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.

InstallSiv3DWebVSCode.png

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

Launch Visual Studio Code, open folder-selecting dialog4, 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

    InstallPIP.png

  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 ... 

    VSCodeOpenFolder.png

nokotan
DxLib の Web 移植を試みたかめ / OpenSiv3D も Web 移植を試みているとか / WebAssembly, emscripten チョットデキル らしい
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away