About GL Texture with SDL1 and SDL2 x Emscripten and Desktop

SDL と OpenGL と Emscriptenを利用して Desktop とBrowser向けのゲームを作ろう。
で、Textureの扱いを、考える。

1-8枚の off-screen image を持っておく。シーンごとに、この off-screen imageに転送する。で、使い回す方法を取る事にした。


それはなぜか?
あと、Emscriptenで上手く動作しない使い方があったので、まとめます。
※ 2017y 9m 14d

Textureとは

ゲームで使う画像の事です。テキストデータの表示も画像です。SDLでは、SDL_Surfaceとして抽象化されています。

GLで利用する際は、この画像データをハードに転送してから利用します。
基本的、ハードに転送した画像しか使えません。

一度に転送できる画像の数や容量には制限があるので、
賢く使う必要があります。

Off-screen image

ここでは、画面に直接表示しないImageという意味で使います。 私のPCはGLで一度に処理できる画像の数は、8枚でした。16284x16384 のPixelの画像を扱えるようです。

なので、複数枚の小さな画像は、前もって一つにまとめておく必要があります。

SDLでのOff-screen imageの作り方

SDL_CreateRGBSurface()　を利用します。
使い方は以下を参考にしてください。
SDL_BlitSurface() で、画像化したデータを追加できます。

https://github.com/kyorohiro/doc_sdl1/tree/master/sdl1_gl_textureFromRGBSurface

https://github.com/kyorohiro/doc_sdl2/tree/master/sdl1_gl_textureFromRGBSurface

SDL1 SDL2 Emscripten の差異

本題です。この記事を書いている時点では、以下のような事情があります。
- Emscripten x SDL1 だと、オフスクリーンImageに対する、SDL_BitSurface に失敗します。
- Desktop x SDL1 だと、SDL_SetAlpha(textSurface, 0, SDL_ALPHA_TRANSPARENT); をしてあげないと、透過色がある場合は、完全にすけてしまい、何も書き込まれません。※ SDL_BlitSurfaceを利用する場合


---> 解決方法
- SDL1 x Emscriptenの場合は手動で画像データを転送する。CPUでもGPUのどちらでも良いと思う。具体的には、以下のような感じで書きました。

 {
      char* m = image->pixels;
      char* n = textSurface->pixels;
      // for argb888 format 
      for(int i=0;i<textSurface->w;i++) {
        for(int j=0;j<textSurface->h;j++) {
          int mt = 4*(j*image->w + i);
          int nt = 4*(j*textSurface->w   + i);
            m[mt+0] = n[nt+0];
            m[mt+1] = n[nt+1];
            m[mt+2] = n[nt+2];
            m[mt+3] = n[nt+3];
        }
      }  
  }

SDL_Surfaceのpixelデータに直接書き込む

- SDL1 x デスクトップ  の時は、忘れずに、SDL_SetAlpha()をしてあげる。



おわり!!

.

------

試したコード
https://github.com/kyorohiro/sdl2_doc
This codes can build for windows and mac and html5 on windows and mac

作成中のライブラリー
https://github.com/kyorohiro/cgame

ことはじめ
https://kyorohiro.blogspot.jp/2017/09/which-use-sdl1-or-sdl2-at-emscripten.html

.