トップページ > 記事閲覧
freetypeを使用して文字を描画すると間延びする
名前：かめのこにょこにょこ 日時： 2020/05/03 03:07 

サークル内のゲーム制作でDxLibを使わせていただいている かめのこにょこにょこ です。

この度、DxLib の iOS版が OpenGL, OpenAL を使っていること、
Emscripten という C/C++ を JavaScript/WebAssembly にトランスパイルするツールがあることから、
iOS 版をベースに HTML5 移植を試みています。

ほとんどの機能が問題なく移植できそうなのですが、フォント描画に freetype を使うところでバグが修正できないので
大元のライブラリ製作者に相談したいと思い、スレッドを建てさせていただきました。

起きている現象は、下図のようにフォントが正常に描画できないことです。

__****__    ____*_*_
_**__**_    __*_*___
**____**    *_*_____
**____**    *_*_____
**____**    *_*_____
**____**    *_*_____
_**__***    __*_*___
__***_**    ____*_*_
______**    ________
_____**_    ________
____**__    ________
_****___    __*_*_*__

freetype が正常なグリフを出力できているのまでは確認できたのですが、その先で行われている処理がまだ把握できていない状況です。
力添えお願いいたします。

[オンライン上での動作サンプル]  nokotan.github.io/DxLibForHTML5Samples/DxLibSampleTest/DxLibHTML5Test.html
[DxLibHTML5ライブラリのプロジェクト本体] github.com/nokotan/DxLibForHTML5
[動作サンプルのプロジェクト一式] drive.google.com/file/d/1KYx75RdWZleGOzSZwmupecV2lZ9cfFnL/view?usp=sharing
メンテ

Page: 1 |

Re: freetypeを使用して文字を描画すると間延びする ( No.1 )
名前：管理人 日時：2020/02/13 01:05 

