Create Web Games with SMK - An alternative to SFML

Simple Multimedia Kit (SMK) is a library for developing games in C++.


Create Web Games with SMK - An alternative to SFML


Simple Multimedia Kit (SMK) is a library for developing games in C++.

Features:

  • Compatible with WebAssembly. One build for every platforms!
  • Fast & simple.
  • No dependencies: everything is fetched using cmake FetchContent.

Installation

Example dependencies on APT-based systems:

sudo apt install xorg-dev libgl1-mesa-dev libpulse-dev git

Now clone and run the commands:

git clone https://github.com/ArthurSonzogni/smk
cd smk
cmake -B build .
cd build
make
sudo make install

Basic Example

main.cpp

#include <smk/Color.hpp>
#include <smk/Shape.hpp>
#include <smk/Window.hpp>

int main() {
  auto window = smk::Window(640, 480, "test");
  auto circle = smk::Shape::Circle(200);
  circle.SetColor(smk::Color::Red);
  circle.SetPosition(320,240);
  window.ExecuteMainLoop([&] { 
      window.PoolEvents();
      window.Clear(smk::Color::Black);
      window.Draw(circle);
      window.Display();
      window.LimitFrameRate(60 /* fps */);
      });
  return 0;
}

Create a CMakeLists.txt file and insert this content inside:

cmake_minimum_required (VERSION 3.11)
 
include(FetchContent)
 
FetchContent_Declare(smk GIT_REPOSITORY https://github.com/ArthurSonzogni/smk.git)
FetchContent_GetProperties(smk)
if(NOT smk_POPULATED)
  FetchContent_Populate(smk)
  add_subdirectory(${smk_SOURCE_DIR} ${smk_BINARY_DIR} EXCLUDE_FROM_ALL)
endif()
 
project(Example
  LANGUAGES CXX
  VERSION 0.1.0
)
 
add_executable(main main.cpp)
target_link_libraries(main smk)

Compile for desktop:

cmake -B desktop .
cd desktop
make
./main

Compile for Web:

You will need Emscripten installed!

emcmake cmake -B web .
cd web
make

Create an index.html file inside the web directory and insert this content inside:

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>
    <center>
      <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
      <script type='text/javascript'>
        var Module = {
          canvas: (function() { return document.getElementById('canvas'); })()
        };
      </script>
      <script src="main.js"></script>
    </center>
  </body>
</html>

And now just run the command below and the example will be opened automatically in your default browser:

emrun index.html

For more examples, tips and documentation see the official repository on GitHub:

https://github.com/ArthurSonzogni/smk

If you want to see a video with more details, watch it below. The video is in Portuguese, however, it is possible to follow the procedures universally



gamedev cpp


Share


YouTube channel

Subscribe


Marcos Oliveira

Marcos Oliveira

Software developer
https://github.com/terroo

Related articles