nobu blog

プログラミングやゲーム、ゲーム音楽コンサート周りの話をつらつらと。

*



HTML5とJavaScriptでサウンドノベルを作る(TypeScript使用) その2

   

概要

前回はTypeScript(HTML5 + JavaScript)を用いてサウンドノベル風の文章表示を行ってみました。今回は引き続き機能を拡張していきます。
今回はキャレットと自動改ページを追加していきます。

今回やりたいこと

キャレットの表示
下図のように文章の末尾に点滅するキャレットを表示させます。
caret1

自動改ページ
文章を表示する際に、現在のページに全ての文字を表示しきれない場合には先に改ページを行ってから文章を表示するようにします。

動くサンプルはこちらになります。

スポンサーリンク

キャレットの表示

キャレットの表示する際には以下のことを考慮します。
 1.キャレットの表示位置の取得(次の位置か次の行かなど判定します。)
 2.キャレットの点滅(タイマーを用いて表示、非表示を繰り返す)
 
clearRectで消す際になぜかブラウザによってはキャレットが残ってしまう?のでy座標にオフセットを無理やり追加しています。
ちょっとすっきりしませんが、解決しなかったのであきらめました・・・。

自動改ページ

自動改ページするためには以下を考慮する必要があります。
1.現在の表示位置を取得
2.これから描画する文字列を描画した場合に増加する高さを取得
3.1と2を足して、画面の高さを越えるかどうかを判定して、超える場合にあらかじめ改ページする。

機能組み込み

上記の2つの処理を前回作成した文章の表示処理の中に組み込みます。
キャレットの処理タイミングとしては
1.文章表示が終わるとキャレットを表示(点滅)させる
2.次の文章の表示が始まるときにまず、キャレットを消す。

といったことを行います。

コード全体

今回の機能を組み込んだクラスとしては以下のようになります。
動くサンプルはこちらになります。

まとめ

ということで、文章を表示する箇所を一通り実装してみました。
ちょっとクラスが肥大化してきてしまったのでリファクタリングしたほうが良くなってきました・・・。
次は画像表示などを組み込んで見たいと思います。

 - HTML, TypeScript