2017年12月29日金曜日

Emscripten メモ

以前、Emscripten で、あれこれ作成していたのだが、
再学習することにした

Index


(1) Hello, World with Emscripten
(2) Using WASM option At Emcc
(3) Create html
(4) Connect to Javascript
(5) Connect to Javascript structure ‘s pointer
(6) Output args In Function (1)

 (7) Output args in Function (2)


PS

following is emscripten 's code which I tried to write about  previously.

https://github.com/kyorohiro/doc_sdl2
https://github.com/kyorohiro/ccore
https://github.com/kyorohiro/cvectorMath
https://github.com/kyorohiro/capp
https://github.com/kyorohiro/cgame

時刻: 0 件のコメント:
ラベル: ,

2017年12月4日月曜日

About Dart x SDL on Mac

Dart の Native Extensions を利用して、 SDL　を用いたマルチプラットフォームのゲーム開発環境を作れるか検証してみた。


結論からいくと、 「Mac　上で動作する SDL x Dart の アプリは動作させることが難しいよ」 と言うことです。 Windowsはできる。

ただ、時間をかければできるかなぁとも思いました。
※ Dartはゴリゴリ開発されているものなので、近い未来には、変わっているかもしれません。


# Dart とは

Serverサイド や SmartPhone で動作する VM　をもち、 Browser上で動作する JavaScriptを出力できる 凄い奴です。
https://www.dartlang.org/


# Native Extensions とは

コマンドライン向けのVMから、 Shared Library と連携して、Nativeの機能をDartから叩くのに使用します。

https://www.dartlang.org/articles/dart-vm/native-extensions

# SDL とは

クロスプラットフォームの Low level のライブラリーです。 audio, keyboard, mouse, joystick, graphics hardware を扱うことができます。

ゲームを作成するのに必要な機能がサポートされており、スマフォの環境も含めて、ほとんどの環境で動作します。


# 試したこと


## Dart と SDLを組み合わせて、 Dartで書いたゲームをありとあらゆる PFで動作させることができないか?


Dart と SDLを組み合わせて、 Dartで書いたゲームをありとあらゆる PFで動作させることができないか?　と考えました。

Dartには、 async-await がサポートされていたりして、 ロジックが書きやすいです。ゲームスクリプトとか、 Dartがあればあればいらないじゃん。 Dartがゲーム用のスクリプトといって問題ないくらい。気軽にロジックがかけるではないか..


## Dart


#### MAC で

https://github.com/kyorohiro/dart.sdltest

```
git clone https://github.com/kyorohiro/dart.sdltest
cd dart.sdltest
cd doc_sdl2
ninja -f build.osx.ninja
cd ..
sh build.sh
dart main.dart
```


#### Windows で


https://github.com/kyorohiro/dart.sdltest.vc

```
git clone https://github.com/kyorohiro/dart.sdltest.vc
cd dart.sdltest.vc
start Project3.sln
...
Debugモードでビルド.....
...
cd ..
git clone https://github.com/kyorohiro/dart.sdltest
cd dart.sdltest
copy {ビルドしたDLLとLib と SDL関連のDLL} ./
dart main.dart
```

# どうなったか?

Windowsでは、期待通りに動作します。
つまり、Dart で SDLアプリを作れます。



しかし、MACでは以下のようなエラーがでます。

とすると、 WARNING: nextEventMatchingMask should only be called from the Main Thread! This will throw an exception in the future.
と警告がでてそれ以上何もできません。

Mac では　UI　関連のイベントは、 MainThreadで処理しなくてはならないからです。



# もしも macで Dart x SDLを実現したいなら

DartVM に手を入れて MainThread を、制御できるようにする。
DartVM と プロセスを分けて、MainThreadを描画ように利用する。
などなど。

Flutter のコードを見ると、 DartVM を組み込んで　アレコレしているので、
参考にしたり、 そのまま利用したりすると良いかもしれません




時刻: 0 件のコメント:

2017年9月26日火曜日

Bake tiny calc app at antlr3 and Clang with emscripten

ゲームスクリプトを設計しようかと考えた。
文字で書かれた文章を構造化して、書かれた事を実行する。
ANTLR を 使う事にした。
Emscripteで利用するまでについて、解説します。



