EmscriptenとSDL2でSDL_LockTextureを使ったピクセル描画

SDL2で、SDL_LockTextureを使ってピクセル書き込み時にロックすることで、ゲームなどでも高速にピクセル描画ができます。このサンプルでは、Context->pixelsはバッファとして用意しましたが、memcopyなどで使う事はしていませんん。CreateTextureでテクスチャーオブジェクトを作るとメモリーも確保されるので、SDL_LockTextureでロックをして、for文で直接値を書き換えています。

ピクセルは、RGBAを8+8+8+8=4bytesで保持しています。ですがCreateTextureは単純なメモリブロックなので、そのままfor文でループすると、1バイト単位つまり、R,G,B,Aを別々に処理します。通常色を変更したい場合は、ピクセル単位で操作したいので、一度キャストをしています。

 

 

EmscriptenでSDL_UpdateTextureを使ったピクセル描画

SDL 1.2から2.0への移行(http://sdl2referencejp.osdn.jp/MigrationGuide.html) に、SDL_UpdateTextureを使ったピクセル描画について書かれていたので試してみました。こちらも問題なく動作しましたが、本来は静的画像ファイルを表示するときに使うようです。頻繁に更新する場合は、Emscriptenでピクセル描画とスケーリング で使ったSDL_LockSurfaceでロックをして書き込む方式が良いようです。

 

Emscriptenでピクセル描画とスケーリング

サンプルなどを調べて、一部分のみメモリー上の配列を、ピクセルとして描画して、さらにそれをスケーリングする方法が分かったのでコードをgistにアップしました。

スケーリングする方法

まず、640×480の画面サイズでWindowを作成しました。ピクセルを描画するときに、出力先のサイズ指定を1280*960にすることで2倍にスケーリングできます。実際にウィンドウのサイズを大きくするのではなく、このSDL_RenderCopyの値を変更するだけです。描画元の画像サイズを疑似的に1/2にすることでもスケーリングが可能と思われます。SDL_LockSurface(screen);でロックをします。

ピクセル描画

SDL_CreateRGBSurfaceで、サーフェスを作るとpixels属性が用意されるので、そこに書き込むことでピクセル操作が可能です。また書き込む際は、

 

EmscriptenのSDL2のライブラリ指定方法などのメモ

Emscriptenを試してみたので初歩的なメモを残しておきます。

インストールと最初のチュートリアル

Emscriptenは、Windowsでもインストーラーがあるのですぐに開発環境が構築できます。最初にhttp://kripken.github.io/emscripten-site/docs/getting_started/index.html を使うとemccの使い方が分かります。

サンプルソースコード

Emscriptenをインストールするとテストスイートもインストールされてそれがサンプルとなります。とくにSDL2を始めるときの参考になります。

そのままでは動かない。

Emscriptenは、emccコマンドを実行するとC/C++のソースコードをトランスパイルして、JavaScriptとHTMLを出力します。SDL2の場合は、通常のループ処理などを修正する必要があるようです。SDL_Delayを使ったループ処理は使えないので、ifdefマクロで分岐する必要があります。emscripten_set_main_loopのサンプルは以下が参考になります。

http://kripken.github.io/emscripten-site/docs/porting/emscripten-runtime-environment.html

http://stackoverflow.com/questions/29335510/using-sdl2-renderdraw-functions-with-emscripten

コンパイル時のSDL2ライブラリーの指定方法

https://kripken.github.io/emscripten-site/docs/compiling/Building-Projects.html

チュートリアルにはこの記述がなく、Google検索をしているときに見つけました。またemcc –show-portsでemscriptenに移植されたライブラリー一覧が確認できます。

ゲームのチュートリアル

EmscriptenとSDLでゲームを作るチュートリアルです。

https://lyceum-allotments.github.io/2016/06/emscripten-and-sdl-2-tutorial-part-1/

開発時の問題の切り分けに注意

EmscriptenとSDL2など何かライブラリーを使って開発する際は、C/C++の経験が豊富でない場合は、Visual Studio 2017 + SDL2でアプリを開発後に、Emscriptenに移植するという2段階で行ったほうがよさそうです。はじめからEmscriptenで開発するとプラットフォームに依存しなくなるのですが、SDL2ライブラリーの使い方が悪いのか、Emscripten特有の問題なのかの切り分けがしづらくなります。