Emscripten の存在は知っていて、｢もしかしてこれを使うとウェブアプリをＤＸライブラリ+C言語で書けるのかな？」などと
少し考えたりましたが、まさか実際に試された方がいらっしゃるとは思いませんでした (・・;;
( 中でも大変そうな『３Ｄアクションサンプル』がブラウザ上で動作しているのはびっくりしました… )

>　freetype が正常なグリフを出力できているのまでは確認できたのですが、その先で行われている処理がまだ把握できていない状況です。
>　力添えお願いいたします。

FontCacheCharAddToHandle_Timing1_PF の中で対応しているビットマップイメージは FT_PIXEL_MODE_MONO, FT_PIXEL_MODE_GRAY2,
FT_PIXEL_MODE_GRAY4 の３つのようですが、サンプルで正しく表示されていないフォントで取得しているビットマップイメージは
上記のうちどちらなのでしょうか？

確認するコードを絞りたいので教えていただければと思います m(_ _)m
メンテ
Re: freetypeを使用して文字を描画すると間延びする ( No.2 )
名前：かめのこにょこにょこ 日時：2020/02/13 18:09 

freetype によって出力されるフォントビットマップには

- FT_PIXEL_MODE_MONO=1
1ピクセル = 1bit のモノクロビットマップ

- FT_PIXEL_MODE_GRAY=2
1ピクセル = 8bit のモノクロビットマップ

- FT_PIXEL_MODE_GRAY2=3
1ピクセル = 2bit のモノクロビットマップ

- FT_PIXEL_MODE_GRAY4=4
1ピクセル = 4bit のモノクロビットマップ

があって、サンプルでは FT_PIXEL_MODE_GRAY (1ピクセル = 8bit) が使われています。

FontCacheCharAddToHandle_Timing1_PF 内で freetype に
モノクロビットマップ (FT_PIXEL_MODE_MONO) を出力させてみたりしましたが
何も変わらずでした

(FontCacheCharAddToHandle_Timing1_PF 内の処理が SDL_ttf の受け売りなのですが
上4つのフォーマットを 1ピクセル = 8bit に揃える以上のことがわかっていなかったりします)

なお、freetype の出力する FT_PIXEL_MODE_GRAY フォーマットのビットマップそれぞれのピクセルの値を表示させてみたところ

__0 _13 148 232 247 209 _66 __0
__1 191 250 _86 __8 _49 _39 __0
_80 255 154 __0 __0 __0 __0 __0
164 255 _64 __0 __0 __0 __0 __0
214 255 _97 214 249 217 _84 __0
242 255 208 _39 _32 204 255 _77
253 255 _64 __0 __0 _64 255 197
246 255 _11 __0 __0 _13 255 241
217 255 _17 __0 __0 _16 255 241
151 255 _78 __0 __0 _63 255 183
_36 244 216 _31 _32 201 250 _57
__0 _53 189 244 245 189 _47 __0

(数字の6)
でした
メンテ
Re: freetypeを使用して文字を描画すると間延びする ( No.3 )
名前：かめのこにょこにょこ 日時：2020/02/13 23:53 

FontCacheCharAddToHandle_Timing1_PF 内の最後に呼ぶ 
FontCacheCharImageBltToHandle の実装を読んでみていています

3350行付近のフォントビットマップを一時的にキャッシュ用の BaseImage に転送する
ところの DX_FONT_SRCIMAGETYPE_8BIT_MAX255 用の処理で

BaseImage.ColorData.ColorBitDepth を printf で表示させたら 16 が出てきて
BaseImage.ColorData.ColorBitDepth が 8 (BYTE) か 32 (DWORD) 用の処理しかないのが原因そう

まではわかりました。

ただ、BaseImage.ColorData.ColorBitDepth がなぜ 16 になっているのかを追ってみます

進捗報告までに
メンテ
Re: freetypeを使用して文字を描画すると間延びする ( No.4 )
名前：かめのこにょこにょこ 日時：2020/02/14 01:43 

DX_FONT_SRCIMAGETYPE_8BIT_ON_OFF に BaseImage.ColorData.ColorBitDepth == 16 のときの実装があったので
freetype の ビットマップフォントをモノクロフォントに切り替えてみました。

その結果、文字の間延びが解消されたので、当分はこの実装にしようと思います。

ただ、デフォルトでアンチエイリアスつきというのもやってみたいので
時間のある時に挑戦してみようと思います。

オンライン上での動作サンプルも更新しましたのでご確認ください。
この件およびDxLibのHTML5移植に関して、引き続きよろしくお願いします。
メンテ
Re: freetypeを使用して文字を描画すると間延びする ( No.5 )
名前：管理人 日時：2020/02/16 02:02 

ご返信が遅くなり申し訳ありません
( 高熱で体調を崩していました… )

ご情報ありがとうございます
原因がわかりました

まず、ＤＸライブラリはフォントタイプが幾つかあり、
アンチエイリアスありのものとアンチエイリアス無しのものがあります

＜アンチエイリアス無し＞
	DX_FONTTYPE_NORMAL			// ノーマルフォント( デフォルト )
	DX_FONTTYPE_EDGE			// 縁つきフォント

＜アンチエイリアスあり＞
	DX_FONTTYPE_ANTIALIASING		// アンチエイリアスフォント( 標準機能アンチエイリアス )
	DX_FONTTYPE_ANTIALIASING_4X4		// アンチエイリアスフォント( 4x4サンプリング )
	DX_FONTTYPE_ANTIALIASING_8X8		// アンチエイリアスフォント( 8x8サンプリング )
	DX_FONTTYPE_ANTIALIASING_EDGE		// アンチエイリアス＆縁付きフォント( 標準機能アンチエイリアス )
	DX_FONTTYPE_ANTIALIASING_EDGE_4X4	// アンチエイリアス＆縁付きフォント( 4x4サンプリング )
	DX_FONTTYPE_ANTIALIASING_EDGE_8X8	// アンチエイリアス＆縁付きフォント( 8x8サンプリング )

デフォルトではアンチエイリアス無しの DX_FONTTYPE_NORMAL なので、
このタイプのフォントハンドルの場合は FontCacheCharImageBltToHandle に渡す ImageType は

	DX_FONT_SRCIMAGETYPE_1BIT
	DX_FONT_SRCIMAGETYPE_8BIT_MAX16
	DX_FONT_SRCIMAGETYPE_8BIT_ON_OFF

の何れかである必要があります

ImageType に DX_FONT_SRCIMAGETYPE_8BIT_MAX255 を渡す場合は、フォントのタイプが
アンチエイリアスありのものである必要がありますので、DrawString で文字列を描画する場合は事前に
ChangeFontType( DX_FONTTYPE_ANTIALIASING ); でフォントタイプをアンチエイリアスありタイプにしてください
( CreateFontToHandle でフォントハンドルを作成する場合は引数の FontType にアンチエイリアスありタイプを指定してください )

Android版や iOS版のＤＸライブラリではデフォルトでアンチエイリアスありタイプのフォントですが、
こちらはＤＸライブラリ内部で 

	// フォントタイプはアンチエイリアスタイプに固定
	SetAntialiasingFontOnlyFlag( TRUE ) ;

という処理を実行していて、デフォルトで DX_FONTTYPE_NORMAL ではなく DX_FONTTYPE_ANTIALIASING となるようになっています
もし HTML5版でもデフォルトでアンチエイリアスありフォントにされたい場合は DxSystemHTML5.cpp の DxLib_Init の中で

	// フォントタイプはアンチエイリアスタイプに固定
	SetAntialiasingFontOnlyFlag( TRUE ) ;

を実行するようにしてください m(_ _)m
メンテ
Re: freetypeを使用して文字を描画すると間延びする ( No.6 )
名前：かめのこにょこにょこ 日時：2020/02/17 20:49 

情報ありがとうございます

フォントタイプによって、受け入れられるビットマップフォントの形式が決まっていたのですね

その情報を受けて、

- フォントタイプがアンチエイリアス付きのものであるときに、DX_FONT_SRCIMAGETYPE_8BIT_MAX255で、
- フォントタイプがアンチエイリアス付きでないときに、DX_FONT_SRCIMAGETYPE_8BIT_ON_OFFで、

ビットマップフォントを FontCacheCharImageBltToHandle に渡してみたところ
無事、アンチエイリアス付きのフォント描画、アンチエイリアスなしのフォント描画の両方に成功しました

近々、サンプルプログラムおよびDxLibForHTML5のソースファイルをアップデートします。

また、現在、Visual Studio Code向けのサンプルプログラム実行フォルダの作成と、
Visual Studio 2017/2019向けのプロジェクト設定のための情報収集をしているところです。

前者については、

  Github: github.com/nokotan/DxLibForHTML5-VSCode
  GoogleDrive: drive.google.com/open?id=10iPID6Js6NohRR_F_YlIrYnYBtdFNGMg

からダウンロードできます。

後者については、情報が集まり次第、またスレッドを建てて報告したいと思います。
メンテ
Re: freetypeを使用して文字を描画すると間延びする ( No.7 )
名前：管理人 日時：2020/02/17 23:43 

正常に表示されたようで何よりです

>　Visual Studio 2017/2019向けのプロジェクト設定のための情報収集をしているところです。

Visual Studio 2017/2019 上で DxLibForHTML5 のアプリの開発ができる可能性があるのですか…？
それが実現できたらかなり Webアプリが身近になりますね…( いえ、Visual Studio Code の時点で
今までに比べたらかなり身近ですが )
メンテ
Re: freetypeを使用して文字を描画すると間延びする ( No.8 )
名前：kanamaru 日時：2020/03/06 13:13 

ふと思ったんですが、emscriptenで変換できるなら、環境依存はおそらく無い。
ということは、ウィンドウをglfwとかで用意すればlinuxやmac、raspberry piで動くのでは？
僕はopenglに詳しくないのでできたら検討してみてくれませんか？
試す価値はあるでしょうし。
メンテ
Re: freetypeを使用して文字を描画すると間延びする ( No.9 )
名前：かめのこにょこにょこ 日時：2020/03/09 02:38 

> ふと思ったんですが、emscriptenで変換できるなら、環境依存はおそらく無い。
> ということは、ウィンドウをglfwとかで用意すればlinuxやmac、raspberry piで動くのでは？

描画(OpenGL), 音声再生(OpenAL), フォント描画(freetype) に環境依存を解消できているのですが、
キーボード入力とマウス入力が emscripten 固有の関数を使っているので、そこの環境依存を解消できれば、
指摘通りに本家 DxLib も Linux, macOSなどでも動かせる可能性がありそうですね

(ちなみに DxPortLib (github.com/mauvecow/DxPortLib) がそのあたりをすでに実現していますが、いかんせん 3D が描画できない...)

...

Visual Studio 対応が難航していたので、先に WebAssemblyStudio で DxLib を動かしてみるプロジェクトをやってみています

WebAssembly Studio (emscripten対応版): nokotan.github.io/WebAssemblyStudio/
WebAssembly Studio (emscripten対応版) の github: github.com/nokotan/WebAssemblyStudio

参考)
ビルドサーバ: emscripten-compiler.herokuapp.com/build
ビルドサーバの github: github.com/nokotan/emscripten-compiler
本家 WebAssembly Studio: webassembly.studio/
メンテ
Re: freetypeを使用して文字を描画すると間延びする ( No.10 )
名前：管理人 日時：2020/03/09 05:33 