結論から

ANTLR3 (http://www.antlr3.org/)を利用します。ANTLR4は、C言語がなさげ、CPPはあります!!

ANTLR3 で 生成した Parser と Lexer は、 emscriptenようにビルドしましょう。
少しだけ変更します。以下の通り

電卓を作りました。参考までにどうぞ


コンパイラーコンパイラー

文字で書かれた文章を構造化するのに、Lexer と Parser を作るのがトレンドです。
Lexerで単語を分割する。Parserで分割した単語を木構造化するといった感じです。

こう書くと難しそうですが、いたって簡単です。
文章を構造化するとは、プログラマー的には、文章を関数化するという事です。
これを、念頭に読んでください

「xxx は yyy が zzz です。」を構造化してみましょう。

関数で木構造を表現する

void sentence() {
  xxx();
  printf("は");
  yyy();
  printf("が");
  zzz();
  printf("です。");
}

void xxx() {
  printf("私");
}

void yyy() {
  printf("ポテチ");
}

void zzz() {
  printf("すき");
}

こんな感じで出かけます。 xxx() yyy() zzz()を、自分好みに書き換えれば、
構造化の完成です。
今回の場合だと、「私はポテチが好きです」と表示されるはずです。


関数で構造解析木をつくる

xxx() yyy() zzz() の部分に何が入るかを、解析するのが、Parserです。

void  sentence(char *src) {
  src = xxx(src+1);
  if(src[0] !="は") {
    return; // failed to parse
  }
  src = yyy(src+1);
  if(src[0] == "が") {
    return; // failed to parse
  }
  src = zzz(src+1);
  if(src[0] != "で" || src[0] != "す") {
    return; // failed to parse
  }

}

char* xxx(char *src) {
  char data[100] = 0;
  for(int i=0;;i++) {
    if(src[i] == 'は') {
      return src+i;
    }else {
      data[i] = src[i];
    }
  }
}

char* yyy(char *src) {
  char data[100] = 0;
  for(int i=0;;i++) {
    if(src[i] == 'が') {
      return src+i;
    }else {
      data[i] = src[i];
    } 
  }
}

char* zzz(char *src) {
  char data[100] = 0;
  for(int i=0;;i++) {
    if(src[i] == 'で') {
      return src+i;
    }else {
      data[i] = src[i];
    }  
  }
}


こんな感じです。書くのが大変ですね。

コンパイラーコンパイラーが、かわりにやってくれる

この、大変な作業を、BNF形式で記述すれば自動で生成してくれるのが、
コンパイラーコンパイラーと言われるものです。

今回は、ANTLR(http://www.antlr.org/)を利用しました。


ANTLRについて

C言語は、ANTLR3をつかう

antlr4だと、C++ようはあるのですが、C言語用がありません。


Emscriptenようには、ビルドする

このコードを、自分でビルドします。少しだけ変更が必要でした、
ninja build できるようにしたものを、以下に起きました。


Java版は生成されるのに、C言語版はWarningがでる

```

warning(24):  template error: context [/outputFile /parser] 1:1 could not pass through undefined attribute filterMode
warning(24):  template error: context [/outputFile /parser /genericParser /_sub45 /ruleAttributeScopeFuncMacro] 1:4 no such property or can't access: null.attributes
warning(24):  template error: context [/outputFile /parser /genericParser /_sub45 /ruleAttributeScopeFuncMacro] 1:4 no such property or can't access: null.attributes
```
これは、でても問題ないそうです..

出力するParserの言語のしていは、グラマーファイルに書く


こんな感じ

PS

電卓のサンプルを起きました。

参考までにどうぞ。


REF BOOK




時刻: 0 件のコメント:
ラベル: , , ,

2017年9月24日日曜日

Layer For GL and SDL1 and SDL2 on html5 and Mac and Windows



私は、今、特殊なゲーム用のライブラリーを作成しているのだが、
SDL1 SDL2 html5 mingw osx で、発生する差異を吸収するレイヤーを作成することにした。
https://github.com/kyorohiro/capp

今の所、Image、Sound、TTF、GL が使えます。
徐々に、ビルド環境の構築方法や、イベントの対応などの機能が増えていくはずです..



Purpose

C言語だと、IfDef で、差異を吸収するわけだが、
このコードのあちこちであると、管理が面倒になるので、
それらを、cappライブラリーにまとめることにしたのだ。
https://github.com/kyorohiro/capp


cappライブラリーを作成する前に、もっと短いコードで確認してもいて
それは、以下にあります。
https://github.com/kyorohiro/doc_sdl2


MINGWについては、過去記事を参考にして、GLEWライブラリを生成してください。
http://kyorohiro.blogspot.jp/2017/09/build-sdl-x-mingw-x-opengl-s.html




...

おわり








------

試したコード
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




時刻: 0 件のコメント:
ラベル: , ,

2017年9月22日金曜日

Build SDL x MinGW x opengl 's application 2017y9m22day



MinGW x SDL x OpenGL で アレコレしよう。
まずは、環境の構築をする必要があります。
ただ、このタイミングでは、素直に環境構築ができませんでした。
解説します。


結論から : GLEWは自前でビルド

glew を自分でビルドする必要があります。
また、glContextを生成した後で、glewを初期化する。

- mingwでビルドできるようにした、glew
  https://github.com/kyorohiro/glew_mingw
- SDL2 x GL のビルドファイル(ninja build)とソース
  https://github.com/kyorohiro/doc_sdl2

あとは、他Platformと変わりません


GLEWのビルド

http://glew.sourceforge.net/ で配布されている windows用の libは、
Visual Studio 用のようです。　※確証はありません

なので、自分でビルドする必要があります。
mingw用のビルド方法のREADMEがあるので、その通りにやれば良いのですが、
パッチを充て必要があります。


fprintf () が見つからないといわれる

原因が standard ライブラリーを、リンクしないように GCC のOptionが指定されているからです。

にあるパッチを充てればビルドできます。

msys上で、mingw32-make をしてくださいhttp://www.mingw.org/wiki/getting_started



glContextを生成した後で、glewを初期化する。

glewを初期化しないとシグセグで落ちます。
ただ、初期化するタイミングは、glContextを生成した後のようです。※確証はありません。
なので、SDL_Render を用いた Bufferの更新とかは使えなくなります。たぶん、
かわりに、SDL_GL_SwapWindow を使うことになるかと



...

おわり


Build Option、source code は、 check following
- mingwでビルドできるようにした、glew
  https://github.com/kyorohiro/glew_mingw
- SDL2 x GL のビルドファイル(ninja build)とソース
  https://github.com/kyorohiro/doc_sdl2





.








------

試したコード
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




.





時刻: 0 件のコメント:
ラベル: , ,

2017年9月15日金曜日

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




.





時刻: 0 件のコメント:
ラベル: , ,

2017年9月13日水曜日

For WebGL, hybrid SDL1 and SDL2 with emscripten



SDL v1と v2 の両方を利用したライブラリーにしようという事は前回話したとおり
Which SDL1 or SDL2 with emscripten

そこそこ動作するようになってきた。
https://github.com/kyorohiro/cgame/tree/master/examples





SDL1 と SDL2 の違い

大きな違いはなかった。 https://wiki.libsdl.org/MigrationGuide の通り。
基本は、初期化方法と、画面の更新方法が違うくらい。

SDL1 と SDL2 の差異、Html5用と、デスクトップ用の違いは、　https://github.com/kyorohiro/cgame/tree/master/app で吸収したので
興味のある方はどうぞ。

ちなみに、SDL_ttf と SDL_image と SDL_mixer の APIは同じでした。


ビルド方法のノウハウ

ビルド方法のノウハウは、Ninjaファイルを参照してください。
ninja -f build.gcc.ninja でビルドできます。




TODO

kyorohiro/cgame版のWebGLで、三角形を表示するコードです。
Html5用、デスクトップ用にビルドできます。



#include <stdio.h>
#include "app/capp.h"
#include "core/ccore.h"


int fps;
int frgShader;
int verShader;
int program;

GLfloat vertexBufferData[] = {
  0.0f, 0.5f, 0.0f,
  -0.5f, -0.5f, 0.0f,
  0.5f, -0.5f, 0.0f
};

GLshort indexData[] = {
  0,1,2
};

void _onInit(CObject* context, CObject* args) {
  printf("## onInit\r\n");
  CApp* appObj = (CApp*)context;

  glEnable(GL_DEPTH_TEST);
  glViewport(0, 0, appObj->width, appObj->height);
  glClearColor(1.0, 0.7, 0.7, 1.0);//rgba
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  //

  CTry {
    frgShader = cglu_loadShader(GL_FRAGMENT_SHADER,
      "void main() {\n"
      "  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n"
      "}\n");
    verShader = cglu_loadShader(GL_VERTEX_SHADER,
      "attribute vec4 position;\n"
      "void main() {\n"
      "  gl_Position = position;\n"
      "}\n");
  } CCatch {
    printf("## ERROR\r\n");
    return;
  }

  program = glCreateProgram();
  glAttachShader(program, frgShader);
  glAttachShader(program, verShader);
  glLinkProgram(program);

}

void _onDisplay(CObject* context, CObject* args) {
  CApp* appObj = (CApp*)context;

  //
  // setup buffer
  GLuint vertexBuffer;
  GLuint indexBuffer;
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  glGenBuffers(1, &vertexBuffer);
  glGenBuffers(1, &indexBuffer);

  glUseProgram(program);
  int positionLoc = glGetAttribLocation(program, "position");

  //
  // connect buffer
  glBindBuffer(GL_ARRAY_BUFFER, vertexBuffer);
  glBufferData(GL_ARRAY_BUFFER, sizeof(GLfloat)*3*3, vertexBufferData, GL_STATIC_DRAW);

  glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indexBuffer);
  glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(GLshort)*3, indexData, GL_STATIC_DRAW);

  glEnableVertexAttribArray(positionLoc);
  glVertexAttribPointer(positionLoc, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(GLfloat), (void*)0);

  //
  // draw
  glDrawElements(GL_TRIANGLES, 3, GL_UNSIGNED_SHORT, 0);

  //
  // release buffer
  glDeleteBuffers(1, &vertexBuffer);
  glDeleteBuffers(1, &indexBuffer);

  if(fps != appObj->fps) {
    fps = appObj->fps;
    printf("fps:%d;\r\n",fps);
  }

  capp_flushBuffers(appObj);
  //capp_postRedisplay(appObj);
}

