Como Transformar seus Jogos C/C++ para Web com Emscripten (SDL2)

Esse vídeo mostra como instalar o EmScripten e como transformar em JavaScript e WebAssembly, transformaremos um exemplo de SDL2 com C++ já feito nesse canal.


Como Transformar seus Jogos C/C++ para Web com Emscripten (SDL2)

EmScripten é um compilador que traduz códigos escritos em C e C++ para WebAssembly, ou para um subconjunto de JavaScript conhecido como asm.js).

Os aplicativos compilados com Emscripten possuem mais desempenho e consequentemente são mais rápidos do que o JavaScript interpretado ou compilado dinamicamente .

Nesse vídeo veremos como instalar o EmScripten e como utilizar através de um exemplo que já fizemos aqui no canal no vídeo sobre SDL2.


Assista ao vídeo


Arquivos criados e utilizados no vídeo

main.cpp

#include <SDL2/SDL.h>
#include <emscripten.h>
#include <iostream>

struct Context {
  std::string title;
  int width, height;
  SDL_Renderer * renderer;
  SDL_Event event;
  SDL_Rect rect, rect2;
  SDL_Texture * logo;
};

void callback(void * arg){
  Context * context = static_cast<Context*>(arg);
    while(SDL_PollEvent(&context->event)){
      if( context->event.type == SDL_QUIT ){
        exit(0);
      }else if( context->event.type == SDL_MOUSEBUTTONDOWN ){
        context->rect2.x -= 20;
      }
    }

    SDL_RenderClear(context->renderer);
    SDL_SetRenderDrawColor(context->renderer, 255, 255, 255, 255);
    //SDL_RenderDrawRect(renderer, &rect2);
    SDL_RenderFillRect(context->renderer, &context->rect2);
    SDL_SetRenderDrawColor(context->renderer, 9, 20, 33, 255);
    SDL_RenderCopy(context->renderer, context->logo, NULL, &context->rect);
    SDL_RenderPresent(context->renderer);
}

int main(int argc, char** argv) {
  Context context;
  SDL_Init(SDL_INIT_EVERYTHING);

  context.title = "SDL2 It's Works!";
  context.width = 1280;
  context.height = 720;

  SDL_Window* window = SDL_CreateWindow(
      context.title.c_str(),
      50, 30,
      context.width, context.height,
      SDL_WINDOW_SHOWN
      );

  SDL_Renderer * renderer = SDL_CreateRenderer(window, -1, 0);
  context.renderer = renderer;


  SDL_Surface * surface = SDL_LoadBMP("./sdl.bmp");
  context.logo = SDL_CreateTextureFromSurface(renderer, surface);
  SDL_FreeSurface(surface);

  context.rect.x = 50;
  context.rect.y = 20;
  context.rect.w = surface->w;
  context.rect.h = surface->h;

  context.rect2.x = 800;
  context.rect2.y = 20;
  context.rect2.w = 300;
  context.rect2.h = 300;

  emscripten_set_main_loop_arg(callback, &context, -1, 1);

  SDL_DestroyTexture(context.logo);
  SDL_DestroyRenderer(renderer);
  SDL_DestroyWindow(window);
  SDL_Quit();
  return 0;
}

index.html

<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="index.js"></script>
    </center>
  </body>
</html>

Comando para compilar:

em++ main.cpp -s WASM=1 -s USE_SDL=2 -s USE_SDL_IMAGE=2 -s SDL2_IMAGE_FORMATS='["bmp"]' --preload-file sdl.bmp -o index.html


gamedev cpp sdl2 emscripten web


Compartilhe


Nosso canal no Youtube

Inscreva-se


Marcos Oliveira

Marcos Oliveira

Desenvolvedor de software
https://github.com/terroo


Crie Aplicativos Gráficos para Linux e Windows com C++

Aprenda C++ Moderno e crie Games, Programas CLI, GUI e TUI de forma fácil.

Saiba Mais

Receba as novidades no seu e-mail!

Após cadastro e confirmação do e-mail, enviaremos semanalmente resumos e também sempre que houver novidades por aqui para que você mantenha-se atualizado!