>　Visual Studio 対応が難航していたので、先に WebAssemblyStudio で DxLib を動かしてみるプロジェクトをやってみています

WebAssembly とは…？
という状態だったので、少し調べてみたのですが、HTML5 の次のブラウザアプリ用の機能というか、
Java に対する JNI( Java よりも高速に処理を行いたい部分を C++ などで実装して、その処理を
Java 側から呼び出すための機能が JNI ) の、JavaScript版( アプリの中の高速に処理したい部分を WebAssembly で実装して
JavaScript から呼び出し、全部高速に処理したかったらほぼ全て WebAssembly で実装してもOK )のような機能なのですね…　(・・;;
メンテ
Re: freetypeを使用して文字を描画すると間延びする ( No.11 )
名前：kanamaru 日時：2020/03/09 13:25 

glfwを使えばキー入力やマウス入力は可能です。
glfwは本来openglで開発するのに足らない機能を補うものなので、そういった機能があります。
ただ、opengl ESと使うのは少し大変かもしれませんが。
emscriptenの関数ではなくglfwの関数を使うようにすればできるのでは？
メンテ
Re: freetypeを使用して文字を描画すると間延びする ( No.12 )
名前：かめのこにょこにょこ 日時：2020/04/10 22:59 

こちらのスレッドを放置してしまって申し訳ありません。

現時点では、Visual Studio対応およびWebAssemblyStudioなどの開発環境の充実を優先して行っていきたいと考えております。
また、この作業が落ち着きましたら OpenSiv3D のHTML5版開発にも着手したいと考えています。

ただ、OpenSiv3D の Linux 版において glfw が使用されていることを確認しておりますので、
その時に自身の glfw の勉強を兼ねて DXライブラリ HTML5版でも glfw への対応を行っていきたいと考えています。
メンテ

Page: 1 |

題名
名前
コメント
パスワード （記事メンテ時に使用）

   クッキー保存