int main(int argc, char** argv) {
  printf("capp sample\r\n");
  CApp* appObj = createCApp(300, 300);
  capp_addDisplayEventListener(appObj, (CObject*)appObj, _onDisplay);
  capp_addInitEventListener(appObj,  (CObject*)appObj, _onInit);
  capp_run(appObj);
  return 0;
}

https://github.com/kyorohiro/cgame/tree/master/examples/app_002_gl


余計なコードがなくなってきてる気がしませんか。
まだまだ、改良の余地ありかな..

REF

http://kripken.github.io/emscripten-site/



おわり!!

.








------

試したコード
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




.


時刻: 0 件のコメント:
ラベル: , ,
登録: 投稿 (Atom)

Game Boy の VGM から JavaScript への変換後に、 生成AIの補正が有効だった事について

Game Boy の VGM から JavaScript への変換後に、 生成AIの補正が有効だった事について Tetorica FM2612 Playground には GameBoy や Genesis の VGM ファイル から JavaScript へ変換する機能を持って...

  • KyoroStressの技術 -1- Low Memory Killer を意図的に発生させたい
    [課題] Low Memory Killer を意図的に発生させたい Androidには、ヒープが涸渇すると使われていないアプリをKillする機能があります。 この記事では、意図的にヒープを枯渇させて、この状態をつくる方法について説明します。 単純にヒープを大...
  • Which SDL1 or SDL2 with emscripten
    Emscripten と OpenGLを使ってゲームを作ろうと思いたって、 まずは、SDL2の基本的な使い方を試していた。 しかし、今の所は、SDL 1系 の方が、良いと思いました。 SDL2があるのに、SDL1 を選ぶのはなぜか? # 201...
  • About Dart x SDL on Mac
    Dart の Native Extensions を利用して、 SDL　を用いたマルチプラットフォームのゲーム開発環境を作れるか検証してみた。 結論からいくと、 「Mac　上で動作する SDL x Dart の アプリは動作させることが難しいよ」 と言うことです。 Wind...