Search

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



Comments